# 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 | File | Description | |------|-------------| | `Dockerfile` | Multi-stage build: Vite build stage → Nginx serving stage | | `nginx.conf` | Nginx configuration: serves static files, proxies `/api/*` to Kong at port 8080 | | `readme.md` | Frontend-specific developer notes | | `src/index.html` | Application entry point | ## Subdirectories | Directory | Purpose | |-----------|---------| | `src/` | Application source (HTML entry point; JS/CSS added here as the UI grows) | ## 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