https://github.com/wiseweb-works/mern-collabtask-hub
๐ Collaborative Task Hub - A full-stack task management app built with MongoDB, Express.js, React, and Node.js (MERN). Features include task creation, assignment, real-time updates, and user collaboration.
https://github.com/wiseweb-works/mern-collabtask-hub
express express-js javascript mern mern-project mern-stack mongodb nodejs project react react19 task task-management
Last synced: about 2 months ago
JSON representation
๐ Collaborative Task Hub - A full-stack task management app built with MongoDB, Express.js, React, and Node.js (MERN). Features include task creation, assignment, real-time updates, and user collaboration.
- Host: GitHub
- URL: https://github.com/wiseweb-works/mern-collabtask-hub
- Owner: wiseweb-works
- License: mit
- Created: 2025-04-01T09:30:22.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2025-04-09T09:36:42.000Z (2 months ago)
- Last Synced: 2025-04-11T00:17:59.211Z (about 2 months ago)
- Topics: express, express-js, javascript, mern, mern-project, mern-stack, mongodb, nodejs, project, react, react19, task, task-management
- Language: TypeScript
- Homepage:
- Size: 1.26 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Collaborative Task Management Hub
A modern fullstack task management application built with **React 19**, **Vite**, **Tailwind CSS**, and **Express.js**, designed for teams to collaborate, manage tasks, and streamline productivity.
---
## Admin Pages
| Dashboard | Manage Tasks |
| :----------------------------------------: | :-------------------------------------------: |
|  |  || Create a New Task | View Team Members |
| :------------------------------------------: | :-----------------------------------------------: |
|  |  |## User Pages
| Dashboard | Manage Tasks |
| :-------------------------------------: | :-----------------------------------------: |
|  |  |---
## About The Project
This is a full-featured **task management hub** built with a **React + Vite frontend** and an **Express + MongoDB backend**. The app offers real-time collaborative features, an intuitive UI for tracking progress, and secure authentication to manage and assign tasks efficiently.
The backend exposes RESTful API endpoints secured with JWT authentication and supports file uploads and task data export using `exceljs`.
### ERD Diagram

---
## Features
### ๐ Frontend
- โ **Task Creation and Assignment**
- ๐ **Deadline Tracking with Moment.js**
- ๐ **Visual Analytics** using Recharts
- ๐งญ **Routing** with React Router 7
- ๐ **Tailwind CSS 4** for modern styling
- ๐ฅ **Toasts** with react-hot-toast
- ๐ Built with **Vite 6** for lightning-fast development### ๐ Backend
- ๐ **JWT Authentication**
- ๐งพ **Excel Export** with ExcelJS
- ๐ค **File Upload Support** with Multer
- ๐ก๏ธ Secure API with CORS and Express middleware
- ๐๏ธ **MongoDB + Mongoose** for data modeling---
## Built With
### Frontend
- [React 19](https://reactjs.org/)
- [Vite 6](https://vitejs.dev/)
- [Tailwind CSS 4](https://tailwindcss.com/)
- [Recharts](https://recharts.org/)
- [React Hot Toast](https://react-hot-toast.com/)
- [Moment.js](https://momentjs.com/)### Backend
- [Node.js](https://nodejs.org/)
- [Express 5](https://expressjs.com/)
- [MongoDB + Mongoose](https://mongoosejs.com/)
- [JWT](https://jwt.io/)
- [ExcelJS](https://github.com/exceljs/exceljs)
- [Multer](https://github.com/expressjs/multer)---
## Getting Started
### Prerequisites
- Node.js >= 18
- MongoDB running locally or through a cloud provider (e.g., MongoDB Atlas)### Installation
#### 1. Clone the repository
```bash
git clone https://github.com/wiseweb-works/mern-collabtask-hub.git
cd mern-collabtask-hub
```#### 2. Backend setup
```bash
cd backend
npm install
cp .env.example .env
# Update .env with your Mongo URI and JWT secret
npm run dev
```#### 3. Frontend setup
```bash
cd frontend
npm install
npm run dev
```---
## What I Learned
This project taught me how to:
- Build a **real-world task collaboration system** with user roles and secure APIs.
- Implement **Excel exporting** and file handling with Multer.
- Create responsive UI components using **Tailwind CSS** and integrate **React Toasts** for notifications.
- Model complex task relationships in **MongoDB** using Mongoose.
- Improve **frontend performance** and developer experience using Vite.---
## Useful Resources
1. [JWT Authentication in Express](https://www.digitalocean.com/community/tutorials/nodejs-jwt-expressjs)
2. [Recharts Documentation](https://recharts.org/en-US/)
3. [Tailwind CSS Docs](https://tailwindcss.com/docs)
4. [Multer File Upload Guide](https://www.npmjs.com/package/multer)
5. [ExcelJS GitHub Repo](https://github.com/exceljs/exceljs)---
## Acknowledgments
Thanks to the open-source community for the tools and inspiration. This collaborative task hub is a personal project aimed at improving productivity through intuitive design and reliable backend infrastructure.
---
Feel free to fork this project, contribute, or reach out with feedback!