herberthk/supabase_stripe_saas

Build a SaaS app with React

Technologies Used

• Next.js (13), Supabase, Stripe, Vercel

Tools Needed

• Node / NPM (Package Manager)
• VSCode (Code Editor)
• Git / Github

Accounts Needed (100% Free)

• Supabase (Backend)
• Stripe (Payments)
• Vercel (Deployment)
• Github (Continuous Deployment)

Next.js Documentation

• Next.js Image
• Next.js API Routes
• Next.js GetStaticPaths
• Next.js GetStaticProps

Stripe Documentation (Select Node.js in code snippets)

• Stripe Checkout: Customer Portal
• Stripe API: List all prices
• Stripe API: Retrieve product
• Stripe API: Retrieve Customer
• Stripe API: Create a Checkout Session
• Stripe API: Event Object for Webhooks
• Stripe API: Versioning
• Stripe Checkout: Billing Portal Settings

Supabase Documentation

• Supabase Next.js Auth Helpers
• Supabase Magic Link Login
• Supabase Auth Signout
• Supabase RLS: Row Level Security
• Supabase Database Functions
• Supabase Database Triggers

Additional Info

• The logo font is "Bakbak One", a free Google font
• All the images are included in the /assets folder in /public
• Along with each image is its original .psd (Photoshop) file
• Seed product data using the Supabase SQL editor from the seed.sql file (in this project)
• Use VSCode to instantly install the recommended extensions for this project (listed in the .vscode folder in this project)

Run webhook

npx ngrok http 3000