Task Master is a sleek and efficient React application designed to help you manage your tasks effortlessly. Keep track of your to-dos, mark them as completed, and add new tasks seamlessly.
- Project Structure
- Getting Started
- Features
- Demo
- Components
- Context
- Custom Hook
- Usage
- Contributing
- License
The project is organized into various components and files to ensure a clear and modular structure. Here's a brief overview:
- Components: A set of React components responsible for different aspects of the application.
- Context: Manages the state and logic related to To-Dos, providing a context for components.
- Custom Hook: Handles local storage operations for easy data retrieval and storage.
- Clone the repository.
- Navigate to the project directory.
- Run
npm installto install dependencies. - Run
npm startto start the development server.
- Add new To-Dos.
- Mark To-Dos as completed.
- Delete To-Dos.
- Search and filter To-Dos.
- Persistent data using local storage.
Take a look at the application deployed in GitHub-Pages!
The TodoItem component represents an individual To-Do item within the application. It features a clean design with the ability to mark tasks as completed or delete them.
The TodoList component displays a scrollable list of To-Dos, providing an organized view for efficient task management.
The TodoSearch component includes a user-friendly search bar, allowing users to filter tasks based on their input.
The TodosEmpty component welcomes users with an inviting message when there are no tasks, encouraging them to start their journey with Task Master.
The TodosError component gracefully handles errors, displaying a message to inform users that something unexpected occurred.
The TodosLoading component presents a friendly loading message, keeping users informed while their data is being fetched.
The TodoContext manages the state and logic related to To-Dos. It provides a context for components to access and modify To-Do data.
The TodoProvider wraps the application with the TodoContext.Provider to supply To-Do-related data and functions to its children.
The useLocalStorage hook simplifies local storage operations, allowing easy retrieval and storage of data.
Feel free to explore, customize, and enhance the application based on your requirements! If you have any questions or suggestions, don't hesitate to reach out.
Contributions are welcome! If you have ideas for improvements, bug fixes, or new features, please submit a pull request.
This project is licensed under the MIT License. Feel free to use, modify, and distribute the code.