Todo App

A feature-rich task management application built with React and TypeScript. Users can create, edit, delete, and filter todos with real-time API persistence and smooth loading states.

Live Preview

Todo App Demo

Design Reference

Based on the classic TodoMVC design pattern.

Technologies Used

• React 18 with hooks
• TypeScript 5
• Vite for fast builds and HMR
• Bulma CSS framework
• SCSS for custom styling
• Font Awesome icons
• classnames for conditional CSS classes
• react-transition-group for animations
• ESLint + Prettier for code quality
• Cypress for end-to-end testing

Getting Started

Clone the repository:

git clone https://github.com/artemstadnik/todo-app.git
cd todo-app

Install dependencies:

npm install

Run the project locally:

npm start

Features

• Add todos with title validation (no empty titles allowed)
• Edit inline by double-clicking a todo title
• Delete individual todos or clear all completed at once
• Toggle completion for single todos or toggle all at once
• Filter by All, Active, or Completed status
• Loading indicators during API operations
• Error notifications with auto-dismiss after 3 seconds
• Optimistic UI updates with rollback on failure
• Responsive layout that works on mobile and desktop