harheimertc/ANDROID_PORT_TODO.md

ANDROID App - 1:1 Portierung der Web-UI (TODO)

Ziel: Die Web-UI des Projekts 1:1 in eine native (oder cross-platform) Android-App überführen, inklusive Farben, Designsystem und aller Funktionalitäten.

1. Analyse Codebasis & Assets

• Analysiere package.json, nuxt.config.js, tailwind.config.js und zentrale Server-/API-Endpunkte.
• Liste alle verwendeten Farben, CSS-Variablen, Tailwind-Konfigurationen.
• Sammle alle statischen Assets: Bilder, Icons, SVGs, Fonts, PDF-Dokumente.
• Identifiziere dynamische Komponenten: Formulare, Rich-Text-Editor, Uploads, Kalender, Navigation.

2. Projektziele und Scope

• Entscheide: Native Android (Kotlin/Jetpack Compose) oder Cross-Platform (React Native, Flutter, Kotlin Multiplatform).
• Priorisiere Features für MVP vs. Post-Launch.

3. Designsystem und Farben extrahieren

• Extrahiere Farbpalette, Typografie, Abstände, Buttons, Karten, Form-Controls.
• Erstelle eine Design-Token-Liste (Hex/RGBA, Namen, Einsatzbereiche).

4. Technologie-Stack wählen

• Empfohlene Optionen: Kotlin + Jetpack Compose (native), Flutter (UI-First), React Native (Wiederverwendung von JS/nuxt-Logik).
• Bibliotheken: Navigation, HTTP-Client, Bild-Handling, Auth (WebAuthn falls nötig), Local DB.

5. Android-Projekt aufsetzen

• Erstelle Projekt-Scaffold, CI-Build, Signing-Config.

6. Theme & Farben implementieren

• Implementiere App-Theme mit Farben/Typografie-Token.

7. Navigation-Struktur implementieren

• Bottom/Navigations-Drawer/Stack wie Web-Navigation abbilden.

8. Screens für Seiten anlegen

• Erstelle Screens für: Startseite, Termine, Spielplan, Galerie, Kontakt, News, Mitgliedschaft, Login, CMS-Bereiche.

9. UI-Komponenten portieren

• Navbar, Footer, Cards, Image-Grid, Modal/Dialog, Rich-Text-Viewer/Editor, Date-Picker, Tabellen.

10. Formulare & Validierung implementieren

• Registrieren, Login, Passwort vergessen, Mitgliedschaftsformulare mit Client- und Server-Validierung.

11. Authentifizierungs-Flow implementieren

• JWT / Session, OAuth oder WebAuthn falls benötigt; Token-Handling sicher speichern.

12. API-Client implementieren

• Einheitlicher HTTP-Client, Error-Handling, Retry-Strategien, Pagination.

13. Bilderupload & Storage einrichten

• Multi-part Upload, Progress, Bildkompression, lokale Cache-Strategie.

14. Offline-Support und Caching

• Caching von API-Responses, Bild-Caching, Sync-Strategie für Formulare.

15. Lokalisierung und Texte prüfen

• Alle statischen Texte extrahieren, deutsche Strings prüfen und in Resource-Files ablegen.

16. Accessibility-Prüfung und Anpassungen

• Farbkontrast, Touch-Targets, Screenreader-Labels.

17. Unit- und UI-Tests schreiben

• Komponenten- und Integrations-Tests, E2E (falls möglich).

18. Performance-Optimierung durchführen

• Bilder, Netzwerk, Render-Perf.

19. CI/CD für Builds einrichten

• GitHub Actions / GitLab CI: Build, Test, Lint, Release.

20. Play Store Release vorbereiten

• App-Icons, Screenshots, Privacy-Policy, Datensparsamkeit.

21. Monitoring & Crash-Reporting einrichten

• Sentry / Firebase Crashlytics, Analytics.

22. Dokumentation: Setup & Architektur

• README, Architekturdiagramm, API-Spec, Onboarding-Guide.

23. Design Review und Abnahme

• UX/Design-Review mit Stakeholdern.

24. Launch und Feedbackrunde durchführen

• Release-Notes, Feedback-Formular, Bug-Fixing-Plan.

Datei erstellt: Bitte bestätige, wenn ich mit der in-depth Analyse der Codebasis und Assets beginnen soll (Suche nach Farben, verwendeten Komponenten, Images, Fonts, relevanten Scripts).