📝 Todo App with React

A clean, responsive, and theme-switchable To-Do list application built with React, Vite, and modern CSS. This project is designed to practice React hooks, component-based architecture, and state management.

---

Design Credit: This project design was provided by Frontend Mentor, an amazing platform to improve frontend skills by building real-world projects.

🚀 Features

• Add, check, and delete tasks easily

• Mark tasks as complete/incomplete

• Filter tasks by:

  • All
  • Active
  • Completed

• Clear completed tasks in one click

• Light / Dark mode toggle

• Fully responsive for mobile and desktop

• Smooth and modern UI design

---

📂 Project Structure

src/
├── App.css
├── App.jsx
├── index.css
├── main.jsx
├── assets/
│   ├── fonts/josefin-sans-v33-latin/
│   │   ├── josefin-sans-v33-latin-700.woff2
│   │   └── josefin-sans-v33-latin-regular.woff2
│   ├── images/
│   │   ├── bg-desktop-dark.jpg
│   │   ├── bg-desktop-light.jpg
│   │   ├── bg-mobile-dark.jpg
│   │   ├── bg-mobile-light.jpg
│   │   ├── favicon-32x32.png
│   │   ├── icon-check.svg
│   │   ├── icon-cross.svg
│   │   ├── icon-moon.svg
│   │   └── icon-sun.svg
│   └── react.svg
├── components/
│   ├── CheckBox/
│   │   ├── CheckBox.css
│   │   └── CheckBox.jsx
│   ├── Footer/
│   │   ├── Footer.css
│   │   ├── Footer.jsx
│   │   ├── FooterClearCompleted/FooterClearCompleted.jsx
│   │   ├── FooterItemCount/FooterItemCount.jsx
│   │   └── FooterNavi/FooterNavi.jsx
│   ├── InputBox/
│   │   ├── InputBox.css
│   │   └── InputBox.jsx
│   └── List/
│       ├── List.css
│       └── List.jsx
└── hooks/
    └── useTodos.js

---

🛠️ Tech Stack

• Frontend: React 18, JSX, CSS
• Build Tool: Vite
• Language: JavaScript (ES6+)

---

📦 Installation & Setup

1. Clone the repository

   git clone https://github.com/abhi-zero/todo-with-react.git
   cd todo-with-react

2. Install dependencies

   npm install

3. Run in development mode

   npm run dev

4. Build for production

   npm run build

5. Preview production build

   npm run preview

---

🎯 Usage

1. Type a task in the input box and click Add.
2. Click the checkbox to mark it as completed.
3. Use the filters at the bottom to view Active or Completed tasks.
4. Switch between light and dark mode anytime.

---

📸 Screenshots

Light Mode	Dark Mode

---

📜 License

This project is licensed under the MIT License.

---

🤝 Contributing

1. Fork this repo
2. Create a new branch (feature/your-feature-name)
3. Commit your changes
4. Push the branch and create a Pull Request

---

Made with ❤️ using React + Vite