Vercel — Overview
What Vercel is, why you need it, and the three features that make it the best hosting choice for React projects.
You've built something. It works perfectly on your laptop. You can open a browser and see it running. You're proud of it.
Now your client asks: "Can I see it?"
You send them a screenshot.
They say: "Can I actually use it? On my phone?"
You don't have an answer — because the app only exists on your laptop. The moment you close your laptop, it disappears for everyone else. This is the problem Vercel solves.
The "Why First" Scenario
You've spent three days building a fee payment flow for a school management app. It looks great. It works exactly as specified. You demo it on a video call by sharing your screen.
The client says: "Can you send me the link so I can share it with my partners?"
You realise you can't. There is no link. It's running on your machine.
Your client can't share it. Their partners can't review it. You can't get feedback until the next call. And the moment you sleep, the laptop closes, and the "app" stops existing for everyone.
This is why every web application needs hosting — a computer somewhere in the world that stays on 24 hours a day, serves your app to anyone with the link, and never closes the lid.
Vercel is that computer. Except it's actually thousands of computers across dozens of countries, so your app loads fast everywhere. And unlike traditional hosting, you don't manage any servers. You just push your code and Vercel handles the rest.
The Excel Analogy
Think about how you share an Excel model with a client.
Option 1: You email it as an attachment. They download it. They open it. They make changes on their copy. You have no idea what they've done. When you update your version, they're still on the old one. This is "running on localhost" — isolated, fragile, disconnected.
Option 2: You upload it to SharePoint or OneDrive and share a link. Anyone with the link can open it. You update your version, and the next time they click the link, they see the update automatically. No attachments. No stale copies. One source of truth.
Vercel is the SharePoint for your web app.
Push your code to GitHub, and Vercel automatically builds it and updates the live URL. Every time. Anyone with the link always sees the latest version.
The Three Features That Make Vercel the Right Choice
1. Automatic Deployment from GitHub
The workflow you will use for every project for the rest of your career:
That's it. Vercel watches your GitHub repository. The moment code hits the main branch, Vercel automatically pulls it, builds it, and updates the live site. No manual upload. No FTP. No server configuration. The whole process takes 60–90 seconds.
What "building" means: Your React code is written in JSX and TypeScript — formats browsers don't understand natively. The build process converts your code into plain HTML, CSS, and JavaScript that any browser can read. Vercel runs this build automatically on every push so you never have to think about it.
2. Preview Deployments — Every PR Gets Its Own URL
This is the feature that changes how teams work.
When you're on a real project — EduTrack, a CA firm website, Finpist — you won't push directly to main. You'll create a branch, make your changes, and open a pull request for review. The moment you open that PR, Vercel automatically deploys it to a unique URL like myapp-git-feature-login-abc123.vercel.app.
What this means in practice:
- Subhash can click that URL and test your feature on a real device before approving
- Your client can review a change before it goes live on their actual site
- You can share work-in-progress without touching the live site
- If something is wrong, you fix it in the branch — the live site never breaks
Every PR → its own URL → review → approve → merge → live. This is professional software development practice, and Vercel makes it free and automatic.
3. Free SSL (HTTPS)
Every site Vercel hosts automatically gets HTTPS — the padlock icon in the browser that tells users the connection is secure.
Traditionally, setting up HTTPS required purchasing an SSL certificate, configuring a web server, and renewing it every year. Vercel does this automatically for every project, including custom domains. Zero configuration. Zero cost. Zero renewal headaches.
Your clients' users will never see a "Not Secure" warning. Their data is encrypted in transit. You didn't have to do anything.
What Vercel Is Not
Vercel is a frontend hosting platform. It excels at deploying React, Next.js, and Vite apps. It is not:
- A database (that's Supabase)
- A place to store files (that's Supabase Storage)
- A backend server (Supabase handles your backend)
Vercel and Supabase complement each other. Your React app lives on Vercel. Your data lives on Supabase. They talk to each other over the internet via the Supabase URL in your environment variables.
What You'll Have After This Section
| Page | What you'll be able to do |
|---|---|
| Account Setup | Create a Vercel account connected to GitHub |
| First Deploy | Deploy your first project and get a live URL |
| Environment Variables | Add your Supabase keys so the deployed app can connect to the database |
| Custom Domain | Connect yourdomain.com to your Vercel deployment |
| Logs & Monitoring | Read build logs, diagnose errors, understand what's happening |
| Verification | Confirm everything is working before Project 1 submission |
Free forever for small projects. Vercel's Hobby plan is free with no time limit. It covers everything you'll need during training and for personal projects. The paid plan becomes relevant only when you're running high-traffic commercial apps. All 10 candidates in this batch will use the free plan throughout the workshop.