How to Build a Full SaaS App with Claude Code in a Weekend

This is a walkthrough of building a real SaaS app — authentication, Stripe billing, a user dashboard, and deployment — using Claude Code as the primary engineering tool.

Not a toy project. Not a demo. A shippable product with real payments.

Total time: ~8 hours across a weekend. Total API cost: ~$12.

---

The Stack

We're using what most indie SaaS builders ship with in 2026:

• Next.js 14 (App Router, TypeScript)
• Supabase (auth, database, row-level security)
• Stripe (subscriptions, webhooks, customer portal)
• Tailwind (styling)
• Vercel (deployment)

Claude Code works with any stack, but this one has the most training data and the best results.

---

Before You Start

1. Set up Claude Code

npm install -g @anthropic-ai/claude-code
cd your-project-directory
claude

2. Create a CLAUDE.md

This is your project's persistent instructions. Create it at the root:

# CLAUDE.md

## Stack
Next.js 14 App Router, TypeScript strict, Tailwind, Supabase, Stripe.

## Conventions
- Use server components by default, 'use client' only when needed
- API routes in app/api/ with route.ts pattern
- Use Supabase SSR helpers for auth
- Environment variables in .env.local (never commit)
- All prices in cents for Stripe

## Quality
- Run \`npm run build\` after major changes
- Run \`npm run lint\` before committing
- Always handle loading and error states in UI

3. Have your accounts ready

• Supabase project (free tier is fine)
• Stripe account (test mode)
• Vercel account

---

Phase 1: Scaffold and Auth (2 hours)

Prompt 1: Project setup

Create a new Next.js 14 project with TypeScript, Tailwind, and the App Router.
Set up the folder structure: app/, components/ui/, lib/, types/.
Add Supabase client libraries (@supabase/supabase-js, @supabase/ssr).
Create a .env.local.example with NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY placeholders.
Commit as "Initial project setup".

Claude Code will scaffold the project, install dependencies, create the folder structure, and commit. Takes about 2 minutes.

Prompt 2: Authentication

Add Supabase email/password authentication:
1. A sign-up page at app/auth/signup/page.tsx with email and password fields
2. A sign-in page at app/auth/signin/page.tsx
3. A Supabase auth callback handler at app/auth/callback/route.ts
4. A middleware.ts that protects all routes under /dashboard — redirect to /auth/signin if not authenticated
5. A lib/supabase/server.ts for server-side client and lib/supabase/client.ts for client-side

Use Supabase SSR helpers. Make the auth pages clean and centered —
just the form, a heading, and a link to switch between sign up and sign in.
Commit as "Add Supabase auth with protected routes".

This is where Claude Code shines — auth touches middleware, API routes, client utilities, and UI. It handles all the wiring.

Verify

Run npm run build and fix any TypeScript errors.
Then start the dev server and confirm that:
1. /dashboard redirects to /auth/signin
2. Sign up creates a user in Supabase
3. Sign in redirects to /dashboard

---

Phase 2: Database and Dashboard (2 hours)

Prompt 3: Database schema

Create a Supabase migration file at supabase/migrations/ that creates:
1. A profiles table (id uuid references auth.users, email text, full_name text, plan text default 'free', stripe_customer_id text, created_at timestamp)
2. Row-level security: users can only read/update their own profile
3. A trigger that auto-creates a profile when a new user signs up

Also create a lib/supabase/queries.ts with typed functions: getProfile(), updateProfile().
Commit as "Add profiles schema with RLS".

Prompt 4: Dashboard UI

Build the dashboard at app/dashboard/page.tsx:
1. A top nav with the app name and a user dropdown (email + sign out)
2. A sidebar with links: Overview, Settings, Billing
3. The overview page shows a welcome message with the user's name and their current plan
4. Use our existing Supabase queries to fetch the profile

Make it look like a real product — not a Bootstrap template.
Clean, modern, good use of whitespace. Tailwind only, no component libraries.
Commit as "Add dashboard with nav and overview".

---

Phase 3: Stripe Billing (3 hours)

This is the most complex part. Claude Code handles it well because it's a well-documented pattern.

Prompt 5: Stripe setup

Add Stripe subscription billing:
1. lib/stripe.ts — Stripe client initialization
2. app/api/stripe/checkout/route.ts — create a checkout session for a "Pro" plan ($29/month). The price ID will come from env STRIPE_PRO_PRICE_ID. Include the user's email. After success, redirect to /dashboard?upgraded=true
3. app/api/stripe/webhook/route.ts — handle checkout.session.completed (update profile.plan to 'pro' and save stripe_customer_id), customer.subscription.deleted (revert to 'free')
4. app/api/stripe/portal/route.ts — create a billing portal session so users can manage their subscription

Add STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET, STRIPE_PRO_PRICE_ID to .env.local.example.
Commit as "Add Stripe billing — checkout, webhooks, portal".

Prompt 6: Pricing page and billing UI

Add:
1. A pricing page at app/pricing/page.tsx with two tiers — Free (current features) and Pro ($29/month with extra features). The Pro card has a checkout button that calls our checkout API
2. A billing section in the dashboard at app/dashboard/billing/page.tsx — shows current plan, and either an upgrade button (if free) or a "Manage Subscription" button that opens the Stripe portal

Commit as "Add pricing page and billing dashboard".

Verify

Run npm run build. Then test the full billing flow:
1. Go to /pricing as a logged-in free user
2. Click upgrade — should redirect to Stripe Checkout (test mode)
3. Complete payment with test card 4242424242424242
4. Should redirect back to /dashboard?upgraded=true
5. Profile should show plan = 'pro'
Confirm the webhook handling works by checking Stripe's webhook logs.

---

Phase 4: Polish and Deploy (1 hour)

Prompt 7: Landing page

Build a landing page at app/page.tsx:
1. Hero with headline, subheading, and CTA button → /pricing
2. Three feature blocks (describe the value, not the tech)
3. A testimonial section (use placeholder quotes for now)
4. Footer with links

Make it convert. Clear value prop above the fold.
One primary CTA. Fast-loading, no heavy images.
Commit as "Add landing page".

Prompt 8: Deploy

Prepare for Vercel deployment:
1. Make sure all env vars are documented in .env.local.example
2. Add a vercel.json if needed for any route config
3. Run npm run build and fix any issues
4. Create a comprehensive README.md with setup instructions
Commit as "Prepare for deployment".

---

What You Built

In ~8 hours with Claude Code:

• Landing page with pricing
• Email/password auth with protected routes
• User profiles with row-level security
• Stripe subscription billing with webhooks
• Customer billing portal
• Dashboard with settings and billing management
• TypeScript throughout, no any types
• Deployed on Vercel

The API cost was roughly $12. A freelance developer would charge $3-5K for this scope. A week of your own time at minimum.

---

Lessons Learned

1. CLAUDE.md is the highest-ROI thing you'll write. Every prompt benefits from it. Write it first.

2. Checkpoint after every phase. If phase 3 goes wrong, you can revert to the end of phase 2 and retry. Git commits are free.

3. Verify with builds, not vibes. After every major prompt, ask Claude Code to run the build. TypeScript errors caught now save hours later.

4. The more specific your prompts, the fewer iterations. "Add Stripe" = 3-4 back-and-forths. The prompt above with exact routes, env vars, and redirect behavior = 1 shot.

5. Don't fight it. If Claude Code structures something differently than you would have, resist the urge to restructure unless it's actually wrong. Consistency with your codebase matters more than matching your mental model.

---

What's Next

This is the foundation. From here, the next features are where it gets interesting — and where Claude Code really earns its keep:

• Email onboarding sequences (Resend + cron jobs)
• Admin dashboard (usage metrics, user management)
• AI features (embedding your own AI into the product)
• Team billing (multiple seats, role-based access)

Each of these is a single Claude Code session. The SaaS grows one prompt at a time.

If you're building a SaaS and want to see how other builders structure their Claude Code workflows, join AI Builder Club. We share real project repos, prompt libraries, and weekly build sessions.