https://github.com/shahriarkawsik/task-management
A real-time task management app with drag-and-drop, authentication, and instant updates using WebSockets.
https://github.com/shahriarkawsik/task-management
drag-and-drop react taildwindcss websocket
Last synced: 8 months ago
JSON representation
A real-time task management app with drag-and-drop, authentication, and instant updates using WebSockets.
- Host: GitHub
- URL: https://github.com/shahriarkawsik/task-management
- Owner: Shahriarkawsik
- Created: 2025-02-22T09:18:55.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-22T09:36:23.000Z (about 1 year ago)
- Last Synced: 2025-02-22T10:26:30.976Z (about 1 year ago)
- Topics: drag-and-drop, react, taildwindcss, websocket
- Language: JavaScript
- Homepage:
- Size: 676 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Task Management Application
## 📌 Description
A real-time **Task Management Application** where users can **add, edit, delete, reorder, and move tasks** across three categories: **To-Do, In Progress, and Done**. The app ensures **instant updates** using **WebSockets** and **MongoDB Change Streams**.
## 🚀 Live Demo
🔗 [Live App URL](https://task-management-b48d5.web.app)
## 📸 Features
- 🔐 **Authentication**: Firebase Google Sign-In.
- ✅ **Task Management**: Create, edit, delete, and reorder tasks.
- 📂 **Drag and Drop**: Move tasks between categories.
- 💾 **Real-time Sync**: Uses WebSockets for live updates.
- 🎨 **Modern UI**: Built with **Vite.js, Tailwind CSS, and React**.
- 📱 **Fully Responsive**: Works smoothly on **desktop & mobile**.
## ⚙️ Tech Stack
### **Frontend**
- ⚛️ React.js (with Vite.js)
- 🎨 Tailwind CSS + DaisyUI
- 🏗️ @dnd-kit/core (Drag & Drop)
- 🔥 Firebase Authentication
### **Backend**
- 🟢 Node.js & Express.js
- 🍃 MongoDB (with Change Streams)
- ⚡ WebSockets (Socket.io)
## 🛠️ Installation Steps
1. **Clone the Repository**:
```sh
git clone https://github.com/Shahriarkawsik/Task-Management.git
cd Task-Management
```
2. **Frontend Setup**:
```sh
cd client
npm install
npm run dev
```
3. **Backend Setup**:
```sh
cd server
npm install
npm start
```
4. **Set Up Environment Variables**:
- Create a `.env` file in the backend folder.
- Add your MongoDB URI and Firebase API credentials.
## 📡 API Endpoints
| Method | Endpoint | Description |
| ------ | ------------ | ------------------- |
| POST | `/tasks` | Add a new task |
| GET | `/tasks` | Retrieve all tasks |
| PUT | `/tasks/:id` | Update task details |
| DELETE | `/tasks/:id` | Delete a task |
## 🎯 Folder Structure
```
/task-management-app
├── client (Frontend - React.js)
│ ├── public
│ ├── src
│ │ ├── components
│ │ ├── context
│ │ ├── hooks
│ │ ├── Layout
│ │ ├── pages
│ │ ├── styles
│ ├── .env
│ ├── vite.config.js
│ ├── package.json
│
├── server (Backend - Node.js & Express.js)
│ ├── routes
│ ├── models
│ ├── controllers
│ ├── config
│ ├── .env
│ ├── server.js
│ ├── package.json
│
├── README.md
```
## 🚀 Future Enhancements
- 🌑 **Dark Mode** toggle.
- 📅 **Task Due Dates** with color indicators.
- 📊 **Activity Log** for tracking changes.
💻 **Developed by**: [Md. Shahriar Kabir](https://github.com/Shahriarkawsik) 🚀