Todo App

A simple React Todo application with API integration, filtering, inline editing, and error handling.

Demo

LiveDemo

Description

This project is a classic Todo App where users can create, update, complete, delete, and filter tasks. The app works with an external API, shows loading states for async actions, and displays user-friendly error messages when something goes wrong.

Features

• Load todos from API
• Add a new todo
• Delete a todo
• Edit todo title inline
• Mark todo as completed / active
• Toggle all todos at once
• Filter todos by status:
  • All
  • Active
  • Completed
• Clear all completed todos
• Show temporary todo while a new one is being added
• Show loaders during API requests
• Show error notifications

Technologies Used

• React
• TypeScript
• SCSS
• REST API
• Fetch
• React Hooks
• Vite

Getting Started

Install dependencies

npm install

Run the project locally

npm run start

Build the project

npm run build