Build and Ship an AI SaaS in 48 Hours · 50 min · Next.js · Supabase · Vercel
Product Shell — Auth + Database + Deployment
Deployed and boring beats undeployed and impressive -- the shell goes live today, the AI feature doesn't exist yet.
Hiring signal: Real production auth, a real deployed URL, and a real database schema on day one -- not after the 'fun part' is built -- is the actual discipline behind every shipped solo SaaS product.
What you will learn
- Scaffold a Next.js App Router project with shadcn/ui
- Configure Supabase SSR auth (sign up, log in, log out)
- Design a database schema for a real SaaS (users, usage limits) and deploy to a live URL
What You're Building
The full shell: sign up, log in, log out, a real database schema, and a live Vercel URL — deployed today, with zero AI functionality yet. This is Type D's "ship the shell first" principle from Course 04, now at real-SaaS scale.
Server vs. client components: the mental model before you write a line
Default to server components. Add "use client" only when you need interactivity
Next.js App Router components are server components by default -- they run on the server, can talk to your database directly, and never ship their code to the browser. Add 'use client' at the top of a file only when it needs browser-only things: useState, onClick, useEffect. Getting this backwards (marking everything 'use client' out of habit from pre-App-Router React) is the #1 confusion point for developers new to this architecture -- and it silently bloats your JS bundle with server logic that never needed to ship to the browser.
// app/dashboard/page.tsx -- a SERVER component (no 'use client')
import { createClient } from '@/lib/supabase/server';
export default async function DashboardPage() {
const supabase = await createClient();
const { data: { user } } = await supabase.auth.getUser();
return <div>Welcome, {user?.email}</div>;
}
Notice this component is async and queries Supabase directly, no useEffect, no loading state, no client-side fetch -- because it runs on the server before the page ever reaches the browser. This is the actual advantage of the App Router model over older client-fetched-everything patterns: less code, less loading-state complexity, for anything that doesn't need real-time interactivity.
Unlock the full lesson
You've read the first 2 sections. The rest of this lesson covers Supabase SSR auth: cookies, not localStorage, Database schema and Row Level Security, What you're building today — plus a hands-on lab, quiz, and project artifact.
Create a free account to unlock Phase 0 and Phase 1 of every course — no credit card.
Browse all courses · View pricing · DeVenture Academy