README.md

Regulatory Compliance Dashboard (Frontend)

React + Vite UI for exploring regulations, overlaps, contradictions, and visualizations. Supports mock mode to run without a backend.

Figma design: https://www.figma.com/design/ssuqJsdwdSLTIKBRTbyU11/Regulatory-Compliance-Dashboard

Prerequisites

• Node.js 18 or newer
• npm (comes with Node)

Setup & Run

cd frontend
npm install

# Run locally (Vite dev server)
npm run dev
# Opens at http://localhost:3000

Run without backend (Mock Mode)

Mock mode renders UI without backend and bypasses API calls.

# macOS/Linux
VITE_USE_MOCK=true npm run dev

# Windows PowerShell
$env:VITE_USE_MOCK="true"; npm run dev

Connect to a backend (optional)

If you have the API running (e.g., FastAPI on port 8000), point the UI to it:

# macOS/Linux
export VITE_API_URL=http://localhost:8000
npm run dev

# Windows PowerShell
$env:VITE_API_URL="http://localhost:8000"; npm run dev

Build

npm run build
# Output: build/

Preview a production build locally:

npx vite preview --port 3000
# Open http://localhost:3000

Configuration

• Dev server port: configured in vite.config.ts (server.port: 3000).
• Environment variables:
  • VITE_USE_MOCK — set to true to use without backend API.
  • VITE_API_URL — base URL of the backend API (e.g., http://localhost:8000).

Project Notes

• Tech: React 18, Vite 6, Radix UI, Recharts, Three.js.
• Output directory for production builds is build/.