Foundation

What an API is and how a request flows

Use a live game-inventory API to see GET retrieve data, POST create an item, PUT upgrade an item, and DELETE remove one.

FoundationGETPOSTPUTDELETERequest bodyStatus codeJSON response

Live API playground

Game inventory API lab

Pretend this page is a small game. The backpack on screen is the frontend. The buttons call a real Next.js API route. The API reads or changes demo data, sends JSON back, and the screen redraws.

Beginner idea:

An API is the helper in the middle. The page asks clearly, the API checks the request, the data responds, and the page shows the result.

Frontend screen

Game backpack

3 items

API console

GET asks the API for data without changing anything.

200 OK

Request

GET /api/demo/inventory

No request body

Response JSON

No request body

Full API role

What happened after the click?

Why it matters

APIs are easier to understand when you can watch the page ask, the API check the request, the data change, the response return, and the screen update.

Field notes

GET retrieves data without changing it.
POST creates a new resource, usually using a request body.
PUT updates an existing resource by id.
DELETE removes a resource by id.
The API's full job is to receive the request, validate it, work with data, return a response, and let the frontend update.