Quick Deployment

Deploy Syllabi to production in under 10 minutes using Vercel and Supabase.

Overview

This guide covers:

✅ Deploying frontend to Vercel
✅ Setting up production database
✅ Configuring environment variables
✅ Custom domain setup (optional)

Note: This guide deploys the frontend only. The backend is optional and covered in Backend Deployment.

Step 1: Prepare Your Repository

Fork or Clone

Fork the repository on GitHub, or
Push your cloned repo to your GitHub account

# If you cloned locally, push to your repo:
cd syllabi
git remote set-url origin https://github.com/YOUR_USERNAME/syllabi.git
git push -u origin main

Step 2: Setup Production Database

Create Production Supabase Project

Go to supabase.com (opens in a new tab)
Click "New Project"
Configure:
- Name: syllabi-prod
- Database Password: Generate a strong password
- Region: Choose closest to your users
Wait for project to initialize (~2 minutes)

Run Database Migrations

Go to SQL Editor in Supabase Dashboard
Run each migration file from frontend/supabase/migrations/
Or use Supabase CLI:

# Install Supabase CLI
npm install -g supabase
 
# Login
supabase login
 
# Link to your project
supabase link --project-ref your-project-ref
 
# Push migrations
supabase db push

Setup Storage Buckets

Go to Storage in Supabase Dashboard
Create two buckets:
- chat-files (Public)
- chatbot-assets (Public)
Set policies to allow authenticated uploads

Enable Authentication Providers

Go to Authentication → Providers
Enable Email (required)
Optional: Enable Google, GitHub, etc.
Configure redirect URLs:
- Development: http://localhost:3000/auth/callback
- Production: https://your-domain.com/auth/callback

Step 3: Deploy to Vercel

Connect GitHub Repository

Go to vercel.com (opens in a new tab)
Click "Add New Project"
Import your GitHub repository
Configure project:
- Framework Preset: Next.js
- Root Directory: frontend
- Build Command: npm run build (auto-detected)
- Output Directory: .next (auto-detected)

Configure Environment Variables

Click "Environment Variables" and add:

Required Variables

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
 
# OpenAI
OPENAI_API_KEY=sk-your_key_here
 
# App URL (update after deployment)
NEXT_PUBLIC_APP_URL=https://your-app.vercel.app

Optional Variables

# Analytics
NEXT_PUBLIC_POSTHOG_KEY=phc_your_key
NEXT_PUBLIC_POSTHOG_HOST=https://app.posthog.com
 
# Discord Integration
DISCORD_CLIENT_ID=your_client_id
DISCORD_CLIENT_SECRET=your_secret
DISCORD_PUBLIC_KEY=your_public_key
DISCORD_BOT_TOKEN=your_bot_token
 
# Slack Integration
SLACK_CLIENT_ID=your_client_id
SLACK_CLIENT_SECRET=your_secret
SLACK_SIGNING_SECRET=your_signing_secret
 
# Google OAuth
GOOGLE_CLIENT_ID=your_client_id
GOOGLE_CLIENT_SECRET=your_secret
 
# Notion Integration
NOTION_CLIENT_ID=your_client_id
NOTION_CLIENT_SECRET=your_secret

Tip: Copy these from your local .env.local file

Deploy!

Click "Deploy"
Wait 2-3 minutes for build to complete
You'll get a URL like: https://syllabi-xxx.vercel.app

Step 4: Post-Deployment Setup

Update App URL

Go to Vercel → Project Settings → Environment Variables
Update NEXT_PUBLIC_APP_URL to your deployed URL
Redeploy to apply changes

Update Supabase Redirect URLs

Go to Supabase → Authentication → URL Configuration
Add your Vercel URL to:
- Site URL: https://your-app.vercel.app
- Redirect URLs: https://your-app.vercel.app/auth/callback

Test Your Deployment

Visit your deployed URL
Sign up for an account
Create a chatbot
Test chat functionality
Upload a document
Verify everything works! 🎉

Step 5: Custom Domain (Optional)

Add Custom Domain in Vercel

Go to Project Settings → Domains
Add your domain: app.yourdomain.com
Follow DNS configuration instructions:

Type: CNAME
Name: app
Value: cname.vercel-dns.com

Wait for DNS propagation (~5-60 minutes)

Update Environment Variables

Update NEXT_PUBLIC_APP_URL:

NEXT_PUBLIC_APP_URL=https://app.yourdomain.com

Update Supabase URLs

Add custom domain to Supabase redirect URLs.

Production Checklist

Before going live, verify:

Monitoring & Maintenance

Vercel Analytics

Enable in Project Settings → Analytics
Monitor performance and errors

Supabase Monitoring

Check Database Usage
Monitor API requests
Review Authentication logs

Updating Your Deployment

# Make changes locally
git add .
git commit -m "Your changes"
git push
 
# Vercel automatically deploys!

Cost Estimate

Free Tier (Perfect for Testing)

Vercel: Free for personal projects
Supabase: Free tier (500MB database, 1GB file storage)
OpenAI: Pay per use (~$0.15 per 1M tokens for GPT-4o-mini)

Expected costs for moderate use: $10-50/month

Production Scale

Vercel Pro: $20/month (better performance)
Supabase Pro: $25/month (8GB database, 100GB storage)
OpenAI: Scales with usage

Troubleshooting

Build Failed

Check build logs in Vercel
Verify Node.js version (should be 20+)
Ensure all dependencies are in package.json

Environment Variable Errors

Verify all required vars are set
Check for typos in variable names
Ensure no trailing spaces

Database Connection Failed

Verify Supabase URL and keys
Check if project is paused (free tier inactivity)
Ensure network connectivity

Chat Not Streaming

Check OpenAI API key is valid
Verify API key has credits
Review browser console for errors

Next Steps

Your app is now live! 🚀

Customize: Add your branding and themes
Integrate: Connect Discord, Slack, or other platforms
Monitor: Set up analytics and error tracking
Scale: Consider backend deployment for advanced features

Additional Resources

Need Help?

💬 GitHub Discussions (opens in a new tab)
🐛 Report an Issue (opens in a new tab)
📖 Troubleshooting Guide

Local Setup Repository Structure