Task Management App

Table of Contents

• About the Project
• Tech Stack
• Features
• Usage Guide
• Screenshots
• Installation
• Author

About the Project

• This is DEV Clone Website built with MERN stack.
• Project link (GitHub): Backend side and Frontend side
• This is a task management application built with the MERN Stack (MongoDB, Express, React, Node.js). The project is inspired by the interface and functionality of Trello, focusing on a smooth drag-and-drop experience for managing tasks and projects.

Tech Stack

• Backend

• Frontend

• Other tools:

Features

This project implements the following key features:

• Board & Task Management: CRUD boards, columns, cards with Kanban structure
• Drag & Drop System: Reorder columns and move cards within/across columns (dnd-kit)
• Authentication System: JWT login/register, email verification, bcrypt password hashing
• User Management: Profile update, avatar upload, role-based user support
• Collaboration System: Board invitations (invite, accept/reject, manage members)
• Card Features: Comments, members, cover image upload
• File Upload: Cloudinary integration for image storage
• Email System: Verification emails and board invitation emails (Brevo)
• Real-time Collaboration (Socket.IO): Real-time board invitations and membership updates
• Data Handling: Pagination, filtering, optimized MongoDB queries
• File Upload: upload file doc, pdf, excel,...

Usage Guide

👉 Live demo: https://task-app-management.vercel.app

🔐 Test Account (for quick login)

You can use the following account to try the system immediately:

Email: thanhphucnguyen54@gmail.com
Password: thanhphuc1810

In addition to the main demo account, there are multiple test accounts available to simulate the invite user to board feature: thanhphuc01@gmail.com, thanhphuc02@gmail.com, thanhphuc03@gmail.com, thanhphuc04@gmail.com with the same password as the main account.

How to use the app:

• Sign up or login to access the system
• Create a new board from dashboard or select board "Website Development"
• Add columns and tasks (cards)
• Drag & drop tasks between columns
• Invite other users to collaborate in real-time
• Search boards by title board
• Delete columns via the action menu (top-right corner of each column)
• witch between light and dark mode

Screenshots

Installation

Prerequisites

Make sure you have installed the following tools on your machine:

• Node.js (v18+ recommended)
• MongoDB (local installation or MongoDB Atlas)
• Git
• Yarn or npm

Clone the repository

git clone https://github.com/thanhphucnguyen1810/task-management-app.git
cd task-management-app

Backend Setup

Navigate to the backend directory and install dependencies:

cd taskapp-server
yarn install  or npm install

Environment Variables

Create a .env file inside the taskapp-server folder and configure the following variables:

MONGODB_URI=''
DATABASE_NAME=''
APP_HOST=''
APP_PORT=
AUTHOR=''

BREVO_API_KEY=''
ADMIN_EMAIL_ADDRESS=''
ADMIN_EMAIL_NAME=''

WEBSITE_DOMAIN_DEVELOPMENT=''
WEBSITE_DOMAIN_PRODUCTION=''

ACCESS_TOKEN_SECRET_SIGNATURE=''
ACCESS_TOKEN_LIFE=''
REFRESH_TOKEN_SECRET_SIGNATURE=''
REFRESH_TOKEN_LIFE=''

CLOUDINARY_CLOUD_NAME=''
CLOUDINARY_API_KEY=''
CLOUDINARY_API_SECRET=''

You can use MongoDB Atlas if you prefer not to install MongoDB locally.

Run backend server

npm run dev
or
yarn dev

Frontend Setup

Open a new terminal and navigate to the frontend directory:

cd taskapp-client
yarn install   or   npm install

The frontend application will be running at:

http://localhost:5173

Project Structure

task-management-app
│
├── taskapp-server    # Backend (Node.js, Express, MongoDB)
└── taskapp-client    # Frontend (React, Vite, Material UI)

Author

Platform	Link
Author	Nguyen Thanh Phuc - Acus
GitHub	thanhphucnguyen1810
Contact Email (Optional)	thanhphuc1810.work@gmail.com

Contributing

Your contributions are always welcome! If you have suggestions for improvements or find a bug, please feel free to create an Issue or submit a Pull Request.

License

This project is licensed under the MIT License. See the [LICENSE] file for more details.