How We Built a SaaS in 12 Phases

The challenge

Building a SaaS from scratch is deceptively hard. It's not just about the core feature — it's about everything around it: auth, billing, email, monitoring, compliance. Each piece is solvable, but the integration cost adds up fast.

We set out to build a template that makes none of those decisions optional but all of them swappable.

Phase by phase

Phase 1 — Scaffolding

We started with Next.js 16 App Router, TypeScript strict mode, and Tailwind CSS v4. The CSS-first approach in Tailwind v4 eliminates the need for a separate config file and maps cleanly to design tokens.

Phase 2 — Database

Drizzle ORM with PostgreSQL via Supabase. We chose Drizzle over Prisma for its lightweight footprint and first-class SQL control. The schema lives in src/lib/db/schema/ — plain TypeScript objects that compile to type-safe queries.

Phase 3 — Authentication

NextAuth v5 (Auth.js) with email/password and OAuth. JWT sessions keep the auth stateless, which matters when you're running on edge runtimes or serverless functions.

Phase 4 — Billing

Stripe with webhooks. The hardest part was getting the webhook handler right — you must read req.text() before calling stripe.webhooks.constructEvent() to preserve the raw body for signature verification.

Phase 5 — Email

Brevo for transactional email, React Email for templates. Writing email templates in React is dramatically better than wrestling with raw HTML tables.

Phase 6 — Dashboard

A sidebar-based dashboard with onboarding wizard, settings, and referral tracking. The onboarding flow is a multi-step wizard that gates access until completion.

Phase 7 — Marketing site

The phase you're reading about now. A full marketing site with landing page, pricing, blog, docs, and legal pages — all statically rendered for performance and SEO.

What's next

Phases 8–13 cover feature flags, admin panel, GDPR compliance, monitoring, tests, and i18n. The template is designed so each phase builds on the previous one without requiring rewrites.