🚀 TaskFlow

Modern Project Management Platform

A full-stack Kanban-style project management tool built with React, TypeScript, Node.js, and MongoDB.
Organize tasks, collaborate with your team, and track progress — all in a beautiful dark-themed interface.

Report Bug · Request Feature

---

✨ Features

🔐 Authentication & Security

• JWT-based authentication with access & refresh token rotation
• Password hashing with bcrypt
• Role-based access control (Owner, Admin, Member)

📊 Interactive Dashboard

• Project overview with real-time statistics
• Task completion charts and activity feed
• Quick access to recent projects

📋 Kanban Board

• Drag-and-drop task management across columns (Todo → In Progress → In Review → Done)
• Visual priority indicators and deadline tracking
• Smooth animations and transitions

✅ Task Management

• Create, edit, and assign tasks with rich details
• Priority levels (Low, Medium, High, Urgent) with color coding
• Labels, due dates, and assignee management

👥 Team Collaboration

• Invite team members to projects
• Role-based permissions (Owner, Admin, Member)
• Search and add users across the platform

🔔 Notifications

• Real-time notification system
• Task assignment, update, and deadline alerts
• Mark as read / mark all as read

📱 Responsive Design

• Fully responsive across desktop, tablet, and mobile
• Collapsible sidebar for optimal screen usage
• Modern dark theme with premium aesthetics

---

📸 Screenshots

Live demo preview — the client ships with a built-in demo mode using mock data, so you can explore the UI without setting up a database.

Dashboard	Kanban Board

Projects	Login

---

🛠️ Tech Stack

Frontend

Technology	Purpose
React 18	UI library with hooks & context
TypeScript	Type safety & developer experience
TailwindCSS	Utility-first CSS framework
Vite	Next-gen frontend build tool
React Router v6	Client-side routing
@hello-pangea/dnd	Drag-and-drop for Kanban board
Axios	HTTP client with interceptors
Lucide React	Beautiful icon library

Backend

Technology	Purpose
Node.js	JavaScript runtime
Express.js	Web application framework
MongoDB	NoSQL database
Mongoose	MongoDB ODM
JWT	Authentication tokens
bcrypt	Password hashing
express-validator	Input validation
Helmet & CORS	Security middleware

DevOps

Technology	Purpose
Docker	Containerization
Docker Compose	Multi-container orchestration
Vercel	Frontend deployment

---

📁 Project Structure

TaskFlow/
├── client/                          # React Frontend
│   ├── src/
│   │   ├── components/
│   │   │   ├── board/               # Kanban board components
│   │   │   │   ├── KanbanBoard.tsx
│   │   │   │   ├── KanbanColumn.tsx
│   │   │   │   └── TaskCard.tsx
│   │   │   └── layout/              # Layout components
│   │   │       ├── Header.tsx
│   │   │       ├── Layout.tsx
│   │   │       └── Sidebar.tsx
│   │   ├── context/                 # React Context providers
│   │   │   └── AuthContext.tsx
│   │   ├── hooks/                   # Custom React hooks
│   │   ├── pages/                   # Page components
│   │   │   ├── DashboardPage.tsx
│   │   │   ├── LoginPage.tsx
│   │   │   ├── RegisterPage.tsx
│   │   │   ├── ProjectsPage.tsx
│   │   │   ├── ProjectBoardPage.tsx
│   │   │   └── SettingsPage.tsx
│   │   ├── services/                # API service layer
│   │   ├── types/                   # TypeScript interfaces
│   │   └── utils/                   # Utility functions
│   ├── tailwind.config.js
│   ├── vite.config.ts
│   └── package.json
│
├── server/                          # Node.js Backend
│   ├── src/
│   │   ├── config/                  # Database configuration
│   │   │   └── db.js
│   │   ├── controllers/             # Request handlers
│   │   │   ├── authController.js
│   │   │   ├── projectController.js
│   │   │   ├── taskController.js
│   │   │   ├── userController.js
│   │   │   └── notificationController.js
│   │   ├── middleware/              # Express middleware
│   │   │   ├── auth.js
│   │   │   ├── errorHandler.js
│   │   │   └── validate.js
│   │   ├── models/                  # Mongoose models
│   │   │   ├── User.js
│   │   │   ├── Project.js
│   │   │   ├── Task.js
│   │   │   └── Notification.js
│   │   ├── routes/                  # API routes
│   │   ├── services/                # Business logic layer
│   │   └── utils/                   # Helpers & constants
│   ├── .env.example
│   ├── server.js
│   └── package.json
│
├── docker-compose.yml               # Docker orchestration
├── .gitignore
├── LICENSE
└── README.md

---

🚀 Getting Started

Prerequisites

• Node.js >= 18.x — Download
• MongoDB >= 6.0 — Download or use MongoDB Atlas
• Git — Download

Installation

1. Clone the repository

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

2. Install dependencies

# Install all dependencies (client + server)
cd server && npm install
cd ../client && npm install

3. Configure environment variables

# Server configuration
cp server/.env.example server/.env

Edit server/.env with your settings:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/taskflow
JWT_SECRET=your-secret-key-here
JWT_REFRESH_SECRET=your-refresh-secret-here
NODE_ENV=development

4. Start the development servers

# Terminal 1 — Start backend
cd server && npm run dev

# Terminal 2 — Start frontend  
cd client && npm run dev

5. Open your browser

Frontend: http://localhost:5173
Backend:  http://localhost:5000/api

🐳 Docker Setup (Alternative)

# Start all services with Docker Compose
docker-compose up -d

# Access the app
# Frontend: http://localhost:3000
# Backend:  http://localhost:5000

---

📡 API Documentation

Authentication

Method	Endpoint	Description
POST	/api/auth/register	Register a new user
POST	/api/auth/login	Login & get tokens
POST	/api/auth/refresh	Refresh access token
POST	/api/auth/logout	Logout & invalidate token

Projects

Method	Endpoint	Description
GET	/api/projects	List user's projects
POST	/api/projects	Create new project
GET	/api/projects/:id	Get project details
PUT	/api/projects/:id	Update project
DELETE	/api/projects/:id	Delete project
POST	/api/projects/:id/members	Add team member
DELETE	/api/projects/:id/members/:userId	Remove member

Tasks

Method	Endpoint	Description
GET	/api/projects/:projectId/tasks	List project tasks
POST	/api/projects/:projectId/tasks	Create new task
GET	/api/tasks/:id	Get task details
PUT	/api/tasks/:id	Update task
PATCH	/api/tasks/:id/status	Update task status
DELETE	/api/tasks/:id	Delete task

Users

Method	Endpoint	Description
GET	/api/users/me	Get current profile
PUT	/api/users/me	Update profile
GET	/api/users/search?q=	Search users

Notifications

Method	Endpoint	Description
GET	/api/notifications	Get notifications
PATCH	/api/notifications/:id/read	Mark as read
PATCH	/api/notifications/read-all	Mark all as read

---

🏗️ Architecture

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│                 │     │                 │     │                 │
│   React Client  │────▶│  Express API    │────▶│    MongoDB      │
│   (TypeScript)  │     │  (Node.js)      │     │                 │
│                 │◀────│                 │◀────│                 │
└─────────────────┘     └─────────────────┘     └─────────────────┘
     Port 5173               Port 5000              Port 27017
     
     ┌──────────┐
     │   JWT    │  Authentication Layer
     │  Tokens  │  (Access + Refresh)
     └──────────┘

Design Patterns

• MVC + Service Layer — Clean separation of concerns
• Repository Pattern — Data access abstraction via Mongoose
• Context API — Global state management on frontend
• Custom Hooks — Reusable logic encapsulation
• Middleware Pipeline — Auth, validation, error handling

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

---

👨‍💻 Author

Ho Ngoc Chinh

• GitHub: @chinhcodelo
• Email: ngocchinhh01@gmail.com

---

⭐ Star this repo if you find it useful! ⭐

Made with ❤️ by Ho Ngoc Chinh