Task Management Application (TaskPailot)

📌 Overview

This is a Task Management Application (TaskPailot) that allows users to manage their tasks effectively using a drag-and-drop interface. Tasks are categorized into three sections: To-Do, In Progress, and Done. The application ensures real-time updates and persistence using MongoDB as the database.

This project demonstrates frontend interactivity, backend data management, and real-time synchronization while maintaining a clean and responsive UI.

📖 Table of Contents

• Task Management Application (TaskPailot)
  • 📌 Overview
  • 📖 Table of Contents
  • ✨ Features
  • 🌍 Live Demo
  • 🛠 Technologies Used
  • ⚙️ Installation
    • Clone the Repository
    • Install Dependencies
      • Frontend:
      • Backend:
    • Configure Environment Variables
  • 🚀 Usage
  • 🔌 API Endpoints
  • 🌟 Bonus Features
  • 👥 Contributors
  • 📝 License

✨ Features

✅ Authentication

• Users must log in using Google Authentication via Firebase.
• User details (ID, email, display name) are stored in the database.

✅ Task Management

• Users can add, edit, delete, and reorder tasks.
• Tasks are categorized as:
  • 📝 To-Do
  • 🔄 In Progress
  • ✅ Done
• Drag and drop functionality to move tasks between categories.
• Instant database synchronization.

✅ Database & Persistence

• MongoDB stores tasks persistently.
• Real-time updates using Change Streams / WebSockets.
• Deleted tasks are permanently removed.

✅ Frontend UI

• Built with Vite.js + React.
• Uses a drag-and-drop library for smooth interactions.
• Modern, minimalistic, and responsive design.

✅ Backend API

• Developed using Express.js.
• Handles CRUD operations for tasks.

✅ Mobile Responsiveness

• Fully optimized for both desktop and mobile users.

🌍 Live Demo

🔗 Live Application: Click here

🔗 Frontend Repo: GitHub Link
🔗 Backend Repo: GitHub Link

🛠 Technologies Used

Technology	Purpose
React.js	Frontend UI
Vite.js	React development environment
Firebase	Authentication (Google Sign-In)
MongoDB	Database for task storage
Express.js	Backend API
Node.js	Server-side logic
react-beautiful-dnd	Drag and drop functionality

⚙️ Installation

Clone the Repository

git clone https://github.com/smmaksudulhaque2000/TaskPilot-Client
cd your-repo

Install Dependencies

Frontend:

cd frontend
npm install
npm run dev

Backend:

cd backend
npm install
npm start

Configure Environment Variables

Create a .env file in the backend directory and add:

MONGO_URI=your_mongodb_connection_string
FIREBASE_API_KEY=your_firebase_api_key

🚀 Usage

1. Login using Google Authentication.
2. Create, Edit, Delete, or Drag tasks between categories.
3. Changes are saved instantly in the database.
4. Refresh the page to see persisted tasks.

🔌 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

🌟 Bonus Features

• 🌙 Dark Mode Toggle
• 📆 Task Due Dates with Color Indicators
• 📜 Activity Log to track task changes

👥 Contributors

• Maksudul Haque – GitHub

📝 License

This project is licensed under the MIT License.