TaskBoard — MERN Stack Task Management App

A full-stack task management application built with the MERN stack.

Tech Stack

• Frontend: React.js, Tailwind CSS, React Router, Axios, @dnd-kit
• Backend: Node.js, Express.js
• Database: MongoDB Atlas (Mongoose ODM)
• Auth: JWT (JSON Web Tokens) + bcryptjs

Features

• User Authentication (Signup / Login / Logout)
• Full CRUD for tasks (Create, Read, Update, Delete)
• Kanban Board with Drag & Drop (Todo → In Progress → Done)
• Priority levels (Low / Medium / High)
• Due dates with overdue highlighting
• Progress Donut Chart
• Real-time search
• Dark Mode

Project Structure

mern-taskboard/
├── backend/               # Express.js API
│   ├── src/
│   │   ├── models/        # Mongoose models (User, Task)
│   │   ├── routes/        # API routes (auth, tasks)
│   │   ├── middleware/    # JWT auth middleware
│   │   └── server.js      # Entry point
│   ├── .env.example
│   └── package.json
│
└── frontend/              # React app
    ├── src/
    │   ├── context/       # AuthContext
    │   ├── pages/         # Login, Signup, Dashboard
    │   └── App.js
    ├── public/
    └── package.json

API Endpoints

Method	Endpoint	Description	Auth
POST	/api/auth/signup	Register user	No
POST	/api/auth/login	Login user	No
GET	/api/auth/me	Get current user	Yes
GET	/api/tasks	Get all tasks	Yes
POST	/api/tasks	Create task	Yes
PUT	/api/tasks/:id	Update task	Yes
DELETE	/api/tasks/:id	Delete task	Yes

Database Schema

User

name: String
email: String (unique)
password: String (hashed)

Task

user: ObjectId (ref: User)
title: String
description: String
status: todo | in-progress | done
priority: low | medium | high
dueDate: Date

Setup Instructions

1. MongoDB Atlas

• Go to mongodb.com/atlas → create free account → create cluster
• Get your connection string

2. Backend

cd backend
npm install
cp .env.example .env
# Fill in MONGODB_URI and JWT_SECRET in .env
npm run dev

3. Frontend

cd frontend
npm install
npm start

Deployment

• Backend: Render.com (free tier)
• Frontend: Vercel (free tier)