The full-stack flow: fetch to the API

Joining the two halves

You already have a frontend (React) and a backend (Node/Express with an API). Full-stack is about connecting them: the frontend makes HTTP requests to the API and shows the response.

fetch

In the browser, fetch makes HTTP requests. It returns a promise:

async function loadUsers() {
  const response = await fetch("/api/users");
  const users = await response.json();
  return users;
}

• fetch(url) returns a promise with the response.
• response.json() (also a promise) extracts the body as an object.
• To send data (POST), you pass options: method, headers, and body.

The full cycle

1. The user does something in the frontend (clicks a button).
2. The frontend calls the API with fetch.
3. The backend processes, queries the database, and responds with JSON.
4. The frontend receives the response and updates the interface (React state).

In the exercise we give you an api function that simulates the backend. You write the logic that uses it and processes the response.