MODULE 4.1
Vercel and Supabase: the overview
Know what Vercel and Supabase do and how your repository connects to them as the project grows.
What it is
Vercel publishes websites and apps directly from your GitHub repository. It's the next step after Pages when your project grows beyond a simple page.
Why learn it
It runs code on the server, supports custom domains, and shows a preview of each change before it goes live.
Key concepts
Hosting: where a website is kept online. Deploy: publishing a version. Preview: a temporary URL to check a change.
What it is
Sign in to vercel.com with your GitHub account, click Add New → Project, and import the repository. Vercel detects the project type and publishes it.
Why learn it
You only connect it once. After that, you don't need to open Vercel to publish.
Key concepts
Import: giving Vercel read access to the repository. Framework: the project type (simple page, Next.js, and others), which Vercel detects automatically.
What it is
Once the repository is connected, keep using the same routine from part 2: add, commit, push. Vercel publishes automatically.
Why learn it
You don't need to learn a new tool to publish: Git is still the gateway.
Key concepts
Automatic deployment: the service watches the repository and publishes when a new version arrives. Main branch: the one that goes to the official URL.
What it is
In Vercel's Settings → Domains, add your domain. Vercel will show the DNS record to configure wherever you bought the domain.
Why learn it
It replaces the .vercel.app address with your brand name.
Key concepts
Domain: the website's name (yourbusiness.com). DNS: the list that says where each domain points. nslookup: a lookup of where a domain points right now.
What it is
Supabase gives your project a database, user login, and file storage without requiring you to install a server.
Why learn it
It turns a page into a system that can save contacts, orders, and registrations.
Key concepts
Database: where records are stored. Login (authentication): identifying the user. Project key: the password your code uses to communicate with Supabase.
What it is
Supabase keys go in a .env file, and .gitignore prevents Git from sending that file to GitHub.
Why learn it
A published key is a leaked key: anyone can use your database. In a public repository, this can happen within minutes.
Key concepts
.env: a file with the project's keys and passwords. .gitignore: a list of what Git doesn't send. Environment variable: a way to pass a key to a program without writing it in the code.