Your idea feels like one thing, but every web app is made of a few standard parts, each with a separate job. If you cannot name those parts, you cannot tell your agent which one to change, and you cannot reason about why something broke. This chapter gives you that map: the five pieces and how a single click travels through them.
1.4.1The five pieces
Every web app is built from the same handful of parts. Learn these names once and the rest of the handbook stops sounding foreign.
| Piece | What it does |
|---|---|
| Frontend | What the user sees and clicks in the browser: the pages, buttons, forms |
| Backend | The server that runs your logic: it decides what happens when a request arrives |
| Database | Where data is stored so it survives after the browser closes |
| API | The agreed set of messages the frontend and backend use to talk to each other |
| Hosting | The computers where all of the above actually run, reachable over the internet |
1.4.2Frontend and backend are two programs
The frontend runs on the user's device, inside their browser. The backend runs somewhere else, on a server you control, out of the user's reach.
This split matters because anything secret (passwords, private data, business rules) lives in the backend, never the frontend. The frontend is public by nature: anyone can open it and look.
1.4.3The API is a contract, not a place
The frontend cannot reach into the database directly. It sends a request to the backend through the API, a fixed list of allowed messages like "give me this user's orders" or "save this comment."
Think of the API as a menu. The frontend can only order dishes on the menu, and the backend decides how each one is cooked.
1.4.4The database remembers, hosting runs it
The database is the app's memory. Close the browser, restart the server, and whatever was saved there is still waiting.
Hosting is simply the rented computers where the frontend, backend, and database live so the public can reach them. Which specific tools fill each slot is a later decision, covered when you choose your stack.
1.4.5Trace one click through all five
Follow one action, a user saving a comment, and watch it cross every piece in order:
- Frontend: packages the typed comment and sends it off.
- API: carries that request to the backend as an agreed message.
- Backend: checks the user is allowed, then writes the comment down.
- Database: stores it and confirms it is saved.
- Frontend again: shows the saved comment on screen.
All of it runs on hosting, the rented computers underneath.
Every feature you build is some version of this loop. Once you can see the loop, a bug stops being "the app is broken" and becomes "which piece dropped the message."
This prompt maps your app onto the five pieces:
Act as a senior engineer. Map my app onto the five pieces
of a web app: frontend, backend, API, database, and
hosting. For each, say in one line what it does for my app
specifically. Then trace one core feature as a round trip
through all five.
My app:
Do this now: paste the prompt and let your agent map your five pieces, then read the round trip so you can picture where each feature lives.
