React TypeScript Todo App with API

Project Description:

The React TypeScript Todo App with API is an advanced Todo application developed with React, TypeScript, and API integration. This phase focuses on enhancing user interactions by introducing features such as toggling todo status and renaming todos.

Technologies Used:

• React with TypeScript: For a robust and typed development experience.
• API Integration: Utilizes a backend API for CRUD operations on Todo items.
• Loader Overlay: Provides visual feedback during API requests for a seamless user experience.
• CSS/SCSS: Styled with CSS or SCSS for a clean and visually appealing design.

Features Implemented:

Toggling a Todo Status:

• Toggle the completed status on TodoStatus change.
• Display loader overlay while waiting for API response.
• Handle API errors and show notifications.

Toggle All Todos:

• Toggle button has an active class only if all todos are completed.
• Click changes status to the opposite and updates all todos.
• Efficiently handles API requests for only the changed todos.

Renaming a Todo:

• Edit a todo title on double click.
• Save changes on form submit (Enter key) or onBlur.
• Cancel editing on ESC key.
• Delete the todo if the new title is empty.
• Display loader during API requests and handle errors.

Deployment:

Explore the live application here.