https://github.com/ashrafulhossain1/to-do-client
Task Management Application built with React and Vite.js. Users can add, edit, delete, and reorder tasks using a drag-and-drop interface. Tasks are categorized into three sections: To-Do, In Progress, and Done.
https://github.com/ashrafulhossain1/to-do-client
firebase-auth javascript reactjs websocket
Last synced: 2 months ago
JSON representation
Task Management Application built with React and Vite.js. Users can add, edit, delete, and reorder tasks using a drag-and-drop interface. Tasks are categorized into three sections: To-Do, In Progress, and Done.
- Host: GitHub
- URL: https://github.com/ashrafulhossain1/to-do-client
- Owner: ashrafulhossain1
- Created: 2025-02-20T19:48:59.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-01T17:31:06.000Z (over 1 year ago)
- Last Synced: 2026-01-03T22:29:08.534Z (6 months ago)
- Topics: firebase-auth, javascript, reactjs, websocket
- Language: JavaScript
- Homepage: https://to-do-app-f5d34.web.app
- Size: 319 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Task Management Application - Frontend
## Description
This is the frontend for a Task Management Application built with React and Vite.js. Users can add, edit, delete, and reorder tasks using a drag-and-drop interface. Tasks are categorized into three sections: **To-Do**, **In Progress**, and **Done**. The app has a clean, minimalistic UI and is fully responsive for both desktop and mobile users. Firebase Authentication (Google Sign-In) is implemented for user login.
---
## Live Links
- **Live Site**: [https://to-do-app-f5d34.web.app/](https://to-do-app-f5d34.web.app/)
- **GitHub Repository**: [https://github.com/ashrafulhossain1/to-do-client](https://github.com/ashrafulhossain1/to-do-client)
---
## Dependencies
The following dependencies are used in this project:
- `@ant-design/icons`: ^5.6.1
- `@dnd-kit/core`: ^6.3.1
- `@dnd-kit/sortable`: ^10.0.0
- `@dnd-kit/utilities`: ^3.2.2
- `antd`: ^5.24.1
- `axios`: ^1.7.9
- `firebase`: ^11.3.1
- `framer-motion`: ^12.4.7
- `react`: ^18.2.0
- `react-dom`: ^18.2.0
- `react-icons`: ^5.5.0
- `react-router`: ^7.2.0
- `tailwindcss`: ^4.0.7
- `daisyui`: ^5.0.0-beta.8
- `eslint`: ^9.19.0
- `vite`: ^6.1.0
---
## Installation Steps
1. Clone the repository:
```bash
git clone https://github.com/ashrafulhossain1/to-do-client.git
cd to-do-client
```
2. Install dependencies:
```bash
npm install
```
3. Create a `.env` file in the root directory and add the following Firebase environment variables:
```env
# Firebase Configuration
VITE_FIREBASE_API_KEY=your-api-key
VITE_FIREBASE_AUTH_DOMAIN=your-auth-domain
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-storage-bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
VITE_FIREBASE_APP_ID=your-app-id
```
4. Start the development server:
```bash
npm run dev
```
5. The app will run on `http://localhost:5173` (default Vite port).
---
## Technologies Used
- **React**: A JavaScript library for building user interfaces.
- **Vite.js**: A fast build tool and development server.
- **Tailwind CSS**: A utility-first CSS framework for styling.
- **DaisyUI**: A component library built on top of Tailwind CSS.
- **Firebase**: For authentication (Google Sign-In) and hosting.
- **Ant Design**: For additional UI components.
- **React Router**: For routing between pages.
- **@dnd-kit**: For drag-and-drop functionality.
- **Axios**: For making API requests to the backend.
---
## Firebase Setup
To integrate Firebase Authentication, ensure you have created a Firebase project and enabled Google Sign-In. Replace the placeholders in the `.env` file with your actual Firebase credentials.
---
## Screenshot
Here’s a preview of the application:
