lesson-02

Discover how a solo founder built a production-ready SaaS MVP using advanced vibe coding techniques.

Project Overview

Product: TaskFlow - AI-powered project management Founder: Single technical founder Timeline: 2 weeks from idea to launch Stack: Next.js, Supabase, Stripe, OpenAI

The Challenge

Build a competitive project management tool with:

• Real-time collaboration
• AI task suggestions
• Team workspaces
• Subscription billing
• Mobile-responsive design

Week 1: Foundation Sprint

Day 1-2: Architecture with AI

# Initial project setup with Claude Code
claude "Create a Next.js 14 SaaS boilerplate with:
- App Router
- Supabase auth and database
- Stripe subscription integration
- Tailwind CSS with shadcn/ui
- TypeScript strict mode

Include:
- Multi-tenant workspace architecture
- Row-level security policies
- Webhook handlers for Stripe
- Environment configuration"

AI-Generated Project Structure

taskflow/
├── src/
│   ├── app/
│   │   ├── (auth)/
│   │   │   ├── login/
│   │   │   └── signup/
│   │   ├── (dashboard)/
│   │   │   ├── [workspaceId]/
│   │   │   │   ├── projects/
│   │   │   │   ├── tasks/
│   │   │   │   └── settings/
│   │   │   └── layout.tsx
│   │   ├── api/
│   │   │   ├── webhooks/stripe/
│   │   │   ├── ai/suggest/
│   │   │   └── tasks/
│   │   └── layout.tsx
│   ├── components/
│   │   ├── ui/ (shadcn)
│   │   ├── tasks/
│   │   ├── projects/
│   │   └── workspace/
│   ├── lib/
│   │   ├── supabase/
│   │   ├── stripe/
│   │   └── ai/
│   └── types/
├── supabase/
│   ├── migrations/
│   └── seed.sql
└── tests/

Day 3-4: Database and Auth

-- AI-generated Supabase schema
-- supabase/migrations/001_initial_schema.sql

-- Workspaces (multi-tenant)
CREATE TABLE workspaces (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  name TEXT NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  owner_id UUID REFERENCES auth.users(id),
  stripe_customer_id TEXT,
  subscription_status TEXT DEFAULT 'trial',
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Workspace members
CREATE TABLE workspace_members (
  workspace_id UUID REFERENCES workspaces(id) ON DELETE CASCADE,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  role TEXT DEFAULT 'member',
  PRIMARY KEY (workspace_id, user_id)
);

-- Projects
CREATE TABLE projects (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  workspace_id UUID REFERENCES workspaces(id) ON DELETE CASCADE,
  name TEXT NOT NULL,
  description TEXT,
  status TEXT DEFAULT 'active',
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Tasks with AI metadata
CREATE TABLE tasks (
  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
  project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  description TEXT,
  status TEXT DEFAULT 'todo',
  priority TEXT DEFAULT 'medium',
  assignee_id UUID REFERENCES auth.users(id),
  ai_generated BOOLEAN DEFAULT FALSE,
  ai_suggestions JSONB,
  due_date DATE,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- Row Level Security
ALTER TABLE workspaces ENABLE ROW LEVEL SECURITY;
ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;

-- Policies
CREATE POLICY "Users can view their workspaces"
  ON workspaces FOR SELECT
  USING (
    id IN (
      SELECT workspace_id FROM workspace_members
      WHERE user_id = auth.uid()
    )
  );

Day 5: Core Features

Using Cursor for rapid UI development:

// Prompt to Cursor: "Create a Kanban board component
// with drag-and-drop, real-time updates via Supabase,
// and smooth animations"

// src/components/tasks/KanbanBoard.tsx
'use client';

import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
import { useRealtimeTasks } from '@/hooks/useRealtimeTasks';
import { TaskCard } from './TaskCard';
import { updateTaskStatus } from '@/lib/supabase/tasks';

const columns = ['todo', 'in_progress', 'review', 'done'];

export function KanbanBoard({ projectId }: { projectId: string }) {
  const { tasks, isLoading } = useRealtimeTasks(projectId);

  const handleDragEnd = async (result: DropResult) => {
    if (!result.destination) return;

    const taskId = result.draggableId;
    const newStatus = result.destination.droppableId;

    await updateTaskStatus(taskId, newStatus);
  };

  if (isLoading) return <KanbanSkeleton />;

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <div className="flex gap-4 overflow-x-auto pb-4">
        {columns.map((column) => (
          <Droppable key={column} droppableId={column}>
            {(provided, snapshot) => (
              <div
                ref={provided.innerRef}
                {...provided.droppableProps}
                className={cn(
                  "flex-shrink-0 w-72 bg-muted/50 rounded-lg p-3",
                  snapshot.isDraggingOver && "bg-muted"
                )}
              >
                <h3 className="font-semibold mb-3 capitalize">
                  {column.replace('_', ' ')}
                </h3>
                <div className="space-y-2">
                  {tasks
                    .filter((t) => t.status === column)
                    .map((task, index) => (
                      <Draggable
                        key={task.id}
                        draggableId={task.id}
                        index={index}
                      >
                        {(provided) => (
                          <div
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}
                          >
                            <TaskCard task={task} />
                          </div>
                        )}
                      </Draggable>
                    ))}
                  {provided.placeholder}
                </div>
              </div>
            )}
          </Droppable>
        ))}
      </div>
    </DragDropContext>
  );
}

Week 2: AI Features and Polish

Day 6-7: AI Task Suggestions

// src/app/api/ai/suggest/route.ts
import { OpenAI } from 'openai';
import { createServerClient } from '@/lib/supabase/server';

const openai = new OpenAI();

export async function POST(request: Request) {
  const { projectId, context } = await request.json();
  const supabase = createServerClient();

  // Get project context
  const { data: project } = await supabase
    .from('projects')
    .select('*, tasks(*)')
    .eq('id', projectId)
    .single();

  const completion = await openai.chat.completions.create({
    model: 'gpt-4-turbo-preview',
    messages: [
      {
        role: 'system',
        content: `You are a project management AI assistant.
        Analyze the project and suggest actionable tasks.
        Return JSON array of task suggestions.`
      },
      {
        role: 'user',
        content: `Project: ${project.name}
        Description: ${project.description}
        Existing tasks: ${JSON.stringify(project.tasks)}
        User context: ${context}

        Suggest 3-5 new tasks that would help progress this project.`
      }
    ],
    response_format: { type: 'json_object' }
  });

  const suggestions = JSON.parse(completion.choices[0].message.content);

  return Response.json(suggestions);
}

Day 8-9: Stripe Integration

// src/app/api/webhooks/stripe/route.ts
import { headers } from 'next/headers';
import Stripe from 'stripe';
import { createAdminClient } from '@/lib/supabase/admin';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

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

  let event: Stripe.Event;

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

  const supabase = createAdminClient();

  switch (event.type) {
    case 'checkout.session.completed': {
      const session = event.data.object as Stripe.Checkout.Session;

      await supabase
        .from('workspaces')
        .update({
          stripe_customer_id: session.customer as string,
          subscription_status: 'active',
        })
        .eq('id', session.metadata?.workspaceId);
      break;
    }

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

      await supabase
        .from('workspaces')
        .update({ subscription_status: 'canceled' })
        .eq('stripe_customer_id', subscription.customer as string);
      break;
    }
  }

  return new Response('OK');
}

Day 10-12: Polish and Testing

# Final polish with Claude Code
claude "Review the entire codebase and:
1. Add loading states to all async operations
2. Implement proper error boundaries
3. Add SEO metadata to all pages
4. Optimize images and fonts
5. Add keyboard shortcuts for power users
6. Ensure mobile responsiveness
7. Add analytics tracking"

Day 13-14: Launch Preparation

# Deployment checklist (AI-generated)
pre_launch:
  security:
    - [ ] Environment variables secured
    - [ ] API routes protected
    - [ ] RLS policies tested
    - [ ] Rate limiting configured

  performance:
    - [ ] Images optimized
    - [ ] Bundle analyzed
    - [ ] Core Web Vitals passed
    - [ ] CDN configured

  compliance:
    - [ ] Privacy policy added
    - [ ] Terms of service added
    - [ ] Cookie consent implemented
    - [ ] GDPR data export ready

  monitoring:
    - [ ] Error tracking (Sentry)
    - [ ] Analytics (Plausible)
    - [ ] Uptime monitoring
    - [ ] Log aggregation

Launch Results

First Month Metrics

Users: 847 signups
Paid Conversions: 12% (102 customers)
MRR: $2,040
Churn: 3%
NPS Score: 72

Development Velocity

Metric	Traditional Estimate	Actual with AI
Time to MVP	8-12 weeks	2 weeks
Lines of Code	~15,000	~8,000
Test Coverage	Maybe 40%	78%
Features Shipped	Core only	Core + AI

Key Takeaways

What Made This Possible

1. AI Boilerplate Generation: Started with production-ready foundation
2. Component Libraries: shadcn/ui eliminated custom component work
3. Managed Services: Supabase + Stripe handled infrastructure
4. Parallel AI Workflows: Multiple agents working simultaneously

Founder's Advice

"The key was knowing when to let AI lead and when to take control. AI handled boilerplate and patterns; I focused on product decisions and user experience. Don't fight the AI suggestions—iterate on them."

:::