Task Management Application

Overview

The Task Management Application is a drag-and-drop task organizer that allows users to efficiently manage their tasks by categorizing them into To-Do, In Progress, and Done. The application ensures real-time updates and a seamless user experience across all devices.

Live Demo

🔗 Live Application

Technologies Used

• React.js (Vite)
• Tailwind CSS
• React Router
• React Hook Form
• Firebase Authentication
• Axios (API Requests)
• React Hot Toast (Notifications)
• Dnd-Kit (Drag-and-Drop Functionality)
• TanStack React Query (Data Fetching)

Features

✅ User Authentication (Google Sign-In via Firebase) ✅ Create, Edit, Delete Tasks ✅ Drag-and-Drop to Change Task Status ✅ Instant Sync with Database ✅ Mobile-Friendly & Fully Responsive UI

Installation & Setup

Prerequisites

Ensure you have the following installed:

• Node.js

Frontend Setup

1. Clone the repository:

   git clone https://github.com/tapader13/task-manage-dad-client
   cd client

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Deployment

To deploy the frontend use Firebase Hosting.

Dependencies

{
  "@dnd-kit/core": "^6.3.1",
  "@dnd-kit/sortable": "^10.0.0",
  "@dnd-kit/utilities": "^3.2.2",
  "@heroicons/react": "^2.2.0",
  "@tailwindcss/vite": "^4.0.7",
  "@tanstack/react-query": "^5.66.7",
  "axios": "^1.7.9",
  "firebase": "^11.3.1",
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "react-hot-toast": "^2.5.2",
  "react-router": "^7.2.0",
  "tailwindcss": "^4.0.7"
}