Todo App (React)

A modern and interactive Todo application built with React. This app allows users to manage tasks efficiently with features like inline editing, filtering, validation, and persistent storage.

---

Live Demo

https://todo-app-gules-two-35.vercel.app/

---

Features

• Add new tasks
• Edit tasks inline
• Delete tasks
• Mark tasks as completed
• Filter tasks (All / Completed / Pending)
• Prevent empty and duplicate tasks
• Persistent data using localStorage
• Auto-focus input for better UX
• Task count (Total / Completed / Pending)
• Clean and responsive UI

---

Tech Stack

• Frontend: React (Vite)
• UI Library: Material UI (MUI)
• Language: JavaScript (ES6+)
• Styling: CSS

---

What I Learned

• Managing state effectively in React
• Component-based architecture and separation of concerns
• Handling side effects using useEffect
• Using useRef for DOM manipulation (auto-focus)
• Implementing real-world features like filtering and editing
• Improving user experience with validation and UI feedback
• Persisting data using localStorage

---

Installation & Setup

# Clone the repository
git clone https://github.com/PardeepSingh17/TodoApp.git

# Navigate into the project
cd TodoApp

# Install dependencies
npm install

# Run the development server
npm run dev

---

Deployment

This project is deployed using Vercel.

---

Acknowledgements

• React documentation
• Material UI

---

Show your support

If you like this project, give it a ⭐ on GitHub!

---