Vibe Coding Workshop

Every app in this workshop has two lives. While you work, it runs on a local server on your own computer. You change something, save, and see it right away. Nobody else can see it. When you're ready, you publish the same code to a web server, and it gets an address anyone can open.

Local

localhost:3000. Fast, private and safe to break.

Live

your-app.vercel.app. Public, always on, and updated every time you push new code.

The bridge

GitHub sits in between. You save your code there, and Vercel picks it up from there.

You won't write this code yourself, but you'll see these words constantly. Knowing what each one does helps you read Claude's plans and notice when something goes off track.

Terminal

Typing commands instead of clicking. Start with pwd (where am I), ls (what's here), cd (go into a folder) and Ctrl+C (stop what's running).

Local vs. web server

One runs on your laptop while you build. The other runs in a data center so anyone can reach it.

Framework

A starter kit for apps. Everyone in this class uses Next.js, which handles pages, logins and data in one project. Node.js is what runs it on your computer. Astro is a good choice for content sites later on.

Packages & npm

Reusable code other people wrote. npm install adds a package, and package.json keeps the list.

GitHub

Where your code lives online, with a full history of every change.

Commit habit

Every time something works, ask Claude to commit it. A commit is a save point you can always go back to.

Hosting

Vercel turns the code on GitHub into a live URL. It's free at workshop scale.

Database

Where your app remembers things like users, entries and uploads. We use Supabase.

Claude Code reads your project, writes the code, runs commands and fixes errors. Your job is to be clear about what you want and to check that what you got actually works.

Claude Code

Your building partner. It runs in the terminal, in the Claude desktop app, or inside VS Code. The cheat sheet lists the keys and commands you'll use most.

CLAUDE.md

A briefing file in your project that Claude reads at the start of every session. Type /init to have Claude write the first version.

Skills

Reusable instructions for tasks you repeat, like deploying or writing release notes.

MCPs & connectors

Plugs that let Claude work inside your other tools. Most are built on that service's API. In class we use one, for Supabase. For GitHub and Vercel, Claude uses their command-line tools instead.

Prompting

Say where, what, and what done looks like. Press Shift+Tab to switch modes. The current mode shows under the prompt box. In the desktop app, use the mode menu.

Plan mode

Claude reads your project and writes a plan, but changes nothing until you approve it. Use it before every new feature. To plan a single message, start it with /plan.

Auto mode

Claude edits files and runs commands without asking you each time, while a built-in safety check blocks risky actions. It's the default in recent versions. Commit before a big change so you can undo it.

Debugging

Paste the full error. If that doesn't fix it, describe what you expected and what happened instead. How to get unstuck has the full routine.

Reviewing AI work

Check the plan before Claude starts, then test the result yourself in the browser. Claude saying it's done doesn't mean it works.

Most vibe coding problems start before any code exists. A clear, small spec gives Claude something concrete to build, and gives you something to check its work against.

Problem & thesis

Fill in: My app helps [who] do [what] so they can [why].

User flow

Sketch the 3 to 5 steps a person takes from opening the app to getting what they came for.

PRD

A one-page product requirements document. Write it with an LLM using the prompt below, then save it as PRD.md in your project folder.

Conceptual references

Two or three apps that solve a similar problem. Note what to borrow and what to avoid.

Visual references & style guide

Screenshots of things you like, plus your colors, fonts and tone of voice in a few lines.

Scoping

List what's in the first version and what isn't. Aim for one feature that proves the idea.

Work in small steps. Plan, build, test in the browser, commit. Your app goes live in the first session, so every change after that is an update to something real.

Scaffold from your PRDSession 1

Claude plans a Next.js project from PRD.md, then creates it, writes your CLAUDE.md and starts the local server.

Go live on day oneSession 1

Put the project on GitHub and connect it to Vercel, even if it only says hello. From then on, every push updates your live URL.

Build your core featureSession 2

One screen, one feature. Start each change in plan mode and test it in the browser before you commit.

Connect dataSession 3 · if needed

Add a Supabase database when your app has to remember things between visits. Connect it first in Setup step 4.

# Potluck
A shared sign-up list for dinner parties. The full spec is in PRD.md.

## Stack
Next.js, Tailwind CSS, Supabase for data, hosted on Vercel.

## Commands
npm run dev    starts the local server at localhost:3000

## Rules
- Build only the three must-have features in PRD.md.
- Mobile first: guests open the link on their phones.
- Commit after each change that works.

Once people use your app, you need a place to try changes before everyone sees them. That's what staging is for. On Vercel you get it for free.

Staging vs. productionSession 3

Staging is a test version only you look at. Production is the version everyone sees. On Vercel, every branch gets its own preview URL, and the main branch is production.

Environment variables

Secrets like API keys go in Vercel's settings, set separately for Preview and Production. Never commit them to GitHub. A separate test database for previews is optional.

Deploy to production

When a change works on its preview URL, merge it into main. Vercel deploys it automatically.

Custom domainSession 4

Buy a domain on Cloudflare, then add it in your project's Domains settings on Vercel. Ask Claude to walk you through the DNS records Vercel asks for.

Demo & shareSession 4

Two minutes: the problem, who it's for, and a live walkthrough of the one feature that proves it.

1. Paste the full errorFrom the terminal or the browser, into Claude Code. A screenshot works too.
2. Say what you expectedDescribe what should have happened and what happened instead.
3. Roll back and retryStill broken after three tries? Ask Claude to undo everything since your last commit, type /clear, and ask again in a new way.
4. Ask the groupPost in the class channel with a screenshot, the error and what you tried, or bring it to office hours between sessions.

Type these in the terminal before Claude is running. Claude works on the folder you start it in, so go into your project folder first.

cd my-app

Go into your project folder. Use your folder's name.

claude

Start a new conversation.

claude -c

Continue your most recent conversation in this folder.

claude -r

Choose an earlier conversation to pick up.

claude update

Update Claude Code to the latest version.

npm run dev

Start your app's local server. Press Ctrl+C to stop it.