Chapter 8: Building a Full-Stack SaaS App in One Day With AI

The 8-Hour SaaS Sprint

Building a complete SaaS product in one day is not a shortcut. It is the result of ruthless prioritisation, a clear decision framework, and AI handling the implementation while you focus on the design decisions.

This chapter is a practical, hour-by-hour playbook.

---

Before You Start: The 30-Minute Pre-Sprint

Before writing a single prompt, spend 30 minutes locking down three things:

1. The Core Value Proposition (one sentence) Not: "An AI tool that helps people with content." Yes: "A tool that automatically generates SEO-optimised LinkedIn posts from a pasted blog URL."

2. The Minimum Viable Feature Set (max 5 features) Write down the 5 things that absolutely must work for a stranger to pay you money. Everything else is post-launch.

For our example:

• User can paste a blog URL
• AI generates 3 LinkedIn post variations
• User can copy any variation to clipboard
• User must sign in to generate
• User gets 5 free generations, then prompted to pay

• Next.js 14 + App Router
• Supabase (Auth + DB)
• OpenAI API or Gemini API
• Stripe Checkout
• Vercel

---

Hour 1: Scaffold the Project (8am–9am)

Paste this into Kimi K3 or Claude with your full system prompt active:

Create a new Next.js 14 project with App Router and TypeScript. Set up:
- Supabase client (browser + server)
- A users table with: id, email, credits (default 5), created_at
- Supabase Auth with email/password
- Environment variable types in env.d.ts
- A layout.js with a minimal dark-mode navbar showing: Logo | Sign In (if logged out) or Credits count | Sign Out (if logged in)
- Basic globals.css with CSS variables for a dark theme
Output a setup checklist I can follow in the terminal after.

Run the checklist. By 9am you have a live scaffold running on localhost.

---

Hour 2: Core Feature API Route (9am–10am)

``` Build a Next.js App Router API route at /api/generate that:

• Requires the user to be signed in (use Supabase server client to get session)
• Accepts a POST request with { url: string }
• Fetches the webpage content from the URL using native fetch
• Extracts the main article text (strip HTML, get body text, first 3000 chars)
• Sends it to the Gemini API with a prompt to generate 3 LinkedIn post variations (different tones: professional, casual, thought-leadership)
• Deducts 1 credit from the user's profile in Supabase
• Returns { variations: string[], creditsRemaining: number }
• Returns 403 if user has 0 credits

Test it with curl. By 10am your core logic works.

---

## Hour 3: The UI (10am–11am)

• Show a large centered URL input field and "Generate" button
• On submit, call /api/generate and show a loading spinner
• Display the 3 returned variations in separate cards with a "Copy" button each
• Show the user's remaining credits in the top right
• Show a "You're out of credits" banner linking to /pricing when credits hit 0
• Use our CSS variable system (dark theme, accent colours)
• Be fully responsive

---

## Hour 4: Auth Pages (11am–12pm)

• /signin — email + password form using Supabase Auth signInWithPassword
• /signup — same form but uses signUp, then shows "Check your email to confirm"
• Redirect to / after successful signin
• Add a middleware.js at the project root that protects / and redirects to /signin if no session

---

## Hour 5: Stripe Payments (12pm–1pm)

• /pricing page with a single plan: "50 Credits for $9"
• A POST /api/create-checkout API route that creates a Stripe Checkout session for the authenticated user
• A GET /api/stripe-webhook route that handles checkout.session.completed and adds 50 credits to the user's profile in Supabase
• A /success page that shows "Payment successful, your credits have been added"

---

## Hour 6: Polish and Error States (1pm–2pm)

• Error toast notifications for API failures
• Loading states on all buttons (disable + show spinner while fetching)
• An empty state on the main page for first-time users (with a helpful example URL)
• Proper meta tags: title, description, og:image for all pages
• A 404.js page

---

Hour 7: Deploy (2pm–3pm)

• Push to GitHub
• Connect to Vercel
• Add all environment variables
• Add your Stripe webhook endpoint in the Stripe dashboard, pointing to your Vercel domain
• Test the full user flow: sign up → generate → run out of credits → pay → generate again

Hour 8: Soft Launch (3pm–4pm)

• Write a short post on X/Twitter: "Built [product] in 8 hours. [what it does]. First 50 users get 20 free credits. [link]"
• Post in 2-3 relevant subreddits
• Send to your email list if you have one

Key Takeaways

• Sprint architecture decisions kill more sprints than bad code. Lock them before you touch the keyboard.
• Use expensive models (Claude, Kimi K3) for architecture and complex routes. Use cheap models (Gemini Flash) for UI boilerplate.
• Ship the ugly version. Your first 50 users care about the function, not the polish.