Task 4: Building a Simple Todo List App with React and Typescript

Congratulations on completing Task 4 of the Web Learning Path! Below is the solution for creating a simple todo app using React and Typescript.

Solution Overvie

This application uses the browser's local storage to persist Todo Items, ensuring data is retained between sessions. It leverages TypeScript's robust type checks. And also it manages state and updates through the use of the useState and useEffect hooks, providing a dynamic user experience.

Project Folder Structure

src Directory

• Components/
  • TodoForm.tsx
  • TodoList.tsx
• Services/
  • TodoService.ts
• Styles/
  • TodoForm.css
  • TodoList.css
• App.css
• App.tsx

How to Run the Project

Clone the repositoroy:

git clone https://github.com/A2SV-G5-Web/web-task-4

Navigate to the project directory:

cd web-task-4

In the project directory, run:

npm install

to install the dependencies.

Runs the app in the development mode.

npm start

Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

Output