Build a Production-Ready SaaS in 30 Minutes with DemoSaaS

A step-by-step guide for junior developers, indie makers, and computer-science graduates who want to launch quickly without reinventing the wheel.

Table of Contents

1. Why DemoSaaS Beats Starting from Scratch
2. Eight Core Features in Plain English
3. Prerequisites: Node, Postgres, Stripe, and Resend
4. Local Development in Five Commands
5. Real-World Walk-Throughs

   • Walk-through A: sign-up and free credits
   • Walk-through B: upgrading to Pro
   • Walk-through C: automatic language switching
6. Deploying to Vercel (and Beyond)
7. Code Map: Where to Change What
8. Pre-Launch Checklist (10 Minutes)
9. From Template to Real Product: Three Next Steps
10. Wrap-Up & Further Reading

1. Why DemoSaaS Beats Starting from Scratch

Time saved = more hours for your unique algorithms or customer interviews.

2. Eight Core Features in Plain English

2.1 User Authentication

• Register → verify email → account activated.
• 100 credits on sign-up, plus 50 after email verification.
• Password resets are one-click email links.

2.2 Subscription Management

• Three tiers: Free, Pro, Enterprise.
• Customers can upgrade, downgrade, or cancel inside a self-serve billing portal.
• Stripe handles proration and invoicing automatically.

2.3 Credit System

• Credit packs: 1 000 / 5 000 / 10 000 units.
• Each pack maps to a Stripe price ID in your .env file.
• Complete history table in PostgreSQL; UI shows running balance.

2.4 Internationalisation

• Routes: /en/ and /zh/.
• Auto-detect browser language; manual switcher stored in a cookie.
• Emails, error messages, and UI labels are fully translated.

2.5 Email Delivery

• Resend sends transactional emails.
• Test domain works out of the box; production requires DNS records for deliverability.

2.6 Modern UI

• Tailwind CSS for styling, Radix UI for accessible components.
• Dark mode toggle persists via localStorage.

2.7 Type Safety

• Full-stack TypeScript.
• Drizzle ORM gives typed queries and auto-generated migrations.

2.8 Database

• PostgreSQL only (12+).
• Supabase, Neon, Railway, or any managed Postgres works.

3. Prerequisites: Node, Postgres, Stripe, and Resend

Copy the following template into .env.local and replace placeholders:

# Database
DATABASE_URL="postgresql://user:password@host:5432/demosaas"

# Auth
NEXTAUTH_SECRET="generate with: openssl rand -base64 32"
NEXTAUTH_URL="http://localhost:3000"
JWT_SECRET="another long random string"

# App
NEXT_PUBLIC_APP_URL="http://localhost:3000"

# Email
RESEND_API_KEY="re_your_key"
RESEND_FROM_EMAIL="noreply@yourdomain.com"

# Stripe
STRIPE_SECRET_KEY="sk_test_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."
STRIPE_WEBHOOK_SECRET="whsec_..."

# Price IDs
STRIPE_PRO_PRICE_ID="price_..."
STRIPE_ENTERPRISE_PRICE_ID="price_..."
STRIPE_PRICE_1000_POINTS="price_..."
STRIPE_PRICE_5000_POINTS="price_..."
STRIPE_PRICE_10000_POINTS="price_..."
NEXT_PUBLIC_STRIPE_PRICE_1000_POINTS="price_..."
NEXT_PUBLIC_STRIPE_PRICE_5000_POINTS="price_..."
NEXT_PUBLIC_STRIPE_PRICE_10000_POINTS="price_..."

4. Local Development in Five Commands

# 1. Clone
git clone <repo-url>
cd demosaas

# 2. Install
npm install

# 3. Environment
cp .env.example .env.local
# edit .env.local with real values

# 4. Database
npm run db:generate   # create migration
npm run db:migrate    # run migration

# 5. Dev server
npm run dev

Visit http://localhost:3000 and you should see the landing page.

5. Real-World Walk-Throughs

Walk-through A: Sign-Up and Free Credits

1. Visitor clicks Sign Up.
2. Fills email and password → receives verification email.
3. Clicks link → dashboard shows balance 150 credits.

   • Logic lives in lib/points.ts.
   • Modify SQL if you want different rewards.

Walk-through B: Upgrading to Pro

1. User navigates to Pricing.
2. Chooses Pro → redirected to Stripe Checkout.
3. Uses test card 4242 4242 4242 4242 any future date, any CVC.
4. Payment succeeds → webhook updates users.subscription_status to pro.
5. Dashboard badge changes instantly.

Walk-through C: Automatic Language Switching

1. Browser sends Accept-Language: zh-CN.
2. First visit to / triggers 301 to /zh/.
3. All labels, emails, and toasts render in Chinese.
4. Language switcher in footer sets a NEXT_LOCALE cookie.

6. Deploying to Vercel (and Beyond)

Option 1: Vercel (Recommended)

1. Log in to Vercel → Import Git Repository.
2. Framework preset: Next.js.
3. Add environment variables from .env.local.
4. Deploy → live URL in ~2 minutes.
5. Optional: add custom domain via dashboard.

Option 2: Netlify / Railway / DigitalOcean

• Netlify: static-export friendly.
• Railway: one-click Postgres + deployment.
• DigitalOcean App Platform: containerised.

7. Code Map: Where to Change What

demosaas/
├── app/
│   ├── [locale]/            # en/zh routes
│   │   ├── page.tsx         # landing
│   │   ├── pricing/         # plans
│   │   └── profile/         # user dashboard
│   ├── api/stripe/webhook.ts # Stripe events
│   └── globals.css          # Tailwind entry
├── components/ui/           # reusable primitives
├── lib/
│   ├── auth.ts              # NextAuth config
│   ├── stripe.ts            # Stripe SDK client
│   └── points.ts            # credit balance rules
├── dictionaries/            # JSON translation files
└── drizzle/                 # migrations

Common tweaks:

• Brand colour → tailwind.config.ts under colors.brand.
• Copy → edit dictionaries/en.json or zh.json.
• Schema change → modify drizzle/schema.ts then run npm run db:generate && npm run db:migrate.

8. Pre-Launch Checklist (10 Minutes)

One-line validation:

npm run validate:env
npm run test:stripe
npm run test:i18n
npm run test:email-config

All green? Ship it.

9. From Template to Real Product: Three Next Steps

1. Replace Credit Logic
   Swap in your own usage meter (API calls, storage GB, etc.) inside lib/points.ts.

2. Brand Identity
   Replace public/logo.svg, update colour tokens, and your MVP looks bespoke.

3. Compliance & Security

   • Swap test Stripe keys for live keys.
   • Enable Stripe Tax for automatic VAT.
   • Store secrets in Vercel’s encrypted environment panel.

10. Wrap-Up & Further Reading

DemoSaaS gives you authentication, payments, credits, emails, i18n, and a polished UI without the boilerplate grind. After following this guide you can:

• Run a fully functional SaaS on localhost.
• Navigate the codebase and know where to customise.
• Deploy to production in minutes.

Next resources:

• Stripe subscription lifecycle
• NextAuth deep dive
• Tailwind custom theming

Now turn your idea into your first paying customer.