🚀 Modern Todo App (React)

A beautiful and responsive Todo Application built using React.js with powerful features like search, theme toggle, and local storage persistence.

---

✨ Features

• ✅ Add, Edit, Delete Todos
• 🔍 Search Tasks in Real-Time
• 🌙 Light & Dark Theme Toggle
• 💾 LocalStorage (Data saved even after refresh)
• 📊 Progress Tracking (Completed Tasks)
• 📱 Fully Responsive (Mobile Friendly)
• ⚡ Smooth UI & Modern Design

---

🖼️ Preview

Clean UI with Light & Dark Mode Support

---

🛠️ Tech Stack

• ⚛️ React.js (Hooks)
• 🎨 CSS (Custom + Variables for Theming)
• 💾 LocalStorage API

---

📂 Project Structure

src/
│── components/
│   ├── Header.jsx
│   ├── Footer.jsx
│   ├── TodoForm.jsx
│   ├── TodoList.jsx
│   └── TodoItem.jsx
│
│── App.js
│── App.css

---

🚀 Getting Started

1️⃣ Clone the repository

git clone https://github.com/your-username/todo-app.git

2️⃣ Navigate to project

cd todo-app

3️⃣ Install dependencies

npm install

4️⃣ Run the app

npm start

👉 App will run on:

http://localhost:3000

---

🌗 Theme System

This app uses CSS Variables for theme switching:

• Light Theme 🌞
• Dark Theme 🌙

--bg-main
--card-bg
--text-color
--border-color
--input-bg
--accent

---

📊 How It Works

• Todos are stored in React State
• Synced with localStorage
• Search filters todos dynamically
• Theme preference is saved automatically

---

💡 Key Learning

• React Hooks (useState, useEffect)
• Component-based architecture
• State management
• UI/UX design principles
• Responsive design
• Theme handling using CSS variables

---

📸 Screenshots

(Add screenshots here later)

---

🔥 Future Improvements

• 🔄 Drag & Drop Todos
• 📅 Due Dates & Reminders
• ☁️ Backend Integration (Node.js + MySQL)
• 🔔 Notifications
• 📊 Analytics Dashboard

---

🙌 Author

Priyank Diyora

• 💼 Aspiring Software Developer
• 🚀 Passionate about MERN Stack

---

⭐ Support

If you like this project:

👉 Give it a ⭐ on GitHub 👉 Share with others 👉 Follow for more projects

---

📜 License

This project is open-source and free to use.