https://github.com/tapader13/task-manage-dad-client
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.
https://github.com/tapader13/task-manage-dad-client
axios dnd-kit-sortable firebase react-form-hook react-hot-toast react-router reactjs tailwindcss tanstack-react-query
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/tapader13/task-manage-dad-client
- Owner: tapader13
- Created: 2025-02-20T13:52:25.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-02-20T14:26:58.000Z (12 months ago)
- Last Synced: 2025-02-20T15:31:53.244Z (12 months ago)
- Topics: axios, dnd-kit-sortable, firebase, react-form-hook, react-hot-toast, react-router, reactjs, tailwindcss, tanstack-react-query
- Language: JavaScript
- Homepage: https://drag-and-drop-728d6.web.app/
- Size: 83 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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](#https://drag-and-drop-728d6.web.app/)
## 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](https://nodejs.org/)
### Frontend Setup
1. Clone the repository:
```sh
git clone https://github.com/tapader13/task-manage-dad-client
cd client
```
2. Install dependencies:
```sh
npm install
```
3. Start the development server:
```sh
npm run dev
```
## Deployment
To deploy the frontend use **Firebase Hosting**.
## Dependencies
```json
{
"@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"
}
```