Example Project
A real build, start to finish.
This appendix shows one real project built from scratch. Every blueprint, every prompt, every iteration, every mistake. Nothing cleaned up or prettified.
The project: A simple workshop RSVP tool.
Why this project: It\'s small enough to follow but real enough to be useful. It involves a form, data display, and some basic logic. It\'s the kind of thing someone might actually need - and the kind of thing that would have required hiring a developer five years ago.
Timeline:
- Total time from idea to deployed: 47 minutes
- Iterations: 6
- Times I wanted to scream: 2
- Final result: Working app with real URL
Here's exactly what I wrote before opening Claude:
My Blueprint
I want to build: A simple RSVP page for my AI workshop. People enter their name and email, click submit, and get added to a list. When spots fill up (max 20), new people go on a waitlist.
It's for: People who want to attend my workshop. They need a fast, simple way to sign up without creating accounts or jumping through hoops.
Main actions: 1) Enter name and email, 2) Submit registration, 3) See confirmation, 4) See current count of spots remaining.
It should look like: Clean and simple. One page. Maybe teal and white. Nothing fancy.
For v1, keep it simple: Don't worry about admin dashboard, email confirmations, or payment. Just capture names and show the count.
Notice what\'s specific: Max 20 spots. Waitlist after that. Name and email only. One page. Teal and white. These specifics mean Claude won\'t have to guess. The more guessing, the more iterations.
I copied my blueprint directly into Claude. Here's the actual conversation:
You:
I want to build a simple RSVP page for my AI workshop. People enter their name and email, click submit, and get added to a list. When spots fill up (max 20), new people go on a waitlist. It\'s for people who want to attend my workshop. Main actions: enter name/email, submit, see confirmation, see spots remaining. Clean and simple, one page, teal and white. For v1, don\'t worry about admin dashboard, email confirmations, or payment. Just capture names and show the count.
Claude:
I\'ll create a clean RSVP page for your AI workshop. Here\'s a simple, single-page solution with teal and white styling that handles registrations and waitlist logic... [Claude then produced an artifact with a working form]
The first version appeared in about 30 seconds. It had:
- A form with name and email fields
- A submit button
- A counter showing "20 spots remaining"
- Teal and white colors
It also had problems.
The first version worked but looked... off. The spacing was weird, the button was tiny, and the success message appeared in a way that felt jarring.
You:
This is close but a few issues: 1) The button is too small - make it wider and more prominent. 2) When someone submits, the success message just appears suddenly. Can it fade in or something smoother? 3) The spacing between the form and the counter feels cramped. Add more breathing room.
Claude:
Good feedback! I'll adjust the button size, add a smooth fade-in animation for the success message, and increase the spacing... [Updated artifact appeared]
What worked here: I was specific about three exact problems. I didn't say "make it look better" - I said exactly what was wrong and what I wanted instead. Specific feedback gets specific fixes.
The visual stuff was fixed. Then I actually tested it.
I submitted a test registration. Counter went from 20 to 19. Good.
I refreshed the page. Counter was back to 20.
The data wasn\'t persisting. This is a common issue with artifact previews - they don\'t save data between sessions.
You:
I tested it and found a problem. When I submit a registration, the counter goes down. But when I refresh the page, it resets to 20. The registrations aren't being saved anywhere. For the artifact preview, can we at least simulate persistence within the session? And make a note that real deployment will need actual storage.
Claude:
You\'re right - the current version only stores data in component state, which resets on refresh. For the artifact, I\'ll use localStorage to persist within the browser session. For real deployment, you'd want a database. Let me update it... [Updated artifact with localStorage]
This is normal: Finding bugs when you test is not failure. It's the process. Every app has bugs in early versions. The skill is catching them and describing them clearly.
With the core working, I noticed smaller things:
You:
Two more things: 1) Can we add validation so people can\'t submit empty fields or invalid emails? 2) The waitlist message should look different from the regular confirmation - maybe a yellow/warning style so people know they\'re not confirmed yet.
Claude:
Absolutely. I'll add form validation that checks for required fields and valid email format before allowing submission, and style the waitlist confirmation differently...
You:
Actually, one more thing - can you add a subtle animation when the spots counter updates? Right now it just changes instantly. A little number flip or something would feel more polished.
Claude:
Nice touch! I'll add a subtle scale animation when the counter updates...
At this point, the artifact was actually good. Clean, functional, polished. Time to make it real.
The artifact worked in Claude's preview. Now it needed to live on the actual internet.
I switched from Claude.ai to Claude Code (the terminal version) for this part. Here's what I said:
You:
I have a working artifact for a workshop RSVP page. I need to deploy it as a real website. Can you: 1) Create the proper file structure for a React app, 2) Set up a GitHub repo called "workshop-rsvp", 3) Help me deploy to Vercel? I have accounts on both GitHub and Vercel already.
Claude:
I'll help you deploy this. Let me create the project structure first... [Claude Code created files, initialized repo, pushed to GitHub]
The actual deployment:
- Claude Code created 4 files
- Pushed to GitHub (took about 2 minutes)
- Connected Vercel to the repo (I clicked 3 buttons)
- Vercel auto-deployed in about 60 seconds
Final URL: workshop-rsvp.vercel.app
That's a real website. On the real internet. That I built without writing code.
What I ended up with:
| Total time | 47 minutes from blank page to live URL |
| Iterations | 6 rounds of feedback |
| Code written | Zero. Claude wrote all of it. |
| Cost | $0 (free tiers of everything) |
| Result | Working RSVP page I actually used for a real workshop |
The messy parts I left out: At one point I got confused about which file was which. I had to ask Claude to explain what was happening twice. I accidentally closed a tab and lost some work. This is normal. The polished result hides the messy middle. Don\'t compare your messy middle to someone else\'s polished result.
What I Learned From This Build
1. The blueprint matters more than you think.
Having specific details (20 spots, waitlist, teal/white) meant fewer iterations. Vague blueprints mean more back-and-forth.
2. Test early and often.
I found the persistence bug because I actually clicked through the app. Don't just look at it - use it.
3. Small feedback is better than big rewrites.
Instead of "start over," I said "fix these three specific things." Faster, less frustrating.
4. Deployment is easier than you expect.
I was nervous about the GitHub/Vercel part. It took 10 minutes and was mostly clicking buttons.
5. "Good enough" ships. Perfect doesn't.
I could have kept tweaking forever. Instead, I shipped when it worked. I can always improve it later.
Your turn: This was my project. Yours will be different - different idea, different problems, different iterations. But the process is the same: blueprint, first conversation, iterate, deploy. You've seen it work. Now do it yourself.