Classes 10–12 (K): Put the app online with Vercel

← (J) Save your work to GitHub · All steps · (L) Optional: automated tests, and Docker →

Part of the task-app setup for Classes 10–12. Work through the parts in order, doing every step yourself; Start here has the worksheet, the screenshot log, how to ask Claude when you’re stuck, and the list of all parts.

Time: about 10–20 minutes.

As of Oct 22, 2026 · Official docs: Vercel · Vercel environment variables · Next.js on Vercel · Supabase: Redirect URLs

Only after everything works on your computer.

1. At vercel.com, sign up with Continue with GitHub (the free Hobby plan).
2. Add New > Project, and import your task-app repository.
3. Before you deploy, open Environment Variables and add NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY with the values from the worksheet. Don’t add any secret keys. Without the URL the build fails. If you add or change a variable later, redeploy: changes apply only to new deployments.
4. Click Deploy. When it finishes, copy your app’s address (https://....vercel.app) into the worksheet.
5. In Supabase, Authentication > URL Configuration: change Site URL to your Vercel address and add the redirect URL https://YOUR-APP.vercel.app/** (keep the localhost one).
6. In Google Cloud, add your Vercel address to the client’s Authorized JavaScript origins. The redirect URI stays the Supabase callback URL, and Stripe needs no changes.

From now on, every git push to your fork makes Vercel deploy the new version automatically. See Step 13: Deploy to Production and Hosting and Deployment.