first commit

documentation/architektur.md

@@ -0,0 +1,88 @@
+# Architekturübersicht
+
+Dieses Dokument beschreibt die grundlegende Architektur der "That's Me"-Anwendung, die als Offline-First-Anwendung mit einem Quasar-Frontend und einem Laravel-Backend konzipiert ist.
+
+## Hauptkomponenten
+
+1.  **Frontend (Quasar SPA):** Eine Single-Page Application (SPA) und Progressive Web App (PWA), entwickelt mit dem [Quasar Framework](https://quasar.dev/) (Vue.js 3). Verantwortlich für die Benutzeroberfläche, die "LifeWave"-Visualisierung (via Anime.js), die Offline-Datenspeicherung und die Synchronisation mit dem Backend. Kann auch als native mobile App via Capacitor bereitgestellt werden.
+2.  **Backend (Laravel):** Eine Webanwendung und API, entwickelt mit dem [Laravel Framework](https://laravel.com/) (v12). Dient als zentrale Datenverwaltung, API-Provider, Authentifizierungsinstanz und (optional) als WebSocket-Server-Schnittstelle. Beinhaltet ein Admin-Panel (erstellt mit Livewire/Volt und gestylt mit Tailwind/Flux UI).
+
+## Technologie-Stack im Detail
+
+- **Frontend:**
+  - Framework: Quasar (Vue.js 3)
+  - Build-Tool: Vite (via Quasar CLI)
+  - Styling: Quasar UI-Komponenten (primär), Tailwind CSS (optional, für spezifische Anpassungen wie LifeWave)
+  - Animation: Anime.js (für die SVG-basierte "LifeWave"-Darstellung)
+  - State Management: Pinia (Verwaltung des Anwendungszustands, insbesondere Offline-Daten und Sync-Status)
+  - Offline-Speicher:
+    - IndexedDB (via Dexie.js Wrapper): Für strukturierte Daten (Metadaten, Texte, kleine Vorschaubilder).
+    - Capacitor Filesystem (bei nativer App): Für große Multimedia-Dateien (Bilder, Videos).
+  - Offline-Fähigkeit: Service Worker (via Quasar PWA-Modus) für Caching von App-Shell und statischen Assets.
+- **Backend:**
+  - Framework: Laravel 12 (PHP)
+  - Admin-Panel UI: Livewire & Volt (für interaktive Komponenten)
+  - Admin-Panel Styling: Tailwind CSS + Flux UI (Komponentenbibliothek)
+  - Datenbank: MySQL (Nutzerdaten, Metadaten, Sync-Logs)
+  - Objektspeicher: Synology C2 Object Storage (S3-kompatibel, für Multimedia-Dateien via Laravel Flysystem)
+  - Authentifizierung: Laravel Passport (OAuth2 für API-/WebSocket-Zugriff)
+  - API/Web-Server: PHP-FPM (+ Nginx/Apache für Produktion)
+  - Asset Bundling: Vite
+  - _(Skalierungsoption: Node.js/Express.js mit TypeScript für dedizierten WebSocket-Server)_
+
+## Interaktion und Datenfluss (Offline-First)
+
+Die Anwendung folgt einem Offline-First-Ansatz. Die Kommunikation variiert je nach Verbindungsstatus und gewählter Synchronisationsstrategie (Polling oder WebSockets).
+
+1.  **Lokale Aktionen (Offline/Online):**
+
+    - Benutzer interagiert im Quasar-Frontend (z.B. fügt ein Ereignis hinzu).
+    - Änderungen werden _sofort_ im lokalen State (Pinia) reflektiert und persistent in IndexedDB (via Dexie.js) gespeichert. Große Dateien werden ggf. im Capacitor Filesystem abgelegt.
+    - Die "LifeWave"-Visualisierung (Anime.js) wird basierend auf den lokalen Daten aktualisiert.
+    - Die Änderung wird als "zu synchronisieren" markiert (z.B. "dirty" flag in Pinia/IndexedDB).
+
+2.  **Synchronisation (wenn online):**
+
+    - **Basis (Polling):**
+      - Das Frontend prüft periodisch (intelligentes Polling) die Verbindung und ob zu synchronisierende Daten vorhanden sind.
+      - Bei Bedarf wird eine Anfrage an die REST-API des Laravel-Backends gesendet (z.B. `/api/sync`), authentifiziert via Laravel Passport Token.
+      - Die Anfrage enthält die lokalen Änderungen (ggf. als Delta/Diff).
+      - Das Laravel-Backend verarbeitet die Änderungen:
+        - Validiert die Daten.
+        - Löst Konflikte (anhand von Timestamps/Versionen, ggf. `sync_logs` Tabelle).
+        - Aktualisiert die MySQL-Datenbank.
+        - Lädt ggf. Multimedia-Dateien zu Synology C2 hoch.
+        - Sendet eine Bestätigung und ggf. serverseitige Änderungen (Delta-Updates) zurück an das Frontend.
+      - Das Frontend verarbeitet die Antwort, aktualisiert IndexedDB/Pinia und entfernt die "zu synchronisieren"-Markierung.
+    - **Skalierung (WebSockets):**
+      - Bei bestehender Online-Verbindung wird eine WebSocket-Verbindung zum (Node.js oder via Pusher angebundenen Laravel Echo) Server aufgebaut, authentifiziert via Passport Token.
+      - Lokale Änderungen werden _sofort_ über WebSockets gesendet.
+      - Das Backend verarbeitet die Änderungen (ähnlich wie bei Polling) und sendet Bestätigungen/Updates in Echtzeit über WebSockets zurück.
+      - Das Frontend empfängt Echtzeit-Updates von anderen Clients/Geräten über WebSockets und aktualisiert den lokalen Speicher und die UI.
+
+3.  **Authentifizierung:**
+
+    - Der Login erfolgt über das Laravel-Backend.
+    - Laravel Passport stellt OAuth2-Tokens aus, die im Frontend sicher gespeichert und für alle API- und WebSocket-Anfragen verwendet werden. Tokens haben eine längere Gültigkeit, um Offline-Szenarien zu unterstützen.
+
+4.  **Admin-Panel:**
+    - Das Backend stellt ein separates Admin-Panel bereit, das direkt über Laravel geroutet wird.
+    - Die UI wird serverseitig mit Blade, Livewire und Volt gerendert.
+    - Styling erfolgt durch Tailwind CSS und Flux UI Komponenten.
+
+## Verzeichnisstruktur (Übersicht)
+
+- `frontend/`: Enthält den gesamten Quasar-Frontend-Code.
+  - `src/`: Haupt-Quellcode (Pages, Layouts, Components, Stores (Pinia), Boot-Files, etc.).
+  - `src-pwa/`: PWA-spezifische Konfiguration (Service Worker, Manifest).
+  - `src-capacitor/`: Capacitor-spezifische Konfiguration (falls native App).
+  - `quasar.config.js`: Quasar-Konfigurationsdatei.
+- `backend/`: Enthält den gesamten Laravel-Backend-Code.
+  - `app/`: Kernanwendungscode (Models, Controller, Livewire/Volt-Komponenten, Jobs, etc.).
+  - `config/`: Konfigurationsdateien (inkl. `filesystems.php` für Synology C2).
+  - `database/`: Migrationen, Seeds, Factories.
+  - `resources/`: Views (Blade, Volt für Admin), Sprachdateien, Frontend-Assets (CSS, JS für Backend/Admin vor Kompilierung).
+  - `routes/`: Routendefinitionen (`web.php` für Web/Admin, `api.php` für REST-API).
+  - `public/`: Öffentlicher Einstiegspunkt, kompilierte Assets.
+  - `vite.config.js`: Vite-Konfiguration für das Backend-Asset-Building.
+  - `.env`: Umgebungsspezifische Konfiguration (DB, Passport Keys, C2 Credentials, APP_URL etc.).

documentation/installation.md

@@ -0,0 +1,15 @@
+# Installationsanleitung
+
+Diese Anleitung beschreibt die notwendigen Schritte, um das gesamte Projekt (Frontend und Backend) lokal einzurichten.
+
+## Voraussetzungen
+
+- Git
+- PHP (>= 8.2, oder gemäß Laravel 12 Anforderungen)
+- Composer
+- Node.js und npm (oder Yarn)
+- Eine Datenbank MySQL
+
+## Installation
+
+(siehe [readme.md](../readme.md) für Details):

documentation/techstack.md

@@ -0,0 +1,267 @@
+# Technischer Stack für „That's Me“
+
+## Frontend
+
+### Framework: Quasar.dev (basierend auf Vue.js)
+
+- **Rolle:** Ermöglicht eine einheitliche Codebasis für Web, Mobile (iOS/Android) und Desktop, mit Fokus auf Benutzerfreundlichkeit und der „LifeWave“-Darstellung.
+- **Begründung:** Vue.js ist leichtgewichtig und intuitiv, Quasar bietet PWA- und Capacitor-Unterstützung für Offline-Funktionalität.
+- **Optimierung:** Nutzt Service Worker für Offline-Caching von statischen Assets (z. B. Anime.js, Tailwind), um Ladezeiten ohne Internet zu minimieren.
+
+### Styling: Tailwind CSS + Quasar UI-Komponenten
+
+- **wenn nötig:** Falls Quasar und die UI-Komponenten nicht ausreichen, kann zusätzlich Tailwind CSS eingesetzt werden.
+- **Rolle:** Tailwind sorgt für schnelles, anpassbares Styling der „LifeWave“ (z. B. Wellenfarben, Punktgrößen), Quasar UI liefert vorgefertigte Elemente (Buttons, Menüs).
+- **Begründung:** Kombination reduziert Designaufwand und gewährleistet Konsistenz über Plattformen hinweg.
+- **Optimierung:** Tailwind-Animationen für einfache Effekte (z. B. Pulsieren der Punkte) als Ergänzung zu Anime.js, um Abhängigkeiten zu verringern.
+
+### Animationen: Anime.js
+
+- **Rolle:** Rendert die „LifeWave“ als wellenförmige SVG-Diagrammdarstellung mit dynamischen Punkten für Ereignisse, die offline funktionieren.
+- **Begründung:** Leicht (19 KB), flexibel für SVG-Animationen (Bezier-Kurven, Punktbewegungen), browserbasiert ohne Serverabhängigkeit.
+- **Optimierung:** Virtuelle Darstellung (nur sichtbare Punkte rendern) oder Canvas-Option für viele Ereignisse, um Performance auf älteren Geräten zu sichern.
+
+### State Management: Pinia
+
+- **Rolle:** Verwaltet Erinnerungen, Zustände und lokale Änderungen im Vue.js-Ökosystem, synchronisiert mit Offline-Speicher.
+- **Begründung:** Moderne, leichte Alternative zu Vuex, ideal für Offline-Datenverwaltung (z. B. „dirty“-Flags für Sync).
+- **Optimierung:** Integration mit IndexedDB, um Zustände persistent zu speichern und bei App-Neustart wiederherzustellen.
+
+### Offline-Speicher: IndexedDB (via Dexie.js) + Capacitor Filesystem
+
+- **Rolle:** IndexedDB speichert strukturierte Daten (Metadaten, Text, Vorschaubilder), Capacitor Filesystem große Multimedia-Dateien (Videos, Bilder).
+- **Begründung:** IndexedDB ist browserübergreifend verfügbar und strukturiert, Capacitor ermöglicht Zugriff auf natives Dateisystem für größere Dateien. Dexie.js vereinfacht IndexedDB-Zugriff.
+- **Optimierung:** Nur Metadaten und kleine Vorschaubilder in IndexedDB, große Dateien im Filesystem, verschlüsselt mit crypto-js (AES), um Speicherlimits und Sicherheitsrisiken zu minimieren.
+
+### Synchronisation
+
+- **Basis (ohne Node.js): Intelligentes Polling mit Warteschlange**
+  - **Rolle:** Änderungen werden lokal in IndexedDB gespeichert, bei Verbindung via REST-API synchronisiert (z. B. `/api/sync`).
+  - **Begründung:** Funktioniert auf Shared Hosting ohne zusätzliche Runtimes, einfach umsetzbar.
+  - **Optimierung:** Dynamisches Polling (z. B. 10 Sekunden aktiv, 60 Sekunden im Hintergrund) mit `If-Modified-Since`-Header für Delta-Updates, plus Diff-Logik für Konfliktlösung.
+- **Skalierung (mit Node.js): WebSockets mit Retry-Mechanismus**
+  - **Rolle:** Echtzeit-Sync bei Verbindung, Änderungen werden sofort über WebSockets übertragen.
+  - **Begründung:** Ermöglicht nahtlose Updates der „LifeWave“ über Geräte hinweg, skalierbar bei wachsender Nutzerzahl.
+  - **Optimierung:** Retry bei Verbindungsabbruch (exponentielles Backoff), Zwischenspeicherung in Node.js für Robustheit.
+
+### Build-Tool: Quasar CLI (mit Vite)
+
+- **Rolle:** Erstellt optimierte Builds, integriert PWA-Funktionen für Offline-Nutzung.
+- **Begründung:** Vite sorgt für schnelle Entwicklung und Builds, Quasar CLI unterstützt Multiplattform-Deployment.
+- **Optimierung:** PWA-Manifest für Offline-Cache von statischen Dateien, minimiert Abhängigkeiten.
+
+## Backend
+
+### Framework
+
+- **Basis (ohne Node.js): Laravel**
+  - **Rolle:** Verwaltet das **Admin-Panel (primär mit Livewire & Volt)**, die REST-API, Datenbankzugriff und Datei-Uploads zu Synology C2.
+  - **Begründung:** Robust, PHP-basiert, perfekt für Shared Hosting, schnelle Entwicklung mit Eloquent ORM und interaktive UIs mit Livewire/Volt.
+  - **Optimierung:** Caching (Datei-Cache oder Redis, falls verfügbar) für häufige Abfragen, Rate-Limiting für API.
+- **Skalierung (mit Node.js): Laravel + Node.js mit Express.js**
+  - **Rolle:** Laravel für Basis-CRUD und **Admin (Livewire/Volt)**, Node.js für Echtzeit-WebSockets und asynchrone Aufgaben.
+  - **Begründung:** Kombiniert Laravels Einfachheit mit Node.js’ Skalierbarkeit und Echtzeit-Fähigkeit.
+  - **Optimierung:** Modulare Architektur (separate Endpunkte `/api/sync` und `/ws/sync`), um Migration zu erleichtern.
+
+### Programmiersprache
+
+- **Basis: PHP (Laravel)**
+  - **Rolle:** Einheitliche Sprache für Backend, kompatibel mit Webhosting.
+  - **Begründung:** Weit verbreitet, nativ auf Shared Hosting unterstützt.
+- **Skalierung: PHP (Laravel) + TypeScript (Node.js)**
+  - **Rolle:** PHP für Basis, TypeScript für skalierbare Node.js-Logik.
+  - **Begründung:** TypeScript bietet Typensicherheit für komplexe Echtzeit-Operationen.
+
+### Datenbank: MySQL
+
+- **Rolle:** Speichert Nutzerdaten, Erinnerungen und Synchronisations-Metadaten (z. B. Timestamps, Versionsnummern).
+- **Begründung:** Standard auf Webhosting, kompatibel mit Laravel (Eloquent), ausreichend für relationale Daten.
+- **Optimierung:** Versionskontrolle mit Log-Tabelle (z. B. `sync_logs`) für Konfliktlösung, Indizes für schnelle Abfragen.
+
+### Styling & UI-Komponenten (Backend)
+
+- **Technologien:** Tailwind CSS + Flux UI
+- **Rolle:** Tailwind CSS wird für das generelle Styling und Layout des Laravel-Backends (inkl. Admin-Panel) verwendet. Flux UI liefert vorgefertigte UI-Komponenten (vermutlich Blade/Livewire-Komponenten), die speziell für das Backend und das Admin-Panel eingesetzt werden, um die Entwicklung zu beschleunigen und Konsistenz zu gewährleisten.
+- **Begründung:** Tailwind ermöglicht schnelles, Utility-basiertes Styling. Flux UI ergänzt dies um spezifische, wiederverwendbare Komponenten für Laravel/Livewire-Umgebungen.
+
+### Objektspeicher: Synology C2 Object Storage
+
+- **Rolle:** Dauerhafter Speicher für Multimedia (Bilder, Videos), lokal zwischengespeichert und bei Verbindung hochgeladen.
+- **Begründung:** Kostengünstig, S3-kompatibel, nutzbar mit Laravel via `flysystem`.
+- **Optimierung:** Komprimierung von Dateien vor Upload (z. B. mit `imagejpeg`), Überwachung von Speicher/Bandbreite im Admin-Panel.
+
+### Authentifizierung: Laravel Passport
+
+- **Rolle:** Sichert API-Zugriff mit OAuth2-Token, lokal gespeichert für Offline-Nutzung.
+- **Begründung:** Integriert in Laravel, unterstützt sowohl REST als auch WebSockets.
+- **Optimierung:** Token mit langer Gültigkeit für Offline-Szenarien, Refresh bei Verbindung.
+
+## API
+
+### Technologie
+
+- **Basis (ohne Node.js): REST (Laravel)**
+  - **Rolle:** Bietet Endpunkte für CRUD (`/api/events`) und Synchronisation (`/api/sync`), mit Delta-Updates.
+  - **Begründung:** Einfach, funktioniert auf Shared Hosting ohne zusätzliche Abhängigkeiten.
+  - **Optimierung:** Rate-Limiting (`throttle`), `If-Modified-Since` für Effizienz, Diff-Logik für Konflikte.
+- **Skalierung (mit Node.js): REST (Laravel) + WebSockets (Node.js)**
+  - **Rolle:** REST für Basisdaten, WebSockets für Echtzeit-Sync (`/ws/sync`).
+  - **Begründung:** Kombiniert Einfachheit mit Skalierbarkeit und sofortigen Updates.
+  - **Optimierung:** WebSocket-Auth mit Laravel-Token, Retry bei Abbruch.
+
+## Mobile App
+
+### Framework: Quasar (Native via Capacitor)
+
+- **Rolle:** Ermöglicht native Apps mit gleichem Code, unterstützt Offline-Zugriff.
+- **Begründung:** Wiederverwendung des Web-Codes, Capacitor für Dateisystemzugriff (Multimedia).
+- **Optimierung:** Capacitor Plugins für Offline-Dateiverwaltung (z. B. `Filesystem`).
+
+### Offline-Funktionalität: Quasar PWA + IndexedDB + Capacitor Filesystem
+
+- **Rolle:** PWA für Service Worker, IndexedDB für Metadaten, Filesystem für große Dateien.
+- **Begründung:** Kombination deckt alle Offline-Anforderungen ab, browser- und nativ-kompatibel.
+- **Optimierung:** JSON-Export für Backup, verschlüsselte Speicherung.
+
+## Hosting und Infrastruktur
+
+### Hosting
+
+- **Basis (ohne Node.js): Einzelner Webhosting-Server (empfohlen: VPS wie Hetzner)**
+  - **Rolle:** Läuft PHP und MySQL, kostengünstig für den Start.
+  - **Begründung:** Shared Hosting ist günstig, VPS bietet Flexibilität für spätere Skalierung.
+  - **Optimierung:** Frühzeitiger VPS statt Shared Hosting, um Node.js-Integration zu erleichtern.
+- **Skalierung (mit Node.js): VPS oder Cloud**
+  - **Rolle:** Unterstützt PHP, MySQL und Node.js mit Portfreigabe (z. B. 3000).
+  - **Begründung:** Skalierbar für Echtzeit und viele Nutzer.
+
+### Backup: Synology C2 Backup + lokaler JSON-Export
+
+- **Rolle:** Server-Backup via C2, lokales Backup für Offline-Daten.
+- **Begründung:** Schützt vor Server- und Client-Datenverlust.
+- **Optimierung:** Automatisierte JSON-Export-Erinnerung für Nutzer.
+
+_(Synchronisation wurde bereits unter Frontend behandelt)_
+
+## Sicherheit
+
+### Verschlüsselung: AES-256 (PHP/Node.js, IndexedDB via crypto-js)
+
+- **Rolle:** Schützt Daten lokal und bei Übertragung.
+- **Begründung:** Erfüllt Datenschutzstandards, sicher bei Geräteverlust.
+
+### Datenschutz: DSGVO-konform
+
+- **Rolle:** Gewährleistet rechtliche Sicherheit (z. B. Datenlöschung, Einwilligung).
+- **Begründung:** Vertrauen der Nutzer, gesetzliche Anforderung.
+
+### Tests: OWASP ZAP
+
+- **Rolle:** Identifiziert Sicherheitslücken in API und Client.
+- **Optimierung:** Regelmäßige Audits für Offline- und Online-Modus.
+
+## KI-Integration (Optional)
+
+### Framework: TensorFlow.js
+
+- **Rolle:** Bietet clientseitige KI für Kategorisierung oder Gestaltungsvorschläge, offline nutzbar.
+- **Begründung:** Optional, modular, keine Serverlast im Basis-Modus.
+
+### Datenverarbeitung:
+
+- **Basis:** Lokal im Browser
+- **Skalierung:** Browser oder Node.js
+
+## DevOps
+
+### CI/CD: GitHub Actions
+
+- **Rolle:** Automatisiert Builds und Deployments (FTP für Basis, SSH für Skalierung).
+- **Begründung:** Effiziente Entwicklung und Wartung.
+
+### Monitoring:
+
+- **Basis:** Manuelle Logs oder New Relic
+- **Skalierung:** New Relic + Node.js-Logs + Synology C2-Überwachung
+- **Optimierung:** Speicher-/Bandbreiten-Monitoring für C2 im Admin-Panel.
+
+### Versionierung: Git mit GitHub
+
+- **Rolle:** Ermöglicht Teamarbeit und Code-Nachverfolgbarkeit.
+
+## Zusätzliche Tools
+
+### Prototyping: Figma
+
+- **Rolle:** Gestaltung von Wireframes und Mockups für „LifeWave“.
+- **Begründung:** Unterstützt kreative Entwicklung der UI.
+
+### Testing: PHPUnit (Laravel), Vitest (Quasar), Cypress (End-to-End)
+
+- **Rolle:** Testet Backend, Frontend und Offline-Online-Interaktionen.
+- **Optimierung:** Tests für Synchronisationskonflikte und Offline-Modus.
+
+---
+
+## Anmerkungen und Vorschläge
+
+### Benutzerfreundlichkeit und UX
+
+- **Anmerkung:** Die Offline-Funktionalität und Synchronisation könnten für Nutzer verwirrend sein, wenn nicht klar kommuniziert wird, wann Daten synchronisiert sind oder Konflikte auftreten.
+- **Vorschlag:** Füge eine visuelle Rückmeldung hinzu (z. B. „Offline-Modus“-Banner, „Synchronisierung läuft“-Spinner, „Konflikt erkannt“-Popup mit Auswahloption). Quasar UI-Komponenten wie `QBadge` oder `QDialog` könnten dies einfach umsetzen.
+- **Vorteil:** Verbessert das Vertrauen und die Nutzererfahrung, besonders bei sporadischer Internetverbindung.
+
+### Alternative Offline-Speicherlösung
+
+- **Anmerkung:** IndexedDB mit Capacitor Filesystem ist robust, aber die Verwaltung großer Multimedia-Dateien könnte auf mobilen Geräten komplex werden (z. B. Speicherzugriffsberechtigungen).
+- **Vorschlag:** Erwäge Web Storage API (LocalStorage) für kleine Datenmengen (z. B. Metadaten bis 5-10 MB) als Fallback, falls IndexedDB auf älteren Browsern fehlschlägt. Für Multimedia könnte eine Größenbeschränkung (z. B. max. 10 MB pro Datei) und eine Warnung bei Überschreitung implementiert werden.
+- **Vorteil:** Redundanz und einfachere Handhabung für Basis-Nutzer, minimiert Abhängigkeit von komplexeren APIs.
+
+### Skalierung der „LifeWave“-Darstellung
+
+- **Anmerkung:** Die aktuelle Anime.js-Lösung ist für kleine bis mittlere Ereignismengen optimiert, aber bei sehr langen Lebensläufen (z. B. 50+ Jahre mit hunderten Ereignissen) könnte sie unübersichtlich werden.
+- **Vorschlag:** Implementiere eine Zoom- und Filterfunktion (z. B. „Zeige nur 2020-2025“), unterstützt durch Anime.js-Animationen für Übergänge. Alternativ könnte ein hybrider Ansatz (SVG für Detailansicht, Canvas für Übersicht) die Darstellung entlasten.
+- **Vorteil:** Langfristige Nutzbarkeit, auch für ältere Nutzer mit vielen Erinnerungen.
+
+### Alternative zu Node.js für Echtzeit (Skalierung)
+
+- **Anmerkung:** Node.js fügt Flexibilität hinzu, aber die Abhängigkeit von einem VPS und die Komplexität könnten vermieden werden, wenn Echtzeit nicht zwingend erforderlich ist.
+- **Vorschlag:** Nutze Laravel Echo mit Pusher als Alternative für Echtzeit-Synchronisation. Pusher ist ein gehosteter Dienst, der mit Laravel integriert werden kann und WebSockets ohne eigenen Node.js-Server ermöglicht (kostenlos bis 200.000 Nachrichten/Tag).
+  - **Integration:** `composer require pusher/pusher-php-server`, `npm install laravel-echo pusher-js`.
+- **Vorteil:** Reduziert Infrastrukturaufwand, bleibt mit Shared Hosting kompatibel, einfacher Übergang von Polling.
+
+### Kostenmanagement bei Synology C2
+
+- **Anmerkung:** Synology C2 Object Storage ist günstig (z. B. 1 TB für ~70 €/Jahr), aber bei Millionen Nutzern könnten Speicher- und Bandbreitenkosten explodieren, insbesondere bei unkomprimierten Videos.
+- **Vorschlag:** Implementiere eine Quotenverwaltung pro Nutzer (z. B. 100 MB kostenlos, kostenpflichtiges Upgrade) und eine automatische Komprimierung (z. B. FFmpeg via Laravel Jobs für Videos). Langfristig könnte ein Wechsel zu AWS S3 oder Backblaze B2 geprüft werden.
+- **Vorteil:** Kostenkontrolle, nachhaltiges Geschäftsmodell.
+
+### Datensicherung und Wiederherstellung
+
+- **Anmerkung:** Der lokale JSON-Export als Backup ist nützlich, aber Nutzer könnten ihn vergessen, und Server-Backups via Synology C2 decken Offline-Daten nicht ab.
+- **Vorschlag:** Automatisiere den JSON-Export bei jeder größeren Änderung (z. B. als Download-Prompt oder Speicherung im Filesystem via Capacitor) und füge eine „Daten wiederherstellen“-Funktion im Admin-Panel hinzu, um versehentliche Löschungen rückgängig zu machen.
+- **Vorteil:** Höhere Datensicherheit, bessere Nutzerunterstützung.
+
+### Energieeffizienz und Performance
+
+- **Anmerkung:** Polling (Basis) und Anime.js-Animationen könnten auf mobilen Geräten Akkulaufzeit und Performance belasten, insbesondere bei Dauernutzung.
+- **Vorschlag:** Reduziere Polling-Frequenz im Hintergrund (z. B. auf 5 Minuten) und pausiere Anime.js-Animationen, wenn die App nicht im Fokus ist (via `window.onblur` oder `Intersection Observer`).
+- **Vorteil:** Längere Akkulaufzeit, bessere Nutzererfahrung auf Mobilgeräten.
+
+### Zukunftssicherheit und Erweiterbarkeit
+
+- **Anmerkung:** Die App könnte langfristig neue Funktionen (z. B. VR, KI-gestützte Analysen) oder Plattformen (z. B. Wearables) unterstützen müssen, wie im Dokument angedeutet.
+- **Vorschlag:** Halte den Stack modular (z. B. separate Module für Animationen, Sync, KI), um spätere Integrationen zu erleichtern. Three.js könnte als Anime.js-Ersatz für 3D/VR geprüft werden, falls nötig.
+- **Vorteil:** Flexibilität für zukünftige Visionen ohne großen Umbau.
+
+### Teststrategie
+
+- **Anmerkung:** Offline-Online-Synchronisation und Konfliktlösung sind fehleranfällig, aber die aktuelle Teststrategie (PHPUnit, Vitest, Cypress) deckt dies möglicherweise nicht vollständig ab.
+- **Vorschlag:** Ergänze spezifische Tests für Offline-Szenarien (z. B. Mocking von `navigator.onLine`), Konfliktsimulation (gleichzeitige Änderungen) und Speicherlimits (IndexedDB-Overflow). Tools wie Jest für Pinia-Tests könnten hinzugefügt werden.
+- **Vorteil:** Höhere Stabilität, weniger Bugs bei Nutzern.
+
+### Dokumentation und Wartung
+
+- **Anmerkung:** Ohne Node.js ist der Stack einfach, aber die Skalierung mit Node.js oder Pusher erhöht die Komplexität für zukünftige Entwickler.
+- **Vorschlag:** Erstelle eine ausführliche Dokumentation (z. B. mit VuePress oder Markdown in GitHub) für Offline-Logik, Sync-Mechanismen und Migration. Nutze Kommentare in Pinia und Laravel für Klarheit.
+- **Vorteil:** Erleichtert Teamarbeit und langfristige Wartung.