hamzasarfraz862/front-end-app repository overview

⁠Mxmobilz Web

Production frontend for the Mxmobilz mobile-phone e-commerce platform.

⁠Tech Stack

• React 19
• TypeScript
• Vite
• Tailwind CSS v4
• Node.js 22 (build)
• Nginx Alpine (runtime)
• Docker Multi-Stage Build

⁠Production Architecture

The frontend uses a multi-stage Docker build:

Node.js 22 Alpine ↓ Build React/Vite application ↓ Generate static /dist assets ↓ Nginx Alpine ↓ Serve production static files

Node.js, npm, Vite, TypeScript and node_modules are excluded from the final production image.

⁠Key Features

• React 19 + TypeScript production build
• Vite optimized static assets
• Nginx production runtime
• Built-in /api reverse proxy
• Runtime backend configuration through BACKEND_URL
• No Node.js runtime in production
• Layer-cached dependency installation using npm ci
• .dockerignore for smaller and safer build context
• Minimal production attack surface

⁠Image Optimization

The frontend was optimized from a single-stage Node.js image to a multi-stage Node.js → Nginx architecture.

Result: ~554 MB reduction (~85% smaller).

The final image contains only the compiled React application and the Nginx runtime.

⁠Runtime Configuration

Set the backend URL when starting the container:

docker run -d \
  -p 3000:80 \
  -e BACKEND_URL=http://backend-service:80 \
  mxmobilz-web:<tag>