This guide walks you through deploying AlgoQuill to Vercel and connecting a custom domain.

Before You Start

Make sure you have:

  • A GitHub account
  • Your AlgoQuill code pushed to a GitHub repository
  • Your Supabase project set up with all tables
  • Your Stripe account configured (for payments)
  • Your Anthropic API key (for AI features)

Step 1: Create a Vercel Account

  1. Go to vercel.com
  2. Click "Sign Up"
  3. Choose "Continue with GitHub" (recommended)
  4. Authorize Vercel to access your repositories

Step 2: Import Your Project

  1. In Vercel dashboard, click "Add New Project"
  2. Find your AlgoQuill repository and click "Import"
  3. Vercel will detect it's a Next.js project automatically

Step 3: Add Environment Variables

In the project settings, add these environment variables. Get the values from your .env.local file:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...
SUPABASE_SERVICE_ROLE_KEY=eyJhbGci...

# Anthropic (AI)
ANTHROPIC_API_KEY=sk-ant-...

# Stripe (Payments)
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_live_...

# GitHub (Optional - for repo sync)
GITHUB_TOKEN=ghp_...
Important: Use your LIVE Stripe keys for production, not test keys. Test keys start with sk_test_, live keys start with sk_live_.

Step 4: Deploy

  1. Click "Deploy"
  2. Wait for the build to complete (2-5 minutes)
  3. You'll get a URL like algoquill-abc123.vercel.app

Step 5: Set Up Stripe Webhook

Stripe needs to know your production URL to send payment events:

  1. Go to Stripe Dashboard → Developers → Webhooks
  2. Click "Add endpoint"
  3. Enter: https://your-app.vercel.app/api/webhooks/stripe
  4. Select events: checkout.session.completed, customer.subscription.updated, customer.subscription.deleted
  5. Copy the webhook signing secret
  6. Add it to Vercel as STRIPE_WEBHOOK_SECRET
  7. Redeploy

Step 6: Configure OAuth (Optional)

If using GitHub or Google login:

  1. Go to Supabase Dashboard → Authentication → Providers
  2. Update the callback URLs to use your production domain
  3. Example: https://your-app.vercel.app/auth/callback

Step 7: Add Custom Domain (Optional)

To use your own domain instead of .vercel.app:

In Vercel:

  1. Go to Project Settings → Domains
  2. Enter your domain (e.g., app.yourcompany.com)
  3. Vercel will show you DNS records to add

At Your Domain Registrar:

Add the DNS records shown by Vercel. For a subdomain like docs.yourcompany.com:

TypeNameValue
CNAMEdocscname.vercel-dns.com

For a root domain like yourcompany.com:

TypeNameValue
A@76.76.21.21

Wait for DNS Propagation

DNS changes take 5-60 minutes to propagate worldwide. You can check status at dnschecker.org.

Step 8: Post-Deployment Checklist

  • ☐ Test signup/login flow
  • ☐ Test payment flow with a real card
  • ☐ Verify Stripe webhook is receiving events
  • ☐ Create a test project and documentation
  • ☐ Test AI chat and AI generate features
  • ☐ Submit sitemap to Google Search Console
  • ☐ Set up error monitoring (Sentry recommended)

Troubleshooting

Build Fails

Check the build logs in Vercel. Common issues:

  • Missing environment variables
  • TypeScript errors (run npm run build locally first)
  • Missing dependencies

Stripe Webhooks Not Working

  • Verify the webhook URL is correct
  • Check the signing secret matches
  • View webhook logs in Stripe Dashboard

OAuth Login Fails

  • Update callback URLs in Supabase to use production domain
  • Update OAuth app settings in GitHub/Google