Todolist Application Using React and Fetch

This exercise is meant to be completed after the TODO list react application because the first part is the perfect boilerplate to start using API's.

For this second part, we will sync our todo list with a real database, using the following RESTful and public API made for this exercise.

🔗 Click here to access to the TODO-list API documentation.

This whole exercise is about asynchronous programming because the interactions from and to the server need to be done async. That way, the user does not have to wait for the information to arrive.

🌱 How to start this project

Do not clone this repository because we are going to be using a different template.

We recommend opening the react boilerplate using a provisioning tool like Codespaces (recommended) or Gitpod. Alternatively, you can clone it on your local computer using the git clone command.

This is the repository you need to open or clone:

https://github.com/4GeeksAcademy/react-hello

👉 Please follow these steps on how to start a coding project.

💡 Important: Remember to save and upload your code to GitHub by creating a new repository, updating the remote (git remote set-url origin <your new url>), and uploading the code to your new repository using the add, commit and push commands from the git terminal.

📝 Instructions:

• Make your to-do list sync with the backend API every time a task is added or deleted.
• Add a clean all tasks button that will delete the entire list from the server and update the empty list on the front-end.

There are 3 critical moments in the application timeline (a.k.a. The runtime) to focus on your integration:

• After the list loads empty for the first time (componentDidMount): you should fetch (GET) the data from the API and update the tasks when the information finally arrives.
• When a new task is added: You should PUT the new list on the server.
• When a task is deleted: You should PUT the new list on the server.

💡 Hint

Use the following fetch call to synchronize your tasks with the server every time there is a change on the list.

1fetch('https://playground.4geeks.com/apis/fake/todos/user/alesanchezr', {
2      method: "PUT",
3      body: JSON.stringify(todos),
4      headers: {
5        "Content-Type": "application/json"
6      }
7    })
8    .then(resp => {
9        console.log(resp.ok); // will be true if the response is successfull
10        console.log(resp.status); // the status code = 200 or code = 400 etc.
11        console.log(resp.text()); // will try return the exact result as string
12        return resp.json(); // (returns promise) will try to parse the result as json as return a promise that you can .then for results
13    })
14    .then(data => {
15        //here is where your code should start after the fetch finishes
16        console.log(data); //this will print on the console the exact object received from the server
17    })
18    .catch(error => {
19        //error handling
20        console.log(error);
21    });

For any other request, you have to keep changing the same variables on the fetch: The URL, the method and the payload.

This and many other projects are built by students as part of the 4Geeks Academy Coding Bootcamp by Alejandro Sanchez and many other contributors. Find out more about our Full Stack Developer Course, and Data Science Bootcamp.