Create a TypeScript API service with a base URL constant for my local FastAPI backend running on port 8000, and add a helper function for handling API responses and errors. Include proper TypeScript types for todo items

Add CORS middleware to allow requests from my React frontend running on localhost:5173. Include all standard HTTP methods and headers

Create a getTodos function with proper TypeScript types that fetches all todo items from the /todos endpoint and returns a typed Promise. Include proper error handling for network failures and invalid responses

Import the getTodos function and use useEffect to fetch and display all todos when the component mounts. Store the todos in component state using useState with proper TypeScript typing for the todo array

Create a createTodo function with TypeScript types that accepts a todo object with title and completed properties. Send a POST request to /todos with the todo data in the request body. Include proper JSON headers, error handling, and return the created todo with proper typing

Update the form's onSubmit handler to call createTodo with properly typed form data. After successful creation, clear the form and update the todos list in the parent component using TypeScript best practices

Create an updateTodo function with TypeScript types that accepts a todo ID and updated todo data. Send a PUT request to /todos/{id} with the updated data. Include error handling for not found scenarios and validation errors with proper return typing

Add a checkbox to each todo item in my TodoList.tsx component that calls updateTodo when toggled with proper TypeScript event handling. When a user checks or unchecks the box, update the completed status both locally and on the backend. Make sure to handle the state updates properly in the parent component.

Create a deleteTodo function with TypeScript types in my apiService.ts file that accepts a todo ID and sends a DELETE request to /todos/{id}. Include error handling for not found scenarios and confirmation of successful deletion with proper return typing

Add a delete button to each todo item in my TodoList.tsx component that calls deleteTodo when clicked with proper TypeScript event handling. After successful deletion, remove the item from the local state and provide user feedback. Make sure to handle the state updates in the parent component properly

Add a TypeScript confirmation dialog that appears when users click delete in my TodoList.tsx component. Only proceed with deletion if the user confirms their intent, using proper event typing and state management


In my TodoForm component, add a TypeScript loading state that shows 'Creating todo...' when the form is being submitted and disables the submit button during the process. Include proper type annotations.

In my TodoForm component, add TypeScript error handling that shows a red error message above the form when API calls fail. Include proper type annotations and a way to dismiss the error message.

In my TodoForm component, modify the submit button to be disabled when loading is true, and change the button text to show the current operation status. Use TypeScript with proper type annotations.

In my App component, convert my manual todo fetching logic to use React Query's useQuery hook with TypeScript type definitions for automatic loading states and caching
