Junior React Dev Test

Initialize a new React project using create-react-app.

Ensure the project runs locally without any errors.

Create the following components:

• App: The main component that holds the state and other components.

• Header: Displays the title of the application.

• TodoList: Displays the list of to-dos.

• TodoItem: Represents a single to-do item.

• AddTodo: Contains the form to add new to-dos.

Use React state to manage the list of to-dos in the App component.

Each to-do item should have a unique ID, a description, and a completed status.

Add a new to-do:

• Implement a form in the AddTodo component that allows the user to input a new to-do item.

• When the form is submitted, add the new to-do item to the list.

Display the to-do list:

• Display the list of to-dos in the TodoList component.

• Each to-do item should be displayed using the TodoItem component.

Mark a to-do as completed:

• Add a button or checkbox to each TodoItem that allows the user to mark it as completed.

• When marked as completed, the to-do item should be visually different (e.g., with a line-through or different color).

Delete a to-do:

• Add a delete button to each TodoItem that allows the user to remove it from the list.

Add basic CSS to make the application visually appealing.

Ensure that the completed tasks have a distinct style.

Implement local storage so that the to-do list persists even after the page is refreshed.

Add a filter to show all tasks, only completed tasks, or only pending tasks.