ToDos  

Link by app

DEMO LINK

Project Description: React Todo App

The goal is to implement a simple Todo application that will save all changes to the API.

The project is divided into three parts: loading todos, adding and deleting todos, and toggling and renaming todos.

The task consisted of 3 parts:

• Download the task;
• Adding and deleting todo's;
• Filtering and modifying.

In 1st part:

At the initial stage, we implemented the loading of todo`s, generated error messages, and implemented filtering by status.

• Todos loading is implemented
  

• Implemented filtering by status
  

• Implement error messages
  

In 2st part:

This part of the React Todo App project focuses on adding and deleting todos while interacting with an API. At this stage, we also implemented smooth animations using the React Transition Group.

• Adding a todo
  

• Deleting todos
  

• Error status after add or deleting todo
  

In the last part 3:

• Added the ability to switch the status and edit cases.
• Added a button to switch the status of all cases.
• Added an error window if the todo status cannot be changed.

• Toggling a todo status
  

• Renaming a todo
  

• Error status after toggling or renaming todo
  

Technologies:

1. React

• The entire site is written in React, leveraging its component-based architecture to create a dynamic and efficient user interface.

2. TypeScript

• The site is fully implemented in TypeScript, ensuring type safety and improving the development experience by catching errors early and providing better tooling support.

3. SCSS

• The styling of the entire page is handled using the SCSS preprocessor, allowing for more modular and maintainable CSS with features like variables, nested rules, and mixins.

Launch Instructions

Prerequisites

1. Ensure you have the following installed on your machine:

• Node.js (v12 or higher)
• npm (v6 or higher)

Get the initial code

1. Clone the repository
2. Run npm install to install the dependencies
3. Create a branch for you solution (e.g. git switch -c develop)
4. Run npm start to run a development server at http://localhost:3000 (If you need to stop the server press ctrl + c in the terminal window)

Authors

@Galers