Week 6 — Build Your Real Product
Sign in
Week 6 — Build Your Real Product
From "I could build that" to a URL other people use.

Adventure 8

Adventure II — The Arc
Where We Are
01
W1 — An LLM is a next-word predictor
02
W2 — Inside it — tokens, attention, transformers
03
W3 — Prompt engineering — sampling + 5 patterns
04
W4 — Agents — give the LLM tools
05
W5 — MCP — standardize the tools
06
W6 (today) — Ship something real.

Adventure 8

Today's Outcomes
What You'll Know in 3 Hours
By the end of today, you can:
Write a one-page PRD that's actually a PRD
Wireframe a product so the bad ideas die on paper, not in code
Run a 1-day spike to test the riskiest piece BEFORE committing
Pick a sane tech stack without agonizing
Ship a real URL with a working deploy pipeline
Scope a multi-month project you'll actually finish

Adventure 8

The Deal — 3 Ground Rules
1
Ship beats polish
Empty URL today > perfect URL never
2
PRD on paper, not in your head
If you can't write it, you don't understand it
3
Pick a real problem
Not "AI tutor for everyone," but "something for your sibling"

Adventure 8

Warm-Up
Before We Start — Quick Calibration
Three questions to think about before we dive in:
What's something you wish existed but doesn't?
What's the difference between a "demo" and a "product" in your own words?
If you had to ship something in 4 weeks — what would you cut from your idea?

Discuss with the person next to you. No right answers — just get your brain moving.

Adventure 8

The Gap That Kills Most Projects
A demo works for you, on your laptop, with the input you tested.
A product works for other people, on their devices, with inputs you didn't think of.

90% of "almost shipped" projects die in this gap.

Adventure 8

Demo vs Product

Demo
Product
Users
You
Strangers
Inputs
What you tested
Anything imaginable
Errors
"Oh well, restart"
Real users blame you
Cost
Free or trivial
API calls × users = $$$
Speed
Whenever you have time
Continuous. Bugs at 2am.
Privacy
Just your data
You hold others' data
Onboarding
You already know how
First-timer gives up in 8 seconds

Adventure 8

The 7 Things That Change With Real Users
1
Unhappy paths suddenly matter
What if the user types nothing?
2
Cost suddenly matters
API × users
3
Privacy suddenly matters
Whose data are you holding?
4
Onboarding suddenly matters
The empty state IS your product
5
Reliability suddenly matters
Down for 2 hours = bad
6
Communication suddenly matters
Where do users send bug reports?
7
Speed suddenly matters
Slow = abandoned

Adventure 8

Knowledge Check 1
You shipped a demo. 10 friends start using it.
You shipped a demo of an AI homework helper. 10 friends start using it.
Predict: which one of the 7 things from the previous slide is most likely to bite you in week 1?

No wrong answers. Reason out loud. Discuss with the person next to you — then we'll share.

Adventure 8

The One-Page PRD
A PRD (Product Requirements Document) is the discipline of writing what you're building. Not how. What and why.

If you can't fit it on one page, you don't understand the problem yet.
The PRD is the single most useful thing you'll write before touching any code.

Adventure 8

PRD Template
The 5-Section Template

Adventure 8

Example PRD
Example PRD — QuizDrill
Problem
9th graders take quizzes once and never review. A week later, it's gone.
Solution
A web app that takes a class quiz and lets you re-do it as phone flashcards with spaced repetition.
User Journey
  1. Student uploads a quiz photo (or pastes questions)
  1. App extracts questions via LLM, asks for the right answers
  1. App drills the student over 14 days, spacing reviews by accuracy
In Scope ✅ / Out of Scope ❌
  • ✅ Photo OCR, phone-friendly flashcards, spaced repetition
  • ❌ Sharing quizzes (v2)
  • ❌ Teacher dashboards (v3)
  • ❌ Fill-in-the-blank (start with MC only)
Success Metric
Student scores 90%+ when re-taking after 14 days.

Adventure 8

📘 Concept Card
PRD
What: A one-page doc defining what you're building and why, before any code.
Like: A blueprint for a house. You don't pour concrete before knowing if it's a bungalow or a mansion.
Why it matters: Writing the PRD reveals which parts of your idea you can't actually answer yet. Better discovered on paper than after a week of coding.

Adventure 8

Practice — 5 Minutes
Write One Paragraph of YOUR PRD
Pick the most concrete idea in your head right now.
Write Section 1 — the Problem. Be specific:
  • Who has this problem? (Name a real person if you can)
  • What's the actual pain?
  • Why does it hurt?

If you can't write a tight paragraph, you don't have an idea yet — you have a vibe.

Adventure 8

Wireframe — Sketch Every Screen
A wireframe is a sketch of every screen of your product. Boxes, labels, arrows. No styling. No code.
Tools: paper, whiteboard, Excalidraw, Figma. Doesn't matter.
What matters: you sketch every screen before writing any code.

Adventure 8

Why Wireframing Catches Bad Ideas
When you draw the screen, you notice things text can't capture:
"How does the user actually start a session?"
"Where does the photo upload go after they take it?"
"What does this look like before they've added any data?"
"What if the LLM fails to read the photo?"

Each "oh, I don't know" is a question you'd hit AFTER 4 days of coding. Better to hit it in 20 minutes.

Adventure 8

The Empty State — Your Most-Leaked Screen
For every screen, draw two versions:
Empty State
First-time user — no data yet

Most builders forget this one entirely.
Loaded State
The user has stuff

This is the one everyone designs.
New users see the empty state first. That's the screen that decides whether they stay or leave.

Adventure 8

📘 Concept Card
Empty State
What: What a screen looks like to a brand-new user before they've added any data.
Like: A new restaurant on opening night. If it looks "empty and confused," nobody enters.
Why it matters: This is the screen that decides if a new user stays. Most builders forget to design it. Don't.

Adventure 8

The Spike
A spike is a 1-day experiment to prove the riskiest technical part works before you commit.
✅ It works
Green light — build for real
❌ It doesn't
You found out in 1 day, not 1 month

This is the single most valuable engineering habit you can build.

Adventure 8

How to Identify Your Spike
Ask: What's the one thing that, if it didn't work, would kill the project?
Examples:
  • "Can the LLM reliably read a photo of handwritten quiz questions?"
  • "Will the speech-to-text be accurate enough for accents?"
  • "Will the model classify these emails the right way 90%+ of the time?"

If you can't name your spike, the project isn't well-scoped yet.

Adventure 8

Verdicts After a Spike
After 1 day on your spike:
✅ It works
Green light — start building for real
⚠️ Sort of works
Constrain the problem until it does? ("typed quizzes only, no handwriting"?)
❌ It doesn't work
Pivot or pick a different project

You're not allowed to start a real project without doing the spike.

Adventure 8

📘 Concept Card
Spike
What: A 1-day experiment to test whether the riskiest technical piece works.
Like: Drilling a test hole before building a well. Cheap to drill, expensive to find out after construction.
Why it matters: Most failed projects could have been killed in 1 day. Do the spike.

Adventure 8

Knowledge Check 2
Announcements Podcast → 100-Word Summary
You want to build: "An AI that turns my school's daily announcements podcast into a 100-word text summary I can read on my phone."
Predict before flipping:
  • What's your spike?
  • What's the smallest experiment to test it?
  • What inputs would you run it on?

Think it through first. Then discuss with the person next to you.

Adventure 8

Pick a Boring Stack
Once spike says green, pick your stack. Don't agonize. Boring is right.
A "boring stack" =
Proven
Thousands of products already use it
Well-documented
Every error you'll hit has been answered on Stack Overflow
Free tier for hobbyists
You shouldn't pay to learn
Easy to deploy
Push → live in 1-2 minutes

Adventure 8

Your Default Stack
The Default Stack for Beginners
Layer
Pick
Frontend
Plain HTML/CSS/JS, or one Next.js page
Backend
Cloudflare Pages Functions / Vercel Functions
LLM API
Whichever you're more comfortable with (Claude or OpenAI)
Storage
Start with NONE. Add D1/KV when needed.
Auth
NONE for v1. Add magic link or Google when users ask.
Deploy
GitHub → Cloudflare Pages, auto-deploy on push
This entire site (ai.ethanxi.com) uses exactly this stack. Works great.

Adventure 8

Don't Agonize — Ship
Engineering budget is finite.
✅ Spend it on
  • Features users actually see
  • Making the thing work
  • Improving based on feedback
❌ Don't spend it on
  • Config fighting your stack
  • Learning a trendy framework you don't know
  • Premature optimization

Picking a trendy framework you don't know costs 2 weeks. Picking the boring one costs 0. The boring one wins.

Adventure 8

Cost as a Real Feature
Going from 1 user to 100 users can multiply your API bill 100×.
Scale
Cost
1 user × 10 calls/day × $0.01
$0.10/day → free tier
100 users × 10 calls/day × $0.01
$10/day → $300/month
1,000 users × ...
$3,000/month
Watch:
  • Are you using a more expensive model than needed?
  • Are you caching repeat queries?
  • Is there a max_tokens cap so one user can't burn $100?

Cost is not "engineering minutiae." Cost is a feature.

Adventure 8

Ship the Empty URL FIRST
Here's the trick that separates real builders from forever-planners:
Before you write any real product code:
01
Create the GitHub repo
5 minutes
02
Connect it to Cloudflare Pages
5 minutes
03
Push an index.html that says "Hello, world. Coming soon."
1 minute
04
Get the real URL working before you have anything to show

Adventure 8

Why This Works
Most builders save deployment for "after I'm done."
Then deployment hits unexpected snags exactly when you're burned out and want to launch.
If you ship the empty URL first, you have:
A real URL you can share
A working deploy pipeline
Every push → live in 1-2 min
Zero deploy anxiety
All "is the deploy hard?" worry = gone
The project feels real
That matters more than you think

When the real product is ready, you git push and it's live.

Adventure 8

Hands-On — 30 Minutes
Practice — Set It Up Right Now
01
Create a new GitHub repo
Any name works
02
Add a one-page index.html
"Coming soon — [your project name]"
03
Sign in to Cloudflare Pages
04
Connect the repo
05
Deploy
06
Open the real URL on your phone

You now have a deploy pipeline. Use it for every future project.

Adventure 8

When Real People Show Up
Things you didn't think to handle:
A user types nothing and clicks submit
What happens?
A user uploads a 50MB photo
Does it crash?
A user opens it on a phone in landscape
Does the layout break?
A user is on a slow connection
Does the page just sit blank for 8 seconds?

Each is a 30-second fix you could make today if you knew. The product is full of them.

Adventure 8

Privacy When Other People's Data Is Yours
Other people's data is in your system now. Even their questions reveal things about them.
Treat it carefully:
  • Don't log anything you wouldn't want public
  • Don't send their data to a third party unless you said you would
  • Let them delete their data on request
  • If under 13: even more caution (COPPA-friendly defaults)

You didn't just build a tool. You accepted responsibility for someone else's data.

Adventure 8

Cost When Users Multiply
Scale
Reality
1 user × 10 API calls/day × $0.01
$0.10/day → free tier ✅
100 users × 10 API calls/day × $0.01
$10/day → $300/month 💸
1,000 users × ...
$3,000/month 🚨

You're not done with cost just because the demo is "free." Watch the multiplier.

Adventure 8

How to Pick a Multi-Month Project
Best projects have ALL three:
1
A problem you actually have
OR a problem one specific person you know has — keeps motivation real
2
Small enough to demo end-to-end by week 4
Fast progress visible
3
Boring enough you're not over-attached
You can ship a bad v1 and improve

Adventure 8

What NOT to Pick
❌ Don't pick
Why
"AI tutor for everyone"
Too broad — no specific user
"Better Notion / better Claude"
Too big — fighting billion-dollar products
"Something I'd never use myself"
You'll lose motivation in week 3
"The most ambitious idea I can think of"
Ambition kills more first projects than bad ideas

Adventure 8

How to Stick With It
Weekly demo to someone
Parent, friend, classmate. Just showing it creates accountability.
Ship one improvement per week
Even tiny. The streak is the point.
Write 3 lines of journal per session
Reading old entries is huge motivation.
Let yourself release a bad v1
Perfectionism kills more projects than bad ideas.

Adventure 8

When to Stop
A project is done when:
  • You're proud of what's there, even if more could be added
  • You've learned what you set out to learn
  • The next features feel like a job rather than play

Then ship a v1 announcement and start the next one. Builders who keep building beat builders who polish forever.

Adventure 8

Capstone — The Final Hands-On
Your 7-Step Capstone
01
Pick a problem
On paper
02
Write a one-page PRD
03
Wireframe every screen
Empty AND loaded states
04
Identify the spike
"If this doesn't work, project dies: ___"
05
Do the spike
1 day, 1 script, 5 real inputs
06
Set up the deploy
Empty URL → live URL
07
Tell one person what you're building
Every product in the world started this way. You now know how.

Adventure 8

Tell Someone
Saying it out loud commits you.
  • Tell a parent, friend, classmate
  • Share the empty URL
  • "I'm building X. It'll do Y. It'll be ready around Z."

Notice how this changes your motivation immediately.

Adventure 8

Hands-On — Now
Start Your Spike NOW
For the rest of class:
01
Pick your spike
02
Write the script
03
Run it on 5 real inputs
04
Decide: go / pivot / kill

Don't wait. Now.

Adventure 8

Adventure II — Complete
What You Can Do Now
Six weeks ago, "AI" was a chatbox you typed into. Now:
  • ✅ You can explain how an LLM produces words — at the math level
  • ✅ You can read a prompt and predict if it'll work
  • ✅ You can spec an agent system on paper and predict its failures
  • ✅ You can plug a new MCP server into Claude Code in 10 minutes
  • ✅ You can write a PRD that's actually a PRD
  • ✅ You can ship a real URL with a deploy pipeline
  • ✅ You can scope a multi-month project — AND have a real shot at finishing it
The Adventure ends. Your real work begins.

Adventure 8

What's Next After Adventure II
There's no Adventure III yet — because the next step is yours.
If you want a structured path:
Workshop: How to Build a Website
Natural follow-up — deep-dive on the deploy chain
Adventure I (AI Agents)
Its own track — builds a real assistant on your own server
Your own project
See Slide 38. This is where the real growth is.

Whatever you pick: ship something this month. The empty URL trick works. Tell one person. Then keep going.

You've got this.

Adventure 8