TaskHub - Task Management Website

TaskHub is a lightweight and intuitive task management app designed to help you organize, prioritize, and complete your tasks efficiently. Whether you're managing personal to-dos, work projects, or team collaborations, TaskHub offers a seamless experience with powerful features that keep you on track. ✅

🌟 Features

• Task Creation: Add new tasks quickly with a simple and user-friendly interface.
• Task Categorization: Organize tasks into categories for better management and prioritization.
• Progress Tracking: Mark tasks as completed and monitor your overall progress.
• Due Date Management: Set deadlines to ensure timely completion of tasks.
• Task Filters: Filter tasks by status (completed, pending) to focus on what matters.
• Responsive Design: Optimized for both mobile and desktop devices for seamless usage.
• Task Editing: Update task details such as name, due date, or priority level.
• Task Deletion: Remove completed or irrelevant tasks effortlessly.

🛠️ Technologies Used

• Frontend: React.js for building the user interface and managing components.
• Backend: Node.js with Express.js for the server and API handling.
• Database: MongoDB for data persistence.
• Axios: For handling HTTP requests between frontend and backend.
• JWT Authentication: Used for user authentication and session management.
• Mongoose: For object data modeling with MongoDB.
• CSS & Bootstrap: For responsive and user-friendly styling.

📁 Project Structure

├── backend
│   ├── config
│   ├── controllers
│   ├── models
│   ├── routes
│   ├── server.js
├── frontend
│   ├── public
│   ├── src
│   │   ├── components
│   │   ├── pages
│   │   ├── App.js
│   │   ├── index.js
├── package.json
└── README.md

⚙️ Installation

1. Clone the repository:

   git clone https://github.com/mohamedkhaledmk/TaskHub-Task-Management-Website.git

2. Navigate to the project directory:

   cd TaskHub-Task-Management-Website

3. Install the dependencies for both frontend and backend:

   npm install

4. Start the backend server:

   cd backend
   npm start

5. For the frontend, navigate to the frontend directory and run the Vite development server:

   cd frontend
   npm run dev

🎯 Usage

1. Open the app in your browser.
2. Add tasks by clicking the "Add Task" button and filling in the details.
3. Mark tasks as completed or edit them as needed.
4. Use filters to view completed or pending tasks.

TaskHub helps you stay organized and productive with an easy-to-use interface. 🚀