Technische Architektur

Die St. Georg App basiert auf einem modernen React Stack mit tanstack Start als Runtime und Fumadocs für die Dokumentation.

Frontend

Das Webfrontend liegt unter apps/web und wird mit folgenden Komponenten aufgebaut:

React 19 als UI Bibliothek
TanStack Router für File-basiertes Routing (createFileRoute)
TanStack Start für Serverfunktionen (createServerFn)
Tailwind CSS für Styling
shadcn/ui und Radix UI Komponenten (Sidebar, Dropdown, Dialog etc.)
Lucide React Icons

Die Einstiegskomponente ist apps/web/src/routes/__root.tsx.
Sie rendert das HTML Grundgerüst, bindet das Sidebar-Layout ein und führt den Loader aus, der Session, Organisationen und Navigationsdaten lädt.

Authentifizierung

Die Authentifizierung basiert auf better-auth.
Der Client wird in apps/web/src/lib/auth-client.ts erzeugt:

authClient stellt Hooks wie useSession, useListOrganizations und useActiveOrganization bereit.
Zusätzlich gibt es Aktionsmethoden wie authClient.organization.setActive oder authClient.signOut.

Die Serverseite verwendet auth.api.* Aufrufe in den Serverfunktionen unter apps/web/src/server.

Datenmodell Organisation und Navigation

Organisationen werden in der Auth-Datenbank verwaltet.
Zusätzliche Informationen, insbesondere Navigationsstrukturen, werden im Feld metadata als JSON abgelegt.

Das relevante Unterobjekt ist metadata.navigation.
Es enthält:

Ein Feld groups mit Navigationsgruppen
Jede Gruppe besitzt ein Label und eine Liste von Sektionen
Sektionen können Links und Unterlinks (Items) sowie Flags wie external tragen

Beispieldaten sind in metadata.navigation der Organisationen hinterlegt und werden an der Clientseite durch NavMain sichtbar gemacht.