⬅️ Zurück zum Architektur-Index

Frontend-Architektur-Überblick

Einführung

Das Frontend von Smart Supply Pro ist eine React-basierte Single-Page-Application (SPA), die die Benutzeroberfläche für Bestandsverwaltung, Lieferanten-Workflows und Analytics bereitstellt. Die Architekturdokumentation legt den Fokus auf Klarheit, Konsistenz und Wartbarkeit und beschreibt, wie die Anwendung in Themen (Routing, State, Data Access, UI usw.) gegliedert ist und wie diese Themen zusammenspielen.

Für Diagramme und visuelle Referenzen starten Sie bei Architektur-Diagramme.

Systemkontext (High-Level)

graph LR User["Benutzer"] --> Browser["Browser"] Browser --> SPA["Frontend SPA (React)"] SPA --> API["Backend API"] API --> DB["Datenbank"]

Umfang der Dokumentation

Dieser Überblick vermeidet bewusst Implementierungsdetails. Jedes Thema unten verweist auf seinen eigenen Abschnitt, in dem Muster, Entscheidungen und Beispiele dokumentiert werden.

Themen (und wo Diagramme zu finden sind)

Jedes Thema verlinkt auf: - den Themenordner (Dokumentation), und - den Diagramm-Einstiegspunkt (zentral unter ./diagrams/index.md).

App Shell

  • Docs: App Shell
  • Diagramme: Architektur-Diagramme
  • Beschreibung: Einstiegspunkt für Shell-Varianten (öffentlich vs. authentifiziert), Layout-Komposition, Preferences (Theme/Locale), Toasts, Settings-Einstiegspunkte und Help-Integration

Routing

  • Docs: Routing
  • Diagramme: Architektur-Diagramme
  • Beschreibung: Wie URLs auf Seiten abgebildet werden, wie Routen gruppiert sind (öffentlich vs. authentifiziert), Guard/Redirect-Verhalten, Logout/Session-Expiry-Navigation und 404-Fallback

State

  • Docs: State
  • Diagramme: Architektur-Diagramme
  • Beschreibung: Globaler, querschnittlicher State via React Context (Auth, Settings, Toast, Help) sowie Abgrenzung zu lokalem UI-State und Server-State

Datenzugriff (Data Access)

  • Docs: Data Access
  • Diagramme: Architektur-Diagramme
  • Beschreibung: Struktur der API-Schicht (Axios-Client, domain-spezifische Fetcher/Normalizers, React-Query-Hooks), Caching-Konventionen, tolerantes Parsing und benutzerfreundliche Fehlermeldungen

Domänen

  • Docs: Domains
  • Diagramme: Architektur-Diagramme
  • Beschreibung: Wie Domänen-Seiten unter src/pages/* organisiert sind (Inventory, Suppliers, Analytics usw.) und welche Verantwortlichkeiten der Page-Orchestrator vs. gemeinsame Schichten haben

UI-Komponenten

  • Docs: UI & UX Building Blocks
  • Diagramme: Architektur-Diagramme
  • Beschreibung: Geteilte UI-Bausteine (z.B. StatCard), gemeinsame Hooks (createContextHook, Debounce), Help-Themen + Trigger-Button sowie der Health-Check-Polling-Hook

Theming

  • Docs: Theme & Styling
  • Diagramme: Architektur-Diagramme
  • Beschreibung: MUI Theme-Fabrik (buildTheme), Locale-Pakete (Material + DataGrid), kompakte Default-Dichte sowie die kleine Menge globaler CSS-Helper

Internationalisierung (i18n)

Performance

  • Docs: Performance
  • Diagramme: Architektur-Diagramme
  • Beschreibung: Bundle-Strategie, (künftige) Lazy-Loading-Seams, Rendering-Optimierung für Tabellen/Dialog-Workflows/Analytics-Blöcke, API-Caching (React Query) sowie Build- und Delivery-Verhalten

Testing

  • Docs: Testing
  • Diagramme: Architektur-Diagramme
  • Beschreibung: Test-Architektur und Konventionen (Test-Pyramide, Verzeichnis-Taxonomie, Mocking-Policy, gemeinsame Render-Helper/Provider und Coverage-Interpretation)

Architectural Decision Records (ADRs)

  • Docs: ADRs
  • Diagramme: Architektur-Diagramme
  • Beschreibung: Entscheidungsdokumente („Warum?“) zu zentralen Architekturentscheidungen (Ordnerstrategie, API-Abstraktion, Page-Modell, Dialog-Workflows, Shell-Split, globaler State via Context, i18n-Integration und Test-Struktur)

Nächste Schritte

  1. Lesen Sie das Thema, das zu Ihrer aktuellen Aufgabe passt (Routing/State/Data Access/UI).
  2. Nutzen Sie Architektur-Diagramme als zentralen Einstiegspunkt für Visualisierungen.
  3. Aktualisieren Sie die Kurzbeschreibung je Thema, während die Dokumentation wächst.

⬅️ Zurück zum Architektur-Index