React To-Do App with API Integration

Features

• 🔄 Load Todos by User ID
  • Loads todos for a specific user from a remote API on app load.
  • Hides list and footer if no todos exist.
• ➕➖ Add and Delete Todos
  • Add new todos with form submission (auto-trimmed and validated).
  • Delete single todos or clear all completed ones.
  • Uses temporary todo with loader for optimistic UI updates.
  • Handles and displays API errors gracefully.
• ✅ Toggle Todo Status
  • Toggle completion status of individual todos.
  • "Toggle All" functionality to mark all todos as complete/incomplete.
  • Only changed todos are updated via API.
• ✏️ Rename Todos
  • Double-click to edit a todo.
  • Save on blur or Enter.
  • Cancel on Escape.
  • Automatically deletes if the new title is empty.
  • Inline loading spinner and error handling.
• 🔍 Filtering
  • Filter todos by All, Active, or Completed.
  • Uses visual indicators to highlight the selected filter.
• 🧠 Smart UX Enhancements
  • Loader overlays on every async operation.
  • Disabled controls during in-progress actions.
  • Input auto-focus and state preservation on errors.
  • Real-time error notifications with auto-dismiss after 3 seconds.