Vibe Coding in Practice: Build a Working SaaS Prototype in One Evening

Vibe Coding in Practice: Build a Working SaaS Prototype in One Evening

TL;DR: "I have a side project I want to build, but after work I can't carve out a full week." I've heard this dozens of times over the past few years. AI coding tools didn't change the sentence — they just swapped "carve out a full week" for "carve out a full week of writing prompts." Vibe Coding (a term Karpathy popularized in January 2025) gives a surprising answer: when the tools are smooth enough, you don't need to "fully write code" — you only need to "fully express intent". One evening isn't enough to write a complete SaaS. It is more than enough to direct Claude Code to build one. This post is a real run: 4 evening hours (7pm to 11pm), starting from a one-line need → a working URL-shortener SaaS with click analytics → deployed to Cloudflare → a shareable URL in your hand. Stack: Next.js + Cloudflare Workers + D1. Claude Code in the driver seat the whole way. Estimated total cost $2-4.

Table of Contents

1. What Vibe Coding actually means (vs "AI writes code")
2. The feasibility envelope of "one evening"
3. Hour 1: Express the intent clearly
4. Hour 2: Get the core working (code + tests)
5. Hour 3: UI + edge deployment
6. Hour 4: README + self-review + ship
7. Cost receipt (typical estimate)
8. Four things NOT to do in Vibe Coding mode
9. FAQ
10. Further reading

What Vibe Coding actually means (vs "AI writes code")

Karpathy's framing, paraphrased: "you fully give in to the vibes, embrace exponentials, and forget that the code even exists." Translated — stop worrying about the code, focus on what you want.

Three concrete differences from traditional AI-assisted coding:

This isn't sloppiness — "quality validation" shifts from reading code to running code. Vibe Coding shouldn't ship your company's core transaction system, but it's reliable for:

• Weekend side projects / hackathon entries
• Demo prototypes for clients
• "I had an idea, want to validate it tomorrow"
• The "scaffolding phase" of learning a new framework

The feasibility envelope of "one evening"

Not every SaaS fits in one evening. Projects with these 4 traits are doable:

1. CRUD-shaped: create / read / update / delete dominates, no complex business rules
2. Single service: one Worker, one database — no microservices
3. Off-the-shelf templates: stack has GitHub starter (Next.js + Cloudflare, in this case)
4. Public access: no complex auth (OAuth flows alone won't fit in an evening)

Typical "one-evening" candidates:

• URL shortener (this post's example)
• Simple to-do SaaS
• Content scheduler (push to a fixed API)
• AI thumbnail generator (wrap an existing image API)
• Lead-form aggregator
• Recipe / receipt extractor

What does NOT fit one evening:

• Multi-tenant with billing (Stripe webhook + per-user isolation)
• Complex-permission B2B SaaS
• Self-hosted inference services

Hour 1: Express the intent clearly

7:00 pm. Before opening Claude Code, spend 30 minutes on "non-coding" work — write your want into a spec.

Target spec (write to INTENT.md)

# URL shortener SaaS — one evening edition

## What I want
- A site at https://my-shorty.workers.dev
- Paste a long URL; receive a short link https://my-shorty.workers.dev/abc123
- Clicking the short link redirects to the original
- I can see how many times each short link was clicked

## What I do NOT want
- No login / signup (public access)
- No CAPTCHA / abuse prevention (just get it running first)
- No fancy dashboard (one table showing click counts is enough)

## Stack (off-the-shelf templates first)
- Next.js 15 (frontend + API routes)
- Cloudflare Workers + D1 (edge deploy + SQLite)
- One schema: `links(short, original, clicks, created_at)`

## Acceptance
- I can open the site on my phone
- Pasting https://www.google.com gives me a short link
- The short link redirects to Google
- I can see clicks=1

One rule when writing the spec: don't change it after you finish. Vibe Coding's core tenet is "intent is clear + the spec doesn't churn." If you find yourself rewriting the spec mid-run, that's regular coding, not vibe coding.

One sentence to start Claude Code

Read INTENT.md. Initialize the project per the intent.
Stack: Next.js 15 + Cloudflare Workers + D1.
I prefer pnpm.
Get the minimum skeleton running (pnpm dev shows a homepage), then commit once.

Claude Code will: pick a template, init, install, generate a homepage. You verify the homepage runs (pnpm dev shows on localhost:3000). Don't audit every line of `package.json` — that's not vibe-coding mode.

Time: ~25 minutes. One-cup-of-coffee long.

Hour 2: Get the core working (code + tests)

8:00 pm. Time to have Claude Code write the actual functionality.

One-message instruction template

Implement per INTENT.md:
1. POST /api/shorten — accepts { url }, generates a 6-char base62 short code,
   stores in D1, returns the short link
2. GET /:short — looks up D1, redirects to original, increments clicks
3. GET / — simple form (input + submit), shows the latest 10 short links + click counts
4. D1 schema via migrations
5. 3 vitest unit tests covering generate / lookup / click-count
6. Run pnpm test, all green, then commit

Hand this to Claude Code. It will:

• Write app/api/shorten/route.ts
• Write app/[short]/page.tsx for the redirect
• Write app/page.tsx for the form and list
• Write the schema migration
• Write 3 tests
• Run pnpm test; if anything fails, fix it itself

If a test fails, don't open the IDE. Stay in Claude Code and say "test X failed, error message Y, fix it." Important: in vibe-coding mode you don't read code, only test results and command output.

Key Claude Code capabilities at this stage

• Multi-file concurrent edits: writes 4 files + runs tests in a single conversation
• Direct command execution: runs pnpm test / wrangler d1 execute itself
• Failure attribution: pinpoints failing file, line, and reason

Time: 70-90 minutes. The core stretch.

Hour 3: UI + edge deployment

9:30 pm. Functionality works, but the homepage is plain. And you haven't deployed.

Polish (10-15 min)

The homepage UI is bare. Make it:
- Top hero block, slogan "Vibe-coded URL shortener"
- Form centered, input + "Shorten" button (purple #8B5CF6)
- "Latest 10" below as cards, each showing short link / truncated original / click count
- Tailwind, dark background, modern feel
- No emoji decorations, no cartoon style

Claude Code edits page.tsx. Don't ask it to "redesign" — just "edit per spec".

Deploy (10-15 min)

Deploy to Cloudflare Workers now.
wrangler is already logged in to my default account.
1. Run wrangler d1 create my-shorty for the prod D1
2. Apply the migration to sync schema
3. wrangler deploy
4. Give me the deploy URL

Claude Code handles wrangler.toml, bindings, deploy. The only manual step: early-run wrangler login (if you haven't).

Time: ~25 minutes.

Verify (5 min)

Open the deploy URL on your phone. Paste https://www.google.com. Get back my-shorty.workers.dev/abc123. Click — redirects to Google. Return to homepage, see clicks=1. OK, you really shipped it tonight.

Hour 4: README + self-review + ship

10:30 pm. Code runs, deployed, but it doesn't have a "product" feel yet.

README (10 min)

Write a README.md for this project:
- One-line description
- Demo GIF placeholder
- Tech stack list
- 5 steps to run locally
- Deploy-to-Cloudflare commands
- License: MIT

Tone: technical editorial, no marketing voice.

Security self-check (10 min)

Quick security review:
- Does /api/shorten have basic rate limiting (by IP)?
- Does the input URL have minimum validation (must be https://)?
- Does the D1 binding expose any sensitive fields?
- Did the README accidentally tell people to commit secrets to git?
- Is env in .gitignore?

List any insecure items. Fix the 5-minute ones now;
add the rest to BACKLOG.md.

The security baseline for a side-project vibe-coded SaaS: no one should be able to charge expenses to your account. As long as that's true, the rest can be hardened over time.

Ship (10 min)

Post to X / Hacker News Show HN / Indie Hackers:

Vibe-coded a URL shortener tonight: my-shorty.workers.dev
- 4 hours
- Next.js 15 + CF Workers + D1
- Total cost: AI $X / Cloudflare $0
- MIT-licensed source: github.com/...

Don't write "AI wrote it" — write "vibe coded". The early sounds like a disclaimer; the second is 2026's ship culture.

Time: ~30 minutes.

Cost receipt (typical estimate)

Data note: the numbers below are a typical estimate for one 4-hour evening building this URL shortener SaaS. Real Claude Code consumption varies with code volume in Hour 2, the number of test-failure retries, and how many UI iterations Hour 3 takes. The math below uses Claude Sonnet 4.6 pricing × the CodeGateway 1.5x starter markup.

Token consumption per Hour (estimated)

Single-evening total (estimated)

Total tokens:  ~175K input + ~85K output ≈ 260K tokens
Direct Anthropic:               ~$1.95
1.5x starter markup (new CG account):  ~$2.93
1.2x floor markup (90-day spend > $500):  ~$2.34

Plus Cloudflare's free tier — D1 + Workers free tiers are more than enough for this kind of demo. No cost.

Total: $2-4 / one evening / one shareable SaaS demo.

Three things that double the cost

1. Spec churn: editing INTENT.md in Hour 2 means Claude Code re-reads + re-decides. Rule: lock the spec; queue changes for the next iteration.
2. Reading code: opening files to inspect → not liking what you see → asking Claude to rewrite → reading again → another rewrite. This is the vibe-coding killer. Rule: tests pass + it runs → commit; review later.
3. Perfectionism: 3 rounds of color-tweaks, 5 rounds of copy edits. This is a weekend side project, not a deck for VCs. Rule: good enough → ship.

Four things NOT to do in Vibe Coding mode

1. Don't pick an unfamiliar stack

Vibe coding is acceleration, not learning. If you've rarely touched Cloudflare D1 / Next.js 15, an early hour disappears into figuring out bindings / migrations / deploy mechanics.

Right call: pick a stack you're at least somewhat familiar with. Or spend a separate weekend learning, then vibe-code to ship.

2. Don't work on main

Claude Code's edits are destructive. 30 commits in one evening is normal. Always work on a feature branch.

git checkout -b vibe/url-shorty-2026q2

If, the morning after, the result feels off — delete the branch. No regret.

3. Don't vibe-code anywhere money flows

Payment integrations, Stripe webhooks, balance mutations — even when "looks right," review them line-by-line in clear-headed mode the next day. Vibe coding tends to leak race conditions / numerical precision / replay attacks at the edges.

For side projects with payments, use Stripe's hosted checkout (no webhook of your own) to minimize self-written exposure surface.

4. Don't lose track of INTENT.md

A month after a vibe-coding evening, you will not remember why you built this. `INTENT.md` is the anchor that takes you back. Treat it as your project's "genesis file" — make it an early commit.

FAQ

Q: Is vibe-coded code production-ready? Short: no, but it's 80% refactorable into production. Vibe-coded output "looks right" — it passed your tests. Production code needs error handling, logging, monitoring, rollback. Add those in the next phase. What ships to production isn't vibe-coded code, it's a vibe-coded project shape — you take that shape and start a real iteration.

Q: Why Claude Code instead of Codex CLI / Cursor?

A: All three work. This post uses Claude Code because: (1) sub-agent scheduling is mature — one sentence dispatches complex tasks; (2) Skills can be committed into the repo and reused for similar projects later; (3) 1M context fits the entire project state without "forgetting what I changed 5 minutes ago." Codex CLI runs the same flow — pick what you're used to. Detailed comparison: Codex CLI vs Claude Code: pick by task.

Q: Can I push the cost lower?

A: Yes. Three paths: (1) prompt-cache hits (INTENT.md is fed every session — input drops to ~10% on cache hits); (2) Hour 2 bug-fix can route to Haiku (mechanical work); (3) skip the perfectionism on UI iterations. Sub-$1.50 per evening is doable.

Q: Doesn't vibe coding contradict spec-driven?

A: No. Vibe coding's spec is the 30-minute INTENT.md in Hour 1 — written once, locked. Spec-driven typically iterates spec → design → implementation, with reviews per stage. Vibe coding bundles "implement + test" into one motion; the spec doesn't move under it. They complement each other: detailed in spec phase, fast in implementation phase.

Q: Is CodeGateway's $2 starter credit enough for one evening?

A: Mostly, yes. $2 ÷ Sonnet 4.6 starter markup converts to ~444K tokens; the 175K input + 85K output above fits comfortably. But if Hour 2 thrashes on test failures, you may run out before Hour 4. Recommend topping up $5 before starting. See Top-up and billing guide.

Q: Cloudflare really free for a single-evening deploy?

A: For personal demos, yes. D1 free tier: 5GB storage + 5M writes/day. Workers free tier: 100K requests/day + 10ms CPU/request. A URL-shortener demo's early week is unlikely to use 1% of those quotas. Switch to paid only when traffic justifies.

Q: How do I know if my idea fits vibe coding?

A: Three checks: (1) Can you describe the goal in one sentence? (2) Does it fit in 1 database table + 5 endpoints? (3) Is acceptance "runs and shareable" or "production-grade"? All three yes → fits. Any one no → use a normal iteration flow.

Q: What do I do the morning after vibe coding?

A: Two paths: (1) Drop it — 80% of side-project ideas reveal themselves as not-worth-doing in clear-headed morning light. This kind of dropping is vibe coding's biggest value. $2-4 to validate whether an idea earns its build. (2) Take it seriously — enter normal sprint mode; the Hour 4 BACKLOG.md is your entry point. Drop-or-take-seriously is an order of magnitude faster than "take seriously immediately."

Further reading

• The complete Claude Code configuration guide — Skills / Hooks systems for adding automation guardrails to vibe coding
• Advanced Claude Code: sub-agents, MCP, cost optimization — multi-agent orchestration / MCP / cost
• Codex CLI vs Claude Code: pick by task — tool selection decision tree
• An honest receipt: 16 blog hero images for $0.92 in an hour — same dogfood-receipt lens applied to image gen
• Cleaning up legacy code with Codex CLI — vibe coding's mirror image: patient refactoring
• Top-up and billing guide
• Tier markup explainer
• Andrej Karpathy — original Vibe Coding tweet
• Project structure / templates: Whitedit/code-gateway-cookbook (vibe-coding template coming next)

Vibe coding isn't "the AI writes code for you" — it's "when the tools are smooth enough, you only need to express your intent clearly." Building a shareable SaaS in one evening isn't the destination. It's getting back the feeling of "doing something cool on the weekend." Code can absolutely be serious; it doesn't have to be every time.

References

Claude Code introduction · Cloudflare Workers docs