SaaS Developer Training

Appearance

Getting Started ​

This guide will teach you everything needed to build a production SaaS application from scratch.

Prerequisites ​

  • Node.js 18+ - JavaScript runtime
  • Git - Version control
  • VS Code - Recommended editor
  • PostgreSQL - Or use Supabase (cloud Postgres)

For a new SaaS project in 2024/2025, here's the battle-tested stack:

Frontend:     Next.js 14 (App Router) + TypeScript + Tailwind CSS
UI:           shadcn/ui + Radix UI primitives
Backend:      Next.js API Routes / Server Actions / tRPC
Database:     PostgreSQL via Supabase
ORM:          Prisma or Drizzle
Auth:         Clerk or Supabase Auth
Payments:     Stripe
Hosting:      Vercel

Quick Start ​

Create a new Next.js project:

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

Install essential packages:

bash
# UI Components
npx shadcn@latest init

# Database ORM
npm install prisma @prisma/client
npx prisma init

# Authentication (choose one)
npm install @clerk/nextjs
# OR
npm install @supabase/supabase-js @supabase/ssr

# Payments
npm install stripe @stripe/stripe-js

Project Structure ​

my-saas/
├── src/
│   ├── app/                 # Next.js App Router
│   │   ├── (auth)/          # Auth routes group
│   │   ├── (dashboard)/     # Protected routes
│   │   ├── api/             # API routes
│   │   ├── layout.tsx       # Root layout
│   │   └── page.tsx         # Home page
│   ├── components/          # React components
│   │   ├── ui/              # shadcn/ui components
│   │   └── ...
│   ├── lib/                 # Utilities
│   │   ├── db.ts            # Database client
│   │   ├── auth.ts          # Auth helpers
│   │   └── stripe.ts        # Stripe client
│   └── types/               # TypeScript types
├── prisma/
│   └── schema.prisma        # Database schema
├── public/                  # Static assets
└── .env.local               # Environment variables

Environment Variables ​

Create .env.local:

bash
# Database
DATABASE_URL="postgresql://..."

# Auth (Clerk example)
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_...
CLERK_SECRET_KEY=sk_...

# Stripe
STRIPE_SECRET_KEY=sk_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_...
STRIPE_WEBHOOK_SECRET=whsec_...

# App
NEXT_PUBLIC_APP_URL=http://localhost:3000

Next Steps ​

  1. Architecture Foundations - Understand system design
  2. Frontend with Next.js - Build the UI
  3. Database & PostgreSQL - Set up data layer
  4. Authentication - Add user login
  5. Payments - Monetize your app