frontend/

Purpose

React + Vite checkout UI served by Nginx. Provides product browsing, cart management, payment form, and order confirmation screen. Communicates exclusively with the API Gateway at port 8080 — never directly with individual services. Runs at port 3000.

Key Files

Subdirectories

For AI Agents

Working In This Directory

• All API calls must go through the gateway (/api/*) — never call service ports directly
• The Idempotency-Key and X-Correlation-ID headers must be included in requests to POST /api/orders — Kong's CORS config explicitly allows them
• Nginx proxies /api to http://kong:8080 inside the Docker network; do not hardcode localhost:8080
• After any nginx.conf change, rebuild the container: docker compose build frontend

Testing Requirements

• docker compose up frontend and visit http://localhost:3000 to verify the UI loads
• Check browser console for CORS errors after any header change
• Verify the happy-path checkout flow end-to-end (see scripts/ for smoke test reference)

Common Patterns

• Static assets are built by Vite and copied into the Nginx image — no Node.js runtime in production
• Environment variables available at build time via VITE_* prefix in .env

Dependencies

Internal

• gateway/kong.yml — CORS config must allow headers the frontend sends
• docs/api-specs/ordering.yaml — contract for POST /orders

External

• React + Vite — UI framework and build tool
• Nginx — static file server and reverse proxy