{"course":{"slug":"building-apps-with-ai","title":"Building Apps with AI","url":"https://addaly.com/learn/building-apps-with-ai","level":"beginner","track":"build"},"lesson":{"slug":"what-a-web-app-is-made-of","title":"What a web app is actually made of","url":"https://addaly.com/learn/building-apps-with-ai/what-a-web-app-is-made-of","position":2,"of":87,"minutes":9,"answer":"Every web app is a browser, a server, a database and the network between them; the browser is a stranger's machine, so nothing enforced there is enforced at all.","keyIdea":"Every web app is a browser, a server, a database and the network between them; the browser is a stranger's machine, so nothing enforced there is enforced at all."},"body":{"format":"markdown","text":"## Four parts and one road between them\n\nEvery web app you will build is the same four things.\n\n**The browser** runs on the user's device. It is given HTML (the content and its structure), CSS (how it looks) and JavaScript (what happens when you click). It is a stranger's machine, on a stranger's network, and you control none of it.\n\n**The server** runs somewhere you pay for. It is a program that sits waiting, and when a request arrives it decides what to send back. Your rules live here, because this is the only place a user cannot edit them.\n\n**The database** is where things survive. Anything that must still exist tomorrow (bookings, accounts, messages) is written here. The server talks to it. The browser never should.\n\n**The network** is the road between them, and it is slower and less reliable than anything in this list. On a train in Lucknow it is 400 milliseconds each way, and sometimes it drops.\n\n## Follow one click\n\nA customer taps *Book now*.\n\n1. The browser collects the form values and sends an HTTP request: a method (`POST`), a path (`/api/bookings`), some headers, and a body: usually JSON, which is just text shaped like `{\"stylist\":\"Anita\",\"start\":\"2026-09-11T14:00\"}`.\n2. That request crosses the internet to your server.\n3. Your server code runs. It checks who is asking, validates the values, and asks the database whether that slot is free.\n4. The database answers. The server writes a new row.\n5. The server sends back a response: a **status code** (200 means fine, 401 means you are not logged in, 404 means no such thing, 500 means your code crashed) and usually some JSON.\n6. The browser reads the response and changes the screen.\n\nThat loop is the whole of web development. Everything else (frameworks, hosting, authentication) is a way of arranging those six steps.\n\n## Words you will keep meeting\n\n- **Frontend** is everything that runs in the browser. **Backend** is everything that runs on the server. A **full-stack** framework such as Next.js, Django or Rails writes both from one project, which is why a model can build you a working app from one sentence.\n- An **API** is just a set of server addresses your own code calls instead of a human. `/api/bookings` is an API. There is nothing more to it.\n- A **port** is a numbered door on a machine. `localhost:3000` means door 3000 on this computer. That is why, when two projects start at once, the second either refuses to start (a plain Node server does) or quietly moves to the next port, as `next dev` does to 3001, and you can end up looking at the wrong project.\n- **Rendering** is where the HTML is assembled. On the server, before it is sent, or in the browser afterwards by JavaScript. Both are normal, and mixing them badly is where a page turns up empty for one second and full the next.\n\n## Why this matters more than it sounds\n\nAlmost every serious mistake in AI-built software is a confusion about *which of the four parts something is running in*.\n\nAn API key placed in browser code is public, because the browser is a stranger's machine. A price checked in browser JavaScript is not checked, because the browser is a stranger's machine. A permission enforced by hiding a button is not enforced, because the browser is a stranger's machine.\n\n> Figure: One tap on Book now. Steps: 1. Browser (Collects the form and sends POST /api/bookings); 2. Network (400 ms each way on a train, and sometimes it drops); 3. Server (Checks who is asking, validates, asks the database); 4. Database (Answers; a row is written and survives); 5. Response (A status code and JSON; the screen changes). Every serious mistake in AI-built software is a confusion about which of these boxes something is running in. The Network tab shows you the middle three from the outside.\n\nSay that sentence to yourself twice. It is the single most load-bearing fact in this course, and lesson 8 of the security block is entirely about people who forgot it.\n\n## Look at the road yourself\n\nYou do not have to take any of this on trust. Open your app, press F12 (or Ctrl+Shift+I, or Cmd+Option+I on a Mac), and choose the **Network** tab. Now click something.\n\nEvery request appears as a row: the path, the status code, the size, how long it took. Click one and you can read exactly what your browser sent and exactly what came back. This is free, built into every browser, and it settles arguments that would otherwise take an hour.\n\nTwo things to try immediately. First, click a button that saves something and watch the request go. If you see no request at all, nothing was saved anywhere: whatever appeared on screen was only in the browser's memory and will vanish on refresh. Second, look at the **Size** column on first load. A page over about 2 MB will feel slow on a mid-range Android phone on 4G, and you have just measured it for nothing.\n\n## The limitation\n\nThe browser only shows you what crossed the road. It cannot show you what your server did internally, which query it ran, or why the database refused. For that you need the server's logs, and if you have never opened your host's log page, you have no view of half your app. Find that page before you need it.\n\n## What to hold on to\n\nWhen something is wrong, the first question is not \"what is the bug\". It is **which of the four parts is this happening in**. Browser, server, database, or the road. Almost every debugging session in this course starts by answering that, and the Network tab answers it in about ten seconds."},"check":{"question":"An app shows a green \"Saved\" message after you submit a form, but the record is gone after a refresh. What does the Network tab most usefully tell you first?","options":[{"text":"Whether a request to the server was sent at all when you pressed the button.","correct":true},{"text":"Which database table the row should have been written into.","correct":false,"tempting":"Expects the browser to know about the database; the browser never sees it, and the network view stops at the server's door."},{"text":"Whether the JavaScript that renders the message contains a bug.","correct":false,"tempting":"Treats a display symptom as the cause. The message can be honest code fired at the wrong moment, which is a different fault from the one shown."},{"text":"How much memory the page is using while the form is open.","correct":false,"tempting":"Confuses performance instrumentation with the request record; memory says nothing about whether anything left the machine."}]},"prev":{"slug":"what-these-tools-actually-do","title":"What these tools actually do","url":"https://addaly.com/learn/building-apps-with-ai/what-these-tools-actually-do"},"next":{"slug":"the-context-window-is-the-memory","title":"The context window is the whole memory","url":"https://addaly.com/learn/building-apps-with-ai/the-context-window-is-the-memory"},"authorship":"Founder and series editor: Dr Mustafa Mun. Written by AI models to a written standard. Exam keys checked blind by a second model: 3,665 of 3,666 agreed. Academic review invited.","review":{"status":"Draft, open for academic review"},"cite":"Addaly (2026) 'What a web app is actually made of', in Building Apps with AI. Edited by M. Mun. Addaly. Available at: https://addaly.com/learn/building-apps-with-ai/what-a-web-app-is-made-of (Accessed: 13 October 2026).","licence":{"name":"CC BY-NC-SA 4.0","url":"https://creativecommons.org/licenses/by-nc-sa/4.0/"},"reader":{"schema":1,"title":"What a web app is actually made of","courseTitle":"Building Apps with AI","module":{"index":1,"slug":"the-machine-and-the-model","title":"The machine, and what the model can see of it"},"answer":null,"keyIdea":"Every web app is a browser, a server, a database and the network between them; the browser is a stranger’s machine, so nothing enforced there is enforced at all.","hero":{"kind":"figure","figure":{"t":"figure","label":"Figure","figure":{"type":"flow","steps":[{"label":"Browser","detail":"Collects the form and sends POST /api/bookings"},{"label":"Network","detail":"400 ms each way on a train, and sometimes it drops"},{"label":"Server","detail":"Checks who is asking, validates, asks the database"},{"label":"Database","detail":"Answers; a row is written and survives"},{"label":"Response","detail":"A status code and JSON; the screen changes"}],"title":"One tap on Book now","caption":"Every serious mistake in AI-built software is a confusion about which of these boxes something is running in. The Network tab shows you the middle three from the outside."},"alt":"Figure: One tap on Book now. Steps: 1. Browser (Collects the form and sends POST /api/bookings); 2. Network (400 ms each way on a train, and sometimes it drops); 3. Server (Checks who is asking, validates, asks the database); 4. Database (Answers; a row is written and survives); 5. Response (A status code and JSON; the screen changes). Every serious mistake in AI-built software is a confusion about which of these boxes something is running in. The Network tab shows you the middle three from the outside."}},"blocks":[{"t":"h2","id":"four-parts-and-one-road-between-them","runs":[{"text":"Four parts and one road between them"}]},{"t":"p","runs":[{"text":"Every web app you will build is the same four things."}]},{"t":"p","runs":[{"text":"The browser","b":true},{"text":" runs on the user’s device. It is given HTML (the content and its structure), CSS (how it looks) and JavaScript (what happens when you click). It is a stranger’s machine, on a stranger’s network, and you control none of it."}]},{"t":"p","runs":[{"text":"The server","b":true},{"text":" runs somewhere you pay for. It is a program that sits waiting, and when a request arrives it decides what to send back. Your rules live here, because this is the only place a user cannot edit them."}]},{"t":"p","runs":[{"text":"The database","b":true},{"text":" is where things survive. Anything that must still exist tomorrow (bookings, accounts, messages) is written here. The server talks to it. The browser never should."}]},{"t":"p","runs":[{"text":"The network","b":true},{"text":" is the road between them, and it is slower and less reliable than anything in this list. On a train in Lucknow it is 400 milliseconds each way, and sometimes it drops."}]},{"t":"h2","id":"follow-one-click","runs":[{"text":"Follow one click"}]},{"t":"p","runs":[{"text":"A customer taps "},{"text":"Book now","i":true},{"text":"."}]},{"t":"ol","start":1,"items":[[{"text":"The browser collects the form values and sends an HTTP request: a method ("},{"text":"POST","code":true},{"text":"), a path ("},{"text":"/api/bookings","code":true},{"text":"), some headers, and a body: usually JSON, which is just text shaped like "},{"text":"{\"stylist\":\"Anita\",\"start\":\"2026-09-11T14:00\"}","code":true},{"text":"."}],[{"text":"That request crosses the internet to your server."}],[{"text":"Your server code runs. It checks who is asking, validates the values, and asks the database whether that slot is free."}],[{"text":"The database answers. The server writes a new row."}],[{"text":"The server sends back a response: a "},{"text":"status code","b":true},{"text":" (200 means fine, 401 means you are not logged in, 404 means no such thing, 500 means your code crashed) and usually some JSON."}],[{"text":"The browser reads the response and changes the screen."}]]},{"t":"p","runs":[{"text":"That loop is the whole of web development. Everything else (frameworks, hosting, authentication) is a way of arranging those six steps."}]},{"t":"h2","id":"words-you-will-keep-meeting","runs":[{"text":"Words you will keep meeting"}]},{"t":"ul","items":[[{"text":"Frontend","b":true},{"text":" is everything that runs in the browser. "},{"text":"Backend","b":true},{"text":" is everything that runs on the server. A "},{"text":"full-stack","b":true},{"text":" framework such as Next.js, Django or Rails writes both from one project, which is why a model can build you a working app from one sentence."}],[{"text":"An "},{"text":"API","b":true},{"text":" is just a set of server addresses your own code calls instead of a human. "},{"text":"/api/bookings","code":true},{"text":" is an API. There is nothing more to it."}],[{"text":"A "},{"text":"port","b":true},{"text":" is a numbered door on a machine. "},{"text":"localhost:3000","code":true},{"text":" means door 3000 on this computer. That is why, when two projects start at once, the second either refuses to start (a plain Node server does) or quietly moves to the next port, as "},{"text":"next dev","code":true},{"text":" does to 3001, and you can end up looking at the wrong project."}],[{"text":"Rendering","b":true},{"text":" is where the HTML is assembled. On the server, before it is sent, or in the browser afterwards by JavaScript. Both are normal, and mixing them badly is where a page turns up empty for one second and full the next."}]]},{"t":"h2","id":"why-this-matters-more-than-it-sounds","runs":[{"text":"Why this matters more than it sounds"}]},{"t":"p","runs":[{"text":"Almost every serious mistake in AI-built software is a confusion about "},{"text":"which of the four parts something is running in","i":true},{"text":"."}]},{"t":"p","runs":[{"text":"An API key placed in browser code is public, because the browser is a stranger’s machine. A price checked in browser JavaScript is not checked, because the browser is a stranger’s machine. A permission enforced by hiding a button is not enforced, because the browser is a stranger’s machine."}]},{"t":"p","runs":[{"text":"Say that sentence to yourself twice. It is the single most load-bearing fact in this course, and lesson 8 of the security block is entirely about people who forgot it."}]},{"t":"h2","id":"look-at-the-road-yourself","runs":[{"text":"Look at the road yourself"}]},{"t":"p","runs":[{"text":"You do not have to take any of this on trust. Open your app, press F12 (or Ctrl+Shift+I, or Cmd+Option+I on a Mac), and choose the "},{"text":"Network","b":true},{"text":" tab. Now click something."}]},{"t":"p","runs":[{"text":"Every request appears as a row: the path, the status code, the size, how long it took. Click one and you can read exactly what your browser sent and exactly what came back. This is free, built into every browser, and it settles arguments that would otherwise take an hour."}]},{"t":"p","runs":[{"text":"Two things to try immediately. First, click a button that saves something and watch the request go. If you see no request at all, nothing was saved anywhere: whatever appeared on screen was only in the browser’s memory and will vanish on refresh. Second, look at the "},{"text":"Size","b":true},{"text":" column on first load. A page over about 2 MB will feel slow on a mid-range Android phone on 4G, and you have just measured it for nothing."}]},{"t":"h2","id":"the-limitation","runs":[{"text":"The limitation"}],"role":"limit"},{"t":"p","runs":[{"text":"The browser only shows you what crossed the road. It cannot show you what your server did internally, which query it ran, or why the database refused. For that you need the server’s logs, and if you have never opened your host’s log page, you have no view of half your app. Find that page before you need it."}]},{"t":"h2","id":"what-to-hold-on-to","runs":[{"text":"What to hold on to"}]},{"t":"p","runs":[{"text":"When something is wrong, the first question is not “what is the bug”. It is "},{"text":"which of the four parts is this happening in","b":true},{"text":". Browser, server, database, or the road. Almost every debugging session in this course starts by answering that, and the Network tab answers it in about ten seconds."}]}],"check":{"question":[{"text":"An app shows a green “Saved” message after you submit a form, but the record is gone after a refresh. What does the Network tab most usefully tell you first?"}],"options":[{"text":[{"text":"Whether a request to the server was sent at all when you pressed the button."}],"correct":true,"tempting":null},{"text":[{"text":"Which database table the row should have been written into."}],"correct":false,"tempting":[{"text":"Expects the browser to know about the database; the browser never sees it, and the network view stops at the server’s door."}]},{"text":[{"text":"Whether the JavaScript that renders the message contains a bug."}],"correct":false,"tempting":[{"text":"Treats a display symptom as the cause. The message can be honest code fired at the wrong moment, which is a different fault from the one shown."}]},{"text":[{"text":"How much memory the page is using while the form is open."}],"correct":false,"tempting":[{"text":"Confuses performance instrumentation with the request record; memory says nothing about whether anything left the machine."}]}],"order":[3,0,1,2],"why":null},"prev":{"slug":"what-these-tools-actually-do","title":"What these tools actually do","minutes":8},"next":{"slug":"the-context-window-is-the-memory","title":"The context window is the whole memory","minutes":9}}}