Code Map
A visual reference for where things live and how data moves through your app.
Your app is a stack of layers. Code runs in one layer, talks to the next, and data flows between them. Click any layer to see what's inside.
- HTML — The structure. Headings, paragraphs, buttons, form fields. What elements exist on the page.
- CSS — The styling. Colors, spacing, fonts, layout. How elements look and are arranged.
- JavaScript — The behavior. When a user clicks, scrolls, or types — JavaScript decides what happens next. This is where
variables,functions,events, andconditionalslive. - TypeScript — The safety check. Runs before your code ships — catches type mismatches, misspelled field names, and wrong data shapes. The browser never sees TypeScript directly; it gets converted to JavaScript first.
request ↓ ↑ response
fetch()— The function that sends a request from the browser to the server. You'll see this in almost every app.- Request — What gets sent: a URL (
/api/lead-intake), a method (POST,GET), and a body (the data, as JSON). - Response — What comes back: a status code (
200= success,500= error) and data (also JSON). - JSON — The format data travels in. Looks like a JavaScript object, but it's just text.
JSON.stringify()packs it up,.json()unpacks it.
request ↓ ↑ response
- Routes — URLs the server responds to.
/api/lead-intakeis a route. Each route has a file that handles it. - Server functions — The code that runs when a route is hit. Receives the request, does the work, sends back a response.
- Environment variables — Secrets the browser can never see: API keys, database passwords, service tokens. Stored in
.envfiles or your hosting dashboard. - Middleware — Code that runs before the route handler. Checks authentication, validates headers, logs requests.
query ↓ ↑ result
- Tables — Like spreadsheets. One per entity:
leads,cases,users. Each table has a defined shape. - Columns — The fields.
first_name(text),is_active(boolean),created_at(timestamp). Every column has a name and an enforced type. - Rows — Individual records. Each row is one lead, one case, one user.
- Types — Enforced by the database. If a column is
integer, you cannot put text in it. This is the strictest type checking in your entire stack. - RLS (Row Level Security) — Rules about who can see or change which rows. A user can only see their own records, for example.
Follow one click from the moment the user taps a button to the moment the screen updates. Click any step to see what happens inside.
The browser is always listening. When the user clicks a button that has an event listener, the browser automatically creates an event object with details: what type of event, which element was clicked, when it happened.
→
The event triggers your handler function — the function you connected to that button with
addEventListener. It runs automatically.
→
Your handler function executes line by line. It may call other functions. Everything it needs to do is defined in this function or imported from elsewhere.
→
Variables grab values from form inputs and current state. For example:
const name = nameInput.value. All the pieces get collected into one object.
→
Conditionals check the data before sending. Is the email valid? Is a required field empty? If something fails, the function stops here —
return exits early and shows an error.
→leaves browser
fetch() packages the data as JSON and sends it over the network to the server. This is an async operation — it takes time, so the code awaits the response.
→
The route handler receives the request, validates the data again (never trust the browser), applies business logic, and prepares a database query.
→
An
INSERT, SELECT, UPDATE, or DELETE runs against your tables. The database checks types and RLS rules, then returns the result.
→returns to browser
The database result flows back to the server, which packages it as a JSON response. The browser receives it, and
.json() converts it back into a JavaScript object.
→
JavaScript updates what the user sees: a success message, a new row in the table, a redirect to another page. The cycle is complete.