Your First Live Web App

Learn the three parts of an app, then put yours where anyone can reach it.

Kevin Lenida

Start time

The link works on everyone's phone, not just yours.

The problem

Two places an app can live

On your computer

Only you can open it.
It stops when you close the laptop.
You cannot send it to anyone.

On the internet

Anyone with the link can open it.
It runs without your laptop.
You send one link.

What we build

One poll, one link

One question — and four possible answers.
One link — everyone in this room opens the same one.
One screen — the count moves here as you vote.

Keep this app in mind. The three parts we name next all belong to it.

01

The Three Parts

Three parts, and what each one is for.

Three Parts

The path one vote takes

Three Parts

What each part does

Frontend — the part you see. It sits on their phone, so you cannot hide a secret there.
Backend — the part that thinks. Visitors cannot change it, so your rules live there.
Database — the part that remembers. It keeps the votes after everyone leaves.

You need all three. Drop one and the app cannot work.

Three Parts

You do not always need all three

Frontend only — nothing to remember, nothing to hide. A menu, a portfolio, a calculator.
Frontend and backend — you hold a secret or a rule, but you store nothing. A form that emails you.
All three — something must survive after the visitor leaves. Votes, bookings, accounts.

Add a part only when you must. Our poll needs all three, because the votes must survive.

02

Meet Cloudflare

Who they are, and what they call the three parts.

Meet Cloudflare

What Cloudflare is

A network of computers — Cloudflare runs them in hundreds of cities.
It keeps websites fast and safe — this is what most people know it for.
It also runs your code — the same computers can host your own app.

We use Cloudflare because it gives you all three parts in one place, and today it costs nothing.

Meet Cloudflare

Not the only one

You may know Vercel or Netlify — they solve the same problem.
You can build all three parts on any of them — the page, the backend, and the database.
We use Cloudflare today — one tool does all of it, and the free plan covers a room this size.

What you learn today carries over. Only the names change.

Say this quickly and move on — it is an anchor, not a debate. A good part of the room has heard of Vercel or Netlify, and if you never name them, they spend the next twenty minutes quietly wondering how this relates. Name them once and that question is closed. Be fair about it: all three are good, and Netlify and Vercel are genuinely nicer if you are already deep in a framework like Next. If anyone presses on the database, the precise answer is that only Cloudflare's is its own — D1 is Cloudflare's product on Cloudflare's machines. Netlify brands theirs as built in but runs Neon underneath, and Vercel does not make one at all; it hands you Neon or Upstash through its marketplace and fills in the credentials for you. All of that is one command on any of the three, which is why the slide says you can build all three parts anywhere. Our reason is narrow — one tool from start to finish, and the most room on the free plan for a room this size. If somebody asks which is best, the honest answer is that for this app it does not matter, and the three parts you just learned are the same everywhere.

Cloudflare Names

The same path, renamed

Cloudflare Names

Pick the right store

D1 — a table you can ask questions of. Count, sort, filter.
KV — one value for one name. Very fast to read, slow to update.
R2 — files. Photos, uploads, video.

We use D1. We must count votes, and the count must be right at once.

03

What You Need

Set it up one time. Then never think about it again.

What You Need

Three things, one time

A Cloudflare account — free. An email address and a password.
Node.js — one installer. Wrangler needs it to run.
Wrangler — Cloudflare's command tool. Install it once, then log in through your browser.

Install Wrangler once for the whole computer, not for each project. Then forget it.

Shorter than the Xcode list from the Mac session, and all three are free. On the Wrangler point: many guides tell you to install it inside each project folder. Ignore that. For us, one global install means the same short command works everywhere and nobody gets stuck because they forgot a setup step in a new folder. The one cost of a global install is that it goes out of date, and Wrangler tells you itself when a new version is out — you re-run the same install line and you are current. Give people two minutes here to confirm they have an account before the build, and make them run the login too. That is the step that quietly stalls a room: they install Wrangler, then the first real command pops a browser window they were not expecting, or fails outright because nobody signed in. It is one command, it opens Cloudflare in a browser, they click Allow, and it is done for good on that machine.

What You Need

Only one of these deploys your app

Wrangler — builds your app and sends it out. This is the one you use today.
A Cloudflare MCP — lets your AI agent read the docs. Some can change your account too.
The Cloudflare API — what scripts use when no person is there. The other two call it underneath.

Guides mix all three and that is why they confuse people. Today, only Wrangler runs.

This slide is here because it confused me, and I have been doing this for a while. All three reach the same Cloudflare, which is exactly why guides swap between them without telling you. The rule that sorts it out: Wrangler is the only one that understands what an app is — it packs your files, sets up the database, and ships it. The MCP is not for you at all, it is for your AI agent. Be careful how you describe it: Cloudflare publishes several, and while one only searches the documentation, another can reach the live API and create DNS records or delete a bucket. So it is not a harmless lookup tool across the board. The API is the raw way in, and the honest framing is that Wrangler and the MCP are both just friendlier wrappers around it. You reach for it directly when no person is present — a scheduled job, a script on a server — because Wrangler signs you in through a browser and a cron job has no browser. To call the API you need an API token, which is a password you generate once. That is worth naming out loud only because guides at home will tell them to create one; for today's kind of build they can stop right there.

What You Need

What the free plan gives you

The page — unlimited visits. Files cost nothing at all.
The backend — 100,000 requests a day.
The database — 5 GB of storage, and 5 million reads a day.
The web address — a free one, on workers.dev.

You do not enter a card. Correct as of August 2026.

People assume a database and a server mean a monthly bill, and that assumption stops them from ever trying at home. Kill it here. Notice the list follows the same three parts they already learned, so read it that way. Put the numbers in human terms: our poll will use a few thousand requests out of a hundred thousand, which is more than most small businesses see in a month, and one vote takes about fifty letters of space against five gigabytes. The first line is worth a beat on its own — serving the page is free no matter how many people open it, because only code that runs costs anything. A domain of your own does cost money, but nobody needs one today. The one real limit to know is that the free plan also caps how much data you read per day, so do not leave a page open forever refreshing on a phone in a pocket — we build ours to stop asking when the screen is off. And date the claim out loud, because pricing changes and this deck will outlive the week.

04

Build It Live

We build the poll now. Then you all vote from your seats.

Build It Live

How the live part works

The poll open on a phone, with four options and a bar for each

You open the link. You tap one option. The count moves on this screen.

Build It Live

You describe it. Claude builds it.

Kevin

Build a poll. One question, four options. Everyone in this room votes from their phone, and the count updates on the screen. Put it on the internet.

Claude

Done. The page people see, the code behind it, and a database for the votes. It is live — here is the link.

Recap

What we covered

An app has up to three parts: a frontend, a backend, and a database.
Cloudflare calls the three parts Static Assets, a Worker, and D1.
Choose D1 for records, like votes or bookings.
Wrangler builds your app and sends it out. You need nothing else today.

Your turn

Before next session

Change one thing in your poll. New question, new options, new colours.

Send the link to three people who were not in this room.

Watch the count move from your own phone.

Remember: the link is the proof. If a stranger can open it, you shipped it.

Your app needs three parts. Cloudflare gives you all three for free.

Now go send somebody a link.