Step 8 — Deployment (Free Tier)

What This Step Is About

This step takes the application from running on your local machine to running on the internet, accessible to anyone. You will deploy the frontend, backend, database, and cache layer — all for free. Understanding the full deployment story, not just "push to Vercel," is what separates a developer who can build things from one who can ship them.

Concepts and Tools

What "Deployment" Actually Means

When you run npm run dev on your laptop, the application is only accessible at localhost — on your machine, in your browser. Deployment means running the application on a server that is connected to the internet and reachable via a public URL.

Each part of your application needs a place to run:

The React frontend is a bundle of static files (HTML, JS, CSS) that need to be served by a CDN or static file server
The Express API is a long-running Node.js process that needs a server with a public IP address
The BullMQ worker is another long-running Node.js process that needs to run alongside the API
MongoDB is a database server that needs persistent storage
Redis is an in-memory store that needs to be accessible to both the API and the worker

Vercel (Frontend)

Vercel is a platform purpose-built for deploying frontend applications. When you push to your main branch, Vercel detects the Vite project, runs npm run build, and deploys the resulting dist/ folder to its global CDN (Content Delivery Network).

A CDN stores copies of your static files in dozens of data centers around the world. When a user in Tokyo visits your app, they get the files from a server in Tokyo — not from a server in the US — which is dramatically faster.

Vercel's free tier (called the Hobby plan) includes unlimited deployments for personal projects, automatic HTTPS, and preview deployments for every pull request (a live URL to test before merging).

Resources: