https://github.com/tanjidshafin/task-management-app

A real-time and interactive task management application with drag-and-drop functionality, built with React, Firebase, Express.js, and MongoDB.
https://github.com/tanjidshafin/task-management-app

dndkit express firebase mongodb react tanstack-react-query

Last synced: 2 months ago
JSON representation

A real-time and interactive task management application with drag-and-drop functionality, built with React, Firebase, Express.js, and MongoDB.

• Host: GitHub
• URL: https://github.com/tanjidshafin/task-management-app
• Owner: Tanjidshafin
• Created: 2025-02-20T04:41:26.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-19T14:47:00.000Z (12 months ago)
• Last Synced: 2025-06-19T15:39:55.572Z (12 months ago)
• Topics: dndkit, express, firebase, mongodb, react, tanstack-react-query
• Language: JavaScript
• Homepage: https://task-management-shafin.netlify.app/
• Size: 93.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


  





  





  A real-time and interactive task management application with drag-and-drop functionality, built with React, Firebase, Express.js, and MongoDB.





![GitHub stars](https://img.shields.io/github/stars/Tanjidshafin/task-management-app?style=social)

![GitHub forks](https://img.shields.io/github/forks/Tanjidshafin/task-management-app?style=social)

![GitHub watchers](https://img.shields.io/github/watchers/Tanjidshafin/task-management-app?style=social)



---

## ✨ Features



| Feature | Description                                                         |

| ------- | ------------------------------------------------------------------- |

| ✅      | **Firebase Authentication** (Google Sign-in)                        |

| ✅      | **Task CRUD Operations** (Add, Edit, Delete)                        |

| ✅      | **Drag & Drop** to reorder tasks & move between categories          |

| ✅      | **Real-time Synchronization** (Socket.io) |

| ✅      | **Responsive & Minimal UI**                                         |

| 🌙      | **Dark Mode Toggle** (Bonus)                                        |

| 📅      | **Due Date Indicators** (Bonus)                                     |

| 📜      | **Activity Log** (Bonus)                                            |



---

## 🛠️ Tech Stack



![React](https://img.shields.io/badge/React-%2361DAFB?style=for-the-badge&logo=react&logoColor=white)

![Firebase](https://img.shields.io/badge/Firebase-%23FFCA28?style=for-the-badge&logo=firebase&logoColor=black)

![Express.js](https://img.shields.io/badge/Express.js-%23000000?style=for-the-badge&logo=express&logoColor=white)

![MongoDB](https://img.shields.io/badge/MongoDB-%2347A248?style=for-the-badge&logo=mongodb&logoColor=white)

![Tailwind CSS](https://img.shields.io/badge/TailwindCSS-%2306B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white)

![Node.js](https://img.shields.io/badge/Node.js-%23339933?style=for-the-badge&logo=node.js&logoColor=white)



---

## 🚀 Live Demo



[![Live Demo](https://img.shields.io/badge/LIVE-DEMO-brightgreen?style=for-the-badge)](https://task-management-shafin.netlify.app/)



---

## 📂 Project Structure

Click to expand

```bash

📦 Task-Management-App

 ┣ 📂 frontend  # React + Vite Frontend

 ┃ ┣ 📂 src

 ┃ ┃ ┣ 📂 components

 ┃ ┃ ┣ 📂 pages

 ┃ ┃ ┣ 📜 App.jsx

 ┃ ┃ ┣ 📜 main.jsx

 ┃ ┃ ┗ 📜 styles.css

 ┃ ┣ 📜 package.json

 ┃ ┗ 📜 vite.config.js

 ┣ 📂 backend  # Express.js + MongoDB Backend

 ┃ ┣ 📂 models

 ┃ ┣ 📂 routes

 ┃ ┣ 📜 server.js

 ┃ ┣ 📜 package.json

 ┃ ┗ 📜 .env

 ┣ 📜 README.md

 ┗ 📜 .gitignore

```

``

# ⚡ Installation & Setup

## Frontend Setup

  Show Instructions

```sh

cd frontend

npm install

npm run dev

```

## Backend Setup

  Show Instructions

```sh

cd backend

npm install

npm start

```

---

# 🔗 API Endpoints



| Method | Endpoint     | Description        |

| ------ | ------------ | ------------------ |

| POST   | `/tasks`     | Create a new task  |

| GET    | `/tasks`     | Retrieve all tasks |

| PUT    | `/tasks/:id` | Update a task      |

| DELETE | `/tasks/:id` | Delete a task      |



---

# 🏆 Contributing



[![Make a Pull Request](http://makeapullrequest.com)](http://makeapullrequest.com)

Contributions are welcome! Feel free to **fork** the repo and submit a **PR**.



---

# 🎨 Dark Mode Preview



  



---

# 📜 License



[![MIT License](https://choosealicense.com/licenses/mit/)](https://choosealicense.com/licenses/mit/)



---



  Made with ❤️ by Tanjid Karim Shafin