Task Management Application

A full-stack Task Management Application built with React, Node.js, and MongoDB.
Users can register, authenticate, manage their personal tasks, and organize them using both list and Kanban board views.

The system follows a clean full-stack architecture with a React frontend and a Node.js REST API backend.

---

Live Demo

Frontend: https://task-management-frontend-ma2u.onrender.com

Backend API: https://task-management-s9f1.onrender.com

API Documentation (Swagger): https://task-management-s9f1.onrender.com/api-docs

GitHub Repository: https://github.com/abhilash-io/Task-Management

---

Tech Stack

Frontend

• React 19
• Vite 7
• React Router 7
• Axios
• TailwindCSS
• React Hook Form
• dnd-kit (Drag & Drop)

Backend

• Node.js
• Express.js
• MongoDB
• Mongoose
• JWT Authentication
• Joi Validation
• RESTful API Architecture

Testing

• Jest
• Supertest
• MongoDB Memory Server

---

Repository Structure

task-management-app
│
├── frontend
│   ├── src
│   └── README.md
│
├── backend
│   ├── src
│   ├── tests
│   └── README.md
│
├── ARCHITECTURE.md
└── README.md

Each application contains its own README with detailed setup instructions.

---

Prerequisites

Node.js 18 or newer MongoDB running locally or via MongoDB Atlas

---

Running the Application

The backend must be running before starting the frontend.

---

1. Start Backend

Navigate to the backend directory.

cd backend
npm install

Create a .env file:

PORT=5000
DB_URI=mongodb://localhost:27017/task-manager
JWT_ACCESS_SECRET=access_secret_key
JWT_REFRESH_SECRET=refresh_secret_key
ACCESS_TOKEN_EXPIRES=15m
REFRESH_TOKEN_EXPIRES=7d

Start the server:

npm run dev

Backend runs at:

http://localhost:5000

---

2. Start Frontend

Open a new terminal and navigate to the frontend directory.

cd frontend
npm install

Create a .env file:

VITE_BACKEND_API_URL=http://localhost:5000/api

Start the development server:

npm run dev

Frontend runs at:

http://localhost:5173

---

Application Features

Authentication

• User registration
• User login
• JWT based authentication
• Protected routes

Task Management

• Create tasks
• Edit tasks
• Delete tasks
• Filter by status
• Filter by priority
• Sort by due date or creation date

Dashboard

• Total task count
• Tasks grouped by status
• Overdue task indicator

Kanban Board

• Drag and drop tasks between columns
• Visual task status
• Responsive layout

---

API Overview

Authentication

POST /api/auth/register POST /api/auth/login POST /api/auth/logout

Tasks

GET /api/tasks POST /api/tasks PATCH /api/tasks/:id DELETE /api/tasks/:id

Dashboard

GET /api/tasks/stats

Full API documentation is available through Swagger at:

/api-docs

---

Testing

Backend tests are implemented using Jest and Supertest.

Run tests from the backend directory:

npm run test

The tests use an in-memory MongoDB instance to avoid affecting development data.

---

Architecture

An overview of the architectural decisions, folder structure, authentication flow, and database design can be found in:

ARCHITECTURE.md

---

Notes

The backend follows a layered architecture separating routes, controllers, services, and repositories. The frontend follows a component-based structure with React Context for shared state and custom hooks for encapsulating application logic.