A full-stack implementation of a Task Management System built with the MERN Stack (MongoDB, Express, React, Node.js) featuring advanced real-time collaboration using Socket.IO.
- Real-Time Sync (Socket.IO): Instant updates for task creation, deletion, and status changes across all connected users without page refresh.
- Intuitive Kanban Boards: Drag-and-drop functionality for managing tasks and updating their status easily (e.g., "To Do" to "In Progress").
- Secure Authentication: User profiles and secure login/registration implemented with JWT (JSON Web Tokens).
- Interactive Analytics: A simple dashboard to visualize project progress and task distribution.
| Stack Layer | Technology | Purpose |
|---|---|---|
| Frontend | React (with Hooks) | Building the user interface and managing state. |
| Real-Time | Socket.IO | Bi-directional communication for instant updates. |
| Backend | Node.js & Express | Creating the RESTful API and hosting the application logic. |
| Database | MongoDB & Mongoose | Flexible, document-based database for persistent storage. |
| Styling | CSS (or a library like Tailwind/Styled Components) | Application presentation and layout. |
| Directory | Description | Key Files/Folders |
|---|---|---|
client/ |
The React single-page application (SPA). | src/components, src/pages, package.json |
server/ |
The Node.js/Express REST API and Socket.IO server. | server.js, models/, routes/, .env |
- Node.js (v14+)
- MongoDB (Local instance or Cloud Atlas account)
- Navigate to the server directory:
cd server - Install dependencies:
npm install - Create a
.envfile and add your MongoDB connection string (e.g.,MONGO_URI="your_mongo_connection_string"). - Start the server:
npm start(or usingnodemonfor development).
- Navigate to the client directory:
cd client - Install dependencies:
npm install - Start the client application:
npm start
💡 The application will typically open at
http://localhost:3000for the client and the API will run onhttp://localhost:5000.