aayushmaan-54 / react-advanced-todo

A Todo app with features for adding, searching, tracking statistics, toggling completed tasks, and managing (edit, cancel, save, delete) todos, with data stored locally.

React Advanced ToDo

Tech Stack Used

         

Features

• 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 and useReducer for managing state
  • useMemo and useCallback for optimizing performance
  • useRef for referencing input elements
  • useEffect for interacting with Local Storage

Getting Started

To run the project locally, follow these steps:

• Clone the repository
• Navigate to the project directory 🠮 cd YOUR_REPO
• npm i 🠮 to install dependencies
• npm run dev 🠮 to start the web server on your local machine
• npm run build 🠮 to create a production-level app
• npm run preview 🠮 to run the production-level app

Screenshots & Video

Image

UI

Video

record.mp4

Working Demonstration of Todo Web App

Reach me at 🠮