4–6 hoursIntermediate

Vibe-Code a Working Web App

Maps to: Software Engineer · Product Manager, Founder, Designer

You're going to build a real web app for one thing you wish existed, and put it live on the internet where actual people can use it. The skill is scope: deciding the ONE job it does well, cutting everything else, then shipping it and fixing what breaks when a real person tries it. That's the core of software engineering, turning an idea into a working thing and deciding what not to build, and doing one tells you fast whether shipping a live product is your kind of work.

The plan

0/4 done

You're 20% in just for starting, the hardest part. Mark your first step done to keep the momentum.

  1. Don't open a tool yet. Pick one thing you personally wish existed, name the one person it's for (it can be you), and write, in a single sentence, what it does and the pain it kills. Sketch the screens on paper. This one-paragraph spec is the thing that keeps your app from sprawling into a mess.

    Objective: A one-sentence app description, a named user, and a rough flow sketch.

    1. 1

      Pick the one thing. The best ideas are a frustration you personally have, so you already know if it's solved.

    2. 2

      Write it in one sentence: '[App] helps [user] do [one thing] so they don't have to [pain].' Sketch the 2–3 screens.

    Your call

    Choose what the app does yourself (one frustration you have, a tool for one named person, a tiny one-thing utility, or a remix with one thing changed) and write it in a sentence.

    The one job, and the one person it's for.

    What good looks like: Your spec is tight enough to be a ruler: a stranger could read your one sentence and tell you what doesn't belong.

    • One job. 'A to-do app' fails; 'a thing that texts me my one most-important task each morning' ships.
    • If you can't say it in a sentence, it's too big. Cut until you can.

The bar to look back against

A live URL a stranger can actually use for a real task, you can name the ONE job it does and who it's for, and you shipped at least one round of fixes after watching a real person use it. The scope is the work: not 'it deployed,' but 'I cut it to the one thing it does well, and a real person used it.'

Finish the final step, then submit what you built. Your progress is saved.

Tools you'll use

Steps 2–4 · Build it and ship to a live URL

Prompt-to-app with a real backend wired in; deploys to a live URL.

Best for: The cleanest path to a deployed app. (Free tier; heavy iteration hits limits.)

Full-stack app in your browser from a description, AI built in.

Best for: Generous free tier (~1M tokens/mo), no card.

v0 Free

Vercel's AI builder, strong on UI, deploys to a URL. (Official site is v0.app, formerly v0.dev.)

Best for: When the look matters most. (Free: ~$5 credits/month.)

An autonomous coding agent inside a full online IDE.

Best for: Most 'watch it build,' but the free Agent is limited; Core ($20/mo) unlocks it fully.

How this shows up on a resume or college app

I built and deployed a working web app for [user persona], taking it from a vague idea to a live URL real people use, then cutting it to the one job it does well after watching them. I learned that the hard part of shipping software is the judgment: deciding what to build and what to leave out.