Components
Cult Chat

Cult Chat

Simple gpt saas starter.

Cult Chat Starter Guide

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

Supabase Logo

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"
    • Find your Org ID on the Supabase dashboard.
  2. Link Your CLI to the Project:

    • Initialize Supabase:
      npx supabase init
    • Link to your project:
      npx supabase link --project-ref=<project-id>
  3. Configure .env.local:

    • Store the Supabase URL and anon key:
      NEXT_PUBLIC_SUPABASE_URL=<api-url>
      NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon-key>
  4. Set Up Database Schema:

  • Run migrations:

    supabase db push

OpenAI Logo

OpenAI

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

OpenAI API Key Setup

OpenAI Logo

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
  • Listen for events and forward them to your local server:
    stripe listen --forward-to localhost:3000/api/stripe
  • Copy the webhook signing secret output by the above command into your .env.local file:
    STRIPE_WEBHOOK_SECRET=your_webhook_signing_secret

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
  • 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.

    • Select the events your application should listen for.

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

Vercel Logo

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 Chat SaaS Template. Verify that everything is configured correctly, and enjoy building your project!