Stop 01 · Web & Internet FoundationsTopics · 10/10

APIs

Part of the Full Stack Developer Roadmap

In short

Your React page and your Node server never share variables. They only talk through an API, a fixed list of requests the server will answer. Get this contract right and both sides can grow independently.

The contract that lets your frontend and backend (or any two systems) talk to each other — defining what requests are possible and what data comes back. Designing and consuming APIs well is the connective tissue of full-stack work.

The mascot passes a slip through a recharge shop window to a shopkeeper with a phone.

Think of it like this

The mobile recharge shop

You tell the recharge bhaiya your number and the plan. He does the rest inside the operator's system, which you never touch, and you get a confirmation SMS. You only need to know what to ask for and what comes back. That window is the API.

Watch it happen

One API call, end to end

React page

API server

Database

GET /api/books?limit=2

1/5The page asks for two books. It only knows the URL and what shape of answer to expect.

The big ideas

What you need to know

An API is a contract

It says which URLs exist, what each one accepts and what it returns. Both sides build against that promise.

Details stay hidden

The frontend doesn't care if you use Postgres or MongoDB. You can swap the inside without breaking the page.

JSON is the common language

Most web APIs send and receive JSON, which JavaScript reads natively on both the browser and Node side.

Not just your own API

Payments, maps, email and login all come as third-party APIs. You call them from your server with a secret key.

See it in code

Walk through the code

1// server.js (Express)2app.get("/api/books", async (req, res) => {3  const limit = Math.min(Number(req.query.limit) || 10, 50);4  const books = await db.book.findMany({ take: limit });5  res.json(books.map(({ id, title }) => ({ id, title })));6});7 8// BookList.jsx (React)9const res = await fetch("/api/books?limit=2");10const books = await res.json(); // [{ id: 1, title: "..." }, ...]

1/3One route, one job. The limit is capped at 50 so nobody can ask for a million rows.

The server decides the shape of the answer. The frontend just reads it.

Save yourself the pain

Common mistakes

Oops

Sending the whole database row, password hash and all, because 'the frontend just ignores it'.

Do this instead

Pick the fields you send. Anything in the response is visible in the Network tab.

Oops

Changing a response field name on the server without telling the frontend.

Do this instead

Treat the API as a contract. Add new fields freely, but rename or remove only with a new version or a coordinated change.

Your mission

Call a real public API

~20 min

Quick check

Your team moves the database from MySQL to Postgres but keeps every API URL and response the same. What changes for the React app?

Go deeper

1Design a simple API contract (endpoints, request/response shapes) before writing any code for a feature.
2Consume a public API from a small frontend to practice the client side of this contract.
3Learn why a well-documented API lets frontend and backend work happen in parallel, not sequentially.