Advanced Project & Task Management Platform

A production-ready full-stack web application for project and task management with role-based access control, modern UI, drag-and-drop ordering, optimistic updates, and secure JWT authentication.

• React (Vite)
• React Router
• TailwindCSS
• Axios
• Framer Motion
• DnD Kit (drag and drop)
• React Hot Toast

• Node.js + Express
• MongoDB + Mongoose
• JWT authentication
• bcrypt password hashing
• Zod validation
• Express rate limit + Helmet
• MVC architecture
• Centralized error handling

• Register / Login
• JWT-protected routes
• Role system (admin, user)
• Password hashing with bcrypt
• Input validation middleware
• API rate limiting

• Dashboard with task/project statistics
• Create/Edit/Delete projects
• Create/Edit/Delete tasks
• Task status (todo, in-progress, completed)
• Due dates and priorities
• Search, filtering, pagination
• Profile page and profile update

• View all users
• Delete non-admin users
• Platform statistics

• Responsive layout
• Sidebar navigation
• Light / dark theme toggle
• Modal forms
• Empty and error states
• Loading states
• Smooth transitions
• Toast notifications
• Drag-and-drop task reordering
• Optimistic UI updates

/
├── client/
│   ├── src/
│   │   ├── components/
│   │   ├── lib/
│   │   ├── pages/
│   │   ├── state/
│   │   └── styles/
│   ├── .env.example
│   └── package.json
├── server/
│   ├── src/
│   │   ├── config/
│   │   ├── controllers/
│   │   ├── middleware/
│   │   ├── models/
│   │   ├── routes/
│   │   ├── tests/
│   │   ├── utils/
│   │   └── validators/
│   ├── .env.example
│   └── package.json
└── package.json

From the repository root:

npm install
cd server && npm install
cd ../client && npm install

Create environment files:

• server/.env from server/.env.example
• client/.env from client/.env.example

Run local MongoDB instance (or update MONGO_URI to your hosted DB).

From root:

npm run dev

This starts:

• Backend: http://localhost:5000
• Frontend: http://localhost:5173

From server:

npm run seed

This creates:

• 1 admin user
• 1 regular user
• Sample projects and tasks for both accounts

Seed credentials are configurable via SEED_* variables in server/.env.

• npm run dev - Run client + server together
• npm run dev:server - Run server only
• npm run dev:client - Run client only
• npm run build - Build frontend
• npm run test - Run backend tests

• npm run dev - Nodemon server
• npm run start - Production server
• npm run test - Unit tests (Vitest)
• npm run seed - Seed demo users/projects/tasks

• npm run dev - Vite dev server
• npm run build - Production build
• npm run preview - Preview production build

• POST /api/auth/register
• POST /api/auth/login
• GET /api/auth/me

• GET /api/users/profile
• PATCH /api/users/profile

• GET /api/dashboard/stats

• GET /api/projects
• GET /api/projects/:id
• POST /api/projects
• PATCH /api/projects/:id
• DELETE /api/projects/:id

• GET /api/tasks
• POST /api/tasks
• PATCH /api/tasks/:id
• DELETE /api/tasks/:id
• PATCH /api/tasks/reorder/bulk

• GET /api/admin/users
• DELETE /api/admin/users/:id
• GET /api/admin/stats

• Registration always creates user accounts for security.
• Use npm run seed in server to generate a ready-to-demo admin and user account.