You are tasked with creating a simple todo list application using React, TypeScript, and optionally TailwindCSS on the Frontend and Node, TypeScript, Express, Postgres, and one of the following ORMs: Drizzle, Prisma, node-pg. Please implement the following features:
- Display a list of todos
- Add new todos
- Delete todos
- Implement basic styling to match the provided design (see design below)
Bonus Features (if time allows):
- Mark todos as completed
- Filter todo by status (All, Active, Completed)
- Edit existing todos
You are tasked with creating a simple todo list application using React. Please implement the following features:
- Display a list of todo items
- Add new todo items
- Delete todo items
- Mark todo items as completed
- Filter todo items (All, Active, Completed)
- Implement basic styling to match the provided design
Bonus features (if time allows):
- Edit existing todo items
- Persist todos in local storage
- Implement basic form validation (e.g., prevent empty todos)
Note: Focus on functionality first. If time permits, improve the styling and UI/UX based on design instructions below.
Please refer to the provided design above as a guide for your implementation. Your goal is to create a functional todo list application that closely resembles this design. Key points to note:
- The application should have a clean, centered layout with a white background and subtle shadow.
- Include an input field for adding new todos, along with an "Add" button.
- Implement filter buttons for "All", "Active", and "Completed" todos.
- Each todo item should display the todo text and have buttons for completing, editing, and deleting the todo.
- Completed todos should have a strikethrough effect.
- Use appropriate spacing and styling to ensure good readability and user experience.
Note: While matching the exact design is not crucial, aim to create a clean and functional user interface that incorporates all the required features.