/supabase-course-saas

For learning and reference purposes.

Primary LanguageTypeScript

Supabase course SaaS

A demo saas built with Next.js + Supabase + Stripe.

Getting Started

Supabase setup

  1. Create a new project on Supabase.
  2. Execute the schema.sql file in the sql folder in the supabase SQL editor.
  3. Enable the REALTIME feature for all tables in the supabase dashboard (database > replication > source).
  4. Add dummy lessons and premium content to the database.
  5. Setup authentication by disabling email auth, and enabling github OAuth.

Stripe setup

  1. Create a new Stripe account.
  2. Create recurring subscription products in the Stripe dashboard as you like (Standard pricing model + Recurring)
  3. Create a new webhook endpoint in the Stripe dashboard (https://stripe.com/docs/webhooks/setup) pointing to https://yourdomain.com/api/stripe-hooks (replace yourdomain.com with your domain, the ngrok exposed URL for local).
  4. Add redirect URL to your domain in stripe portal configuration (settings > customer portal > business information) and point it to https://yourdomain.com/dashboard (replace yourdomain.com with your domain, localhost:3000 for local).

Environment variables

Following are the supabase variables:

  • NEXT_PUBLIC_SUPABASE_URL - The URL of your supabase project.
  • NEXT_PUBLIC_SUPABASE_ANON_KEY - The anon key of your supabase project.
  • SUPABASE_SERVICE_KEY - The service key of your supabase project to bypass RLS.

Stripe secrets:

  • NEXT_PUBLIC_STRIPE_KEY - The public key of your stripe account.
  • STRIPE_SECRET_KEY - The secret key of your stripe account.
  • STRIPE_SIGNING_SECRET - The signing secret of your stripe webhook endpoint.

App secrets:

  • API_SECRET - A secret key used internally in the app. Generated by running node secret-key-gen.mjs.

Running the app

  1. Install dependencies by running yarn install.
  2. Run the app in development mode by running yarn dev.
  3. Open http://localhost:3000 with your browser to see the result.

Resources: