Back

How to make a simple SaaS project

Use Next.js, TypeScript, Supabase, Stripe to build a simple SaaS project

Building a Simple SaaS Project with Next.js, TypeScript, Supabase, and Stripe

Local Development Setup

1. Install Required Tools

First, let's install the necessary CLI tools:
Note: You'll need Docker installed to run Supabase locally.

2. Clone the Project

We'll start with a template project and customize it according to our needs:

3. Set Up Supabase Locally

Configure Environment Variables

  1. Update the
    file with GitHub OAuth credentials:
    • Go to GitHub → Settings → Developer Settings → OAuth Apps
    • Register a new OAuth application
    • Set the Authorization callback URL to match
    • Copy the Client ID and Secret to your
      file
  2. Update
    with Supabase credentials:
    • Run
      in your terminal
    • Copy the following values from the output:
    • Access the Supabase Studio at http://127.0.0.1:54323

4. Set Up Stripe Locally

  1. Create a new Stripe sandbox account
  2. Copy the API keys to
  3. Run
    and authenticate
  4. Start the webhook listener:
  5. Copy the webhook signing secret to
    as

5. Start the Application

The application should now be running at http://localhost:3000
You can add products through the Stripe dashboard and see them reflected in your application.

Production Deployment

1. Deploy Supabase to Production

  1. Create a new project in Supabase Cloud
  2. Link your local project:
  3. Push your database schema:

2. Deploy to Vercel

  1. Update the following environment variables in Vercel:

3. Configure Stripe for Production

  1. Update Stripe environment variables:
  2. Create a new webhook:
    • Go to Stripe Dashboard → Developers → Webhooks
    • Create a new webhook
    • Set the Endpoint URL to your production URL/api/webhooks

4. Configure Authentication

  1. Update Supabase Authentication settings:
    • Set the Site URL to your production URL
    • Update GitHub OAuth settings:
      • Set Homepage URL to your production URL
      • Update Callback URL from Supabase provider settings
  2. Add the following environment variables to Vercel:
Test the deployment by creating a new product and verifying it appears on your production site.

评论