Technische Architektur
Wie openkring aufgebaut ist.
openkring ist eine Angular/Ionic-Anwendung auf Google Firebase, organisiert als Nx-Monorepo: ein zustandsorientiertes Frontend, eine serverlose Backend-Schicht und eine klare Trennung der Verantwortlichkeiten.
Technologie-Stack
Worauf openkring läuft.
Frontend
Angular 20 mit TypeScript im strict-Modus, Ionic 8.7 und Capacitor 7.4. Zoneless Change Detection, ausschliesslich Standalone Components, durchgehend Signals.
Backend
Google Firebase — Firestore als Datenbank, Authentication, Cloud Storage, Cloud Messaging und App Check. Serverlos, ohne eigene Infrastruktur.
Build & Werkzeuge
Nx verwaltet das Monorepo, pnpm die Abhängigkeiten. Cloud Functions werden mit esbuild gebündelt, Unit-Tests laufen mit Vitest.
Sprache & UI
Transloco für Mehrsprachigkeit, SCSS für das Styling, native Ionic-Komponenten für eine konsistente Oberfläche auf Web und Mobil.
Monorepo
Vier Schichten, klar getrennt.
openkring ist ein Nx-Monorepo. apps/ enthält die Anwendungen, apps/functions/ die Cloud Functions, libs/ die Feature-Bibliotheken nach dem Schema @okr/<domain>-<layer>. Jede Domäne ist in dieselben vier Schichten gegliedert.
data-access
Datenzugriff
Services, Firestore-Abfragen und Echtzeit-Streams über RxFire.
feature
Funktion
Smart Components und die NgRx Signal Stores der Features.
ui
Darstellung
Reine Präsentations-Komponenten — ohne Logik, ohne Datenzugriff.
util
Werkzeuge
Reine Funktionen, Validatoren und Modell-Factories.
Zustand & Daten
Wie Daten durch die App fliessen.
Zustandsverwaltung mit Signal Stores
Globaler und Feature-Zustand laufen über NgRx Signal Stores. Ein zentraler AppStore hält den Firebase-Auth-Zustand, die aktuelle Nutzerin samt Rollen, die App-Konfiguration und häufig benötigte Referenzdaten.
Datenhaltung über einen einzigen Zugang
Der FirestoreService ist das einzige Tor zu Firestore — mit Echtzeit-Streams über rxfire, SSR-sicheren Browser-Guards und zwischengespeicherten Abfragen. Jedes Modell trägt ein tenants-Feld: Mehrmandantenfähigkeit ist von Grund auf eingebaut, jede Abfrage filtert nach Mandant.
CMS — Seiten und Abschnitte
Inhalte sind als Seiten → Abschnitte strukturiert. Über 20 Abschnittstypen — Artikel, Galerie, Kalender, Chat, Karte, Personen, Tracker und mehr — werden anhand des Seitentyps dynamisch zusammengesetzt.
Authentifizierung & Sicherheit
Zugriff, kontrolliert auf jeder Ebene.
Rollenbasierte Authentifizierung
Firebase Authentication mit E-Mail und Passwort. Nach dem Login lädt die App das Nutzerprofil; rollenbasierte Guards — authentifiziert, privilegiert, Admin — steuern den Zugriff auf Routen und Funktionen.
Mehrschichtige Sicherheit
Firebase App Check schützt vor missbräuchlichen Zugriffen, eine strikte Content-Security-Policy begrenzt, was im Browser ausgeführt wird. Die Mehrmandantentrennung auf Datenebene stellt sicher, dass jede Organisation nur ihre eigenen Daten sieht.
Cloud Functions & Integrationen
Serverlogik und externe Dienste.
Serverseitige Logik liegt in Firebase Cloud Functions (Node.js, mit esbuild gebündelt) — gegliedert in Authentifizierung, Matrix, OIDC-Bridge und Replikation. Externe Dienste werden über Cloud Functions angebunden, die Zugangsdaten sicher verwahren und Antworten zwischenspeichern.
Matrix
Echtzeit-Chat. Eine Cloud Function tauscht das Firebase-Token gegen Matrix-Zugangsdaten.
bexio
Buchhaltung. Rechnungen und Belege fliessen in die Schweizer Buchhaltungssoftware.
Push (FCM)
Benachrichtigungen auf Web und Mobil über Firebase Cloud Messaging.
QR-Rechnung
Schweizer QR-Rechnungen direkt aus den Finanzdaten der Organisation.
Kalender
Termin- und Anlassverwaltung mit Anmeldungen und Erinnerungen.
Bereitstellung
Ausgeliefert über Firebase Hosting — bewusst ohne SSR/Hydration, da Ionic damit noch nicht kompatibel ist.
Den Code selbst lesen?
Die Architektur lässt sich am besten am Quelltext nachvollziehen.