Workshops 1 and 2 were about thinking. Today is about making and shipping. You'll use AI to build a working prototype of your idea, deploy it to a real URL, and submit it for review. You will spend at least 75% of today's time building, not writing. There are only two short forms to fill in — everything else is practical guidance.
Prerequisite: Complete the Vibe Coding Self-Study Module (between W2 and W3) before arriving. You need Claude.ai, Bolt.new, and GitHub accounts ready, and at least one practice artifact under your belt. Without this, you will fall behind.
"If you're not embarrassed by the first version of your product, you've launched too late."
— Reid Hoffman, Co-founder of LinkedIn
Every student uploads one live product. There is no "on paper" version. If it's not on the internet, it doesn't count.
1. Public URL — your deployed Vercel or Bolt.new link
2. GitHub repo — public repo with your code
3. 60-second demo video — loom or phone recording walking through the app
4. Sheet 2 — filled in with your 3 user-test notes
A note on today's style
Don't write long plans. Don't fill every box. Keep momentum. When you're stuck for more than 5 minutes, ask AI. When AI is stuck for more than 10 minutes, ask the instructor. The goal is a shipped thing, not a perfect thing.
What real builders are shipping today
Live data from Product Hunt — updated on every page load. These are real MVPs launched by founders around the world today.
🐱
Today on Product Hunt
Loading today's launches…
Phase 1 of 5
Scope
15 minutesSheet 1
Goal: In 15 minutes, decide exactly what you're building so the AI has no room to guess.
15 minutes max. If you're still here at minute 16, pick anything and move on.
Who is this for?Not "everyone". Give the user a name and situation. "A second-year student sharing a flat with 3 others."
2
What problem right now?One sentence starting with "Right now they...". "Right now they chase each person on WhatsApp and count who owes what on paper."
3
The ONE core actionThe single thing your MVP lets them do. "See what everyone owes and send a reminder in one tap." If you have two actions, pick one.
Write your one-sentence promise
Template
[Product name] helps [specific user] to [core action], so they no longer have to [current pain].
Scope creep is the #1 reason MVPs don't get built
For today, your MVP has one working feature. Everything else goes in "later". You're not forgetting it, just deferring it. Read your promise out loud. If it sounds vague, tighten it.
"Deciding what not to build is as important as deciding what to build."— Steve Jobs
Phase 2 of 5
First Build
45 minutesNo form to fill
Goal: Have a working, ugly, clickable version of your MVP before minute 46. Perfect is the enemy of shipped.
45 minutes. Ugly + working > beautiful + broken.
Which tool to use
Pick Bolt.new if…
Your MVP needs multiple pages, a form with storage, or feels like a real "web app". Bolt generates a full project you can deploy in one click.
Pick Claude.ai Artifact if…
Your MVP is a single-page tool, calculator, quiz, or interactive demo. Claude's Artifacts let you iterate fastest and you can export the HTML file directly.
Not sure? Default to Bolt.new. You can always fall back to Claude for specific components.
Use the standard first-prompt template
Copy this template, fill in your Sheet 1 answers, paste it as your very first message. Do not type "build me X" — that gets you a generic result.
ROLE: Senior frontend developer building a working prototype.
USER: [paste your Sheet 1 answer to "Who is this for?"]
GOAL: [paste your one-sentence promise]
THE ONE CORE ACTION THEY CAN DO:
[paste your Sheet 1 answer to "the ONE core action"]
LOOK AND FEEL: [3 adjectives, e.g. calm, trustworthy, playful]
CONSTRAINTS:
- Works on mobile (test width ~375px)
- Clean, modern UI
- No login, no database
- All data can be in browser memory or localStorage
- Single page if possible
OUTPUT: a working preview I can click right now. Don't ask
me follow-up questions first — build it, then I'll tell you
what to change.
While it builds — do this (don't sit idle)
Open the preview window and a mobile-size window side by side.
Keep your Sheet 1 visible so you remember what the MVP is supposed to do.
Open a second Claude.ai tab to use as a "copywriter" for your headline.
When the first version arrives — run the test
1
Click every buttonDoes anything break? Does the core action actually work end to end?
2
Try your phoneOpen the preview URL on your actual phone. Half of bugs only show up there.
3
Write down the 3 biggest gapsNot in code — in plain English. "The button says Submit but nothing happens." "On phone the form is too narrow."
Do NOT polish yet
The first build is meant to be ugly. Save colours, fonts, animations for Phase 3. Your only target right now is: the core action works once, end to end.
Stuck? Common traps: If Bolt says "deployment failed", restart with a shorter prompt. If Claude's artifact is blank, ask "please return the full HTML file in one code block." If you hit a token limit, switch to Gemini / ChatGPT for this session.
🔌
Does your MVP need live data (weather, maps, AI, currency…)?
Go to the 🔌 APIs & Tech tab for a free API directory, step-by-step connection guide, and ready-to-use prompt templates.
Phase 3 of 5
Refine
45 minutesNo form to fill
Goal: Run the 5-step vibe loop at least 6 times. End up with something you're proud enough to show a stranger.
45 minutes. One change per turn. Never edit code by hand.
The 5-step vibe loop (from the self-study)
1
Specify the gap in plain English"The submit button does nothing when I click it."
2
Ask for the change"Please fix the submit button so it shows a thank-you message."
3
Run & click everythingNot just the thing you fixed — make sure you didn't break something else.
4
Describe the next gapFocus on what a real user would notice, not what the code does.
5
LoopMinimum 6 loops in 45 minutes. If you get stuck 3 times on the same thing, start a new chat with the current working code pasted.
Refinement priorities (in order)
A
The core action must work cleanlyNo broken buttons, no "coming soon" placeholders on the main flow.
B
Mobile layoutTest on your phone. Fix anything where text is cramped, inputs too narrow, or scrolling feels wrong.
C
Empty / first-time stateWhat does the user see the very first second? Is the promise clear? Is there a clear next action?
D
Error and success statesWhat happens after the user finishes the core action? Do they get feedback?
E
Look and feelOnly after A-D: colours, fonts, illustrations, logo.
Copy-paste refinement prompts
The diff prompt (for a single change)
Keep everything the same. Change only this: [one specific thing]. Return the full file.
The reset prompt (if the chat gets messy)
Here is my current working code: [paste full file]
The product is: [paste your one-sentence promise]
I want to change only this: [one specific thing].
Return the full updated file. Do not remove any existing features.
The mobile-check prompt
Please audit this page at mobile width 375px. List 3 specific
problems you see and fix them. Keep desktop layout unchanged.
Warning signs you're over-engineering
If you've added login, user accounts, a database, social share buttons, or a settings page — stop. Remove them. Your MVP is one screen, one action. Save the rest for the "later" list.
Phase 4 of 5
Deploy & Upload
30 minutesNo form to fill
Goal: End this phase with (1) a public URL anyone can open and (2) your code in a public GitHub repo.
30 minutes. Two outputs: URL + GitHub link. Both free.
Path A — You built in Bolt.new
1
Click "Deploy"Top-right of Bolt. It will ask to connect Netlify or Vercel — either is fine. Use the free tier.
2
Copy the public URLPaste it into Sheet 2 immediately so you don't lose it.
3
Push to GitHubBolt has a "Push to GitHub" button. If asked for a repo name, use w3-mvp-yourname. Make it public so the instructor can see it.
Path B — You built in Claude.ai (single HTML file)
1
Export the HTMLIn the Claude Artifact, click the "..." menu and copy the code. Paste into a new local file called index.html.
2
Create a GitHub repogithub.com → New repository → name it w3-mvp-yourname → public → "upload an existing file" → drag index.html.
3
Enable GitHub PagesRepo → Settings → Pages → Source = "Deploy from branch" → Branch = main → Save. Wait 30 seconds, then refresh — your public URL appears at the top.
4
Alternative: drag to Netlifynetlify.com/drop → drag your index.html onto the page → instant URL. Easiest path if GitHub is intimidating.
Record a 60-second demo video
1
Open your public URLOn desktop or phone. Full-screen.
Say three things(a) who this is for, (b) what the core action is, (c) why you built it this way. Show yourself doing the core action.
Before leaving this phase, you must have:
A public URL that loads in an incognito window
A public GitHub repo named w3-mvp-yourname
A demo video (Loom link, .mp4 file, or cloud drive link)
All three pasted into Sheet 2
Deployment keeps failing? Ask the instructor immediately. Do not waste more than 10 minutes on tooling — Netlify Drop (drag-and-drop of a single HTML file) is always a fallback.
Phase 5 of 5
Test & Submit
30 minutesSheet 2
Goal: Watch 3 real people use your product. Capture what you see. Submit the final package.
30 minutes. 3 user tests. 1 upload.
The 3-user test — how to run it (5 min each)
1
Find a classmate who hasn't seen your MVPTrade tests: you test theirs, they test yours.
2
Give them only the URL and one sentenceSay: "This is for someone who [user description]. Try to [core action]." Then be silent.
3
Watch, don't helpNote where they hesitate, what they click first, and what confuses them. Silence is data.
4
Ask 2 questions at the end"What did you think this would do before you clicked?" and "What would stop you using this?"
5
Record on Sheet 2One line per observation. Don't edit or filter — record everything.
Signal vs noise
Signal (act on)
Same confusion from 2+ testers. A tester who couldn't complete the core action. A tester who completed it but looked puzzled.
Noise (ignore for today)
"I'd prefer a different colour." "Why don't you have an iOS app?" Preferences unique to one person. Scope-expanding suggestions.
Final quick polish (max 10 minutes)
If the testers all hit the same specific issue, fix only that. Prompt the AI:
Three different users got confused at the same spot: [describe specifically].
Please suggest 2 different ways to fix this and implement
whichever is simpler. Do not change anything else.
Submission — upload your product
Upload these 4 items before leaving
Fill in Sheet 2 with all four items below, then submit it via the class channel (Teams / Google Classroom / email — whichever your instructor uses).
1. Public URL to your live MVP
2. Public GitHub repo link
3. Demo video link (Loom, Drive, or file upload)
4. Your Sheet 2 with the 3 user-test observations
90-second reflection (last thing on Sheet 2)
What is one thing the AI did well that surprised you?
What is one thing you, the human, did that the AI could not have?
If you had one more hour, what would you build next?
"Real artists ship."— Steve Jobs
You did it
You took an idea from Workshop 1, validated it in Workshop 2, and today you shipped it. You have a live URL, a GitHub repo, and a demo video with your name on them. This is a real portfolio piece. Use it in job applications, pitches, and your own venture.
Reference guide
APIs & Tech Explained
🔌 Connect your app to the worldUse any time during the workshop
What is this? A plain-English guide to the technical concepts you'll meet today. Read it before building, or come back here when something confuses you.
What is an API? (And why do you need one)
🍽️
The Waiter Analogy
An API (Application Programming Interface) is a way for two software systems to talk to each other. You send a request, you get data back — without needing to know or touch the other system's internal code.
You = your app · Waiter = API · Kitchen = the service (e.g. Google Maps, OpenAI, weather data) · Meal = the data or action you asked for
A real example — step by step
Your app asks the Open-Meteo weather API for today's temperature in Vilnius:
Your app sends a request
→
API request GET /forecast?lat=54.69&lon=25.28
→
Weather service looks up the data
→
Response {"temperature": 18}
→
Your app shows "18°C today"
You never touch the weather service's code. You just ask politely (the request) and it answers (the response). Every API works this way.
Key terms — know these before you build
📬
Endpoint
A specific URL that represents one action or dataset. Think of it as a specific menu item. For example, OpenAI's endpoint for generating text is:
https://api.openai.com/v1/chat/completions
⚠️ This is not a webpage — do not open it in a browser. API endpoints only respond to code that sends the correct request with an API key attached. If you paste this into a browser you'll get an "Unauthorized" error — that's normal. You access it through your app's code, not directly. The OpenAI documentation explains what to send and what you get back.
🔑
API Key
A secret password that proves to the service you have permission to use it. You add it to every request. Never put your API key directly in your frontend code — anyone can copy it from your HTML source. For MVPs, use a backend proxy or a service that hides the key server-side.
Analogy: your gym membership card. You show it at the door (with every request). If someone copies it, they can use your account.
📤
Request methods — GET, POST, PUT, DELETE
GET — fetch/read data (e.g. "show me today's weather"). POST — send new data (e.g. "save this form submission"). PUT / PATCH — update existing data. DELETE — remove data. For most MVPs you will only use GET and POST.
📦
JSON — the language APIs speak
APIs respond with data in JSON (JavaScript Object Notation) — a simple text format that looks like a labelled list. Your app reads this and displays what it needs.
Most free APIs restrict how many requests you can make per minute or per day. If you exceed the limit the API returns an error and stops responding until the timer resets. For today's MVP you won't hit this — but know it exists.
Frontend vs Backend — what they mean
🖥️ Frontend
Everything the user sees and clicks — screens, buttons, forms, animations. Runs in the user's browser. Built with HTML, CSS, and JavaScript (or no-code tools like Bolt.new).
Analogy: the restaurant dining room — decor, tables, menu card.
⚙️ Backend
The logic, rules, and database that run on a server. The user never sees it. Handles things like: "is this password correct?", "save this order", "send an email".
Analogy: the kitchen — the chef, the fridge, the recipe rules.
For your MVP today
Bolt.new and Claude.ai Artifacts are frontend-only by default — they run entirely in the browser, no server needed. This is fine for most MVPs. If you need to store data permanently or keep an API key secret, you need a simple backend. Bolt.new can scaffold this for you — ask it: "Add a simple backend that stores [data] in a database".
APIs you can use for free today
These require no sign-up or have a generous free tier. Ask your AI tool to connect any of them.
📄 Docs = official documentation ·
📡 Live JSON = opens the raw API response in your browser — this is the data your app reads and displays. It looks like code because it is code — your app turns it into a friendly UI.
Today's trending products, launches, makers. GraphQL. Free developer token. 📄 Docs▶ Get your token
Key needed
How to add an API to your MVP — step by step
1
Find the API documentationEvery API has docs — a webpage explaining what endpoints exist, what parameters they accept, and what response you get back. Google "[API name] documentation" or ask your AI: "Show me the simplest endpoint from the [API name] API."
2
Get your API key (if required)Sign up on the API provider's website. They'll give you a key — a long random string like sk-abc123xyz.... Copy it. Store it somewhere safe — you usually can't see it again.
3
Tell your AI tool to connect itUse the prompt template below. Give the AI the endpoint URL and your key. Let it write the fetch code — don't write it yourself.
4
Test with a console.log firstBefore building any UI around the data, verify the API returns what you expect. Ask the AI: "Before displaying anything, console.log the raw API response so I can check it works."
5
Display only the field you needAPI responses often return dozens of fields. Pick the one you need. Ask: "From the response, only display [specific field name] on screen. Ignore the rest."
Prompt templates for working with APIs
✨ Copy & customise these prompts
Use these exactly as shown — fill in the highlighted parts
🔌 Connect a new API
⚠️ About API keys: each API has its own key — you get it by signing up on that API's website. It is personal, like a password. Never share it. For keyless APIs (marked "No key" in the directory above) delete that line entirely from the prompt.
I am building a [describe your MVP] using [Bolt.new / plain HTML+JS].
I want to connect the [API name] API.
The endpoint URL is: [paste the endpoint URL from the docs]
— Delete this line if no key needed —
My API key is: [paste YOUR key from that API's website]
— End of optional line —
When the user [describes a user action, e.g. types a city and clicks Search],
fetch data from this API and display [specific field, e.g. "the current temperature"] on screen.
Show me a loading state while fetching, and an error message if the request fails.
Write the fetch function as a separate named function so I can reuse it.
🐛 Debug a failing API call
My API call is not working. Here is the current code:
[paste the relevant fetch function]
When I run it I see this error in the console:
[paste the exact error message]
The API documentation says the endpoint is:
[paste the endpoint URL and any required headers from the docs]
What are the 3 most likely causes of this error?
Fix the most likely cause and explain what was wrong.
🔒 Hide an API key safely
My MVP uses the [API name] API, which requires a key.
I do not want the key visible in my frontend JavaScript.
Please add a simple backend proxy to my Bolt.new project:
- A serverless function that receives requests from the frontend
- Adds the API key from an environment variable
- Forwards the request to [API endpoint URL]
- Returns the response to the frontend
Show me how to set the environment variable in Bolt.new / Vercel.
📦 Parse an API response
The API returned this JSON response:
[paste a sample of the actual JSON you received]
I only want to display:
1. [first field you need]
2. [second field you need]
Write a function that takes this response object and returns
only those two values. Then update the UI to display them
in [describe the UI element: a card, a list, a table, etc.]
Common API error codes — what they mean
Code
Name
What it means
What to do
200
OK
Request succeeded. Data is in the response body.
All good — parse the response.
400
Bad Request
Your request was malformed — missing a required parameter, wrong format, or typo in the URL.
Check the API docs. Compare your request to the example. Paste the error into AI.
401
Unauthorised
Missing or invalid API key.
Check you are sending the key. Check the header format the API expects (e.g. Authorization: Bearer YOUR_KEY).
403
Forbidden
Your API key doesn't have permission to use this endpoint (e.g. free plan limitation).
Check which plan you're on. Upgrade or use a different endpoint.
404
Not Found
The endpoint URL is wrong or the resource doesn't exist.
Double-check the URL. Copy it directly from the docs.
429
Too Many Requests
You've hit the rate limit — too many requests in a short time.
Wait 60 seconds and try again. For production: add a delay between calls.
500
Server Error
The API's own server crashed — not your fault.
Wait a few minutes and try again. Check the API's status page.
CORS error
Cross-Origin Block
The browser blocked your request because the API doesn't allow calls from your domain.
Use a backend proxy or a CORS-enabled API wrapper. Ask AI: "Add a Vercel edge function to proxy this request."
API key safety — the 3 rules
1
Never put a key in your frontend JavaScriptAnyone can open browser DevTools → Sources and read it. If your key is exposed, someone can run up your bill or abuse your account.
2
Never commit a key to a public GitHub repoBots scan GitHub 24/7 looking for keys. If yours appears in a commit, it's compromised within minutes. Use environment variables instead (Bolt.new and Vercel both support these).
3
For today's MVP: use a proxy or a keyless APIThe safest approach for a workshop prototype: use APIs that don't need a key (see the directory above), or ask Bolt.new to add a serverless function that stores your key as an environment variable. The AI will handle the code.
🎨
Worked Example — Visual Moodboard (Unsplash API)
Type your app idea below. The moodboard will suggest 5 visual keywords and fetch matching photos from Unsplash — giving you instant aesthetic inspiration for your prototype's colour palette, imagery, and mood. This is a live Unsplash API integration running directly in this guide.
🖼️
Visual Moodboard Generator
powered by Unsplash
Keywords:keywords appear here after generating
Enter your app idea above and click Generate to build your moodboard.
How to use your moodboard in a prototype
Once you have a set of images that feel right for your app, use them to:
Set your colour palette — pick the 2–3 dominant colours from the photos. Use an eyedropper tool or paste the image into coolors.co to extract hex codes.
Use as background placeholders in Figma — drag photos into your frames as background images. This makes wireframes look immediately more realistic in a pitch.
Use as hero images in your MVP — Unsplash photos are free to use. Right-click → "Open image in new tab" → copy the URL → use it as a background-image in your CSS.
Set the emotional tone — show the moodboard during your pitch before showing the product. It instantly communicates the feeling you're going for, before a single screen is shown.
🎵
Business Vibe Finder — Spotify
Every product has a sound. Type your app idea and the guide will find a Spotify playlist that matches your brand's emotional tone — the music your users should hear while using your product. Use it to align your team on the feeling you're building toward.
🎧
Business Vibe Finder
powered by Spotify
Mood:mood tags appear here
Enter your app idea above to find its sound.
How to use this in your MVP pitch
Play it during your demo — open the playlist on a phone in the background while presenting. It sets the emotional context before you say a word.
Use it to brief your designer — "our app sounds like this playlist" is clearer than any mood board description.
Test alignment with your team — if your co-founder picks a completely different vibe, you may have different visions for the product. Better to know now.
Add it to your Figma file — paste the playlist link in your Figma cover page. Designers at studios like Spotify, Airbnb, and Figma itself use music briefs as part of their design process.
🔧 How to build this in your own MVP (Spotify API)
The version above uses embedded playlists (no API key needed). To build a live search that pulls real playlists from Spotify's database, you need:
A Vercel serverless function (one file: /api/spotify.js) that exchanges your credentials for a token and forwards search queries — keeping your secret off the frontend
Your frontend calls /api/spotify?q=deep+focus+productivity → gets live playlist results from Spotify
// Ask Bolt.new or Claude to build this for you:
"Add a Vercel serverless function at /api/spotify.js that:
1. Uses Client Credentials flow to get a Spotify access token
(SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET from env vars)
2. Accepts a ?q= query parameter
3. Calls https://api.spotify.com/v1/search?q={q}&type=playlist&limit=4
4. Returns the playlist names, IDs, and cover images as JSON
Then add a frontend search bar that calls /api/spotify?q=
and displays the results as clickable Spotify embed players."
Quick glossary
Terms you might hear today
REST API
The most common type of API. Uses standard HTTP requests. Almost every public API you'll encounter is a REST API.
fetch()
A built-in JavaScript function that makes an API request and returns the response. Your AI tool will write this for you.
async / await
Keywords that tell JavaScript to wait for the API response before continuing. You'll see them in every fetch function. Don't worry about them — the AI handles this syntax.
Header
Extra metadata sent with a request — often includes the API key and content type. Like an envelope label that tells the API who you are before it opens the message.
Query parameter
Values added to the end of a URL to filter or customise the request. Example: ?city=Vilnius&units=metric
Webhook
The reverse of an API call — instead of you asking, the service sends data to you when something happens (e.g. a payment is completed). Advanced; not needed for today's MVP.
SDK
A pre-built library that wraps an API so you don't have to write fetch() calls manually. Example: the OpenAI SDK. Bolt.new can install these for you automatically.
"You don't need to understand the kitchen to order a great meal. But knowing what's on the menu — and how to ask clearly — makes all the difference."
— On using APIs in product development