MERN with Docker & Kubernetes Practice

This repository is a MERN-style practice project focused on Docker and Kubernetes concepts. The app consists of:

• client/: React + TypeScript frontend built with Vite and served with Nginx in Docker
• backend/: Express API backend serving fake user data in Docker

Project goals

• Practice Dockerizing frontend and backend services
• Exercise container build and run workflows
• Prepare for Kubernetes deployment of a multi-service stack

Repository structure

• client/
  • Dockerfile — multi-stage build that compiles the React app and serves it with Nginx
  • .env — contains VITE_SERVER_URL=http://localhost:8080
  • src/ — React application source files
  • public/ — static assets
  • nginx.conf — Nginx config with SPA fallback
• backend/
  • Dockerfile — builds a Node/Express image
  • server.js — starts the Express server
  • app.js — Express app with CORS enabled and API routes
  • data/users.json — sample user data returned by the API

Frontend

Local development

cd client
npm install
npm run dev

The Vite frontend uses VITE_SERVER_URL=http://localhost:8080 to call the backend.

Production build

cd client
npm run build

Docker

Build the frontend image:

cd client
docker build -t react-frontend .

Run the frontend container:

docker run -d --name frontend -p 3000:3000 react-frontend

Then open http://localhost:3000.

Backend

Run locally

cd backend
npm install
npm start

Docker

Build the backend image:

cd backend
docker build -t server .

Run the backend container:

docker run -d --name backend -p 8080:8080 server

API endpoints

• GET /api/v1/getuser — returns user data
• GET /health — health check

Kubernetes practice

This repository is intended for Kubernetes practice, even if Kubernetes manifests are not present yet.

A typical Kubernetes workflow for this project would include:

• building Docker images for frontend and backend
• pushing images to a registry
• creating Deployment and Service manifests for each service
• optionally using an Ingress or IngressRoute for HTTP access
• testing the app in a local Kubernetes cluster such as Minikube, Kind, or Docker Desktop

Run on Minikube

From the project root, use the following commands to start the app in a local Minikube cluster:

minikube start
minikube addons enable ingress
sudo minikube tunnel
kubectl apply -f k8s/
kubectl get pods,svc,ingress
minikube service ingress-nginx-controller -n ingress-nginx --url

The last command will print a localhost URL such as http://127.0.0.1:58214/. Open that URL in the browser to access the frontend. The API is available at the same host under /api/v1/getuser.

Notes

• The frontend is configured to fetch backend data from http://localhost:8080.
• CORS is enabled in the backend via app.use(cors()), so browser requests from the frontend are allowed.
• If you add Kubernetes manifests, update the README with the actual manifest names and deploy commands.