This project is a simple todo list React app that I'm using to refamilirise myself with React. The project requirements were created using Claude AI.

Functional Requirements

• Add a todo item with text description.
• Mark a todo item as complete or incomplete.
• Delete a todo item.
• Filter todos by status: all, active, completed.
• Display count of active todos.
• Clear all completed todos at once.
• Edit existing todo text inline.
• Persist todos to localStorage so they survive page refresh.

Non-Functional Requirements

• The application must handle empty states (no todos, no active todos, no completed todos) with appropriate UI messaging. Forces conditional rendering patterns.
• [~] Form submission must prevent page reload. Requires understanding event.preventDefault() and synthetic events.
  • This is currently bypassed by not using forms. I understand it but chose to continue without forms since it is cleaner.
• Input fields must clear and refocus after successful submission. Teaches refs (useRef) and DOM manipulation in React.