Vercel — Publishing to the Web
Vercel takes your code from GitHub and turns it into a live URL — automatically, every time you push. It is how your app goes from your laptop to the world.
You have the workspace (VS Code), the history system (Git), the cloud code home (GitHub), and the cloud data store (Supabase). One piece remains:
How does your app actually get onto the internet so someone can open it in a browser?
That is Vercel.
What Vercel Is
Vercel is a cloud hosting platform built specifically for modern web apps. It connects to your GitHub repository, builds your app automatically on every push, and gives it a live URL.
The CA analogy: Vercel is the office building your firm operates from — except it is on the internet, anyone with the address can visit, and when you update the signage (push new code), the change appears at the address instantly without shutting down operations.
The Two Types of URLs Vercel Gives You
Preview URL (every branch)
Every time you push to any branch on GitHub, Vercel builds a preview URL:
This is a live version of that specific branch. You can test it, share it with a client for feedback, or verify a feature before merging.
Production URL (main branch only)
When you merge to main, Vercel builds and publishes to your production URL:
This is what the world sees.
The three-environment model:
The Deploy Flow
This means every push is automatically tested. A broken build does not reach users — Vercel stops it. The previous working version stays live.
Environment Variables — Keeping Secrets Safe
Your app needs to talk to Supabase (with a URL and a key) and possibly Razorpay, Resend, and other services. These keys must not be in your code — anyone who sees your GitHub repo would have them.
Vercel stores them separately as environment variables:
- You add them once in the Vercel dashboard
- Vercel injects them into every build automatically
- They never touch your code repository
This is the same principle as a CA keeping client passwords in a password manager, not in a shared Excel file.
Hands-On: Deploy Your First Project
- Go to vercel.com and sign in with your GitHub account
- Click Add New Project → select the
sahinov-training-practicerepository you created - Leave all settings as default → click Deploy
- Vercel will build (it may fail because there is nothing to build yet — that is expected)
- Once you have a real Next.js project (from Session 4 onwards), this same process will give you a live URL in under two minutes
The Full Stack, Complete
You now have all five tools in place:
When Session 4 introduces Claude Code, it will work inside this exact stack. Claude Code will edit files in VS Code, commit with Git, push to GitHub, and your Vercel URL will update automatically. The gap you felt at the end of Session 1 — "I built something but I can't share it" — is now fully closed.
Before you move on — can you do all of this?
Click each item you're confident about. Bring the unchecked ones to your next session.
I have a Vercel account connected to my GitHub
I understand the difference between a preview URL (every branch) and production URL (main branch only)
I understand that environment variables keep API keys out of my code
I can explain the full stack: VS Code → Git → GitHub → Vercel / Supabase