React UI in Next.js

Pages + Forms, optional API proxy

Env: MODEL_API_URL, API_KEY

App, loads ML model

Exposes /score JSON endpoint (HTTPS)

Redis cache / Postgres

Celery workers

Push → CI/CD triggers builds

• Vercel (frontend) • Render (backend container)

Model Artifact

XGBoost / Pickle (loaded at startup)

Flow: User → Vercel (Next.js) → Render (FastAPI) → Model

Secrets/env: Next.js uses MODEL_API_URL (and optional API_KEY) to reach backend over HTTPS

CI/CD: GitHub pushes trigger Vercel build; Render builds and deploys the Docker image

Optional: Redis/Postgres/Celery for caching, persistence, background jobs; centralized logging/monitoring

HTTPS JSON • POST /score