One tap crossed all of this.

You've written HTML, CSS and C, and SQL is coming next. Today is about the lines between them.

What you'll learn

• Follow one orderFrom the tap, through the API, into the database and back.
• Read a requestMethods, status codes and JSON, and where to see them.
• See why each part existsWhy frontend, API and database are kept separate.
• Find your way around a serverWhere apps run, the terminal, SSH, basic Linux and nginx.
• Follow a change to usersGit, code review, Docker and deployment.
• Find your placeWho does what on a team, and where you start.

You won't master these today. You'll see how they connect, and there's a quiz at the end.

Take the button apart

<article>
  <h3>Mechanical Keyboard</h3>
  <p>$89.00</p>
  <button id="buy">Buy</button>
</article>
      

article {
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .2);
  text-align: center;
}

button {
  padding: 14px 44px;
  border-radius: 10px;
  background: #1e1f22;
  color: #fff;
}
      

const buy = document.querySelector("#buy");

buy.addEventListener("click", async () => {
  const res = await fetch("/api/orders", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ productId: 3, quantity: 1 }),
  });

  const order = await res.json();
  buy.textContent = `Order #${order.orderId} placed`;
});
      

You can already read JavaScript

int total(int price, int qty) {
  return price * qty;
}

function total(price, qty) {
  return price * qty;
}

• Same braces, loops and if. No types to declare, and no malloc.
• It can change the page while people are using it.
• It can talk to a server without reloading the page.
• And there's no gcc step. So how does it run?

Two ways code gets to run

The line is blurry: V8, the engine in Chrome and Node.js, compiles JavaScript while it runs. TypeScript and Next.js add a build step before that. C# and Java sit in between, compiling to bytecode that a runtime then runs.

Why our team uses React

function BuyButton({ productId }) {
  const [status, setStatus] = useState("idle");

  async function buy() {
    setStatus("sending");
    await fetch("/api/orders", {
      method: "POST",
      body: JSON.stringify({ productId, quantity: 1 }),
    });
    setStatus("done");
  }

  return (
    <button onClick={buy} disabled={status === "sending"}>
      {status === "done" ? "Order placed" : "Buy"}
    </button>
  );
}

Every request gets one response

POST /api/orders HTTP/1.1
Host: shop.example.com
Content-Type: application/json

{"productId":3,"quantity":1}

HTTP/1.1 201 Created
Content-Type: application/json

{"orderId":194,"total":"89.00"}

• The first line says what you want, or how it went.
• Headers describe the message. The body carries the data, usually as JSON.
• The server forgets you between requests, so each one has to say who you are.

Send a real request

Choose a request.

Nothing sent yet.

The words you'll see every day

HTTPS sends these same messages, encrypted. That's the lock in your address bar.

An API route in Node.js

app.post("/api/orders", async (req, res) => {
  const { productId, quantity } = req.body;

  if (!Number.isInteger(quantity) || quantity < 1) {
    return res.status(400).json({ error: "Invalid quantity" });
  }

  const { rows } = await db.query(
    "SELECT price FROM products WHERE product_id = $1",
    [productId],
  );
  if (rows.length === 0) {
    return res.status(404).json({ error: "Product not found" });
  }

  const order = { productId, quantity, price: rows[0].price };
  const orderId = await saveOrder(req.user.id, order);
  res.status(201).json({ orderId });
});

The same job in other languages

@app.post("/api/orders", status_code=201)
def create_order(order: OrderIn):
    product = find_product(order.product_id)
    if product is None:
        raise HTTPException(404, "Product not found")
    return {"orderId": save_order(order, product)}

Route::post('/api/orders', function (Request $req) {
    $product = Product::findOrFail($req->productId);
    $order = saveOrder($product, $req->quantity);

    return response()->json(
        ['orderId' => $order->id], 201);
});

Route, check, database, respond. Learn those steps once and they carry over.

Your order becomes rows

BEGIN;

INSERT INTO orders (customer_id, order_date)
VALUES (7, CURRENT_DATE)
RETURNING order_id;  -- 194

INSERT INTO order_items
  (order_id, product_id, quantity, unit_price)
VALUES (194, 3, 1, 89.00);

COMMIT;

BEGIN and COMMIT make it all or nothing: you never get an order with no items.

Asking questions: SQL 101 starts here

SELECT p.name, oi.quantity, oi.unit_price
FROM order_items oi
JOIN products p ON p.product_id = oi.product_id
WHERE oi.order_id = 194;

• Never paste user input into SQL text. That's why the API route uses $1: it blocks SQL injection.
• MySQL and SQLite speak SQL too. MongoDB and Redis work differently, for different jobs.

The past: one program did everything

<h1>Your orders</h1>
<?php
$rows = $db->query("SELECT * FROM orders");

foreach ($rows as $row) {
  echo "<p>Order #{$row['order_id']}</p>";
}
?>

Plenty of this still runs today, so you may well meet it. It's simple, and it worked.

Now: separate parts that agree on HTTP

Web, mobile and desktop share one API, and each part can change and ship on its own.

Mobile: one app per OS, or one for both

Whichever you pick, the app still calls the same API.

Desktop: the same choice

Your web skills reach further than the browser.

The app is built. Where does it run?

Photos: Zarak Khan and Taylor Vick, on Unsplash

In practice, we rent a VM

What you actually get: a command line

So before anything else, you need the terminal.

The terminal: type instead of click

A server is just a computer

Your programs, running as processes

nginx Node.js Postgres

Linux kernel

Shares the hardware between processes

Hardware

CPU Memory Disk Network

• Bare metal means Linux installed directly on a physical machine.
• A cloud VM is a slice of a shared machine. Over SSH it feels the same.
• Ubuntu and Debian are distributions: the kernel plus tools and an installer.

Basic Linux: look around

Deploying by hand

nginx: the front door

Browser

nginx :443

Node.js :3000

Postgres

server {
    listen 443 ssl;
    server_name shop.example.com;
    # certificate paths go here

    root /var/www/shop;

    location /api/ {
        proxy_pass http://127.0.0.1:3000;
    }
}

All of this was set up by hand. Do it again on a second server, and the two slowly stop matching.

From recipe to running app

FROM node:22-slim
WORKDIR /app
COPY package*.json ./
RUN npm ci --omit=dev
COPY . .
CMD ["node", "server.js"]

Compose runs the whole system

services:
  api:
    build: ./api
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgresql://shop:${DB_PASSWORD}@db:5432/shop
    depends_on:
      - db

  db:
    image: postgres:16
    environment:
      POSTGRES_USER: shop
      POSTGRES_PASSWORD: ${DB_PASSWORD}
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

Five minutes on a server

Terminal, SSH, Docker and HTTP status codes, all in one everyday task.

Git remembers every change

• A commit is a saved snapshot, with who made it and why.
• A branch lets you work without touching what everyone else is using.
• If a change breaks something, you can see exactly what changed and undo it.

Working on a team

• Keep changes smallA 50-line pull request gets a real review. A 2,000-line one gets a shrug.
• Write down whyThe code shows what changed. Your commit message explains why.
• Ask earlyStuck for 30 minutes? Say what you tried, then ask.
• Review comments are about the codeEveryone gets them, including the most senior people.
• Never commit a secretGit remembers everything, including the password you deleted later.
• Read other people's codeIt's the fastest way to learn how this codebase works.

The whole picture

You've now seen every box and line. The Server box is the VM we rent.

Everything on one page

Building the app

FrontendHTMLCSSJSReact HTTPRequestsStatus codesJSON BackendNode.jsAPI routesChecks DatabasePostgresRowsSQL Mobile and desktopKotlinSwiftFlutterElectron

One tap on Buy

Running and shipping it

Where it runsYour PCData centerCloud or VPS Terminal and SSHCommandsSSHKey pairs Linux and deploymentLinuxUbuntunginx DockerImagesContainersCompose Git and teamworkCommitsPull requestsDeploys

Every part of the map is someone's job

• FrontendReact and Next.js: what people see and tap.
• Mobile and desktopThe apps on phones and computers.
• BackendThe API and its rules.
• DataSchemas, queries and reports.
• DevOpsContainers, servers and deploys.
• QAFinding what breaks before users do.

You don't have to pick yet. Full-stack developers cross these lines every day.