TaskFlow

TaskFlow is a full-stack task management application built with the MERN stack. It gives teams and individuals a clean, dark-themed dashboard to track tasks, monitor progress, and manage priorities in one place.

Live Demo: taskflow-gules-rho.vercel.app

Features

• Dashboard Overview — At-a-glance stats for total tasks, in-progress, completed, and to-do items
• Task Management — Create, update, and track tasks with priority labels (Critical, High, Medium, Low)
• Priority Breakdown — Visual breakdown of tasks by priority level
• In Progress Tracking — Dedicated view for tasks currently being worked on, with due dates
• Authentication & Authorization — Secure login with JWT-based auth and role-based access control (Admin/User)
• Project Organization — Group tasks under projects for better structure
• Responsive UI — Clean, modern dark-mode interface

📸 Screenshots

Login Page

Dashboard

PROJECTS

Tech Stack

Frontend:

• React.js
• CSS / Tailwind CSS

Backend:

• Node.js
• Express.js
• MongoDB (Mongoose)
• JWT Authentication
• Role-Based Access Control (RBAC)

Deployment:

• Vercel

Screenshots

The dashboard shows a personalized greeting, task stats, in-progress tasks with priority tags, and a priority breakdown chart — giving users a quick summary of their workspace every time they log in.

Getting Started

Prerequisites

• Node.js (v16 or higher)
• MongoDB (local or Atlas)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/rakeshkumar0804/taskflow.git
   cd taskflow

2. Install server dependencies

   cd server
   npm install

3. Install client dependencies

   cd ../client
   npm install

4. Set up environment variables

   Create a .env file in the server directory:

   PORT=5000
   MONGODB_URI=your_mongodb_connection_string
   JWT_SECRET=your_jwt_secret_key

   Create a .env file in the client directory:

   REACT_APP_API_URL=http://localhost:5000/api

5. Run the application

   Start the backend:

   cd server
   npm start

   Start the frontend:

   cd client
   npm start

6. Open http://localhost:3000 in your browser

Project Structure

taskflow/
├── client/                 # React frontend
│   ├── public/
│   └── src/
│       ├── components/
│       ├── pages/
│       └── App.js
├── server/                 # Express backend
│   ├── config/
│   ├── controllers/
│   ├── middleware/
│   ├── models/
│   ├── routes/
│   └── server.js
└── README.md

API Endpoints

Method	Endpoint	Description
POST	/api/auth/register	Register a new user
POST	/api/auth/login	Login and get JWT token
GET	/api/tasks	Get all tasks
POST	/api/tasks	Create a new task
PUT	/api/tasks/:id	Update a task
DELETE	/api/tasks/:id	Delete a task
GET	/api/projects	Get all projects

Contributing

Contributions are welcome. Feel free to open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Author

Rakesh Kumar

• GitHub: @rakeshkumar0804
• LinkedIn: Rakesh Kumar