"How I Used AI to Build a SaaS Product Solo in 30 Days"

Product: PromptLab 🧪
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Core feature: Test prompts across multiple AI models
Target user: Developers building AI features
Pricing: Free tier (5 tests/day) + Pro ($9/month)
Goal: Launch in 30 days
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

My conversation with Claude 💬
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Me: "I want to build a prompt testing SaaS.
     What's the minimal database schema I need
     for the core features?"

Claude: [gave me this schema]

Users
  id, email, passwordHash, createdAt, plan

Prompts
  id, userId, title, content, createdAt

TestRuns
  id, promptId, model, output, latency,
  tokensUsed, cost, rating, createdAt

Comparisons
  id, userId, promptIds[], createdAt

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Me: "What am I missing for a v1 launch?"

Claude: "You'll need: rate limiting per plan,
         API key storage for user's own keys,
         and a usage tracking table for billing.
         Skip analytics for v1 — add post-launch."

# The exact stack I chose (and why) 🛠️
npx create-next-app@latest promptlab --typescript --tailwind --app

# Database — Supabase (free tier, Postgres, auth built-in)
npm install @supabase/supabase-js

# Payments — Stripe (industry standard, great docs)
npm install stripe @stripe/stripe-js

# Email — Resend (simple API, generous free tier)
npm install resend

# UI components — shadcn/ui (free, beautiful, accessible)
npx shadcn-ui@latest init

# Form handling — React Hook Form + Zod
npm install react-hook-form zod @hookform/resolvers

// Supabase auth — Copilot autocompleted most of this ⚡
// app/auth/callback/route.ts

import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'

export async function GET(request: Request) {
  const requestUrl = new URL(request.url)
  const code = requestUrl.searchParams.get('code')

  if (code) {
    const supabase = createRouteHandlerClient({ cookies })
    await supabase.auth.exchangeCodeForSession(code)
  }

  return NextResponse.redirect(requestUrl.origin + '/dashboard')
}

-- Database schema — Claude wrote this from my requirements
-- I just reviewed and tweaked ✅

CREATE TABLE prompts (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  content TEXT NOT NULL,
  tags TEXT[] DEFAULT '{}',
  is_favorite BOOLEAN DEFAULT false,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  updated_at TIMESTAMPTZ DEFAULT NOW()
);

CREATE TABLE test_runs (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  prompt_id UUID REFERENCES prompts(id) ON DELETE CASCADE,
  model TEXT NOT NULL,  -- 'gpt-4o', 'claude-sonnet', 'gemini-flash'
  output TEXT,
  latency_ms INTEGER,
  tokens_used INTEGER,
  cost_usd DECIMAL(10,6),
  rating INTEGER CHECK (rating BETWEEN 1 AND 5),
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Row Level Security — Claude explained WHY this matters 🔒
ALTER TABLE prompts ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Users own their prompts"
  ON prompts FOR ALL
  USING (auth.uid() = user_id);

✅ Auth working (login, signup, logout)
✅ Database schema live on Supabase
✅ Protected routes working
✅ Basic dashboard skeleton
Days used: 7 ✓

// app/api/test/route.ts
// The heart of the product 🧪

import OpenAI from 'openai'
import Anthropic from '@anthropic-ai/sdk'
import { GoogleGenerativeAI } from '@google/generative-ai'

const openai    = new OpenAI({ apiKey: process.env.OPENAI_API_KEY })
const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY })
const gemini    = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!)

export async function POST(req: Request) {
  const { prompt, models, variables } = await req.json()

  // Replace template variables in prompt 🔄
  // e.g. "Explain {{topic}} to a {{level}} developer"
  const processedPrompt = Object.entries(variables || {}).reduce(
    (acc, [key, val]) => acc.replace(`{{${key}}}`, val as string),
    prompt
  )

  // Run all models in PARALLEL — not sequential! ⚡
  // This was Claude's suggestion — cuts wait time by 3x
  const results = await Promise.allSettled([
    models.includes('gpt-4o')     ? runOpenAI(processedPrompt)    : null,
    models.includes('claude')     ? runClaude(processedPrompt)     : null,
    models.includes('gemini')     ? runGemini(processedPrompt)     : null,
  ].filter(Boolean))

  return Response.json({
    results: results.map((r, i) => ({
      model: models[i],
      success: r.status === 'fulfilled',
      output: r.status === 'fulfilled' ? r.value.output : null,
      latency: r.status === 'fulfilled' ? r.value.latency : null,
      error: r.status === 'rejected' ? r.reason.message : null,
    }))
  })
}

// Each model runner measures latency 📊
async function runOpenAI(prompt: string) {
  const start = Date.now()
  const res = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: prompt }]
  })
  return {
    output: res.choices[0].message.content,
    latency: Date.now() - start,
    tokens: res.usage?.total_tokens
  }
}

async function runClaude(prompt: string) {
  const start = Date.now()
  const res = await anthropic.messages.create({
    model: 'claude-haiku-4-5-20251001', // fast + cheap for testing 💰
    max_tokens: 1024,
    messages: [{ role: 'user', content: prompt }]
  })
  return {
    output: res.content[0].type === 'text' ? res.content[0].text : '',
    latency: Date.now() - start,
    tokens: res.usage.input_tokens + res.usage.output_tokens
  }
}

async function runGemini(prompt: string) {
  const start = Date.now()
  const model = gemini.getGenerativeModel({ model: 'gemini-1.5-flash' })
  const res = await model.generateContent(prompt)
  return {
    output: res.response.text(),
    latency: Date.now() - start,
    tokens: null  // Gemini free tier doesn't return token counts
  }
}

// The side-by-side comparison component
// Copilot autocompleted about 60% of this 🤖

const ComparisonGrid = ({ results }: { results: TestResult[] }) => {
  return (
    <div className={`grid gap-4 ${
      results.length === 2 ? 'grid-cols-2' :
      results.length === 3 ? 'grid-cols-3' : 'grid-cols-1'
    }`}>
      {results.map((result) => (
        <ResultCard key={result.model} result={result} />
      ))}
    </div>
  )
}

const ResultCard = ({ result }: { result: TestResult }) => {
  const [rating, setRating] = useState(0)
  const [copied, setCopied] = useState(false)

  const handleCopy = async () => {
    await navigator.clipboard.writeText(result.output || '')
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }

  return (
    <div className="border rounded-xl p-4 space-y-3 bg-white shadow-sm">

      {/* Header */}
      <div className="flex justify-between items-center">
        <div className="flex items-center gap-2">
          <ModelBadge model={result.model} />
          <span className="text-xs text-gray-400">
            {result.latency}ms ⚡
          </span>
        </div>
        <button onClick={handleCopy} className="text-xs text-gray-400">
          {copied ? '✅ Copied' : '📋 Copy'}
        </button>
      </div>

      {/* Output */}
      <div className="text-sm leading-relaxed text-gray-700 min-h-[120px]">
        {result.success ? result.output : (
          <span className="text-red-400">❌ {result.error}</span>
        )}
      </div>

      {/* Rating */}
      <div className="flex gap-1 pt-2 border-t">
        <span className="text-xs text-gray-400 mr-1">Rate:</span>
        {[1,2,3,4,5].map(star => (
          <button
            key={star}
            onClick={() => setRating(star)}
            className={`text-lg ${star <= rating ? 'text-yellow-400' : 'text-gray-200'}`}
          >
            ★
          </button>
        ))}
      </div>
    </div>
  )
}

// app/api/test/route.ts — adding rate limiting
// Claude designed this entire system when I was stuck 🆘

import { createRouteHandlerClient } from '@supabase/auth-helpers-nextjs'

const LIMITS = {
  free: 5,    // 5 tests per day
  pro: 500,   // 500 tests per day
}

async function checkRateLimit(userId: string, plan: string) {
  const supabase = createRouteHandlerClient({ cookies })

  // Count today's tests for this user
  const today = new Date()
  today.setHours(0, 0, 0, 0)

  const { count } = await supabase
    .from('test_runs')
    .select('*', { count: 'exact', head: true })
    .eq('user_id', userId)
    .gte('created_at', today.toISOString())

  const limit = LIMITS[plan as keyof typeof LIMITS] || LIMITS.free

  return {
    allowed: (count || 0) < limit,
    used: count || 0,
    limit,
    remaining: Math.max(0, limit - (count || 0))
  }
}

✅ Multi-model testing working
✅ Side-by-side comparison UI
✅ Rating system
✅ Rate limiting by plan
Days used: 14 ✓

// app/api/create-checkout/route.ts
// Stripe checkout — Claude explained the flow, Copilot wrote the code

import Stripe from 'stripe'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function POST(req: Request) {
  const { userId, email } = await req.json()

  const session = await stripe.checkout.sessions.create({
    payment_method_types: ['card'],
    mode: 'subscription',
    customer_email: email,
    line_items: [{
      price: process.env.STRIPE_PRO_PRICE_ID,  // created in Stripe dashboard
      quantity: 1,
    }],
    metadata: { userId },  // pass userId to webhook 🔑
    success_url: `${process.env.NEXT_PUBLIC_APP_URL}/dashboard?upgraded=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_APP_URL}/pricing`,
  })

  return Response.json({ url: session.url })
}

// app/api/webhooks/stripe/route.ts
// Handle payment success — update user's plan in DB

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

  let event: Stripe.Event

  try {
    event = stripe.webhooks.constructEvent(
      body, sig, process.env.STRIPE_WEBHOOK_SECRET!
    )
  } catch {
    return new Response('Webhook signature invalid', { status: 400 })
  }

  // When payment succeeds — upgrade the user 🎉
  if (event.type === 'checkout.session.completed') {
    const session = event.data.object as Stripe.CheckoutSession
    const userId  = session.metadata?.userId

    if (userId) {
      await supabase
        .from('users')
        .update({ plan: 'pro' })
        .eq('id', userId)
    }
  }

  return new Response('OK')
}

My ChatGPT prompt for copy 📝
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
"Write landing page copy for a SaaS called PromptLab.
 It helps developers test AI prompts across multiple
 models side by side.

 Write:
 - Hero headline (under 8 words, punchy)
 - Hero subheadline (1-2 sentences)
 - 3 feature benefit pairs
 - 2 pricing tier descriptions
 - FAQ (5 questions)
 - CTA button text

 Tone: Direct. Developer-friendly. No buzzwords."
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Output in 15 seconds:
Headline: "Test Once. Ship the Best Prompt."
Subheadline: "Run any prompt across GPT-4o, Claude, and Gemini
              simultaneously. See outputs, latency, and cost —
              side by side."

// Welcome email with Resend — 10 lines 🎉
import { Resend } from 'resend'
const resend = new Resend(process.env.RESEND_API_KEY)

export async function sendWelcomeEmail(email: string, name: string) {
  await resend.emails.send({
    from: 'PromptLab <hello@promptlab.dev>',
    to: email,
    subject: '🧪 Welcome to PromptLab!',
    html: `
      <h1>Hey ${name}! 👋</h1>
      <p>You're in. Start testing your first prompt:</p>
      <a href="https://promptlab.dev/dashboard"
         style="background:#6366f1;color:white;padding:12px 24px;
                border-radius:8px;text-decoration:none">
        Open Dashboard →
      </a>
      <p>You get 5 free tests per day. <a href="/pricing">Go Pro</a>
         for 500/day.</p>
    `
  })
}

✅ Stripe payments working
✅ Webhooks handling upgrades
✅ Landing page live
✅ Welcome emails sending
Days used: 21 ✓

Bug #1: Supabase RLS blocking dashboard queries
→ Pasted error into Claude
→ Fixed in 8 minutes

Bug #2: Stripe webhook failing in production
→ Claude identified I was missing raw body parsing
→ Fixed in 12 minutes

Bug #3: React state update after unmount warning
→ Copilot suggested the cleanup pattern
→ Fixed in 3 minutes

Without AI: These would've taken 2-3 hours each
With AI: 23 minutes total 🤯

// Claude suggested this optimization I hadn't thought of
// Cache prompt results for identical inputs — saves API costs 💰

const CACHE = new Map<string, { result: any; expires: number }>()

async function getCachedOrFresh(cacheKey: string, fetchFn: () => Promise<any>) {
  const cached = CACHE.get(cacheKey)
  const now    = Date.now()

  if (cached && cached.expires > now) {
    return cached.result  // cache hit! ⚡
  }

  const fresh = await fetchFn()
  CACHE.set(cacheKey, {
    result: fresh,
    expires: now + 5 * 60 * 1000  // 5 minute cache
  })
  return fresh
}

Launch checklist ✅
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
☑ Deployed to Vercel production
☑ Custom domain connected
☑ Stripe in live mode (not test)
☑ All environment variables set
☑ Error monitoring (Sentry) added
☑ Posted on Twitter/X
☑ Posted on Dev.to 😄
☑ Submitted to Product Hunt
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Final numbers 📈
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Signups day 1:      47 🎉
Week 1 total users: 183
First paid user:    Day 3 💰
Month 1 MRR:        $127
Month 1 pro users:  14

Code written:
  Without AI (estimate): ~3,000 lines
  With AI help:          ~1,200 lines I actually typed
  Time saved:            ~3 weeks 🤯

Bugs fixed with AI: 23
Time saved on bugs: ~18 hours

Total build time:   30 days ✅
Solo developer:     Yes 👤
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

The 3-Tool Pipeline 🔄
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
1. PLAN with Claude
   → Architecture decisions
   → Database schema
   → "What am I missing?"
   → Security review

2. BUILD with Copilot
   → Writing actual code fast
   → Autocomplete patterns
   → Boilerplate generation

3. REVIEW with Claude
   → Paste what Copilot wrote
   → "Any issues? Any edge cases?"
   → Performance optimization
   → Bug investigation

4. COPY with ChatGPT
   → Landing page copy
   → Email templates
   → Error messages
   → Documentation
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

❌ Mistake 1: Built too many features for v1
   Should have launched with just the core test feature.
   2 extra features nobody asked for = 5 extra days wasted.

❌ Mistake 2: Didn't talk to users before building
   Spent 3 days building a "prompt history" feature.
   First 20 users: nobody used it.
   Should've asked first.

❌ Mistake 3: Trusted AI blindly on security
   Copilot wrote auth middleware that had a subtle bug.
   Always review security-critical code yourself.
   AI is a tool, not a safety net. 🔒

✅ What worked perfectly:
   Claude for architecture = 10/10
   Copilot for speed = 10/10
   ChatGPT for copy = 10/10
   Shipping imperfect v1 = best decision I made