🗂 Task Management System

Full Stack Application – Track A (Node.js + Next.js + TypeScript)

This project is a full-stack Task Management System built as part of a software engineering assessment. It includes secure authentication, task CRUD functionality, and a responsive frontend dashboard.

🚀 Tech Stack Backend

Node.js

Express.js

TypeScript

MySQL

Prisma ORM

JWT (Access & Refresh Tokens)

bcrypt

Frontend

Next.js (App Router)

TypeScript

Tailwind CSS

Fetch API

LocalStorage for token management

✨ Features 🔐 Authentication & Authorization

User registration and login

Password hashing using bcrypt

JWT-based authentication

Access & Refresh token flow

Protected backend routes

Automatic token refresh on expiration

Logout functionality

📝 Task Management

Create new tasks

View all user-specific tasks

Toggle task completion status

Delete tasks

Search tasks by title

Tasks are scoped to the logged-in user only

🖥 Frontend Dashboard

Responsive UI (desktop & mobile)

Login & Registration pages

Task dashboard

Real-time updates after CRUD actions

Simple notifications (alerts)

📂 Project Structure task-management-system/ ├─ backend/ │ ├─ src/ │ │ ├─ modules/ │ │ │ ├─ auth/ │ │ │ └─ tasks/ │ │ ├─ config/ │ │ ├─ app.ts │ │ └─ server.ts │ ├─ prisma/ │ └─ package.json │ ├─ frontend/ │ ├─ src/ │ │ ├─ app/ │ │ │ ├─ login/ │ │ │ ├─ register/ │ │ │ └─ dashboard/ │ │ ├─ lib/ │ │ └─ components/ │ └─ package.json │ └─ README.md

⚙️ Setup Instructions 1️⃣ Clone the Repository git clone cd task-management-system

🔧 Backend Setup Install dependencies cd backend npm install

Environment Variables (backend/.env) PORT=4000 DATABASE_URL=mysql://USER:PASSWORD@localhost:3306/task_management JWT_ACCESS_SECRET=your_access_secret JWT_REFRESH_SECRET=your_refresh_secret

Run Prisma migrations npx prisma migrate dev

Start backend server npm run dev

Backend will run at:

http://localhost:4000

🎨 Frontend Setup Install dependencies cd frontend npm install

Environment Variables (frontend/.env.local) NEXT_PUBLIC_API_BASE_URL=http://localhost:4000

Start frontend npm run dev

Frontend will run at:

http://localhost:3000

🧪 Application Flow

Register a new user

Login to receive access & refresh tokens

Access the task dashboard

Create, update, toggle, delete tasks

Tokens refresh automatically when access token expires

Logout clears session

🔐 Authentication Flow (Summary)

Access Token: Short-lived, used for API authorization

Refresh Token: Long-lived, used to get new access tokens

Frontend automatically refreshes access tokens on 401 responses

User is logged out if refresh token expires

📌 API Endpoints (Backend) Auth

POST /auth/register

POST /auth/login

POST /auth/refresh

Tasks (Protected)

GET /tasks

POST /tasks

PUT /tasks/:id

DELETE /tasks/:id

📱 Responsiveness

Fully responsive UI

Works on desktop and mobile devices

Built using Tailwind CSS

✅ Assessment Coverage (Track A)

✔ Backend with secure authentication ✔ JWT authorization & middleware ✔ Task CRUD APIs ✔ Next.js frontend (App Router) ✔ Authentication UI ✔ Task dashboard with filtering & search ✔ Token refresh logic ✔ Responsive design

👤 Author

Prashant Kumar Sharma B.Tech CSE Full Stack Developer

🏁 Final Notes

This project was built to strictly match the assessment requirements without overengineering, focusing on:

Correct architecture

Security best practices

Clean, readable code

Functional UI