Deploynt
getting-started
tutorial
setup

Getting Started with SaaS Boilerplate

Learn how to set up and deploy your SaaS application in minutes with our comprehensive boilerplate.

S
SaaS Team
January 15, 2025
3 min read

Welcome to SaaS Boilerplate! This guide will walk you through setting up your new SaaS application.

Quick Preview (No Setup Required)

Want to see the UI before configuring anything? Just run:

git clone https://github.com/yourusername/saas-boilerplate.git
cd saas-boilerplate
npm install
npm run dev

Visit http://localhost:3000 and explore:

  • Landing page with features, pricing, testimonials, and FAQ
  • Blog with MDX support
  • About and Contact pages
  • Auth pages (login, signup, password reset)
  • Dashboard layout

All marketing pages work immediately. Auth and payments show helpful messages until you configure the services.

Full Setup

When you're ready to enable all features, follow these steps:

Prerequisites

  • Node.js 18+ installed
  • A Supabase account (free tier works great)
  • A Stripe account (test mode is fine for development)
  • A Resend account for transactional emails (optional)

Step 1: Environment Variables

Copy the example file and fill in your credentials:

cp .env.example .env.local

See our Setup Guide for detailed instructions on getting each API key.

Step 2: Database Setup

Connect to your Supabase project and run the migrations:

# Using Supabase CLI
supabase link --project-ref your-project-ref
supabase db push

Or paste the SQL files from /supabase/migrations/ into the Supabase SQL Editor.

Step 3: Stripe Configuration

  1. Create products and prices in the Stripe Dashboard
  2. Copy the Price IDs to your .env.local
  3. Set up webhooks (use Stripe CLI for local development):
stripe listen --forward-to localhost:3000/api/stripe/webhooks

Step 4: Start Development

npm run dev

What's Included

Core Features

  • Authentication - Email/password and Google OAuth with Supabase
  • Payments - Stripe subscriptions with checkout and customer portal
  • Email - Transactional emails with Resend and React Email
  • Database - Supabase PostgreSQL with Row Level Security

Content & Marketing

  • Blog - MDX-powered blog system
  • Changelog - Product update announcements
  • Landing Page - Hero, features, testimonials, FAQ sections
  • SEO - Sitemap, robots.txt, and meta tag optimization

Developer Experience

  • TypeScript - Full type safety
  • Claude Code Skills - AI-assisted development
  • Comprehensive Docs - Setup guides for everything

Using Claude Code

This boilerplate includes built-in Skills for Claude Code. When working on the project, try:

  • "Add a new blog post about feature X"
  • "Create a new dashboard page for analytics"
  • "Add a database migration for a teams table"
  • "Create an email template for password reset"

Claude will follow the project's conventions automatically.

Next Steps

  1. Customize branding - Update /config/site.ts with your name and colors
  2. Edit pricing - Modify plans in /config/stripe.ts
  3. Create content - Add blog posts in /content/blog/
  4. Deploy - Push to Vercel with our Deployment Guide

Documentation

Happy building!