managarten/apps/picture/docs/Project_Plan.md

Picture App - MVP Projektplan

📋 Projektstatus

✅ Bereits implementiert

• Grundgerüst: Expo React Native App mit TypeScript
• Navigation: Tab-Navigation mit Expo Router
• Styling: NativeWind (Tailwind CSS) konfiguriert
• State Management: Zustand Store vorbereitet
• Backend: Supabase Client konfiguriert (Umgebungsvariablen fehlen noch)
• Datenbank: Vollständiges Schema mit allen Tabellen, RLS Policies und Indizes
• UI-Komponenten: Button, Container, TabBarIcon, HeaderButton

🚧 Aktueller Stand

• Basis-App läuft mit Placeholder-Screens
• Datenbank ist vollständig aufgesetzt
• Authentifizierung noch nicht implementiert
• Keine Verbindung zwischen App und Datenbank

🎯 MVP-Zieldefinition

Ein funktionsfähiges AI-Bildgenerierungs-Tool mit folgenden Kernfunktionen:

1. Benutzer können sich registrieren und anmelden
2. Bilder über Texteingaben (Prompts) generieren
3. Generierte Bilder in einer persönlichen Galerie speichern und verwalten
4. Grundlegende Bildbearbeitung (Favoriten, Löschen, Tags)

📝 Implementierungsschritte zum MVP

Phase 1: Backend-Konfiguration (1-2 Tage)

1.1 Supabase-Umgebung

• Supabase Projekt-URL und Anon-Key in .env eintragen
• Storage Bucket für Bilder erstellen
• Edge Functions für Bildgenerierung vorbereiten

1.2 API Integration

• API-Key Management für Bildgenerierungs-Service (Replicate/Stability AI)
• Sichere API-Key-Speicherung in Supabase Secrets

Phase 2: Authentifizierung (2-3 Tage)

2.1 Auth-Screens

• Login Screen erstellen
• Registrierungs-Screen mit E-Mail/Passwort
• Passwort-Reset Funktionalität
• Auth-Navigation Guard implementieren

2.2 Profilverwaltung

• Profil-Screen mit Avatar-Upload
• Username-Eingabe bei Erstregistrierung
• Profile-Tabelle automatisch bei Registrierung befüllen

Phase 3: Kern-Funktionalität (4-5 Tage)

3.1 Bildgenerierungs-Interface

• Hauptscreen mit Prompt-Eingabefeld
• Erweiterte Optionen (Negative Prompt, Style-Auswahl)
• Parameter-Einstellungen (Größe, Steps, Guidance Scale)
• Generierungs-Status-Anzeige (Loading, Progress)

3.2 Bildgenerierungs-Backend

• Supabase Edge Function für API-Calls
• Queue-System für Generierungsanfragen
• Fehlerbehandlung und Retry-Logik
• Bild-Upload zu Supabase Storage nach Generierung

3.3 Integration mit AI-Service

• Replicate API Integration (empfohlen für MVP)
• Modell-Auswahl (SDXL, Stable Diffusion 3)
• Response-Handling und Bild-Download

Phase 4: Galerie & Bildverwaltung (3-4 Tage)

4.1 Galerie-Screen

• Grid-Ansicht aller generierten Bilder
• Infinite Scrolling/Pagination
• Filter und Sortieroptionen
• Pull-to-Refresh

4.2 Bild-Detailansicht

• Vollbild-Ansicht mit Zoom
• Anzeige der Generation-Parameter
• Aktionen: Favorit, Löschen, Teilen, Download
• Tag-System implementieren

4.3 Such- und Filter-Funktionen

• Suche nach Prompts
• Filter nach Datum, Favoriten, Tags
• Sortierung nach verschiedenen Kriterien

Phase 5: UI/UX-Optimierung (2-3 Tage)

5.1 Design-System

• Konsistente Farbpalette definieren
• Dark/Light Mode Support
• Loading States und Skeletons
• Error States und Empty States

5.2 Performance

• Bildoptimierung (Thumbnails, Lazy Loading)
• Cache-Strategie implementieren
• Offline-Support für Galerie

Phase 6: Testing & Deployment (2 Tage)

6.1 Testing

• Manuelle Tests aller Features
• Edge Cases und Fehlerbehandlung
• Performance-Tests

6.2 Deployment

• iOS Build mit EAS
• Android Build mit EAS
• TestFlight/Internal Testing

🔧 Technische Implementierungsdetails

Navigation-Struktur (Expo Router)

app/
├── (auth)/
│   ├── login.tsx
│   ├── register.tsx
│   └── reset-password.tsx
├── (tabs)/
│   ├── _layout.tsx
│   ├── generate.tsx     // Hauptscreen für Generierung
│   ├── gallery.tsx      // Galerie-Übersicht
│   └── profile.tsx      // Profil & Einstellungen
├── image/[id].tsx       // Bild-Detailansicht
└── _layout.tsx

State Management (Zustand)

// stores/authStore.ts
- user
- session
- signIn/signOut

// stores/generationStore.ts
- currentPrompt
- generationParams
- generationStatus
- generatedImages

// stores/galleryStore.ts
- images
- filters
- sortOrder
- selectedTags

API-Services

// services/supabase/
├── auth.ts          // Authentifizierung
├── profiles.ts      // Profilverwaltung
├── images.ts        // Bildverwaltung
├── generation.ts    // Generierungs-Logik
└── storage.ts       // File Upload/Download

Komponenten-Bibliothek

components/
├── auth/
│   ├── LoginForm.tsx
│   └── RegisterForm.tsx
├── generation/
│   ├── PromptInput.tsx
│   ├── ParameterControls.tsx
│   └── GenerationStatus.tsx
├── gallery/
│   ├── ImageGrid.tsx
│   ├── ImageCard.tsx
│   └── FilterBar.tsx
└── common/
    ├── LoadingSpinner.tsx
    ├── ErrorMessage.tsx
    └── EmptyState.tsx

📊 Zeitplan

Geschätzte Gesamtdauer: 14-19 Arbeitstage

Woche 1

• Phase 1: Backend-Konfiguration
• Phase 2: Authentifizierung

Woche 2

• Phase 3: Kern-Funktionalität (Bildgenerierung)

Woche 3

• Phase 4: Galerie & Bildverwaltung
• Phase 5: UI/UX-Optimierung

Woche 4

• Phase 6: Testing & Deployment
• Buffer für Bugfixes

🚀 Nächste Schritte nach MVP

Version 1.1

• Social Features (öffentliche Galerie, Likes)
• Prompt Templates und Presets
• Batch-Generierung

Version 1.2

• Community Features (Following, Kommentare)
• Erweiterte Bildbearbeitung
• Model-Training mit eigenen Bildern

Version 1.3

• Monetarisierung (Credits-System)
• Premium-Features
• API-Zugang für Power-User

🛠️ Entwicklungs-Prioritäten

1. Kritisch für MVP

   • Authentifizierung
   • Bildgenerierung
   • Basisspeicherung

2. Wichtig für Benutzererfahrung

   • Intuitive UI
   • Schnelle Ladezeiten
   • Fehlerbehandlung

3. Nice-to-Have für MVP

   • Tags-System
   • Erweiterte Filter
   • Share-Funktion

📌 Wichtige Entscheidungen

AI-Service-Auswahl

Empfehlung: Replicate API

• Pro: Viele Modelle, Pay-per-Use, gute Dokumentation
• Contra: Kosten bei hohem Volumen
• Alternative: Stability AI API oder selbst gehostete Modelle

Bildformat & Speicherung

• Format: WebP für optimale Größe/Qualität
• Thumbnails: 256x256px für Galerie
• Original: Max 2048x2048px für MVP

Authentifizierung

• Start mit E-Mail/Passwort
• Social Login (Google, Apple) als nächster Schritt

✅ Definition of Done für MVP

• Benutzer kann sich registrieren und anmelden
• Benutzer kann Prompts eingeben und Bilder generieren
• Generierte Bilder werden in der Galerie angezeigt
• Benutzer kann Bilder favorisieren und löschen
• App läuft stabil auf iOS und Android
• Grundlegende Fehlerbehandlung implementiert
• Basis-Performance-Optimierungen durchgeführt

🔗 Ressourcen & Dokumentation

• Supabase Docs
• Expo Router Docs
• Replicate API Docs
• NativeWind Docs
• Zustand Docs

---

Letztes Update: ${new Date().toLocaleDateString('de-DE')} Erstellt für: Picture App MVP Version: 1.0.0