Stop 01 · Internet & Web BasicsTopics · 13/14

REST APIs

Part of the Frontend Developer Roadmap

In short

Almost every app you build will fetch data from an API. REST is the most common style, and it follows simple, predictable rules once you see the pattern.

An architectural style for designing web APIs around resources and standard HTTP methods (GET, POST, PUT, DELETE) with predictable, stateless endpoints. Good REST APIs also define consistent resource naming, status codes, validation, pagination, error responses, authentication, and versioning so different clients can integrate predictably.

The jaadu waiter takes an order with a menu and notepad.

Think of it like this

A waiter with a fixed menu

You don't walk into the kitchen. You tell the waiter what you want from the menu, and they bring it back. A REST API is that waiter: fixed URLs are the menu, and fixed verbs say what you want done.

Watch it happen

Same URL, different verbs

Your app
API

GET /courses

1/8Read: give me all courses.

The big ideas

What you need to know

Everything is a resource

Data is organised as nouns with their own URLs, like /courses and /courses/12.

Verbs say the action

GET reads, POST creates, PUT or PATCH updates, DELETE removes. The URL stays the same.

Each request stands alone

REST is stateless: every request carries what the server needs, like an auth token.

Status codes report back

201 for created, 400 for bad input, 404 for not found. Good APIs use them honestly.

See it in code

Walk through the code

js
1// Read a list2const res = await fetch("https://api.example.com/courses");3const courses = await res.json();4 5// Create a new item6await fetch("https://api.example.com/courses", {7  method: "POST",8  headers: { "Content-Type": "application/json" },9  body: JSON.stringify({ name: "Online BBA" }),10});

1/2GET reads data. res.json() turns the response body into a JavaScript value.

Same URL, different method. The GET reads the courses, and the POST creates one from the JSON in the body.

Save yourself the pain

Common mistakes

Oops

Putting actions in the URL, like /getCourses or /deleteCourse?id=12.

Do this instead

Use nouns in URLs and let the method say the action: GET /courses, DELETE /courses/12.

Oops

Reading the data without checking whether the request worked.

Do this instead

fetch doesn't throw on a 404 or 500. Check res.ok and handle the error.

Your mission

Play with a real API

~20 min

Quick check

Which request should delete course number 12 in a REST API?

Go deeper

  1. 1Call a public REST API (e.g. a joke or weather API) using `fetch`. Validate your understanding by applying it in a small practical example.
  2. 2Learn the meaning of each HTTP verb and when to use it. Focus on understanding the underlying reason it works, not only memorizing the definition.
  3. 3Read about REST constraints: statelessness, resource-based URLs, uniform interface.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge