I Built a SaaS in 48 Hours Using Only v0 + Cursor AI

saas-app/
├── app/
│   ├── layout.tsx                 # Root layout (v0 generated)
│   ├── page.tsx                   # Landing page (v0 generated)
│   ├── dashboard/
│   │   ├── layout.tsx             # Dashboard layout (v0 generated)
│   │   ├── page.tsx               # Dashboard home (v0 generated)
│   │   ├── settings/
│   │   │   └── page.tsx           # Settings page (v0 generated)
│   │   └── billing/
│   │       └── page.tsx           # Billing page (v0 generated)
│   ├── api/
│   │   ├── auth/
│   │   │   ├── signup/route.ts    # Auth API (Cursor generated)
│   │   │   ├── login/route.ts     # Auth API (Cursor generated)
│   │   │   └── [...nextauth]/
│   │   │       └── route.ts       # NextAuth handler (Cursor generated)
│   │   ├── webhooks/
│   │   │   └── stripe/route.ts    # Stripe webhook (Cursor generated)
│   │   └── subscription/
│   │       └── route.ts           # Subscription API (Cursor generated)
│   └── (auth)/
│       ├── login/page.tsx         # Login page (v0 generated)
│       └── signup/page.tsx        # Signup page (v0 generated)
├── components/
│   ├── ui/                        # shadcn/ui components (v0 generated)
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── input.tsx
│   │   └── dialog.tsx
│   ├── dashboard/                 # Feature components (v0 generated)
│   │   ├── sidebar.tsx
│   │   ├── stats-cards.tsx
│   │   └── activity-feed.tsx
│   └── billing/                   # Billing components (v0 + Cursor)
│       ├── pricing-cards.tsx
│       └── subscription-status.tsx
├── lib/
│   ├── auth.ts                    # Auth config (Cursor generated)
│   ├── stripe.ts                  # Stripe client (Cursor generated)
│   ├── db.ts                      # Database client (Cursor generated)
│   └── utils.ts                   # Utilities (Cursor generated)
├── prisma/
│   ├── schema.prisma              # Database schema (Cursor generated)
│   └── migrations/                # Database migrations
├── middleware.ts                   # Global auth middleware (Cursor generated)
├── .cursorrules                    # Cursor project rules (manual)
├── tailwind.config.ts
├── next.config.ts
└── package.json

// Dashboard page — generated by v0, data layer wired manually
// v0 prompt: "Create a SaaS dashboard with a sidebar navigation,
// stats cards showing MRR, active users, and churn rate,
// and an activity feed showing recent events"

import { Suspense } from 'react'
import { Sidebar } from '@/components/dashboard/sidebar'
import { StatsCards } from '@/components/dashboard/stats-cards'
import { ActivityFeed } from '@/components/dashboard/activity-feed'
import { getDashboardStats, getRecentActivity } from '@/lib/api'

export default async function DashboardPage() {
  // Data layer — wired manually after v0 generated the UI
  const statsPromise = getDashboardStats()
  const activityPromise = getRecentActivity()

  return (
    <div className="flex min-h-screen">
      {/* Sidebar — v0 generated */}
      <Sidebar />

      <main className="flex-1 p-6 lg:p-8">
        <div className="space-y-8">
          {/* Header — v0 generated */}
          <div>
            <h1 className="text-3xl font-bold tracking-tight">
              Dashboard
            </h1>
            <p className="text-muted-foreground">
              Overview of your SaaS metrics
            </p>
          </div>

          {/* Stats — v0 generated shell, data wired manually */}
          <Suspense fallback={<StatsCardsSkeleton />}>
            <StatsCardsWrapper promise={statsPromise} />
          </Suspense>

          {/* Activity — v0 generated shell, data wired manually */}
          <Suspense fallback={<ActivityFeedSkeleton />}>
            <ActivityFeedWrapper promise={activityPromise} />
          </Suspense>
        </div>
      </main>
    </div>
  )
}

// Data wrapper components — Cursor generated
async function StatsCardsWrapper({
  promise
}: {
  promise: ReturnType<typeof getDashboardStats>
}) {
  const stats = await promise
  return <StatsCards stats={stats} />
}

async function ActivityFeedWrapper({
  promise
}: {
  promise: ReturnType<typeof getRecentActivity>
}) {
  const activities = await promise
  return <ActivityFeed activities={activities} />
}

// Skeleton loaders — v0 generated
function StatsCardsSkeleton() {
  return (
    <div className="grid gap-4 md:grid-cols-3">
      {Array.from({ length: 3 }).map((_, i) => (
        <div
          key={i}
          className="h-32 rounded-lg border bg-muted animate-pulse"
        />
      ))}
    </div>
  )
}

function ActivityFeedSkeleton() {
  return (
    <div className="space-y-4">
      {Array.from({ length: 5 }).map((_, i) => (
        <div
          key={i}
          className="h-16 rounded-lg border bg-muted animate-pulse"
        />
      ))}
    </div>
  )
}

// ============================================
// Cursor AI Generated Backend Code
// ============================================

// ---- .cursorrules (Project Context) ----
// This file tells Cursor how to generate code for this project
// Place in project root as .cursorrules

/*
Project: SaaS Application
Framework: Next.js 16 with App Router
Database: PostgreSQL with Prisma ORM
Auth: NextAuth.js with JWT
Payments: Stripe
Styling: Tailwind CSS with shadcn/ui

Coding Standards:
- Use TypeScript strict mode
- All API routes return JSON with { data, error } shape
- Use Zod for input validation
- Use Prisma for all database access
- Never use any type — always define explicit types
- Error messages must be user-safe — no stack traces
- All dates in UTC, format on the client

File Structure:
- app/api/ for route handlers
- lib/ for shared utilities and clients
- types/ for TypeScript interfaces
- prisma/ for database schema and migrations
*/

// ---- Types (defined first, then implemented) ----
// Cursor generates implementation matching these interfaces

interface ApiResponse<T> {
  data: T | null
  error: string | null
}

interface Subscription {
  id: string
  userId: string
  plan: 'free' | 'pro' | 'enterprise'
  status: 'active' | 'canceled' | 'past_due'
  currentPeriodEnd: Date
  stripeSubscriptionId: string | null
}

interface DashboardStats {
  mrr: number
  activeUsers: number
  churnRate: number
  newSignupsToday: number
}

interface CreateSubscriptionInput {
  plan: 'pro' | 'enterprise'
  paymentMethodId: string
}

// ---- Cursor Generated: Stripe Webhook Handler ----
// Prompt: "Create a Stripe webhook handler that processes
// subscription events and updates the database"

import { NextRequest, NextResponse } from 'next/server'
import { headers } from 'next/headers'
import Stripe from 'stripe'
import { prisma } from '@/lib/db'
import { stripe } from '@/lib/stripe'

export async function POST(req: NextRequest) {
  const body = await req.text()
  const headersList = headers()
  const signature = headersList.get('stripe-signature')

  if (!signature) {
    return NextResponse.json(
      { data: null, error: 'Missing stripe-signature header' },
      { status: 400 }
    )
  }

  let event: Stripe.Event

  try {
    event = stripe.webhooks.constructEvent(
      body,
      signature,
      process.env.STRIPE_WEBHOOK_SECRET!
    )
  } catch (err) {
    return NextResponse.json(
      { data: null, error: 'Invalid signature' },
      { status: 400 }
    )
  }

  switch (event.type) {
    case 'checkout.session.completed': {
      const session = event.data.object as Stripe.Checkout.Session
      const userId = session.metadata?.userId
      const subscriptionId = session.subscription as string

      if (!userId) break

      const subscription = await stripe.subscriptions.retrieve(
        subscriptionId
      )

      await prisma.subscription.update({
        where: { userId },
        data: {
          stripeSubscriptionId: subscription.id,
          status: 'active',
          currentPeriodEnd: new Date(
            subscription.current_period_end * 1000
          ),
        },
      })
      break
    }

    case 'customer.subscription.updated': {
      const subscription = event.data.object as Stripe.Subscription

      await prisma.subscription.update({
        where: { stripeSubscriptionId: subscription.id },
        data: {
          status: subscription.status === 'active'
            ? 'active'
            : subscription.status === 'past_due'
            ? 'past_due'
            : 'canceled',
          currentPeriodEnd: new Date(
            subscription.current_period_end * 1000
          ),
        },
      })
      break
    }

    case 'customer.subscription.deleted': {
      const subscription = event.data.object as Stripe.Subscription

      await prisma.subscription.update({
        where: { stripeSubscriptionId: subscription.id },
        data: {
          status: 'canceled',
        },
      })
      break
    }
  }

  return NextResponse.json({ data: { received: true }, error: null })
}

// ---- Cursor Generated: Dashboard Stats API ----
// Prompt: "Create an API route that returns dashboard stats:
// MRR, active users, churn rate, new signups today"

// app/api/dashboard/stats/route.ts

import { NextResponse } from 'next/server'
import { getServerSession } from 'next-auth'
import { prisma } from '@/lib/db'
import { authOptions } from '@/lib/auth'

export async function GET() {
  const session = await getServerSession(authOptions)

  if (!session?.user) {
    return NextResponse.json(
      { data: null, error: 'Unauthorized' },
      { status: 401 }
    )
  }

  const now = new Date()
  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1)
  const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate())

  // MRR: sum of active subscription prices
  const activeSubscriptions = await prisma.subscription.findMany({
    where: { status: 'active' },
    select: { plan: true },
  })

  const planPrices: Record<string, number> = {
    free: 0,
    pro: 29,
    enterprise: 99,
  }

  const mrr = activeSubscriptions.reduce(
    (sum, sub) => sum + (planPrices[sub.plan] || 0),
    0
  )

  // Active users: users with active subscriptions
  const activeUsers = activeSubscriptions.length

  // Churn rate: canceled this month / active at start of month
  const canceledThisMonth = await prisma.subscription.count({
    where: {
      status: 'canceled',
      updatedAt: { gte: startOfMonth },
    },
  })

  const churnRate = activeUsers > 0
    ? Math.round((canceledThisMonth / activeUsers) * 100 * 10) / 10
    : 0

  // New signups today
  const newSignupsToday = await prisma.user.count({
    where: { createdAt: { gte: startOfDay } },
  })

  const stats: DashboardStats = {
    mrr,
    activeUsers,
    churnRate,
    newSignupsToday,
  }

  return NextResponse.json({ data: stats, error: null })
}

// ============================================
// Database Schema — designed manually, generated by Cursor
// ============================================

// prisma/schema.prisma
// Cursor prompt: "Generate a Prisma schema for a SaaS with
// users, subscriptions, and usage tracking"

// ---- Prisma Schema (Cursor generated from manual design) ----

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id            String    @id @default(cuid())
  email         String    @unique
  name          String?
  passwordHash  String
  emailVerified DateTime?
  createdAt     DateTime  @default(now())
  updatedAt     DateTime  @updatedAt

  subscription  Subscription?
  usageLogs     UsageLog[]

  @@index([email])
  @@index([createdAt])
}

model Subscription {
  id                      String   @id @default(cuid())
  userId                  String   @unique
  user                    User     @relation(fields: [userId], references: [id])
  plan                    String   @default("free")
  status                  String   @default("active")
  stripeCustomerId        String?  @unique
  stripeSubscriptionId    String?  @unique
  currentPeriodStart      DateTime @default(now())
  currentPeriodEnd        DateTime
  createdAt               DateTime @default(now())
  updatedAt               DateTime @updatedAt

  @@index([userId])
  @@index([status])
  @@index([stripeSubscriptionId])
}

model UsageLog {
  id          String   @id @default(cuid())
  userId      String
  user        User     @relation(fields: [userId], references: [id])
  action      String
  resource    String
  metadata    Json?
  createdAt   DateTime @default(now())

  @@index([userId, createdAt])
  @@index([action])
}

// ---- Auth Configuration (Cursor generated) ----
// lib/auth.ts

import { NextAuthOptions } from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'
import bcrypt from 'bcrypt'
import { prisma } from './db'

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialsProvider({
      name: 'credentials',
      credentials: {
        email: { label: 'Email', type: 'email' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          return null
        }

        const user = await prisma.user.findUnique({
          where: { email: credentials.email },
        })

        if (!user) {
          return null
        }

        const passwordValid = await bcrypt.compare(
          credentials.password,
          user.passwordHash
        )

        if (!passwordValid) {
          return null
        }

        return {
          id: user.id,
          email: user.email,
          name: user.name,
        }
      },
    }),
  ],
  session: {
    strategy: 'jwt',
    maxAge: 30 * 24 * 60 * 60, // 30 days
  },
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.id = user.id
      }
      return token
    },
    async session({ session, token }) {
      if (session.user) {
        session.user.id = token.id as string
      }
      return session
    },
  },
  pages: {
    signIn: '/login',
  },
}

// ---- Global Auth Middleware (Cursor generated) ----
// middleware.ts

import { withAuth } from 'next-auth/middleware'
import { NextResponse } from 'next/server'

export default withAuth(
  function middleware(req) {
    return NextResponse.next()
  },
  {
    callbacks: {
      authorized: ({ token }) => !!token,
    },
  }
)

// IMPORTANT: Exclude webhooks and public auth routes
export const config = {
  matcher: [
    '/dashboard/:path*',
    '/api/((?!webhooks/stripe|auth).*)',
  ],
}

// ============================================
// Lessons Learned: What AI Can and Cannot Do
// ============================================

// ---- What AI Handles Well ----

// 1. UI Components (v0)
// Prompt: "Create a pricing card with three tiers"
// Output: Production-ready React component with Tailwind CSS
// Human effort: 0 minutes (copy-paste)

// 2. CRUD API Routes (Cursor)
// Prompt: "Create CRUD routes for the products resource"
// Output: GET, POST, PUT, DELETE routes with Prisma
// Human effort: 5 minutes (review and add validation)

// 3. Database Queries (Cursor)
// Prompt: "Write a query that returns MRR grouped by plan"
// Output: Prisma aggregate query
// Human effort: 2 minutes (verify correctness)

// 4. Integration Code (Cursor)
// Prompt: "Create a Stripe checkout session for the pro plan"
// Output: Stripe API integration with error handling
// Human effort: 10 minutes (add webhook handling)

// ---- What AI Handles Poorly ----

// 1. Architecture Decisions
// AI cannot decide: monorepo vs separate repos, auth strategy,
// caching strategy, deployment model
// Human effort: 2-4 hours of design and documentation

// 2. Security Review
// AI-generated code often has:
// - Missing auth checks on new routes
// - SQL injection in raw queries (rare with Prisma)
// - Exposed sensitive data in API responses
// - Missing rate limiting
// Human effort: 1-2 hours of security audit

// 3. Edge Case Handling
// AI optimizes for happy path. Missing:
// - Concurrent request handling
// - Race condition prevention
// - Graceful degradation on service failure
// - Input validation for malformed data
// Human effort: 2-3 hours of testing and hardening

// 4. Performance Optimization
// AI-generated code is correct but not fast:
// - Missing database indexes
// - N+1 query patterns
// - Unnecessary re-renders in React
// - Missing caching layers
// Human effort: 1-2 hours of profiling and optimization

// ---- The 48-Hour Build Breakdown ----

const buildBreakdown = {
  'Architecture design': '2 hours',
  'v0 UI generation': '3 hours',
  'Cursor backend generation': '4 hours',
  'Data layer wiring': '3 hours',
  'Auth setup and review': '2 hours',
  'Stripe integration': '2 hours',
  'Database schema design': '1 hour',
  'Testing and edge cases': '4 hours',
  'Security review': '2 hours',
  'Deployment and config': '1 hour',
  'Bug fixes and polish': '4 hours',
  'Documentation': '1 hour',
  // Remaining: sleep, food, breaks
}

// Total coding time: ~29 hours over 2 days
// AI generated ~70% of the code
// Human wrote ~30% (wiring, review, edge cases, config)

// ---- Key Metrics ----

const metrics = {
  totalLinesOfCode: 4200,
  aiGeneratedLines: 2940, // 70%
  humanWrittenLines: 1260, // 30%
  timeSpentReviewing: '8 hours', // 28% of coding time
  bugsFoundInReview: 7,
  bugsFoundInProduction: 2,
  securityIssuesFound: 3, // All in AI-generated code
}