thats-me/documentation/techstack.md

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.