This is a simple React Todo app that allows you to perform basic operations such as:
- Listing Todos: Display a list of your todos.
- Adding Todos: Add new todos to the list.
- Marking Todos as Completed: Toggle the completion status of each todo.
- Deleting Todos: Remove a todo from the list.
The app is built using React and styled with Tailwind CSS. I also used React Icons for icon styling. This app is created purely for educational purposes and is intended to demonstrate the implementation of basic CRUD (Create, Read, Update, Delete) operations in React.
- Add a new todo to the list.
- Mark todos as completed or incomplete.
- Delete todos from the list.
- Responsive design using Tailwind CSS.
- Simple, intuitive user interface.
- App.js: The root component that renders the
TodoList
andTodoAdd
components. - Todo.js: Represents a single todo item in the list.
- TodoList.js: Handles the list of todos and renders
Todo
components. - TodoAdd.js: Provides the form to add a new todo.
- index.css: Contains imports for Tailwind CSS.
- React: For building the user interface.
- Tailwind CSS: For styling the app in a responsive and minimalistic way.
- React Icons: For adding icons to the UI.
To run this app locally, follow these steps: