- Adding Todos: Users can add new todos, which are saved in the browser's Local Storage.
- Searching Todos: A search functionality allows users to find specific todos quickly.
- Todo Statistics: The app displays the number of total todos, completed todos, and incomplete todos.
- Toggle Completed Todos: Users can show or hide completed todos with a single click.
- Todo Management: Todos can be edited, canceled, saved, or deleted with ease.
- React Hooks: used most commonly used Hooks
useState
anduseReducer
for managing stateuseMemo
anduseCallback
for optimizing performanceuseRef
for referencing input elementsuseEffect
for interacting with Local Storage
To run the project locally, follow these steps:
- Clone the repository
- Navigate to the project directory 🠮
cd YOUR_REPO
npm i
🠮 to install dependenciesnpm run dev
🠮 to start the web server on your local machinenpm run build
🠮 to create a production-level appnpm run preview
🠮 to run the production-level app