4Geeks logo
4Geeks logo

Courses

Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.

Coding Bootcamp

Learn live

Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.

Upcoming live events

Learning library

For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Data Science and Machine Learning - 16 wks

Full-Stack Software Developer - 16w

Search from all Lessons

LoginGet Started
← Back to Projects

Todolist Application Using React and Fetch

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

beginner

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

8 hrs

Technologies

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.

Goal

4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills

Difficulty

beginner

Repository

Click to open

Video

Not available

Live demo

Not available

Average duration

8 hrs

Technologies