Skip to content

Latest commit

 

History

History
70 lines (51 loc) · 5.22 KB

PR.md

File metadata and controls

70 lines (51 loc) · 5.22 KB
Raw

Features

  • Supabase for Database, Auth, Storage, and Realtime

    • Database - Replaces Upstash KV to store image data.
    • Auth - Handle user accounts and link to stripe alongside database.
    • Storage - Replaces Cloudflare R2 to store original images.
    • Realtime - Replaces polling to get output by listening to postgres changes.
    • More - RLS, Database Functions, etc

  • Stripe for Billing

    • Checkout to buy credits for image generation.
    • Customer Portal to manage billing and view invoices.
    • Webhooks to automatically sync product offerings with database.

  • Next.js App Router

    • Server Actions - Image uploads & creating Stripe sessions
    • Route Handlers - Supabase Auth, Vercel Cron Jobs, and Webhooks for Replicate, Stripe, and Supabase
    • Metadata - File-based & Config-based
    • Dynamic Routes - SSR 🚀
    • Vercel Cron Jobs - Remove all data and images older than 1 day

Setup / Migration Guide

Pre-requisites

Deploy with Vercel

Steps

  • Use the Deploy with Vercel button above. This will:

    1. Create a new git repository for the project.
    2. Set up the necessary Supabase environment variables and run the SQL migrations to set up the Database schema on a new project.
      • If for some reason the migrations weren't automatically run by the integration, or you are manually setting up Supabase, you can manually run them in the SQL Editor.
      • The integration should have also handled adding the site url and approved redirect urls for auth. But in case it didn't, you manually do so here.
    3. Set up some environment variables.

  • There are two more things we need to manually set up on Supabase

    1. We need to create a Database Webhook
      • This will trigger the creation of a customer on stripe when a user creates an account.
      • Call the webhook "customer", have it trigger from insert and delete on public.users and send an HTTP POST request to https://[YOUR_DOMAIN_HERE]/api/webhooks/supabase/customer
    2. The final thing we have to do on Supabase is to enable Google OAuth.
      • You can follow the instructions from the official documentation here.

  • Now, we can configure Stripe

    1. Edit the webhook url in the stripe webhook.json file to match your domain.
    2. Run pnpm fixtures:webhook. This will set up a webhook to sync products/prices between Stripe & Supabase.

  • Back on Vercel

    1. Add the STRIPE_WEBHOOK_SECRET environment variable. You can find this in your Stripe Webhooks Dashboard under Signing secret for the specific webhook.
    2. Then add TUNNEL_URL env variable and make it an empty string. You will edit this in your .env.local when developing locally as needed.
    3. If you haven't already added your REPLICATE_API_TOKEN env variable, you can do that now as well.
    4. Now redeploy your app on Vercel, and wait for the deployment to complete before moving onto the next step.

  • Lastly,

    1. Run pnpm fixtures:products. This will generate the default products/prices on your Stripe account.
    2. You can verify this worked by checking your Stripe Dashboard & the products/prices table on Supabase
    3. You should be all set to go now!

Additional

  • You can use the Stripe CLI to test webhooks locally. More info here.
  • You can pull env variables from Vercel using pnpm dlx vercel env pull