Todo List Application

This is a Todo List application built with React that allows users to add, edit, delete, and view their todos. The application also features a dark mode toggle and a summary popup displaying the count of todos.

Features

• Add Todo: Add a new todo item.
• Edit Todo: Edit an existing todo item.
• Delete Todo: Delete a todo item after confirmation.
• View Todos: View all todo items, with an option to show/hide completed todos.
• Dark Mode: Toggle between dark and light modes.
• Summary Popup: Display a popup showing the total count of todos.

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/todo-list-app.git

Docker Setup

Build Docker Image

To build a Docker image for the Todo List application, run the following command in the project directory:

docker build -t todo-list-app

Usage

1. Start the development server:

   docker run -d -p 5173:5173 todo-list-app

2. Open your browser and go to http://localhost:5173.

Components

• Navbar: The navigation bar with a dark mode toggle.
• TodoItem: Represents an individual todo item.
• DeleteConfirmation: Modal for confirming the deletion of a todo item.
• Footer: The footer of the application.
• Home: The home page of the application.
• Loading: A loading spinner displayed while data is being fetched.
• TodoCounter: Popup that displays the total count of todos.

Using Vite and Tailwind CSS

This project uses Vite as the build tool for fast and optimized development, and Tailwind CSS, a utility-first CSS framework, for quick and easy styling of components.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.