Cult Classic Template Setup Guide

In this guide, we'll walk through the process of setting up the Cult Classic SaaS Template. This template leverages Next.js, Supabase, OpenAI, and Stripe to help you quickly launch your project.

Supabase

Supabase provides a backend-as-a-service, offering database, authentication, and storage functionalities.

Step-by-Step Supabase Setup

1. Create a Supabase Project:

   • Visit Supabase or use the CLI command:

     npx supabase projects create -i "your-saas-app"

     Copy
   • Find your Org ID on the Supabase dashboard.

2. Link Your CLI to the Project:

   • Initialize Supabase:

     npx supabase init

     Copy
   • Link to your project:

     npx supabase link --project-ref=<project-id>

     Copy

3. Configure .env.local:

   • Store the Supabase URL and anon key:

     NEXT_PUBLIC_SUPABASE_URL=<api-url>
     NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon-key>

     Copy

4. Set Up Database Schema:

• Run migrations:

  supabase db push

  Copy

OpenAI

OpenAI's powerful AI tools can be integrated into your application for enhanced features.

OpenAI API Key Setup

• Visit OpenAI's API keys page to create and retrieve your API key.
• Update the OPENAI_API_KEY in .env.local.

Stripe

Integrating Stripe allows your application to process payments securely, both locally for testing and in production.

Local Development with Stripe

Setting Up Stripe CLI for Local Testing

The Stripe CLI helps you test webhooks and other Stripe features in a development environment.

• Install the Stripe CLI:

  stripe login

  Copy
• Listen for events and forward them to your local server:

  stripe listen --forward-to localhost:3000/api/stripe

  Copy
• Copy the webhook signing secret output by the above command into your .env.local file:

  STRIPE_WEBHOOK_SECRET=your_webhook_signing_secret

  Copy

Running the Next.js Client

Install dependencies and start your development server:

# Using pnpm
pnpm install
pnpm run dev
 
# Using npm
npm install
npm run dev
 
# Using yarn
yarn
yarn dev

Access your app at http://localhost:3000.

Environment Variables

Configure environment variables crucial for your application's functionality.

# Supabase Config Example
NEXT_PUBLIC_SUPABASE_URL="https://your-supabase-url.supabase.co"
SUPABASE_PROJECT_ID="your-supabase-project-id"
NEXT_PUBLIC_SUPABASE_ANON_KEY="your-supabase-anon-key"
 
# OpenAI
OPENAI_API_KEY="your-openai-api-key"
 
# Stripe Configuration
# Remember to update your stripe environment variables when going to production
STRIPE_SECRET_KEY="your-stripe-secret-key"
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="your-stripe-publishable-key"
STRIPE_WEBHOOK_SECRET="your-stripe-webhook-secret"

Deployment

Production Configuration with Stripe

Setting Up Stripe for Production

When deploying your application, you need to configure Stripe to handle live transactions.

• Set up your Stripe keys in the production environment variables:

  STRIPE_SECRET_KEY=your_live_secret_key
  STRIPE_PUBLISHABLE_KEY=your_live_publishable_key

  Copy
• Create a Stripe webhook for your production server:

  • Use your production domain server's URL followed by /api/stripe as the endpoint in the Stripe Dashboard's Webhooks settings.

    example: https://gnow.io/api/stripe

  • Select the events your application should listen for.

  • Add the webhook's signing secret to your production environment variables.

Deploy your application to a hosting platform like Vercel, integrating it with Stripe for payment processing.

Steps for Deployment

1. Create a GitHub Repository:

   • Initialize and push your project.

2. Vercel Deployment:

   • Import your repository in Vercel.

3. Configure Vercel Environment Variables:

   • Copy .env.local to Vercel's environment settings.

4. Update Stripe Configuration:

   • Setup Stripe for your production environment.

Final Notes

You're now ready to use the Cult Classic SaaS Template. Verify that everything is configured correctly, and enjoy building your project!