Supabase Connection

Overview

VibeCoding.ad uses Supabase as its backend database and authentication provider. This guide will walk you through setting up your Supabase project and connecting it to your application.

Note: You'll need a Supabase account to follow this guide. Sign up at supabase.com if you don't have one.

Step 1: Create a Supabase Project

Go to supabase.com and sign in
Click "New Project" in your dashboard
Choose your organization and enter project details:
- Name: vibe-coding (or your preferred name)
- Database Password: Generate a strong password
- Region: Choose closest to your users
Click "Create new project"
Wait for the project to be ready (usually 1-2 minutes)

Step 2: Get Your API Keys

Once your project is ready, you'll need to get your API keys:

In your Supabase dashboard, go to Settings → API
Copy the following values:

Required API Keys:

Project URL - Found in "Project URL" section
Anon Key - Found in "Project API keys" section
Service Role Key - Found in "Project API keys" section (keep this secure!)

Step 3: Configure Environment Variables

Create a .env.local file in your project root and add your Supabase credentials:

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=https://your-project-id.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key-here

Security Warning: Never commit your .env.local file to version control. The service role key should be kept secret and only used server-side.

Step 4: Set Up Database Schema

VibeCoding.ad comes with database migrations. Run the SQL migration to set up your tables:

Option 1: Using Supabase Dashboard

Go to your Supabase dashboard
Navigate to SQL Editor
Copy the content from database/migrations/create_email_subscriptions.sql
Paste it into the SQL editor and run the query

Option 2: Using Supabase CLI

# Install Supabase CLI
npm install -g supabase

# Link your project
supabase link --project-ref your-project-id

# Run migrations
supabase db push

Database Schema Overview

The migration creates the following table:

email_subscriptions
- id (uuid, primary key)
- email (text, unique)
- status (text, default: 'active')
- trigger (text)
- created_at (timestamp)
- updated_at (timestamp)

Step 5: Test Your Connection

Verify that your application can connect to Supabase:

Start your development server: npm run dev
Open your application in the browser
Try the email subscription feature to test database writes
Check your Supabase dashboard to see if data appears in the table

Success! If you can submit the email subscription form and see data in your Supabase table, your connection is working correctly.

Troubleshooting

Connection Failed

Check that your environment variables are correctly set and that your Supabase project is active.

Authentication Issues

Verify that your site URL and redirect URLs are correctly configured in Supabase authentication settings.

RLS (Row Level Security)

If you encounter permission errors, check your Row Level Security policies in the Supabase dashboard.