Quick Start

This is the fastest path to a working site. By the end, you'll have Supabase connected, the database set up, and your brand on the page.

1. Create a Supabase project (3 min)

Supabase gives you a database, user auth, and file storage in one dashboard.

1. Go to supabase.com → New Project
2. Pick a name, set a database password (save it in a password manager), choose a region close to you
3. Wait ~2 minutes for the project to boot

2. Copy your Supabase keys (1 min)

Once your project is ready:

1. Open Settings → API in the left sidebar
2. You'll see three values you'll need:
   • Project URL — something like https://abcdefgh.supabase.co
   • anon / public key — safe to use in the browser
   • service_role / secret key — server-only, bypasses all security

3. Run the database schema (2 min)

The project ships with a single SQL file that creates every table, index, and permission rule. You run it once in Supabase.

1. In Supabase, open SQL Editor (left sidebar) → New query
2. Open supabase/schema.sql from the project, copy everything
3. Paste into the Supabase SQL Editor and click Run

The script is idempotent — safe to run multiple times.

4. Fill in your .env.local (2 min)

Open .env.local and paste the Supabase values:

NEXT_PUBLIC_APP_URL=http://localhost:3000
 
NEXT_PUBLIC_SUPABASE_URL=https://abcdefgh.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...your-anon-key
SUPABASE_SERVICE_ROLE_KEY=eyJ...your-service-role-key
 
CRON_SECRET=any-long-random-string

CRON_SECRET can be any random string — just make it hard to guess. You can generate one with:

openssl rand -hex 32

5. Restart the dev server (30 sec)

Stop the dev server (Ctrl+C) and start it again so it picks up the new env vars:

pnpm dev

6. Your directory is alive

Open http://localhost:3000.

Try it:

• Click Sign in → create an account (uses Supabase Auth)
• Go to /submit → submit a test project
• Log in as admin (see below) → /admin to approve it

Make yourself admin

1. In Supabase, go to Table Editor → users
2. Find your row, set is_admin to true and role to admin
3. Reload — you now have access to /admin

7. Brand it in 2 minutes

Open config/site.config.ts and change three fields:

export const siteConfig = {
  name: 'My Directory',
  tagline: 'Curated tools for X',
  url: process.env.NEXT_PUBLIC_APP_URL || 'http://localhost:3000',
  // ...
  contact: {
    email: 'hello@mydirectory.com',
    supportEmail: 'support@mydirectory.com',
    privacyEmail: 'privacy@mydirectory.com',
  },
};

Save — the dev server hot-reloads, and the name / tagline update everywhere.

Or let an AI do it for you:

Open config/site.config.ts and set the following fields:

name: "{your brand name}"
tagline: "{one-line pitch, under 60 chars}"
description: "{longer SEO description, 1-2 sentences}"
contact.email: "{hello@yourdomain.com}"
contact.supportEmail: "{support@yourdomain.com}"
contact.privacyEmail: "{privacy@yourdomain.com}"
social.twitter: "{@handle or full URL}"
keywords: [{3-5 relevant SEO keywords}]
themeColor: "{brand hex color}"
Keep every other field as-is. Match the existing SiteConfig type.

What's next

You now have a working directory. Next decisions:

• Add payments? → Payments (Stripe setup)
• Add email? → Email Config (Resend setup)
• Go live? → Deploy in 5 Minutes
• Customize colors? → Theming