Work Dashboard

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

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