Build and Deploy a SaaS with Cursor — Zero to Live in 2 Hours

npx create-next-app@latest my-saas --typescript --tailwind --app --src-dir
cd my-saas

npm install @supabase/supabase-js @supabase/ssr stripe @stripe/stripe-js

cursor .

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

Create a Supabase client utility at src/lib/supabase.ts that:
1. Exports a browser client using createBrowserClient
2. Exports a server client function using createServerClient for use in server components
3. Uses the env vars NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY

Use @supabase/ssr for both. Follow the latest Supabase docs for Next.js App Router.

@src/lib/supabase.ts

Build a complete auth system:

1. Create src/app/login/page.tsx:
   - Email + password login form
   - "Continue with Google" OAuth button
   - Link to signup page
   - Error handling for wrong password, user not found
   - Redirect to /dashboard on success

2. Create src/app/signup/page.tsx:
   - Email + password signup form
   - Password confirmation field
   - Redirect to /login with "check your email" message

3. Create src/middleware.ts:
   - Protect /dashboard/* routes
   - Redirect unauthenticated users to /login
   - Allow /login, /signup, /pricing, and / without auth

4. Create src/app/auth/callback/route.ts:
   - Handle OAuth callback from Supabase

Use Tailwind CSS for styling. Clean, minimal design.

npm run dev

@src/lib/supabase.ts @src/middleware.ts

Create a user dashboard at src/app/dashboard/page.tsx:

1. Server component that checks auth
2. Shows user's email and name
3. Shows subscription status (free/pro — default to free for now)
4. "Upgrade to Pro" button that links to /pricing
5. Navigation: Dashboard, Settings, Logout
6. Sidebar layout on desktop, bottom nav on mobile

Also create src/app/dashboard/settings/page.tsx:
1. User profile form (name, avatar)
2. "Manage Billing" button (will link to Stripe portal later)
3. "Sign Out" button that calls supabase.auth.signOut()

Clean design with Tailwind. Match Apple's design aesthetic.

STRIPE_SECRET_KEY=sk_test_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_...
STRIPE_WEBHOOK_SECRET=whsec_... (we'll get this in step 7)
STRIPE_MONTHLY_PRICE_ID=price_...
STRIPE_YEARLY_PRICE_ID=price_...

@src/lib/supabase.ts

Build complete Stripe integration:

1. Create src/app/pricing/page.tsx:
   - Two pricing cards: Free and Pro ($29/mo or $290/yr)
   - Monthly/annual toggle
   - "Get Started Free" button for free tier (goes to /signup)
   - "Start Pro Trial" button for pro (creates Stripe checkout)
   - Feature comparison list

2. Create src/app/api/checkout/route.ts:
   - POST endpoint that creates a Stripe Checkout session
   - Uses STRIPE_MONTHLY_PRICE_ID or STRIPE_YEARLY_PRICE_ID based on interval
   - success_url: /dashboard?upgraded=true
   - cancel_url: /pricing

3. Create src/app/api/webhooks/stripe/route.ts:
   - Handles checkout.session.completed → save subscription to Supabase
   - Handles customer.subscription.deleted → remove subscription
   - Handles invoice.payment_failed → mark as past_due
   - Verify webhook signature with STRIPE_WEBHOOK_SECRET
   - IMPORTANT: Use req.text() not req.json() for signature verification

4. Create a subscriptions table in Supabase:
   - id, user_id, stripe_customer_id, stripe_subscription_id, status, plan, current_period_end
   - RLS: users can only read their own subscription

5. Create src/lib/subscription.ts:
   - getSubscription(userId) function
   - isProUser(userId) function

Use Stripe SDK. Environment variables for all keys.

CREATE TABLE subscriptions (
  id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
  user_id uuid REFERENCES auth.users(id) NOT NULL,
  stripe_customer_id text,
  stripe_subscription_id text,
  status text DEFAULT 'free',
  plan text DEFAULT 'free',
  current_period_end timestamptz,
  created_at timestamptz DEFAULT now()
);

ALTER TABLE subscriptions ENABLE ROW LEVEL SECURITY;

CREATE POLICY "Users can read own subscription"
ON subscriptions FOR SELECT
USING (auth.uid() = user_id);

brew install stripe/stripe-cli/stripe
stripe login

stripe listen --forward-to localhost:3000/api/webhooks/stripe

git init
git add -A
git commit -m "initial SaaS"
gh repo create my-saas --public --push