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
- Go to vercel.com
- Click "Sign Up"
- Choose "Continue with GitHub" (recommended)
- Authorize Vercel to access your repositories
Step 2: Import Your Project
- In Vercel dashboard, click "Add New Project"
- Find your AlgoQuill repository and click "Import"
- 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
- Click "Deploy"
- Wait for the build to complete (2-5 minutes)
- 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:
- Go to Stripe Dashboard → Developers → Webhooks
- Click "Add endpoint"
- Enter:
https://your-app.vercel.app/api/webhooks/stripe - Select events:
checkout.session.completed,customer.subscription.updated,customer.subscription.deleted - Copy the webhook signing secret
- Add it to Vercel as
STRIPE_WEBHOOK_SECRET - Redeploy
Step 6: Configure OAuth (Optional)
If using GitHub or Google login:
- Go to Supabase Dashboard → Authentication → Providers
- Update the callback URLs to use your production domain
- 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:
- Go to Project Settings → Domains
- Enter your domain (e.g.,
app.yourcompany.com) - 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:
| Type | Name | Value |
|---|---|---|
| CNAME | docs | cname.vercel-dns.com |
For a root domain like yourcompany.com:
| Type | Name | Value |
|---|---|---|
| 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 buildlocally 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