https://github.com/elite1122/taskzen-client
TaskZen is a Task Management Application where users can add, edit, delete, and reorder tasks using a drag-and-drop interface. Tasks will be categorized into three sections: To-Do, In Progress, and Done. Changes must be saved instantly to the database to maintain persistence.
https://github.com/elite1122/taskzen-client
firebase mongodb reactjs tailwindcss
Last synced: 3 months ago
JSON representation
TaskZen is a Task Management Application where users can add, edit, delete, and reorder tasks using a drag-and-drop interface. Tasks will be categorized into three sections: To-Do, In Progress, and Done. Changes must be saved instantly to the database to maintain persistence.
- Host: GitHub
- URL: https://github.com/elite1122/taskzen-client
- Owner: elite1122
- Created: 2025-02-20T04:22:28.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-22T13:48:29.000Z (over 1 year ago)
- Last Synced: 2025-03-01T23:33:10.057Z (over 1 year ago)
- Topics: firebase, mongodb, reactjs, tailwindcss
- Language: JavaScript
- Homepage: https://taskzenorg.firebaseapp.com/
- Size: 279 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TaskZen (Task Management System) Website Design Using Core React, Tailwind CSS, DaisyUI & MongoDB
## Project Theme: Marathon Management System 🌟
TaskZen is a Task Management Application where users can add, edit, delete, and reorder tasks using a drag-and-drop interface. Tasks will be categorized into three sections: To-Do, In Progress, and Done. Changes must be saved instantly to the database to maintain persistence.
## 🛠️ Technologies Used
### Frontend:
- **React.js** – Dynamic and efficient component-based UI framework for front-end building.
- **Tailwind CSS** – Utility-first CSS framework for a beautifully responsive and customizable interface.
- **React Toastify** – Delightful notifications and alerts for seamless user feedback.
- **React Router** - For handling navigation and routing across pages.
- **Context API** - For state management.
- **Sweet Alert** – Delightful notifications and alerts for seamless user feedback.
### Backend:
- **Node.js** - Provides the runtime environment for executing server-side JavaScript.
- **Express.js** - Simplifies building APIs and handling server-side logic.
### Database:
- **MongoDB** - A NoSQL database for storing user data, campaign details, and transaction records.
### Deployment:
- **Firebase** - Hosts the front end for a fast and scalable user experience.
- **Vercel** - Hosts the backend API for seamless server interactions.
## 📱 Key Features
### 🚀 Dynamic and Responsive Design
- **Description:** Fully responsive design ensures compatibility across all devices, including desktops, tablets, and mobile phones.
### 🔑 Secure Authentication
- **Description:** User authentication using Firebase, ensuring secure access and management of personal accounts.
- **Sign-In Options:** Includes email/password login and Google authentication.
### 🎯 **Task Creation and Management**
- **Add Task:** Users can create new tasks by providing a title, description, due date, and category.
- **Edit Task:** Enable users to modify task details anytime.
- **Delete Task:** Users can remove tasks that are no longer needed.
- **Drag-and-Drop Interface:** Allow users to easily move tasks between categories (To-Do, In Progress, Done).
## ⚛️ React Fundamentals Used
### 🧩 **Component-Based Architecture**
- Functional components are used throughout the project to build modular and reusable UI elements.
### 🪝 **Hooks for State Management**
- `useState`, `useEffect`, and `useContext` are used extensively for managing state and side effects.
- Routing and navigation are streamlined using `useNavigate` and `useLocation`.
### 🌐 **Context API**
- Global state management ensures seamless communication between components for user authentication and event data.
### 🎨 **Tailwind CSS**
- Stylish and responsive designs for mobile and desktop users.
## 🔗 Dependencies
- @dnd-kit/core: ^6.3.1
- @dnd-kit/modifiers: ^9.0.0
- @dnd-kit/sortable: ^10.0.0
- @tanstack/react-query: ^5.66.9
- axios: ^1.7.9
- firebase: ^11.3.1
- framer-motion: ^12.4.5
- localforage: ^1.10.0
- match-sorter: ^8.0.0
- react: ^19.0.0
- react-dom: ^19.0.0
- react-hook-form: ^7.54.2
- react-icons: ^5.5.0
- react-router-dom: ^7.2.0
- sort-by: ^1.2.0
- sweetalert2: ^11.17.2
## Installation
- Run `npm install` to install project dependencies.
## 📣 Contributing
Contributions, issues, and feature requests are welcome! Feel free to check out the issues page if you want to contribute.
## 🎉 Show Your Support
If you like this project, consider giving it a ⭐ on GitHub!
## 🌐 Live Demo
✨ **[Experience the Live Version Here!](https://taskzenorg.firebaseapp.com)** ✨
## 📂 GitHub Repository
✨ **[Visit Repository!](https://github.com/elite1122/TaskZen-Client)** ✨