the command to create a new React project with Vite named 'frontend'

Create a React component called TodoForm. It should have an input field for the todo title and a submit button. Use useState to manage the input value and include a form submission handler.

Create a TodoList React component that receives an array of todo items as props. Map over the todos and display each one with its title and completed status. Include checkboxes to toggle completion and delete buttons for each item.

Create an App component that uses TodoForm and TodoList components. Include state management for a todos array and functions to add, toggle, and delete todo items.

Add useState hook to manage the input field value, initializing it as an empty string.

Connect this input to the inputValue state with value and onChange props

Add useEffect hook that runs when component mounts to fetch todos from an API.

Add cleanup function to useEffect that cancels any pending requests.

Create a state object that manages todos array, loading status, and error state using a single useState hook.


Create CSS variables for a modern todo app color scheme including primary, secondary, background, and text colors, plus standard spacing values.

Add the import statement for styles.css in the main application file.

Style this container with a centered layout, maximum width of 600px, padding, and a subtle background color using the CSS variables

Create styles for a modern input form with rounded corners, subtle shadows, and focus states that change color.

Style todo items as cards with spacing between them, subtle borders, and a hover effect that slightly elevates the card.

Make the todo app layout responsive with proper mobile spacing and touch-friendly button sizes.

Convert these CSS styles to styled-components for better component encapsulation

Create a reusable Button component with primary and secondary variants, including proper hover and disabled states

Create a reusable Button component with primary and secondary variants, including proper hover and disabled states.

Implement a theme provider that allows switching between light and dark modes using CSS variables.

Organize these styles into separate files for layout, components, and utilities.

Add size variants (small, medium, large) to this Button component with appropriate padding and font sizes.