React Todo App with API

DEMO LINK

Responsive Todo app built using React and TypeScript. This project showcases full CRUD functionality, seamless data persistence through a REST API, and effective state management. It offers a clean and intuitive interface for handling tasks, including filtering, marking as complete, and editing todos.

Features

• Complete Task Control: Add, view, update, or remove tasks effortlessly.
• Task Operations:
  • Create New: Quickly insert new items into your list.
  • Rename: Edit task titles directly by double-clicking.
  • Mark Complete / Active: Switch tasks between done and pending.
  • Remove Tasks: Delete individual items or clear all completed ones at once.
• Update All at Once: Toggle the status of every task with a single action.
• Smart Filters: Easily switch between all tasks, active tasks, or finished tasks.
• Persistent Storage: All changes are saved and synced with the backend API.
• Error Alerts: Informative messages when API requests fail.
• Loading Feedback: Indicators show progress during asynchronous actions.

Tech Stack

• Frontend: React, TypeScript
• Styling: Bulma CSS Framework, SASS/SCSS, Classnames utility
• Build Tool: Vite
• Code Quality: ESLint, Prettier, Stylelint

Getting Started

To run this project locally, follow these steps:

Clone the repository

# Clone the repository
git clone https://github.com/Br0No/todo-app.git

# Navigate to the project folder
cd todo-app

# Install dependencies
npm install

Run the project locally

npm start

Running Tests

npm run test