FlixCooks Development Roadmap & Tasks

Dieses Dokument enthält den aktuellen Entwicklungsstand und detaillierte Aufgabenlisten für die neuen Premium-Features von FlixCooks. Die Entwicklung erfolgt in Phasen, aufgeteilt in atomare, überprüfbare Arbeitsschritte.

🚀 Übersicht der Entwicklungsphasen

Phase 1: UI/UX Rebase & Globales Design-System (Fundament)
- Globale CSS-Tokens & Farbpaletten-Setup
- Atmosphärischer Stein-Hintergrund (AuraMarbleBackground)
- Fullscreen Overlay-Navigation (LiquidOverlayMenu & SlideUpTextHover)
- Geschmeidiges Scrollverhalten (LenisSmoothScroll & IndexSectionIndicator)
- Layout-Raster (FloemaLayoutGrid) & Premium-Buttons
Phase 2: Authentifizierung & Firebase Integration
- Firebase-Projekt Setup & Anbindung
- Newsletter-System (Firebase Firestore)
- Benutzerprofile (Registrierung, Login, Favoriten)
Phase 3: Nährwerte & Rezepterweiterung
- Datenmodell & Admin.php Erweiterung
- Visuelles Nährwert-Widget (Floema-Präzision)
- Makro-/Diät-Filter & Kategorisierung
Phase 4: Interaktiver Step-by-Step Rezept-Assistent
- Admin-Erweiterung für Step-Videos
- Fullscreen Cooking-Mode Overlay (mit Lenis scroll lock)
- Timers & Looping Video Players pro Zubereitungsschritt
Phase 5: Sleek Swipe Discovery (Personalisiertes Empfehlungskarussell)
- Touch-Swipe-Karussell direkt auf index.php (unter Landing-Page)
- Filteralgorithmus nach Benutzer-Ernährungszielen
- Mikro-Animationen & Quick-Save Funktion
[/] Phase 6: Firebase Firestore Datenbank-Migration & Seeding
- Firebase CLI-Login & Projekt-Initialisierung
- .env-Konfiguration mit Firebase App Credentials
- Client-seitiger "Seed Firestore"-Button in admin.php
- Firestore REST API Integration in helpers.php
- Echtzeit-Zwei-Wege-Sync bei Rezeptänderungen in admin.php

🛠️ Detaillierte Checklisten

🎨 Phase 1: UI/UX Rebase & Globales Design-System

Das visuelle Fundament der Website. Die Etablierung des Premium-Designs stellt sicher, dass alle darauffolgenden Phasen direkt im finalen Look entwickelt werden können.

Globale Token-Etablierung
- CSS-Variablen in assets/style.css auf Basis der edlen Capitolium- & Floema-Farbpalette definieren (Creme-Elfenbein --color-bg-light, Steinkohle-Braun --color-bg-dark, Gold --color-accent-gold, Terracotta --color-terracotta).
- Schriftarten einbinden (Serifen-Pracht für Überschriften, cleanes Inter für Lesbarkeit) in partials/head.php → Playfair Display + Manrope
Atmosphärische Grundlagen
- AuraMarbleBackground implementieren: Dezente Stein-Textur mit Mix-Blend-Mode und optionalem SVG-Papier-Rauschen (Noise) auf allen PHP/HTML Seiten im Hintergrund verankern.
- Skalierungen für alle Paddings, Margins und Schriften mittels CSS clamp() definieren, um stufenlose Responsivität (Mobile bis 4K) zu garantieren.
Asymmetrisches Layout-Raster
- Das modulare 24-Spalten-Raster (FloemaLayoutGrid) in den Haupt-Templates (index.php, recipe.php) integrieren.
- Bestehende Rezeptkarten und Detailblöcke an das neue Grid anpassen.
High-End Navigation & Header
- Den bestehenden Header zu LiquidOverlayMenu umbauen: Hamburger-Button morpht weich zum Schließen-Kreuz.
- Vollbild-Navigationsmenü mit geschmeidigem clip-path (von oben nach unten gleitend) implementieren.
- Menü-Links mit dem animierten SlideUpTextHover (Text verdoppelt und verschiebt sich beim Hover) ausstatten.
Flüssige Scroll-Erfahrung
- LenisSmoothScroll (CDN) im Footer/Head einbinden und initialisieren für samtweiches Scrollverhalten.
- Seitliche Fortschrittsanzeige (IndexSectionIndicator) auf index.php integrieren, um aktuelle Scroll-Position und Sektionsnamen elegant anzuzeigen.
Premium Mikro-Interaktionen
- Primäre Buttons auf den Reveal-Effekt von CapitoliumRevealButton umstellen (von unten aufsteigende Gold-Fläche + Spationierungseffekt beim Hover).
- Textlinks mit der anwachsenden Unterstreichung von UnderlineExpandHover versehen.
CapitoliumPreloader (Landing Page Ladebildschirm mit Fortschrittsbalken)
Recipe Showcase Stage (GSAP ScrollTrigger Bühnenpräsentation: Bilder von rechts → Mitte → links)

🔒 Phase 2: Authentifizierung & Firebase Integration

Das Fundament für Personalisierung und Newsletter-Abos über eine sichere Firebase-Anbindung (Auth & Firestore).

Firebase Setup & Initialisierung
- Firebase SDK Client-Side Einbindung in partials/head.php or separaten Helper
- Firebase Config in umweltabhängigen Settings/Variablen auslagern
- Firestore-Datenbank initialisieren (subscribers und users Collections)
Premium Login- & Registrierungsseite
- Erstellung der Seite login.php (und optional signup.php) im neuen Design-System-Stil
- Firebase Authentication (Email/Passwort Login & Registrierung) implementieren
- Responsive UI mit sanften Error- & Success-Meldungen und Eingabefeldern im Glasmorphismus-Look
- Client-seitige und Server-seitige Session-Synchronisation (z.B. Firebase Session Tokens an PHP-Session via Ajax senden)
Favoriten-Funktion (Rezept-Bookmarks)
- Firestore-Collection user_favorites anlegen (Format: userId -> Liste von recipeSlugs)
- "Rezept speichern" Button (Herz-Icon) auf den Rezeptkarten und Rezept-Details mit dynamischem Login-Check
- Mikro-Animationen für das Herz-Icon (Scale up/down, Fülleffekte mit var(--ease-overshoot))
Firebase-gestütztes Newsletter-Abo
- Newsletter-Eingabefeld im Footer (partials/footer.php) implementieren
- AJAX-Submit-Handler: E-Mail-Adresse prüfen und in Firestore Collection subscribers speichern
- Elegantes Feedback-UI (Erfolgsmeldung ohne Page-Reload)

🥗 Phase 3: Nährwerte & Rezepterweiterung

Jedes Rezept erhält präzise Makronährstoffe (Kalorien, Proteine, Kohlenhydrate, Fette), die vom Admin gepflegt und dem Nutzer edel präsentiert werden.

Datenmodell & Admin-Panel Erweiterung
- data/recipes.json Struktur anpassen: Hinzufügen von nutrition (calories, protein, carbs, fat)
- admin.php Formular erweitern:
  - Eingabefeld für Kalorien (kcal)
  - Eingabefeld für Eiweiß / Protein (g)
  - Eingabefeld für Kohlenhydrate (g)
  - Eingabefeld für Fett (g)
- Validierung & Speicherung der Nährwertdaten in admin.php absichern
Premium Nährwert-Widget (recipe.php)
- Layout-Integration basierend auf dem FloemaLayoutGrid (24-Spalten-Asymmetrie)
- Visuelle Visualisierung der Makroverteilung (z. B. feine kreisförmige SVG-Fortschrittsanzeigen oder elegante horizontale Balken in Gold var(--color-accent-gold))
- Hover- und Lade-Mikroanimationen für die Diagramme (Wachstumseffekt mit var(--ease-out-expo))
- Tooltips mit Prozentangaben am Tagesbedarf

⏱️ Phase 4: Interaktiver Step-by-Step Rezept-Assistent

Ein immersiver Kochmodus, der Anwendern Schritt-für-Schritt durch die Zubereitung führt – inklusive Videoanleitungen und integrierten Timern.

Video-Verknüpfung im Admin-Panel
- Rezeptstruktur in data/recipes.json erweitern, damit jeder Arbeitsschritt (steps) eine optionale video_url (MP4 aus Firebase Storage oder extern) besitzen kann
- admin.php erweitern, um Video-URLs pro Einzelschritt einzugeben
Fullscreen Cooking-Mode Overlay
- Trigger-Button "Kochmodus starten" (CapitoliumRevealButton Stil) auf recipe.php einbauen
- Fullscreen Overlay mit flüssigem clip-path Öffnungseffekt (analog zu LiquidOverlayMenu)
- Lenis Scroll-Lock während der Kochmodus aktiv ist, um störendes Scrollen im Hintergrund zu verhindern
Interaktives Koch-Interface
- Schritt-für-Schritt Slider/Karussell (Tastatur- & Touch-Navigation)
- Fortschrittsanzeige (z.B. "Schritt 3 von 8" + Fortschrittsbalken)
- Autolooping Video-Player: Zeigt das Kurzvideo zum aktuellen Zubereitungsschritt, stummgeschaltet und nahtlos wiederholend
- Integrierte Koch-Timer: Falls im Schritt eine Zeit angegeben ist, wird automatisch ein interaktiver Timer mit Start/Pause/Reset und akustischem Endsignal eingebunden

🎡 Phase 5: Sleek Swipe Discovery (Empfehlungskarussell)

Ein hochgradig interaktives, touch-freundliches Karussell direkt auf der Startseite, das Nutzern Rezepte basierend auf ihren Zielen empfiehlt.

Karussell-Architektur & Integration
- Touch-Swipe Karussell Container direkt unter der Landing-Page (vor #basics) auf index.php einbetten
- CSS-Klammern (clamp()) für responsive Skalierung der Karten
- Flüssiges Einblenden per Scroll-Reveal (reveal-target) mit Anbindung an LenisSmoothScroll
Personalisiertes Goal-Matching
- Falls der Benutzer eingeloggt ist, sein Ernährungsziel aus den Firebase-Profildaten abrufen
- Rezepte dynamisch filtern (z.B. High-Protein Rezepte bei Ziel "Muskelaufbau", Low-Carb Rezepte bei Ziel "Abnehmen")
- Personalisierte "Für dich empfohlen"-Badge auf den Karten anzeigen
Mikro-Interaktionen & Quick-Save
- Touch-Gesten-Unterstützung (Wischen zum Blättern mit sanftem Trägheits-Feedback)
- Quick-Save Button direkt auf den Karussell-Karten (Herzeffekt mit direktem Firebase Firestore Sync)
- Hover-Reveal-Effekte für Rezeptdetails (Zutaten-Vorschau oder Kochzeit-Highlight schiebt sich weich hoch)

🔥 Phase 6: Firebase Firestore Datenbank-Migration & Seeding

Migration des lokalen JSON-Flachdateispeichers auf eine skalierbare, cloudbasierte Firestore-Struktur.

[/] Firebase-Projekt & CLI-Setup
- Firebase-Verzeichnis-Umgebung initialisieren und anbinden
- [/] Firebase CLI Login durchführen und aktiven Account verknüpfen
- Firebase Project & Web App ermitteln oder neu anlegen
- Lokale .env-Konfiguration mit Firebase SDK Parametern befüllen
Client-seitiges Daten-Seeding
- "Seed Firestore"-Aktion im Admin-Bereich (admin.php) einbauen
- Batch-Dokumentenupload der recipes.json-Einträge in die Firestore Collection recipes über JS SDK
- Firestore Security Rules für den öffentlichen Lesezugriff anpassen
Firestore Server-seitiger Abruf (PHP REST API)
- Firestore REST API Parser-Helfer in helpers.php implementieren (Transformation von Firestore Key-Maps in Standard-Arrays)
- load_recipes() auf REST API GET /recipes umstellen
- Neue Funktion load_recipe_by_slug($slug) für gezielten Einzelabruf implementieren und in recipe.php integrieren
Zwei-Wege-Echtzeit-Synchronisierung (Admin)
- save_recipes() so anpassen, dass lokales JSON als Fallback-Backup erhalten bleibt
- Client-seitigen Trigger nach erfolgreichem PHP-Speichern in admin.php ausführen, um Änderungen sofort in Firestore zu spiegeln
- Funktionstest: Hinzufügen, Editieren und Löschen von Rezepten über die Admin-Konsole verifizieren

📈 Status-Legende

[ ] Noch nicht begonnen
[/] In Bearbeitung
[x] Erfolgreich abgeschlossen

11 KiB Raw Blame History Unescape Escape