Task Management System

A scalable REST API with authentication, role-based access control, and CRUD operations for task management. Includes a simple React frontend to interact with the APIs.

🚀 Features

• Authentication & Authorization

  • JWT-based login/registration
  • Password hashing with bcrypt
  • Role-based access (USER / ADMIN)
  • Protected routes (frontend + backend)

• Tasks CRUD

  • Create, Read, Update, Delete tasks
  • Users see only their tasks
  • Admins can see all tasks and their owners
  • Filtering, searching, pagination

• Admin

  • Users management: list and delete users
  • Tasks table shows "Created By" info for admins

• API

  • Versioned routes: /api/v1
  • Centralized error handling
  • Validation with express-validator
  • Swagger docs: /api-docs
  • Rate limiting and CORS

🛠️ Tech Stack

Backend

• Node.js + Express (JavaScript)
• Prisma ORM + SQLite (no external DB required)
• JWT + bcrypt
• Swagger (swagger-jsdoc + swagger-ui-express)

Frontend

• React + TypeScript
• Material UI
• React Router v6
• Axios

📦 Local Setup (No Docker)

Prerequisites

• Node.js v18+ (https://nodejs.org/)
• No database install required (uses SQLite file)

Start Backend

cd backend
npm install
copy env.example .env
npx prisma migrate dev
npx prisma generate
npm run dev

Backend will start at:

• API base: http://localhost:5000/api/v1
• Swagger: http://localhost:5000/api-docs
• Health: http://localhost:5000/health

Start Frontend (new terminal)

cd frontend
npm install
npm start

Frontend will open at http://localhost:3000.

🔧 Environment Variables (backend/.env)

# SQLite DB file
DATABASE_URL="file:./dev.db"

# JWT
JWT_SECRET="your-super-secret-jwt-key"
JWT_EXPIRES_IN="7d"

# Server
PORT=5000
NODE_ENV="development"

# CORS
FRONTEND_URL="http://localhost:3000"

📚 API Overview

Auth

• POST /api/v1/auth/register
• POST /api/v1/auth/login
• GET /api/v1/auth/profile
• PUT /api/v1/auth/profile

Tasks

• GET /api/v1/tasks?status=&priority=&search=&page=&limit=
• POST /api/v1/tasks
• GET /api/v1/tasks/:id
• PUT /api/v1/tasks/:id
• DELETE /api/v1/tasks/:id

Users (Admin)

• GET /api/v1/users
• GET /api/v1/users/:id
• PUT /api/v1/users/:id
• DELETE /api/v1/users/:id

🏗️ Project Structure (current)

Backend - Assignment/
├── backend/
│   ├── src/
│   │   ├── app.js
│   │   ├── controllers/
│   │   │   ├── authController.js
│   │   │   ├── taskController.js
│   │   │   └── userController.js
│   │   ├── middleware/
│   │   │   ├── auth.js
│   │   │   ├── errorHandler.js
│   │   │   ├── notFound.js
│   │   │   └── validation.js
│   │   ├── routes/
│   │   │   ├── authRoutes.js
│   │   │   ├── taskRoutes.js
│   │   │   └── userRoutes.js
│   │   └── utils/
│   │       ├── jwt.js
│   │       └── password.js
│   ├── prisma/
│   │   ├── schema.prisma
│   │   ├── dev.db
│   │   └── migrations/
│   └── package.json
├── frontend/
│   ├── public/
│   │   ├── index.html
│   │   └── manifest.json
│   └── src/
│       ├── App.tsx
│       ├── index.tsx
│       ├── components/
│       │   ├── Layout.tsx
│       │   └── ProtectedRoute.tsx
│       ├── contexts/
│       │   └── AuthContext.tsx
│       ├── pages/
│       │   ├── Login.tsx
│       │   ├── Register.tsx
│       │   ├── Profile.tsx
│       │   ├── Dashboard.tsx
│       │   └── UserManagement.tsx
│       ├── services/
│       │   └── api.ts
│       └── types/
│           └── index.ts
└── README.md

🔒 Security

• BCrypt password hashing
• JWT auth (short, signed tokens)
• Input validation and sanitization
• Prisma parameterized queries
• Sensible rate limiting and CORS

🌐 Frontend Behavior

• Unauthenticated users are always redirected to the Login page.
• After login, users land on the Dashboard.
• Protected routes are wrapped with ProtectedRoute.

📝 Notes

• Database is persisted in backend/prisma/dev.db.
• To reset DB: cd backend && npx prisma migrate reset (will delete data).
• Admin visibility: Admins see all tasks with the creator’s name/email and can manage users.

---

This project demonstrates backend-first development with solid API design, security practices, and a simple but functional React UI.