{"slug":"prd-to-production","title":"PRD to Production: SaaS Build and Deployment Checklist","tags":["prd","saas","deployment","vercel","stripe","supabase","checklist"],"agent_summary":"End-to-end SaaS build and deployment process — PRD creation via guided conversation, GSD build phases, GitHub push, Vercel production deployment, Stripe sandbox-to-production migration, Supabase URL updates, and env var audit.","trigger_phrases":["PRD generator","SaaS deployment checklist","deploy SaaS","PRD to production","Stripe production","Vercel deploy checklist","SaaS go-live"],"runnable":false,"markdown":"\n## Overview\n\nThe PRD-to-production pipeline has two phases: **planning** (PRD creation) and **deployment** (go-live checklist). Planning happens before code. Deployment happens after localhost verification.\n\n## Phase 1: PRD Creation\n\n### Stream of Consciousness Input\n\nTalk or type freely about the app — what it does, who uses it, how it earns, what it integrates. Voice input works well here. The output feeds into the planning prompt.\n\n### Planning Prompt\n\nUse with any LLM (Claude, GPT, Gemini):\n\n```\nYou are a senior product architect. Help me create a complete PRD for a SaaS app.\n\nMy app: [paste stream-of-consciousness description]\n\nAsk me clarifying questions about:\n1. Core user journey (what does a user do first, second, third)\n2. Authentication (Clerk, Supabase Auth, or other)\n3. Database (Supabase, Convex, PlanetScale)\n4. Payments (Stripe, Lemon Squeezy, none)\n5. AI integration (yes/no, which model, what for)\n6. Deployment target (Vercel, Railway, self-hosted)\n7. Key differentiator (what makes this different from alternatives)\n\nThen output a structured PRD with: overview, user stories, data models, API routes, UI screens, and success criteria.\n```\n\n### PRD Output Structure\n\n```markdown\n# [App Name] PRD\n\n## Overview\n[1-paragraph summary]\n\n## User Stories\n- As a [role], I want to [action] so that [outcome]\n\n## Data Models\n- users: id, email, created_at\n- projects: id, user_id, name, status\n\n## API Routes\n- POST /api/auth/signup\n- GET /api/projects\n- POST /api/projects\n\n## UI Screens\n- /landing — marketing page\n- /dashboard — main app\n- /settings — account settings\n\n## Success Criteria\n- [ ] User can sign up and log in\n- [ ] User can create and list projects\n- [ ] Stripe checkout completes successfully\n```\n\n## Phase 2: Pre-Deployment Verification\n\nBefore pushing to Vercel, confirm all of these pass on localhost:\n\n```\n[ ] npm run dev runs without errors\n[ ] Authentication flow: signup → login → logout\n[ ] Core features work end-to-end\n[ ] Stripe sandbox checkout: test card 4242 4242 4242 4242\n[ ] Database CRUD operations work, RLS enforced\n[ ] No hardcoded localhost URLs in application code\n[ ] .env.local has all required variables populated\n[ ] .gitignore covers .env*, node_modules/, .next/\n```\n\n## Phase 3: GitHub Repository\n\n```bash\n# Create repo (private)\ngh repo create my-saas-app --private\n\n# Push existing code\ngit init\ngit add .\ngit commit -m \"initial build\"\ngit remote add origin https://github.com/username/my-saas-app.git\ngit branch -M main\ngit push -u origin main\n```\n\n## Phase 4: Vercel Deployment\n\n```bash\nnpm i -g vercel\n\n# Link and deploy\nvercel link\nvercel env pull .env.local          # sync env vars\nvercel deploy --prod\n```\n\nOr via GitHub integration — connect repo in Vercel dashboard, set production branch to `main`.\n\n### Environment Variables Checklist\n\nIn Vercel dashboard → Settings → Environment Variables:\n\n```\n[ ] NEXT_PUBLIC_SUPABASE_URL         (production Supabase project URL)\n[ ] NEXT_PUBLIC_SUPABASE_ANON_KEY    (production anon key)\n[ ] SUPABASE_SERVICE_ROLE_KEY        (production service role)\n[ ] NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY (production Clerk key)\n[ ] CLERK_SECRET_KEY                  (production Clerk secret)\n[ ] STRIPE_SECRET_KEY                 (sk_live_... NOT sk_test_...)\n[ ] NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY (pk_live_...)\n[ ] STRIPE_WEBHOOK_SECRET             (production webhook secret)\n[ ] NEXT_PUBLIC_APP_URL               (https://your-domain.com)\n```\n\n**Red flag**: any `test` or `sandbox` key in production env = blocked payment in prod.\n\n## Phase 5: Stripe Production Migration\n\n1. Go to Stripe Dashboard → toggle to **Live mode**\n2. Activate account (provide business details)\n3. Recreate all products and prices in live mode\n4. Update price IDs in app code (test IDs start `price_test_...`, live IDs `price_...`)\n5. Create production webhook: `https://your-domain.com/api/stripe/webhook`\n6. Copy webhook signing secret → update `STRIPE_WEBHOOK_SECRET` in Vercel\n\n```bash\n# Test webhook with Stripe CLI\nstripe listen --forward-to localhost:3000/api/stripe/webhook\nstripe trigger checkout.session.completed\n```\n\n## Phase 6: Supabase Production Setup\n\nSupabase free projects pause after 7 days of inactivity. For production: upgrade to Pro ($25/mo).\n\n```\n[ ] Create production Supabase project (separate from dev)\n[ ] Run migrations on production database\n[ ] Verify RLS policies are active on all tables\n[ ] Set up database backups (Pro: daily, point-in-time recovery)\n[ ] Add production domain to CORS allowed origins\n[ ] Update SUPABASE_URL and keys in Vercel env vars\n[ ] Run auth flow on production URL to verify Supabase Auth\n```\n\n## Phase 7: Domain and SSL\n\n```bash\n# Add custom domain in Vercel\nvercel domains add yourdomain.com\n\n# Update DNS (add CNAME record)\n# CNAME: @ → cname.vercel-dns.com\n# Vercel auto-provisions SSL certificate\n```\n\n## Phase 8: Final Smoke Test\n\nOn the production URL:\n\n```\n[ ] Landing page loads without errors\n[ ] Signup/login flow works\n[ ] Core feature works end-to-end\n[ ] Stripe checkout completes (use real card or test in sandbox mode)\n[ ] No console errors in browser DevTools\n[ ] Lighthouse score > 80 (optional but recommended)\n```\n","html":"<h2>Overview</h2>\n<p>The PRD-to-production pipeline has two phases: <strong>planning</strong> (PRD creation) and <strong>deployment</strong> (go-live checklist). Planning happens before code. Deployment happens after localhost verification.</p>\n<h2>Phase 1: PRD Creation</h2>\n<h3>Stream of Consciousness Input</h3>\n<p>Talk or type freely about the app — what it does, who uses it, how it earns, what it integrates. Voice input works well here. The output feeds into the planning prompt.</p>\n<h3>Planning Prompt</h3>\n<p>Use with any LLM (Claude, GPT, Gemini):</p>\n<pre><code>You are a senior product architect. Help me create a complete PRD for a SaaS app.\n\nMy app: [paste stream-of-consciousness description]\n\nAsk me clarifying questions about:\n1. Core user journey (what does a user do first, second, third)\n2. Authentication (Clerk, Supabase Auth, or other)\n3. Database (Supabase, Convex, PlanetScale)\n4. Payments (Stripe, Lemon Squeezy, none)\n5. AI integration (yes/no, which model, what for)\n6. Deployment target (Vercel, Railway, self-hosted)\n7. Key differentiator (what makes this different from alternatives)\n\nThen output a structured PRD with: overview, user stories, data models, API routes, UI screens, and success criteria.\n</code></pre>\n<h3>PRD Output Structure</h3>\n<pre><code class=\"language-markdown\"># [App Name] PRD\n\n## Overview\n[1-paragraph summary]\n\n## User Stories\n- As a [role], I want to [action] so that [outcome]\n\n## Data Models\n- users: id, email, created_at\n- projects: id, user_id, name, status\n\n## API Routes\n- POST /api/auth/signup\n- GET /api/projects\n- POST /api/projects\n\n## UI Screens\n- /landing — marketing page\n- /dashboard — main app\n- /settings — account settings\n\n## Success Criteria\n- [ ] User can sign up and log in\n- [ ] User can create and list projects\n- [ ] Stripe checkout completes successfully\n</code></pre>\n<h2>Phase 2: Pre-Deployment Verification</h2>\n<p>Before pushing to Vercel, confirm all of these pass on localhost:</p>\n<pre><code>[ ] npm run dev runs without errors\n[ ] Authentication flow: signup → login → logout\n[ ] Core features work end-to-end\n[ ] Stripe sandbox checkout: test card 4242 4242 4242 4242\n[ ] Database CRUD operations work, RLS enforced\n[ ] No hardcoded localhost URLs in application code\n[ ] .env.local has all required variables populated\n[ ] .gitignore covers .env*, node_modules/, .next/\n</code></pre>\n<h2>Phase 3: GitHub Repository</h2>\n<pre><code class=\"language-bash\"># Create repo (private)\ngh repo create my-saas-app --private\n\n# Push existing code\ngit init\ngit add .\ngit commit -m \"initial build\"\ngit remote add origin https://github.com/username/my-saas-app.git\ngit branch -M main\ngit push -u origin main\n</code></pre>\n<h2>Phase 4: Vercel Deployment</h2>\n<pre><code class=\"language-bash\">npm i -g vercel\n\n# Link and deploy\nvercel link\nvercel env pull .env.local          # sync env vars\nvercel deploy --prod\n</code></pre>\n<p>Or via GitHub integration — connect repo in Vercel dashboard, set production branch to <code>main</code>.</p>\n<h3>Environment Variables Checklist</h3>\n<p>In Vercel dashboard → Settings → Environment Variables:</p>\n<pre><code>[ ] NEXT_PUBLIC_SUPABASE_URL         (production Supabase project URL)\n[ ] NEXT_PUBLIC_SUPABASE_ANON_KEY    (production anon key)\n[ ] SUPABASE_SERVICE_ROLE_KEY        (production service role)\n[ ] NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY (production Clerk key)\n[ ] CLERK_SECRET_KEY                  (production Clerk secret)\n[ ] STRIPE_SECRET_KEY                 (sk_live_... NOT sk_test_...)\n[ ] NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY (pk_live_...)\n[ ] STRIPE_WEBHOOK_SECRET             (production webhook secret)\n[ ] NEXT_PUBLIC_APP_URL               (https://your-domain.com)\n</code></pre>\n<p><strong>Red flag</strong>: any <code>test</code> or <code>sandbox</code> key in production env = blocked payment in prod.</p>\n<h2>Phase 5: Stripe Production Migration</h2>\n<ol>\n<li>Go to Stripe Dashboard → toggle to <strong>Live mode</strong></li>\n<li>Activate account (provide business details)</li>\n<li>Recreate all products and prices in live mode</li>\n<li>Update price IDs in app code (test IDs start <code>price_test_...</code>, live IDs <code>price_...</code>)</li>\n<li>Create production webhook: <code>https://your-domain.com/api/stripe/webhook</code></li>\n<li>Copy webhook signing secret → update <code>STRIPE_WEBHOOK_SECRET</code> in Vercel</li>\n</ol>\n<pre><code class=\"language-bash\"># Test webhook with Stripe CLI\nstripe listen --forward-to localhost:3000/api/stripe/webhook\nstripe trigger checkout.session.completed\n</code></pre>\n<h2>Phase 6: Supabase Production Setup</h2>\n<p>Supabase free projects pause after 7 days of inactivity. For production: upgrade to Pro ($25/mo).</p>\n<pre><code>[ ] Create production Supabase project (separate from dev)\n[ ] Run migrations on production database\n[ ] Verify RLS policies are active on all tables\n[ ] Set up database backups (Pro: daily, point-in-time recovery)\n[ ] Add production domain to CORS allowed origins\n[ ] Update SUPABASE_URL and keys in Vercel env vars\n[ ] Run auth flow on production URL to verify Supabase Auth\n</code></pre>\n<h2>Phase 7: Domain and SSL</h2>\n<pre><code class=\"language-bash\"># Add custom domain in Vercel\nvercel domains add yourdomain.com\n\n# Update DNS (add CNAME record)\n# CNAME: @ → cname.vercel-dns.com\n# Vercel auto-provisions SSL certificate\n</code></pre>\n<h2>Phase 8: Final Smoke Test</h2>\n<p>On the production URL:</p>\n<pre><code>[ ] Landing page loads without errors\n[ ] Signup/login flow works\n[ ] Core feature works end-to-end\n[ ] Stripe checkout completes (use real card or test in sandbox mode)\n[ ] No console errors in browser DevTools\n[ ] Lighthouse score > 80 (optional but recommended)\n</code></pre>\n"}