Vibe Coding with Claude Code: Build and Ship a SaaS MVP in a Weekend
Andrej Karpathy coined "vibe coding" in early 2025 — the practice of describing what you want to an AI and letting it generate the code, barely reading the output, and just running it until it works. By April 2026, developers are using Claude Code to go from idea to deployed, revenue-ready SaaS MVP in days, not months.
This guide provides the practical framework: what actually works, what breaks, and the phase-by-phase approach that turns "vibes" into a product people pay for.
TL;DR:
| Phase | Time | What you ship |
|---|---|---|
| 1. Spec + CLAUDE.md | 2 hours | Architecture decision, tech stack, project structure |
| 2. Core features | 6–8 hours | Auth, database, API routes, basic UI |
| 3. AI features | 3–4 hours | Apify scraping + LLM processing |
| 4. Testing + deploy | 2–3 hours | Vercel/Railway deployment, domain, SSL |
| 5. Marketing page | 2 hours | Landing page with value prop and signup |
| Total | 15–19 hours | Deployed MVP with AI features |
Prerequisites:
- Claude Code installed with Claude Pro ($20/mo) or Max ($100/mo)
- GitHub account
- Vercel account (free tier)
- Supabase account (free tier)
- Comfortable reading and editing code (TypeScript/JavaScript), working with CLI tools, and following API documentation. You don't need to write complex algorithms from scratch — Claude Code handles most generation — but you should be able to review and adjust the code it produces.
What vibe coding actually means in 2026
Karpathy's original concept was simple: "I just see things, say things, run things, and copy-paste things, and it mostly works." By April 2026, vibe coding has evolved from a meme into a legitimate product development strategy with recognizable patterns:
| Vibe coding element | 2025 reality | 2026 reality |
|---|---|---|
| Code generation | Copilot autocomplete | Claude Code writes entire feature branches |
| Architecture | You design, AI fills in | AI proposes, you approve |
| Testing | Manual or skip | Claude Code writes and runs tests |
| Deployment | Separate process | Deployment via Vercel CLI (Claude Code generates and runs vercel --prod commands — MCP provides tool access, not deployment hosting) |
| Debugging | Copy error → paste → try again | Claude Code reads logs, diagnoses, fixes |
The key insight: vibe coding in 2026 works because Claude Code is agentic — it doesn't just write code, it reads your project, understands context, plans multi-step changes, runs tests, and iterates until things work.
The recommended stack
This stack is chosen for speed to deploy, free tier availability, and Claude Code compatibility:
| Layer | Technology | Why | Free tier |
|---|---|---|---|
| Framework | Next.js 14+ (App Router) | Claude Code generates Next.js well; SSR + API routes in one repo | ✅ |
| Database | Supabase (PostgreSQL + Auth) | Auth solved, real-time, row-level security | ✅ (500 MB) |
| Payments | Stripe | Standard, documented, Claude knows the APIs | ✅ (test mode) |
| AI/LLM | Claude API or Ollama | For SaaS features that need AI processing | Not included in Claude Pro — SaaS backend LLM calls need Anthropic API billing (pay-per-token) or use Ollama locally (free) |
| Web data | Apify | Scraping and data collection APIs | ✅ ($5 credits) |
| Hosting | Vercel | Free SSL, auto-deploy from Git, serverless functions | ✅ |
| Domain | Any registrar | Often ~$1–15 first year promo; .com renewals typically ~$10–15+/year — check registrar pricing |
Claude Pro ($20/mo) unlocks Claude Code for development. Your SaaS app calling the Claude API uses separate pay-per-token billing — start with Anthropic Console for an API key.
Phase 1: The CLAUDE.md setup (2 hours)
The CLAUDE.md file is the most important artifact in vibe coding. It teaches Claude Code your project's rules, architecture, and constraints. A well-written CLAUDE.md is the difference between vibe coding and vibe debugging.
Create your project and CLAUDE.md:
npx create-next-app@latest my-saas --typescript --tailwind --app --src-dir --use-npm
cd my-saas
Now create CLAUDE.md in the project root:
# CLAUDE.md — My SaaS MVP
## Product
- One-sentence description: [What your SaaS does]
- Target user: [Who pays for this]
- Core value prop: [Why they pay]
## Architecture Rules
- Next.js 14 App Router (use /app directory, not /pages)
- Server Components by default; Client Components only for interactivity
- Supabase for auth and database (use @supabase/ssr)
- Stripe for payments (use stripe npm package server-side only)
- All API logic in Route Handlers (/app/api/*)
- TypeScript strict mode — no `any` types
- Use Zod for input validation on all API routes
## File Structure
/src/app — pages and layouts
/src/app/api — API route handlers
/src/components — reusable UI components
/src/lib — utilities, Supabase client, Stripe config
/src/types — TypeScript type definitions
## Database Schema (Supabase)
- users: managed by Supabase Auth
- profiles: id (uuid, FK users), name, plan (free|pro|enterprise)
- [your domain tables here]
## Coding Standards
- Use server actions for mutations where possible
- Handle loading and error states in every page
- Every API route returns typed JSON responses
- Use next/image for all images
- Write unit tests for business logic with Vitest
Spec-driven development
Before writing any code, create a spec file that Claude Code follows:
cat > SPEC.md << 'EOF'
# MVP Feature Spec
## Must-Have (Weekend)
- [ ] User signup/login (Supabase Auth)
- [ ] Dashboard showing user's [data]
- [ ] API integration with [Apify/external service]
- [ ] Basic Stripe checkout for Pro plan
- [ ] Landing page with value prop
## Nice-to-Have (Week 2)
- [ ] Email notifications
- [ ] Usage analytics
- [ ] Team features
## Out of Scope
- Mobile app
- Multi-tenancy
- Advanced analytics
EOF
Now start Claude Code:
claude "Read CLAUDE.md and SPEC.md. Set up the project structure, install all dependencies, and create the Supabase database schema. Don't build features yet — just the foundation."
Phase 2: Core features (6–8 hours)
With the foundation set, build features one by one:
Authentication
claude "Implement user authentication using Supabase Auth with @supabase/ssr.
Create signup, login, and logout flows. Add a protected dashboard route that
redirects unauthenticated users. Follow the CLAUDE.md architecture rules."
Database + API routes
claude "Create the database tables defined in CLAUDE.md. Generate API route
handlers for CRUD operations with Zod validation. Add proper error handling
and TypeScript types for all request/response shapes."
Basic UI
claude "Build the dashboard page showing the user's data in a clean,
modern layout. Use Tailwind CSS. Add a sidebar navigation with links to
Dashboard, Settings, and Billing. Make it responsive."
Stripe integration
claude "Add Stripe checkout for the Pro plan. Create a pricing page with
Free vs Pro comparison. Handle the checkout session, success/cancel
redirects, and webhook for payment confirmation. Use Stripe's official
Node.js library."
Time-saving tip: After each feature, run claude "Run all tests and fix any failures". Claude Code will write tests, run them, and fix issues in a loop.
Phase 3: AI features with Apify (3–4 hours)
This is where your SaaS gets its competitive edge. Most MVPs in 2026 differentiate through AI-powered data processing — and Apify provides the web data pipeline.
Example: SaaS that monitors competitor pricing
claude "Create an API route at /api/monitor that:
1. Accepts a competitor URL
2. Calls the Apify Website Content Crawler API to scrape the pricing page
3. Sends the scraped content to Claude API for structured extraction
(plan names, prices, features)
4. Stores the extracted pricing data in Supabase
5. Returns the structured pricing comparison
Use the Apify API (REST, not MCP) with the token from process.env.APIFY_TOKEN.
Follow the Apify API docs: https://docs.apify.com/api/v2?fpr=use-apify"
Legal note: Web scraping should comply with each target site's Terms of Service and
robots.txt. Review Apify's legal resources and consult Apify's compliance documentation before scraping in production. LinkedIn scraping in particular has legal and ToS restrictions.
Example: SaaS that generates lead reports
claude "Create a lead research feature:
1. User inputs a company name
2. Backend calls Apify Google Search Scraper to find the company website
3. Calls Apify Website Content Crawler to scrape the company site
4. Sends scraped content to Claude API to extract:
company size, industry, tech stack, key products
5. Generates a formatted lead report and stores in Supabase
6. Displays the report on the dashboard"
For more AI agent patterns, see AI Agent Frameworks 2026 and AI Research Agent with LangGraph + Apify.
Phase 4: Testing and deployment (2–3 hours)
Run tests
claude "Write comprehensive tests for all API routes and critical business
logic using Vitest. Test authentication flows, Stripe webhook handling,
and the data processing pipeline. Run all tests and fix any failures."
Deploy to Vercel
# Install Vercel CLI
npm i -g vercel
# Deploy
vercel --prod
Set environment variables in Vercel dashboard:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEYSUPABASE_SERVICE_ROLE_KEYSTRIPE_SECRET_KEYSTRIPE_WEBHOOK_SECRETAPIFY_TOKENANTHROPIC_API_KEY
Custom domain
- Buy a domain (Namecheap, Cloudflare, Porkbun)
- Add it in Vercel: Project Settings → Domains → Add
- Update DNS records as Vercel instructs
- SSL provisioned automatically
Phase 5: Marketing page (2 hours)
The prompt below asks for a clear call to action (CTA) on the landing page hero.
claude "Create a landing page at / (the root route) with:
1. Hero section with headline, subheadline, and CTA button
2. Problem/solution section (3 pain points, 3 solutions)
3. Feature showcase with icons and descriptions
4. Pricing comparison (Free vs Pro)
5. FAQ section with 6 questions
6. Footer with links
Use the same Tailwind design system. Make it visually impressive
with gradients, animations, and professional typography.
Unauthenticated users see this page; authenticated users redirect
to /dashboard."
Where vibe coding fails
Honest assessment — vibe coding has real failure modes that affect production quality:
| Failure mode | Impact | Mitigation |
|---|---|---|
| Security blind spots | AI generates code that works but has auth bypasses, SQL injection, or XSS | Always review auth logic manually. Run npm audit. Add Snyk or similar scanning. |
| Technical debt accumulation | Fast iteration creates spaghetti code that's hard to maintain | Regularly ask Claude Code to "review the codebase for code quality issues and refactor." |
| Hallucinated APIs | Claude may generate calls to APIs that don't exist or use deprecated endpoints | Verify API calls against official documentation before deploying. |
| Over-engineering | Claude Code can add unnecessary complexity when simpler solutions exist | Be specific: "Use the simplest approach. No over-abstraction." |
| Missing edge cases | Happy path works, but error states, loading states, and empty states are undefined | Explicitly request: "Add error handling, loading states, and empty state UI for this feature." |
| Dependency bloat | Claude installs packages you don't need | Review package.json after each session. Remove unused dependencies. |
Should you vibe code production software?
| Scenario | Verdict |
|---|---|
| Side project / solo revenue product | ✅ Yes — speed matters more than perfection |
| Startup MVP to validate market | ✅ Yes — ship in a weekend, validate, then rewrite if it works |
| B2B SaaS with paying customers | ⚠️ Cautiously — vibe code the MVP, then invest in security review and refactoring |
| Healthcare / fintech / compliance-heavy | ✗ No — regulatory requirements demand careful architecture and audit trails |
| Scaling beyond 1,000 users | ⚠️ Partially — vibe code features, but have humans review before merge |
Yes, for the definition of 'MVP with core features working and deployed to a production URL.' Real founders are shipping vibe-coded products that generate revenue within weeks. The quality bar is lower than a fully engineered product, but it's sufficient to validate market demand — which is the point of an MVP.
Vibe coding is a mindset: you describe outcomes, not implementations. Instead of 'write a function that...' you say 'make the user able to...' and let Claude Code handle architecture decisions, library choices, and implementation details. You steer, Claude drives.
Claude Pro ($20/month) handles most weekend projects. Vercel free tier for hosting. Supabase free tier for database. Apify free tier ($5 credits) for web data features. Total for a basic SaaS MVP: $20/month until you need to scale.
Not by default. Claude Code generates working code but doesn't automatically apply security best practices everywhere. After vibe coding the MVP, do a security review: check authentication flows, validate inputs, review database queries, and run automated security scanning (npm audit, Snyk).
Next.js + Supabase + Stripe + Vercel. Claude Code generates clean Next.js code, Supabase handles auth and database without custom backend, Stripe's well-documented APIs are in Claude's training data, and Vercel deploys with zero configuration.
When you have paying customers and the product is validated. At that point, invest in: proper testing, security audit, code review, documentation, and architecture refactoring. Vibe coding gets you from 0 to 1; engineering gets you from 1 to 100.
Vibe coding with Claude Code in 2026 is not a meme — it is the fastest path from idea to revenue for technical founders. The framework above produces a deployed, functional SaaS MVP in 15–19 hours. The key is a well-structured CLAUDE.md, phase-by-phase execution, and knowing when to stop vibing and start engineering.
Install Claude Code and build your first CLAUDE.md today. For AI-powered data features, sign up on Apify and add scraping APIs to your SaaS.