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 to-do 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.

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

📝 Instructions:

1. Make your TODO List sync with the backend API every time a task is added or deleted.
2. Add a "clear all tasks" button that will delete the entire list from the server and update the empty list on the front-end.

👉 Key moments for integration:

1. Load tasks on start (useEffect)

   • Use the GET method specified in the documentation to fetch the list and update the state that holds the task list.

2. Add a task.

   • Use the POST method specified in the documentation to add a new task and then use GET to update the task list.

3. Delete a task.

   • Use the DELETE method to remove a task and then GET to update the list.

4. Make sure to create a user before adding tasks.

💡 Hint:

Use the following fetch call to create a new task on the server. Remember to create a user first.

1fetch('https://playground.4geeks.com/todo/todos/alesanchezr', {
2        method: "POST",
3        body: JSON.stringify(task),
4        headers: {
5          "Content-Type": "application/json"
6        }
7     })
8     .then(resp => {
9          console.log(resp.ok); // Will be true if the response is successful
10          console.log(resp.status); // Status code 201, 300, 400, etc.
11          return resp.json(); // Will attempt to parse the result to JSON and return a promise where you can use .then to continue the logic
12     })
13     .then(data => {
14          // This is where your code should start after the fetch is complete
15          console.log(data); // This will print the exact object received from the server to the console
16     })
17     .catch(error => {
18          // Error handling
19          console.log(error);
20     });

⚠️ For any other request, you must change the variables in 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.