⬅️ Back to Frontend Architecture Index
Architectural Diagrams
This directory is the single entry point for architecture diagrams.
System diagrams
- System overview - System context for the SPA (browser → frontend → backend → DB)
- Frontend module map - Major frontend directories and intended dependency direction
Routing diagrams
- Routing flow - Public vs authenticated routing, guards, and 404 fallback
Domains diagrams
- Domains overview (page orchestration) - The recurring “page orchestrator” shape across domains
- Dashboard
metrics parallel fetching - Analytics KPI aggregation via
Promise.all - Supplier-scoped item search - Client-side supplier filtering due to backend limitation
Data Access diagrams
- Data
fetching flow (React Query) - From UI → React Query hooks →
domain fetchers →
httpClient→ backend - HTTP client 401 redirect flow - Centralized auth boundary for unauthorized responses
- List
fetching + normalization - Envelope tolerance
(
content/items/array) + defensive normalization - Connectivity
+ session probes -
/health/dband/api/meprobe behaviors
State diagrams
- Provider composition (conceptual) - Provider placement and shell-provided UX services
App Shell diagrams
- App shell variants & layout - Public pages vs authenticated AppShell composition
UI diagrams
- Help system flow - Help button → context → registry → i18n keys
i18n diagrams
- i18n boot flow (German-first) - Language selection and namespace loading
Theming diagrams
- Theme
build & locale flow -
buildTheme+ locale pack merging