📝 React Todo App

A modern and interactive Todo Application built using React.js.
This app helps users manage daily tasks efficiently with features like adding, editing, deleting tasks, and storing data in localStorage for persistence.

The application focuses on clean UI, reusable components, and efficient state management using Context API.

---

🚀 Features

• ➕ Add Tasks – Easily add new tasks
• ✏️ Edit Tasks – Update existing tasks anytime
• ❌ Delete Tasks – Remove completed or unwanted tasks
• 💾 Persistent Storage – Data saved in localStorage
• ⚡ Dynamic UI Updates – Real-time interaction with state changes
• ♻ Reusable Components – Modular and scalable structure

---

🛠️ Tech Stack

• React.js – Frontend library
• JavaScript (ES6+) – Application logic
• Context API – Global state management
• HTML5 & Tailwind CSS – UI structure and styling
• localStorage – Data persistence

---

⚡ React Concepts Used

This project demonstrates important React concepts:

• React Hooks (useState)
• Context API
• Component-based architecture
• Event handling
• State management
• Dynamic rendering

---

## 📂 Project Structure

src/

├── components/  
│   ├── TodoForm.jsx         # Handles adding new tasks  
│   ├── TodoItem.jsx         # Displays individual tasks  
│   └── index.js             # Exports all components  

├── context/  
│   ├── TodoContext.js       # Global state management  
│   └── index.js             # Exports context  

├── App.jsx                   # Main application component  
└── main.jsx                 # Entry point  

---

⚙️ Installation & Setup

1. Clone the Repository

git clone https://github.com/Pankaj2299/react-todo-app.git

2. Navigate to the Project Folder

cd react-todo-app

3. Install Dependencies

npm install

4. Run the Development Server

npm run dev

5. Open in Browser

http://localhost:5173

---

📖 How to Use

1. Open the application in your browser
2. Add a new task using the input field
3. Edit tasks anytime using the edit option
4. Delete tasks when completed
5. Tasks will be automatically saved in localStorage
6. Refresh the page — your data will still be there

---

👨‍💻 Author

Pankaj Kumar

📧 Email: Pankajkumar199922@gmail.com
🔗 GitHub: https://github.com/Pankaj2299
🔗 LinkedIn: https://www.linkedin.com/in/pankaj-kumar-4b3276266

---

⭐ Support

If you like this project, please consider starring ⭐ the repository.
It helps others discover the project and motivates further development.