Dinner Service · Lesson 03 of 10
A Form That Listens
Lesson 3 of Dinner Service: the difference between a page and an app is that someone's listening. Turn on your first local stove (a dev server), wire the card form to an ear, and watch your words come back from the other side.
Everything you built in First Kitchen — and step 1 of this project — is what a chef would call front of house: beautiful, but printed. A page is a printed menu: it can say anything, but slide your order across the counter and nothing happens. Nobody's back there.
An app is different because someone is listening. Today your comment card box gets its first ear: press the button, and a small worker of your own catches the card and answers back. This is the lesson where you cross from making pages to making apps — the actual threshold of this course.
What you'll plate today
Your card form, working: type a note, press the button, and get a thank-you page that reads your card back to you — proof it was heard. (Not yet remembered. That's next lesson, and the difference will be pointed.)
Ingredients
- Your
dinner-servicefolder, PLAN.md showing step 2 is next - The free Cloudflare account you've had since First Kitchen Lesson 6
- About 35 minutes
Cook
1. Order the ear
Cook step 2 of PLAN.md — make the card form actually work:
1. Set this project up to run on Cloudflare's platform (the same
free account I deployed with in First Kitchen) — but LOCAL
only today, on my machine. Explain what you're adding in one
plain sentence per file.
2. When a guest submits a card, receive it and respond with a
small thank-you page that shows their card back to them —
name and note — in my site's style.
3. No saving anywhere yet. That's step 3, and I want to feel
what's missing first.
The agent will add a couple of files and mention names like "worker" — the honest one-line translation: a worker is a tiny cook that lives behind your page and handles whatever the page sends back. Approve what it asks.
2. Turn on the stove
New thing, big moment:
Start the local server and give me the address to open. Also
tell me, in two lines: what is this server, and how do I stop it?
It will hand you an address like http://localhost:8787. Open it — and understand what changed. In First Kitchen your browser opened files, like reading a printed sheet. Now your browser is talking to a running kitchen on your own machine. It looks the same. It is not the same: the stove is on. (Its two-line answer should also tell you the off switch — usually Ctrl+C in the terminal. You learned in Lesson 8 to never run machinery you can't stop.)
3. Be your own first guest
Fill in the form. Name, a short note — "testing my own ear" — press the button.
There it is: a thank-you page, with your words in it, served back to you by your own worker. That round-trip — browser to worker to browser — is the whole architecture of most of the internet, and you just cooked one.
Taste and adjust like always:
The thank-you page is too plain — make it feel like a warm
receipt: 'Your card is in the box, [name]' with the note shown
like a small handwritten card. Match my style.
4. Now feel what's missing
Do this deliberately. Submit one more card. Then, in the terminal, stop the server (Ctrl+C) and start it again. Ask yourself: where did the cards go?
Gone. Both of them. The ear heard, answered warmly — and wrote nothing down. A listener with no notebook. Sit with that half-second of loss; it's the entire reason next lesson exists.
Mark step 2 done in PLAN.md with one line, note honestly that
cards are heard but not kept yet, and make a save point:
"step 2 — the ear".
When it burns
- The address won't open — the server probably isn't running; the terminal will say so. Ask: "the local address doesn't load — is the server up, and on which address exactly?"
- You opened the file instead of the address — if the address bar starts with
file://, that's the printed menu again; forms need the stove. Go to thelocalhostaddress the agent gave you. - "Port already in use" — a stove from an earlier session was left on. "Something is already using that port — find it, stop it, and restart cleanly."
- It asks to log in to Cloudflare — for local-only cooking it generally shouldn't need to; say "we're local today, skip anything that needs my account." Anything account-shaped waits for Lesson 5.
- It built saving/database already — the enthusiasm failure again. Restore the save point and re-order with "No saving anywhere yet" intact. Feeling the gap tomorrow is worth more than skipping ahead today.
Order up
□ The stove turns on — and you know how to turn it off
□ Submitting a card returns a thank-you page with your words in it
□ You know the address is a running kitchen, not an open file
□ You watched two cards vanish on restart — and know why
□ PLAN.md: step 2 done; save point made
Next up — Lesson 04: The Pantry. An ear that forgets isn't much of a host. Next lesson your project gets a real memory — a database, which sounds like the scariest word so far and is going to turn out to be shelves.
Stuck on a step? Question box below — a step that lost you is a hole in the lesson, not in you.