Dockerize a Full Stack App

Why This Project

Like CI/CD, Docker isn't a standalone app — it's infrastructure you add to an existing project. Take the Freelancer Client Portal or Splitwise Lite and containerize it. The goal is "anyone can clone this repo and run docker compose up and the entire app works" — no installing Node, no configuring MongoDB, no environment setup.

What to Build

A docker-compose setup that runs your full stack app in containers: React frontend served by nginx, Express backend, and MongoDB. One command starts everything. Create both a production config and a development config with hot reload.

Requirements

Dockerfile for backend: multi-stage build (install deps → copy source → run)
Dockerfile for frontend: build with Vite in one stage, serve with nginx in second stage
docker-compose.yml (production): three services — frontend, backend, mongo
docker-compose.dev.yml (development): bind mounts for hot reload on both frontend and backend
Volumes: persist MongoDB data across container restarts
Environment variables passed via docker-compose, not hardcoded in Dockerfiles
Nginx config: serve frontend on port 80, proxy /api requests to the backend container
.dockerignore files for both services (exclude node_modules, .git, etc.)
README section explaining how to run the app with Docker

Skills Practiced

Docker Dockerfile docker-compose multi-stage builds nginx reverse proxy volumes container networking dev vs prod configs

Pain Point to Notice

Container networking is the hardest part. Your backend can't connect to MongoDB at localhost anymore — containers have their own network. It needs the service name from docker-compose (e.g., mongo) as the hostname. The frontend's API calls also break because the browser isn't inside the container — http://backend:3001 means nothing to the user's browser. That's why you need nginx as a reverse proxy: the browser hits nginx, nginx forwards /api requests to the backend container internally. Understanding this distinction between "container-to-container" and "browser-to-container" networking is the core lesson.

Resources

Docker Getting Started docs
Multi-stage Builds docs
Docker Compose Docs docs
Compose Networking docs — read this carefully
Nginx Beginner's Guide docs
Dockerfile Reference docs
Docker Localhost Networking — Stack Overflow discussion