Frontend Overview

Purpose

The single frontend in DBPOC. A React SPA called Kundkort (“customer card”) that displays enriched company data fetched from src/api/kundkort.ts. Lives at frontend/kundkort/. Served by the same Bun process as the API — see Frontend Build.

Stack

• React 18 (createRoot from react-dom/client) — bundled with Bun
• TypeScript, strict
• Tailwind via CDN (<script src="https://cdn.tailwindcss.com"> in frontend/kundkort/index.html:13) plus a local tailwind.config.js
• Tremor @tremor/react for charts and dashboard primitives — see Tremor Charts
• Inter font from Google Fonts
• Hand-rolled inline-style components (no CSS-in-JS lib); design tokens via CSS custom properties in frontend/kundkort/index.css:1-34

Top-level entry

frontend/kundkort/app.tsx mounts <App> into #root. App holds two states:

• view: 'search' | 'kundkort' — current page
• orgNr: string | null — selected company

URL is the source of truth for navigation: ?org=5560000000 switches to the kundkort view. popstate is wired so browser back/forward work (app.tsx:53-68).

Data flow

User → SearchPage → /api/kundkort/search → results
     → click → URL pushState ?org=… → KundkortPage
     → useKundkort  → /api/kundkort/:orgNr        → KundkortResponse
     → useEcoApi    → http://localhost:3100/...   → insights/gaps
     → user clicks Berika → POST /api/kundkort/:orgNr/enrich

See Kundkort API Client, EcoAPI Integration, Auth Flow.

Theme

Dark by default (--bg: #0f1117). Print styles invert to light at index.css:112-181 (A4 portrait, removes sticky bars and grid columns). All theme colors are CSS variables.

See also

Frontend Build, Kundkort Page, Search Page, Auth Flow, Tremor Charts, UI Primitives, Repository Layout.

See also

• Frontend MOC