/workDashboard

Work Schedule Dashboard with access control, strict client/server coupling and security mechanisms.

Primary LanguageTypeScript

Work Dashboard

Work Dashboard is a client/server application for a simple productivity tracker.

GitHub Language Count GitHub Top Language GitHub Last Commit

Dev Setup

  1. Clone repo down to local
  2. run "npm install" to install dependencies
  3. run "npm run dev" to concurrently start server(index.ts) and client(vite)
  4. Vite should Auto open client once started(--open flag)

Tech Stacks Used

  • CSS:
    1. SCSS
    2. tailwindcss
  • Javascript:
    1. TypeScript
    2. nodejs
    3. ReactJS
  • MongoDB (NoSQL approach)

Routes Overview

  • Login Route (/login)
  • Registration Route (/register)(Protected)
  • Home Route (/)
  • Dashboard Route (/dashboard)(Protected)
  • TaskView Route (/taskview)(Protected)(Admin only)
  • EmployeesView Route (/employeesView)(Protected)
  • Employee Route (/employeesView/:id)(Protected)(Admin only)
  • Edit Profile Route (/editProfile)(Protected)
  • CatchAll Route (*)

Packages/Libraries overview

Following are the NPM Libraries used in this web app

  1. Express - Web app framework (REST APIs)
  2. Concurrently - Running of multiple concurrent commands
  3. mongoose - MongoDB ORM for express and nodejs
  4. bcryptjs - Password hashing and comparing package
  5. fetchAPI - Javascript client library that can be used to access and manipulate HTTP / REST endpoints
  6. Fontawesome/React-icons
  7. Redis/connect-redis - In memory data structure store to cache twitter api responses
  8. cookie-parser - cookie managing tool, used for auth
  9. dotenv - Environment variable support
  10. react-router-dom - React router support for basic react routing
  11. Tailwindcss - Tailwindcss support for CSS classes
  12. SASS - SCSS support/SASS compiler
  13. React-hot-toast - Customisable and fully controllable toast notifications
  14. helmet - Security Tool to safeguard your Express/Web App from Vulnerabilities
  15. nodemon - Express listening reactoring
  16. React-Query - Complete caching and reactive HTTP responses client library
  17. Recharts - React Charts Library
  18. React-minimal-pie-chart - React pie chart library
  19. Express-session - Session management for express