▶Watch the video first18 min · optional
The video explains why each prompt is worded the way it is. The page has everything you need to build without it.
Get ready
five minutesSame rhythm as every Builder School tutorial: paste the context once, send each prompt on its own, tick the checks before the next one. Some tutorials need one prompt, some need eight; the page always tells you how many. The only thing that changes on the web track is where you check: a real browser on your phone and on your computer.
npx create-next-app@latest part-01-shorty --example https://github.com/skorkoyah/web-kit/tree/v0
cd part-01-shorty
npm run dev
Ready when…
The build
one prompt at a timeSlice 1: The form
Make the home page of a link shortener called Shorty. One text box for a long link, one button that says "Shorten". When I press it, show the short link underneath with a "Copy" button, and clear the box. If the link isn't a real web address, say so in plain words under the box, and don't shorten it.
Done means: I paste a link and press Shorten, and see a short link with a Copy button; I type "hello" and press Shorten, and see a plain-words message and no short link.