Getting Started

Watch me Setting Up My Starter Kit on YouTube.

Prerequisites

• Node.js and yarn/bun installed
• Accounts and API keys for:
  • Supabase
  • Stripe (if using payments)
  • Clerk (if using authentication)

Setup

1. Clone the repository:

   git clone <repository-url>
   cd <project-directory>

2. Install dependencies:

   yarn

3. Set up environment variables: Create a .env file in the root directory with the following variables:

   SUPABASE_URL=<your-supabase-project-url>
   SUPABASE_SERVICE_KEY=<your-supabase-service-key>
   
   # If using Stripe
   STRIPE_SECRET_KEY=<your-stripe-secret-key>
   NEXT_PUBLIC_STRIPE_PRICE_ID=<your-stripe-price-id>
   
   # If using Clerk
   NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<your-clerk-publishable-key>
   CLERK_SECRET_KEY=<your-clerk-secret-key>
   NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
   NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
   NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
   NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

4. Configure features: In config.ts, set the desired features:

   const config = {
    auth: {
      enabled: true, // Set to false if not using Clerk
    },
    payments: {
      enabled: true, // Set to false if not using Stripe
    }
   };

5. Set up the database: Run Prisma migrations:

   npx prisma migrate dev

6. Start the development server:

   yarn dev

7. Open your browser and navigate to http://localhost:3000 to see your application running.

Additional Configuration

• Webhooks: Set up webhooks for Clerk (if using auth) at /api/auth/webhook and for Stripe (if using payments) at /api/payments/webhook.
• Customize the landing page, dashboard, and other components as needed.
• Modify the Prisma schema in prisma/schema.prisma if you need to change the database structure.

Important Security Notes

• Enable Row Level Security (RLS) in your Supabase project to ensure data protection at the database level.
• Always make Supabase calls on the server-side (in API routes or server components) to keep your service key secure.

Learn More

Refer to the documentation of the individual technologies used in this project for more detailed information:

• Next.js Documentation
• Tailwind CSS Documentation
• Supabase Documentation
• Prisma Documentation
• Clerk Documentation (if using auth)
• Stripe Documentation (if using payments)