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! ✨

📂 GitHub Repository

✨ Visit Repository! ✨