What happens when you tap Save

One tap, eight steps

Full-stack work is about connecting the layers, so you must know the whole path of one request. Let us follow a single tap on Save in our Notes app, from the finger to the database and back.

1. The click: you tap Save. A JavaScript function in the frontend runs.
2. JavaScript builds a request: method POST, address /api/notes, and the note as JSON in the body.
3. DNS lookup: the browser turns the name (like notes.example.com) into an IP address, the number that identifies the server on the internet.
4. HTTPS connection: the browser and server agree on encryption, so nobody in between (for example on public Wi-Fi) can read or change the data.
5. The server route: the backend finds the code for "POST /api/notes", checks you are logged in and checks the title is valid.
6. The SQL query: the backend runs an INSERT to store the note, and the database returns the new row.
7. The JSON response: the server answers with a status code (201 Created) and the saved note as JSON.
8. The screen updates: the frontend reads the JSON and adds the note to your list.

Steps 1 and 2: the click builds a request

JSON (JavaScript Object Notation) is a text format for data, written like a JavaScript object: { "title": "Exam dates" }. Both sides understand it, so the frontend and backend use it to talk. The browser function fetch sends the request.

async function saveNote(title, body) {
  const res = await fetch('/api/notes', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ title, body, pinned: false }),
  });
  const note = await res.json();
  return note;
}

Steps 3 and 4: finding the server and locking the line

DNS (Domain Name System) is like the contacts app on your phone: you tap a name, and it finds the number. Browsers and your internet provider remember recent answers, so this step is often instant. HTTPS is HTTP (the language of web requests) with encryption added. The padlock in the address bar means the connection is encrypted.

Steps 5 and 6: the server route and the SQL query

A route is a piece of backend code linked to one method and path. In Express (the Node.js backend library we use) it looks like this. You will write real routes in module 3; for now, just read it.

app.post('/api/notes', async (req, res) => {
  const title = (req.body.title ?? '').trim();
  if (title === '') {
    return res.status(400).json({ error: { code: 'VALIDATION_ERROR', message: 'Title is required' } });
  }
  const note = await db.insertNote(req.user.id, title, req.body.body ?? '');
  res.status(201).json(note);
});

INSERT INTO notes (user_id, title, body, pinned, created_at, updated_at)
VALUES (1, 'Exam dates', 'Maths on 12 March', 0, '2026-03-01 10:00', '2026-03-01 10:00');

Steps 7 and 8: the response and the screen

Every response starts with a status code: a three-digit number that says how it went. The first digit tells the group. You will meet these again and again.