This chapter walks you step by step through setting up the entire infrastructure of a modern SaaS. For each service: what it is, how to set it up, and how much it costs. Reading time: 15 minutes.
Overview
A typical modern SaaS uses 7 to 8 services:
- Supabase: database + authentication + storage 2. Vercel: hosting and deployment 3. Domain name: your app's address (Namecheap, OVH, etc.)
- Stripe: payments and subscriptions 5. Resend: transactional emails
- Upstash: rate limiting (anti-abuse) 7. Anthropic: generative AI (if your app uses AI) 8. Sentry: error monitoring in production
The good news: all of them have a free plan that's enough to develop with. You only pay when you ship to production with real users.
Prerequisites: Docker and Node.js
Before configuring the services, you'll need two tools on your machine.
Docker (for the local database)
Docker lets you run a Supabase database on your computer during development. You never touch production data.
On macOS:
- Download Docker Desktop from docker.com/products/docker-desktop, it's free for individual use
- Install it like any other application
- Launch Docker Desktop, it runs in the background (whale icon 🐳 in the menu bar)
On Windows:
- Download Docker Desktop from docker.com/products/docker-desktop
- The installer will enable WSL 2 (Windows Subsystem for Linux) if needed, accept it
- Restart if asked, then launch Docker Desktop
Check that Docker is running:
docker --version
Docker Desktop uses RAM (2-4 GB). If your computer has less than 8 GB of RAM, it can slow things down. You can close Docker when you're not coding.
Node.js (for the dev tools)
Node.js runs the project's tooling (the Next.js dev server, Supabase migrations, etc.). It's not required for Claude Code itself, but it's essential as soon as you work on a real project.
On macOS: open Terminal and paste:
curl -fsSL https://fnm.vercel.app/install | bash && fnm install 22
Close and reopen Terminal, then check:
node --version
You should see v22.x.x.
On Windows:
- Go to nodejs.org
- Download the LTS installer
- Run the installer, check "Add to PATH" when prompted
- Open PowerShell and type
node --version
Common Windows error: if node --version doesn't work after the install,
restart your computer. The PATH needs a reboot to take effect.
1. Supabase, database, Auth, Storage
What it is: your PostgreSQL database, your auth system (login, register, OAuth), and your file storage. All in one, with a web admin interface.
Setup steps
- Create an account on supabase.com
- Create a new project (pick the
eu-westregion for France) - Note the URL and API keys (Dashboard → Settings → API)
- Locally, install the CLI:
npx supabase initthennpx supabase start(Docker must be running)
Environment variables
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGci...
Pricing
| Plan | Price | Limits | For whom |
|---|---|---|---|
| Free | $0/mo | 500 MB storage, 50K users, 2 projects | Development |
| Pro | $25/mo | 8 GB storage, 100K users, daily backups | Production |
Gotcha: the Free plan automatically pauses your project after 7 days of inactivity. Your users won't be able to sign in anymore. Move to Pro as soon as you have real users.
2. Vercel, hosting and deployment
What it is: the host that runs your Next.js app. Every git push triggers an automatic deploy. Zero server config.
Setup steps
- Create an account on vercel.com (sign in with GitHub)
- Click "New Project" and import your GitHub repository
- Vercel automatically detects it's Next.js
- Add your environment variables in Settings → Environment Variables
- First automatic deploy in 2 minutes
Key features
- Deploy Preview: every Pull Request gets its own preview URL
- Cron Jobs: scheduled tasks (sending emails, sync, reminders) defined in
vercel.json - Analytics: Web Vitals performance metrics
Pricing
| Plan | Price | Limits | For whom |
|---|---|---|---|
| Hobby | $0/mo | 1 personal project, functions up to 60s, 1 cron/day max | Testing |
| Pro | $20/mo | Unlimited projects, functions up to 300s (800s with Fluid Compute), unlimited crons | Production |
3. Domain name
What it is: your app's address (e.g. myapp.com). You can buy it from any registrar.
Steps
- Pick a registrar: Namecheap, OVH, Google Domains, Gandi...
- Search and buy your domain name
- In Vercel: Settings → Domains → add your domain
- Copy the DNS records Vercel gives you to your registrar
- Wait 24-48h for DNS propagation
Pricing
- .com: around $10/year (first year often on promo at $7)
- .fr: around $10-12/year
- .app: around $15/year
- WhoisGuard (privacy protection): free at Namecheap
4. Stripe, payments
What it is: the payment platform that handles your subscriptions. No monthly subscription, Stripe only takes a cut when someone pays.
Setup steps
- Create an account on stripe.com
- Turn on Test mode first (Dashboard → toggle "Test mode")
- Create your products and prices (Products → Add product)
- Grab your API keys (Developers → API keys)
- Set up the webhook: Developers → Webhooks → add your URL +
/api/webhooks/stripe - Locally:
stripe listen --forward-to localhost:3000/api/webhooks/stripe
Environment variables
STRIPE_SECRET_KEY=sk_test_xxx
STRIPE_WEBHOOK_SECRET=whsec_xxx
STRIPE_PRICE_PRO_MONTHLY=price_xxx
Pricing
| Type | Cost |
|---|---|
| Stripe subscription | $0, free as long as nobody pays |
| Per-payment fee (Europe) | 1.4% + €0.25 per transaction |
| Stripe Billing (subscriptions) | +0.7% of the billed volume |
Real-world cost: if you have 10 Pro customers at €29/mo, Stripe takes about €4.50/month total. It's negligible.
5. Resend, transactional emails
What it is: the service that sends your automated emails (welcome, reminders, weekly recaps). Modern UI, easy integration with React Email.
Setup steps
- Create an account on resend.com
- Add your domain: Settings → Domains → Add domain
- Set up 3 DNS records at your registrar
- Verify the domain (a few minutes)
- Grab your API key: API Keys → Create
Environment variable
RESEND_API_KEY=re_xxx
Pricing
| Plan | Price | Limits |
|---|---|---|
| Free | $0/mo | 3,000 emails/mo, 1 day of log retention |
| Pro | $20/mo | 50,000 emails/mo, full analytics |
3,000 free emails/month = more than enough to get started. Even with 100 active users, you stay inside the free quota.
6. Upstash, rate limiting (anti-abuse)
What it is: a serverless Redis that prevents abuse. Without it, a user could spam your AI API and cost you hundreds of dollars in tokens.
Setup steps
- Create an account on upstash.com
- Create a Redis database (region:
eu-west-1) - Grab the URL and token (Database → Details)
Environment variables
UPSTASH_REDIS_REST_URL=https://xxx.upstash.io
UPSTASH_REDIS_REST_TOKEN=xxx
Pricing
- Free: 500,000 commands/month. You'll probably never go past this quota, even with 1,000 users.
- Pay-as-you-go: $0.2 per 100,000 commands beyond that.
7. Anthropic, Claude API (if your app uses AI)
What it is: the API that powers AI content generation in your app.
Don't confuse them: the Claude Max subscription ($100/mo) gives you access to Claude Code for development. The Anthropic API is a separate service, billed by usage, for embedding AI inside your app.
Steps
- Create an account on console.anthropic.com
- Add a payment method (required even for testing)
- Create an API key: API Keys → Create Key
- Set a monthly budget cap in Settings → Billing (to avoid surprises)
Environment variable
ANTHROPIC_API_KEY=sk-ant-xxx
Pricing
- Claude Sonnet: $3 per million input tokens, $15 per million output tokens
- In practice: a content generation (3 variants) costs around $0.02-0.05
Realistic monthly estimate: - 10 active users, 20 generations/month each = around $10-20/month - 100 active users = around $50-100/month - Set a budget cap in the console to avoid surprises
8. Sentry, error monitoring
What it is: automatically captures production errors and reports them. Without it, you don't know when your app crashes for your users.
Steps
- Create an account on sentry.io
- Create a Next.js project
- Follow the install wizard (it adds the config files automatically)
Environment variables
NEXT_PUBLIC_SENTRY_DSN=https://xxx@sentry.io/xxx
SENTRY_ORG=your-org
SENTRY_PROJECT=your-project
SENTRY_AUTH_TOKEN=sntrys_xxx
Pricing
- Developer ($0/mo): 5,000 errors/mo, 1 user. Enough to get started.
- Team ($26/mo): 50,000 errors/mo, unlimited users.
Cost recap
Development phase (0 users)
| Service | Cost |
|---|---|
| Supabase Free | $0 |
| Vercel Hobby | $0 |
| .com domain | ~$0.80/mo ($10/year) |
| Stripe | $0 (no transactions) |
| Resend Free | $0 |
| Upstash Free | $0 |
| Anthropic (your tests) | ~$5/mo |
| Sentry Developer | $0 |
| Claude Code (Max) | $100/mo |
| Total dev phase | ~$106/mo (of which $100 for Claude Code) |
Infrastructure costs almost nothing in development. The only meaningful cost is Claude Code itself ($100/mo). Every service has a free plan that's enough to develop with.
Production phase (10-50 users)
| Service | Cost |
|---|---|
| Supabase Pro | $25/mo |
| Vercel Pro | $20/mo |
| Domain | ~$1/mo |
| Stripe (fees) | ~$5/mo |
| Resend Free | $0 |
| Upstash Free | $0 |
| Anthropic | $20-50/mo |
| Sentry Developer | $0 |
| Total production | ~$75-105/mo |
Break-even point: if your subscription is €29/mo, you need 4-5 paying customers to cover all infrastructure costs. From the 6th customer onwards, you're profitable.
The recommended install order
Phase 1, development (day 1)
- Supabase → your database and auth are working
- Vercel → your app is deployed automatically
- Sentry → you see errors from day one
Phase 2, features (days 2-3)
- Resend → your automated emails work
- Upstash → your API is protected against abuse
- Anthropic API → your AI is integrated (if applicable)
Phase 3, launch (day 4+)
- Stripe → your users can pay
- Domain → your app has its own address
Takeaway: every service has a free plan that's enough to develop with. You only pay in production, and the break-even point is reached at 4-5 paying customers. The infrastructure of a modern SaaS costs less than a Netflix subscription.