TaskFlow — Project Management App

MERN Stack | React.js | Node.js | MongoDB | Socket.io | Redux Toolkit | JWT Auth

Tech Stack

• Frontend: React.js, Redux Toolkit, React Beautiful DnD, Recharts, Socket.io-client
• Backend: Node.js, Express.js, Socket.io
• Database: MongoDB, Mongoose
• Auth: JWT (access + refresh token), bcryptjs
• Real-time: Socket.io rooms per board

Folder Structure

taskflow/
├── client/          # React frontend (Vite)
└── server/          # Node.js + Express backend

Setup & Run

1. Clone and install

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

# Backend
cd server
npm install

# Frontend
cd ../client
npm install

2. Environment variables

# server/.env
PORT=5000
MONGO_URI=mongodb://localhost:27017/taskflow
JWT_SECRET=your_super_secret_key_here
JWT_REFRESH_SECRET=your_refresh_secret_here
CLIENT_URL=http://localhost:5173

# client/.env
VITE_API_URL=http://localhost:5000/api
VITE_SOCKET_URL=http://localhost:5000

3. Run

# Terminal 1 — Backend
cd server && npm run dev

# Terminal 2 — Frontend
cd client && npm run dev

Open: http://localhost:5173

API Endpoints

Auth

Method	Endpoint	Description
POST	/api/auth/register	Register user
POST	/api/auth/login	Login
POST	/api/auth/refresh	Refresh access token
POST	/api/auth/logout	Logout

Boards

Method	Endpoint	Description
GET	/api/boards	Get my boards
POST	/api/boards	Create board
GET	/api/boards/:id	Get board by ID
PATCH	/api/boards/:id	Update board
DELETE	/api/boards/:id	Delete board
POST	/api/boards/:id/invite	Invite member

Tasks

Method	Endpoint	Description
GET	/api/tasks?boardId=xxx	Get board tasks
POST	/api/tasks	Create task
PATCH	/api/tasks/:id	Update task
PATCH	/api/tasks/:id/move	Move task (drag & drop)
DELETE	/api/tasks/:id	Delete task
POST	/api/tasks/:id/comment	Add comment

Socket Events

Event	Direction	Description
join-board	Client → Server	Join board room
task:move	Client → Server	Task dragged
task:moved	Server → All clients	Broadcast move
task:create	Client → Server	New task
task:created	Server → All clients	Broadcast new task
board:online-users	Server → All clients	Who's online

Features

• ✅ Drag & Drop Kanban board
• ✅ Real-time collaboration via Socket.io
• ✅ JWT auth with auto token refresh
• ✅ Role-based access (owner, admin, member)
• ✅ Task labels, due dates, assignees, comments
• ✅ File attachments (Multer + Cloudinary)
• ✅ Analytics dashboard (Recharts)
• ✅ Email notifications (Nodemailer)
• ✅ Dark / Light mode

Deployment

• Frontend: Vercel (npm run build → deploy dist/)
• Backend: Render (free tier Node.js server)
• Database: MongoDB Atlas (free 512MB cluster)

TaskFlow — Real-time Project Management App

Full-stack real-time Kanban board built with MERN Stack, Socket.io, JWT Auth, Redux Toolkit & Drag-Drop.

🌐 Live Demo

• App: https://taskflow-tau-cyan.vercel.app
• API: https://taskflow-iu8p.onrender.com

✨ Features

• Drag & Drop Kanban Board
• Real-time Collaboration (Socket.io)
• JWT Auth with Refresh Token
• Redux Toolkit State Management
• Role-based Access Control
• Task Labels, Due Dates, Comments

🛠 Tech Stack

Frontend: React.js, Redux Toolkit, Socket.io-client, React Beautiful DnD Backend: Node.js, Express.js, Socket.io, MongoDB, Mongoose, JWT Deploy: Vercel (Frontend) + Render (Backend) + MongoDB Atlas