SKIP TO CONTENT
ON AIR — VIBE CODING ACADEMY · EN · LIVE
All articles
TUTORIAL·March 20, 2026·10 MIN READ

How I Built a Full SaaS in 3 Hours With Claude Code — The Exact Method

By EndOfCoding

Three hours. One Claude Code session. A working SaaS with auth, database, and a real payment flow.

The 3-hour timeline is real, but it comes with preconditions:

  1. You know your stack. This method doesn't teach you Supabase or Next.js — it assumes you understand them. Claude Code amplifies your existing knowledge; it doesn't replace it.
  2. You've done this before. The first time takes longer. After 5–10 rapid builds, 3 hours is realistic.
  3. The scope is controlled. A focused MVP with one core user action, not a feature-complete product.

With that said: here's the exact method.

What You'll Learn

A five-phase method for shipping a working SaaS MVP in an afternoon:

  1. Schema-first (20 min) — Design the database before anything else
  2. One core action (60 min) — Build the single thing your user does
  3. Auth (30 min) — Add Supabase Auth after the core works
  4. Polish sprint (30 min) — Loading states, errors, mobile
  5. Deploy (20 min) — Vercel + env vars + pre-deploy check

Total: ~3 hours after you've done this 5+ times. Your first build might take 6–8 hours.

Phase 1: The Schema-First Approach (20 minutes)

Most developers start with the UI or the API. This is backwards for AI-assisted development. Start with the database schema. Every prompt you give Claude Code after this will be grounded in real data types, relationships, and constraints.

Paste this into Claude Code:

I'm building [product name]. Here's the domain:

[2-3 sentences describing what users do and what data matters]

Design a Supabase PostgreSQL schema for this. Requirements:
- Include all tables, columns, types, and relationships
- Add Row Level Security policies for each table
- Include indexes for columns that will be frequently queried
- Add a created_at / updated_at pattern to every table
- Write the complete SQL — I'll review and run it

What questions do you have before writing the schema?

Letting Claude Code ask clarifying questions saves you from major refactors later. Before writing app code, insert 3 real records into your schema manually via the Supabase dashboard. This 10-minute step has saved 2-hour refactors multiple times.

Phase 2: The One Core Action (60 minutes)

Identify the one thing your user will do in the app. Build only this. Make it work perfectly before adding anything else.

The core action in this app is: [user action].

Using the schema we designed, build:
1. The API route that handles this action
2. The UI component the user interacts with
3. The real-time update that shows the result

Don't add navigation, auth, or any other features yet.
The user should be able to perform this action on a single page.

Start with the API route. Show me the code before writing files.

Phase 3: Auth (30 minutes)

Add authentication only after the core action works without it. This forces you to validate the actual product value first.

Add Supabase Auth to the app. Requirements:
- Email + password signup and login
- Protected routes for pages that show user data
- Redirect unauthenticated users to /login
- After login, redirect to the page they were trying to access
- Use Supabase's server-side session management

Do NOT add social OAuth, password reset, or email verification yet.

Phase 4: The Polish Sprint (30 minutes)

The core product works. Now do a quality pass:

1. Every user action needs a loading state and an error state
2. Add a toast notification (Sonner) for success/error feedback
3. The empty state (no data yet) should have helpful copy
4. Mobile layout should work — check responsive breakpoints

Do these one at a time. Check in after each one.

Phase 5: Deploy (20 minutes)

Deploy this to Vercel. Help me:
1. Create vercel.json with the right Next.js App Router config
2. List all environment variables I need
3. Run a pre-deploy check for TypeScript errors and broken imports
4. Write the deployment commands

Then: vercel --prod.

Common Challenges

Claude Code goes off-plan. If it starts building features you didn't ask for, interrupt it: "Stop. You're building [X] but I only asked for [Y]. Delete what you just added and focus on [Y]." It will comply immediately.

The schema was wrong. This happens. If you need to change the schema after building on it, don't try to migrate around it. Tell Claude Code: "The schema needs to change. Here's the new version. Update all affected code." It can handle large refactors.

Auth breaks the core action. Adding auth sometimes introduces session-handling bugs. Use Claude Code's /review command on the auth-related files and ask it to trace the user's session from login through to the protected action.

Advanced Tips

The real time breakdown:

Phase What You Do What Claude Code Does Time
Schema Review, ask questions, approve Design schema, write SQL, RLS policies 20 min
Core Action Test manually, iterate on edge cases Write API route, UI, real-time updates 60 min
Auth Test login/logout flow Add Supabase Auth, protect routes 30 min
Polish Click around, find UX issues Add loading/error states 30 min
Deploy Set env vars, run deploy Pre-deploy check, vercel.json config 20 min
Total ~3 hours

The "show me before writing" instruction at every phase is important. It gives you one checkpoint before Claude Code starts touching your filesystem. You can catch misunderstandings before they're baked into code.

Conclusion

Key takeaways:

  • Start with the database schema, validate with real records before writing app code
  • Build one core action completely before adding auth, navigation, or secondary features
  • Use "show me before writing" to get one checkpoint before Claude Code modifies files
  • Keep scope ruthlessly controlled — features you don't build in phase 1 go in v2
  • The 3-hour timeline is real after you've done this 5+ times; your first build might take 6–8 hours