Architecture Overview

Visual guide to modern SaaS architecture.

Full Stack Architecture

┌─────────────────────────────────────────────────────────────────┐
│                         CLIENT LAYER                             │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐           │
│  │   Browser    │  │  Mobile App  │  │     CLI      │           │
│  │   (React)    │  │   (React     │  │   (Node.js)  │           │
│  │              │  │    Native)   │  │              │           │
│  └──────────────┘  └──────────────┘  └──────────────┘           │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                          EDGE LAYER                              │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐           │
│  │     CDN      │  │    Edge      │  │   Static     │           │
│  │  (Vercel)    │  │  Functions   │  │   Assets     │           │
│  └──────────────┘  └──────────────┘  └──────────────┘           │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                       APPLICATION LAYER                          │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐           │
│  │   Next.js    │  │     API      │  │   Server     │           │
│  │  App Router  │  │   Routes     │  │   Actions    │           │
│  └──────────────┘  └──────────────┘  └──────────────┘           │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                        SERVICE LAYER                             │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐  ┌─────────┐            │
│  │  Auth   │  │ Billing │  │  Email  │  │  Jobs   │            │
│  │ (Clerk) │  │(Stripe) │  │(Resend) │  │(Inngest)│            │
│  └─────────┘  └─────────┘  └─────────┘  └─────────┘            │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                         DATA LAYER                               │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐           │
│  │  PostgreSQL  │  │    Redis     │  │   Storage    │           │
│  │  (Supabase)  │  │  (Upstash)   │  │    (S3)      │           │
│  └──────────────┘  └──────────────┘  └──────────────┘           │
└─────────────────────────────────────────────────────────────────┘

Request Flow

User Request
     │
     ▼
┌─────────────┐
│   Vercel    │  ← CDN, SSL, DDoS protection
│    Edge     │
└─────────────┘
     │
     ▼
┌─────────────┐
│ Middleware  │  ← Auth check, rate limiting, redirects
└─────────────┘
     │
     ▼
┌─────────────┐
│   Next.js   │  ← Server Components, API Routes
│   Server    │
└─────────────┘
     │
     ▼
┌─────────────┐
│  Database   │  ← PostgreSQL with connection pooling
└─────────────┘
     │
     ▼
Response

Data Flow

                    ┌─────────────────┐
                    │    Frontend     │
                    │   (React/Next)  │
                    └────────┬────────┘
                             │
              ┌──────────────┼──────────────┐
              │              │              │
              ▼              ▼              ▼
       ┌──────────┐   ┌──────────┐   ┌──────────┐
       │  Server  │   │   tRPC   │   │   REST   │
       │ Actions  │   │  Router  │   │   API    │
       └────┬─────┘   └────┬─────┘   └────┬─────┘
            │              │              │
            └──────────────┼──────────────┘
                           │
                           ▼
                    ┌──────────────┐
                    │    Prisma    │
                    │     ORM      │
                    └──────┬───────┘
                           │
                           ▼
                    ┌──────────────┐
                    │  PostgreSQL  │
                    │   Database   │
                    └──────────────┘

Authentication Flow

User clicks "Sign In"
         │
         ▼
┌─────────────────┐
│  Clerk Hosted   │
│   Sign-In UI    │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  OAuth Provider │  (Google, GitHub, etc.)
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Clerk Backend  │  Creates session, JWT
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│    Webhook      │  Syncs user to your database
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│  Your App       │  Session cookie set
└─────────────────┘

Payment Flow

User clicks "Subscribe"
         │
         ▼
┌─────────────────┐
│ Create Checkout │  Your API creates Stripe session
│    Session      │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│ Stripe Checkout │  Hosted payment page
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│ Payment Success │  Stripe processes payment
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│    Webhook      │  Stripe sends event to your API
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│ Update Database │  Store subscription status
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│ Redirect User   │  Back to your app
└─────────────────┘

Recommended Stack

Layer	Technology	Why
Frontend	Next.js 14	Best React framework, great DX
Styling	Tailwind CSS	Fast, consistent, customizable
Components	shadcn/ui	Own the code, accessible
Database	PostgreSQL	Reliable, feature-rich
ORM	Prisma	Type-safe, great migrations
Auth	Clerk	Best DX, managed solution
Payments	Stripe	Industry standard
Email	Resend	Developer-friendly
Jobs	Inngest	Reliable, easy workflows
Hosting	Vercel	Seamless Next.js deployment
Cache	Upstash Redis	Serverless Redis

Project Structure

my-saas/
├── app/                      # Next.js App Router
│   ├── (auth)/               # Auth routes (login, signup)
│   │   ├── login/
│   │   └── signup/
│   ├── (dashboard)/          # Protected app routes
│   │   ├── dashboard/
│   │   ├── settings/
│   │   └── layout.tsx        # Dashboard layout with sidebar
│   ├── (marketing)/          # Public marketing pages
│   │   ├── page.tsx          # Home page
│   │   ├── pricing/
│   │   └── blog/
│   ├── api/                  # API routes
│   │   ├── webhooks/
│   │   │   ├── clerk/
│   │   │   └── stripe/
│   │   └── trpc/
│   ├── layout.tsx            # Root layout
│   └── globals.css
├── components/
│   ├── ui/                   # shadcn/ui components
│   └── ...                   # App components
├── lib/
│   ├── db.ts                 # Prisma client
│   ├── auth.ts               # Auth helpers
│   ├── stripe.ts             # Stripe client
│   └── utils.ts              # Utilities
├── server/
│   ├── trpc.ts               # tRPC setup
│   └── routers/              # tRPC routers
├── prisma/
│   ├── schema.prisma         # Database schema
│   └── migrations/
├── public/                   # Static assets
├── .env.local                # Environment variables
├── next.config.js
├── tailwind.config.js
└── package.json

Get Started →