Todo application built with React and TypeScript, featuring task management, theme switching and accessible interactions.
🔗 Live Demo: https://awsome-todo-app.netlify.app
- Add, complete and delete tasks
- Filter tasks (all / active / completed)
- Clear completed tasks
- Light/Dark theme toggle
- System theme detection via
prefers-color-scheme - Persistent state using localStorage
- React
- TypeScript
- CSS (Flexbox)
- LocalStorage API
Accessibility was implemented with focus on real user interaction.
- Full keyboard navigation
- Focus management
- ARIA for dynamic updates
- Accessible state announcements (aria-live)
- Orca screen reader (Firefox on Linux)
- WAVE
- IBM Equal Access
- Firefox Accessibility Tools
- Theme toggle with persistence (localStorage)
- Initial theme based on user's system preference
- Clear visual states for active filters and tasks
| Mobile Light | Desktop Dark |
|---|---|
 |
 |
This project was built as part of a Frontend Mentor challenge, with additional focus on:
- Practicing TypeScript in interactive UI scenarios
- Implementing accessible state changes in dynamic lists
- Managing UI state and persistence