Veröffentlicht am

Dashfolio Movies & Cineve AI entwickeln - Eine mehrsprachige Full-Stack-Filmplattform mit Next.js, NestJS und OpenAI

Autoren

    Dashfolio Movies und Cineve AI entwickeln: Ein Full-Stack-Erlebnis zur Filmentdeckung

    Dashfolio Movies ist eine mehrsprachige Plattform zur Filmentdeckung. Benutzer können angesagte, bestbewertete und aktuell im Kino laufende Filme erkunden, nach Genres stöbern, Einblicke in Besetzung und Filmcrew erhalten und Karrierestatistiken in einer vollständig lokalisierten Oberfläche interaktiv nutzen.

    Das Projekt umfasst außerdem Cineve AI, einen intelligenten Filmassistenten, der Filme anhand natürlichsprachlicher Anfragen, Tonalität, Stimmung und Themen sowie fortgeschrittener Filter wie Laufzeit, Erscheinungsjahr, Plattform und Ausschlüsse empfiehlt.

    Im Backend setzt die Plattform auf Node.js (NestJS) mit TypeScript, Prisma, PostgreSQL, Redis und AWS RDS, kombiniert mit Python-Skripten zur Datenanreicherung und API-Automatisierung. Das Frontend von Dashfolio Movies basiert auf JavaScript/TypeScript, React.js und dem Next.js 15 App Router, wird mit Tailwind CSS gestaltet und mit Radix UI, Framer Motion und Recharts für ein schnelles, responsives und animiertes Erlebnis erweitert. Die KI-Funktionen basieren auf der OpenAI API, und das gesamte System wurde unter Berücksichtigung der DSGVO-Konformität entwickelt.

    Projektziele

    • Ein ansprechendes, mehrsprachiges Erlebnis zur Filmentdeckung bieten
    • Benutzern ermöglichen, angesagte, bestbewertete und aktuell im Kino laufende Filme zu erkunden
    • Tiefgehende Einblicke in Genres, Besetzung und Statistiken zur Filmcrew ermöglichen
    • Einen KI-gestützten Filmassistenten mit personalisierten Empfehlungen bereitstellen
    • Lokalisierte Inhalte auf Englisch und Französisch anzeigen
    • Interaktive Diagramme und Karrierezeitachsen für Mitwirkende anbieten
    • Sicherstellen, dass die Anwendung modular, skalierbar und produktionsreif ist

    Cineve AI - Der intelligente Filmassistent

    Cineve AI integriert KI-gestützte Empfehlungen direkt in die Filmentdeckung:

    • Versteht die Absicht der Benutzer anhand natürlicher Sprache, Kontext, Filtern und Verlauf
    • Durchsucht eine kuratierte, mit KI angereicherte Datenbank mit über 10.000 Filmen
    • Erklärt Empfehlungen mit Zusammenfassungen, Begründungen und Links
    • Unterstützt fortgeschrittene Filter (Laufzeit, Erscheinungsjahr, Streaming-Plattform, Ausschlüsse)
    • Führt mehrsprachige Gespräche (Englisch/Französisch)

    Frontend-Architektur - React.js, Next.js, TypeScript und Tailwind

    1. Startseite mit Registerkarten

    • Mit Tabs (Radix UI) und useInfiniteQuery (React Query) umgesetzt
    • Zeigt animierte Filmkarten (react-spring)
    • Unendliches Scrollen mit nahtlosen API-Abrufen

    2. Genreseiten

    • Dynamische Routen: /genres/:slug
    • Nach Genre-ID abgerufene, paginierte Ergebnisse
    • Einheitliches Karten- und Rasterdesign

    3. Filmdetailseiten

    • Dynamische Route: /movies/:slug
    • Zu den Details gehören:
      • Poster, Trailer, Übersicht
      • Erscheinungsdatum, Bewertung, Anzahl der Stimmen
      • Budget und Einnahmen (AnimatedNumber)
      • Produktionsfirmen und Länder
      • Aufklappbare Bereiche für Besetzung und Filmcrew

    4. Personendetailseiten

    • Dynamische Route: /persons/:slug
    • Funktionen:
      • Profilfoto, Biografie, wichtigste Auftritte
      • Erweiterbare Filmografie mit Vorschauen beim Überfahren mit der Maus
      • Karrierestatistiken (Filme/Jahr, Filme/Genre mit Recharts)
      • Zeitachsenansicht mit Filmvorschaubildern

    5. Internationalisierung (i18n)

    • Basiert auf next-intl
    • Dynamisches Routing mit Sprachpräfixen in den URLs
    • Eigener useLocalizedPath()-Hook

    6. Benutzerkonten und Personalisierung

    • Benutzer können Konten anlegen, um Filter, Filmlisten und Vorlieben zu speichern
    • Profile ermöglichen eine personalisierte Filmentdeckung
    • Gespeicherte Konfigurationen werden über Sitzungen hinweg synchronisiert

    7. Empfehlungen in Echtzeit

    • Cineve AI liefert aktualisierte Empfehlungen, wenn Benutzer Filter verfeinern oder interagieren
    • Ergebnisse werden sofort gestreamt, um ein flüssiges Gesprächserlebnis zu ermöglichen
    • Unterstützt mehrsprachige Anfragen und Kontextverständnis

    UI-Stack

    • Tailwind CSS → Utility-first, responsives Design mit Dunkelmodus
    • Radix UI → Barrierefreie Komponenten (Tabs, Tooltip, Dialog, HoverCard)
    • Framer Motion → Flüssige Animationen und Übergänge
    • Recharts → Karrierestatistiken und Datenvisualisierungen
    • Lucide Icons → Leichtgewichtige Symbole

    Backend-Architektur - Node.js (NestJS), TypeScript und PostgreSQL

    • Node.js (NestJS) → Modulares, skalierbares Backend-Design mit TypeScript
    • Prisma ORM → Typsicherer Datenbankzugriff mit PostgreSQL
    • PostgreSQL (AWS RDS) → Zuverlässige verwaltete Datenbank
    • Redis → Schnelle Caching-Schicht für API-Abfragen
    • Python-Skripte → Datenpipelines, API-Integrationen, Automatisierung
    • OpenAI API → Semantische Analyse, Chat und Filmempfehlungen
    • Tests → Jest für Unit-/Integrationstests und Cypress für durchgängige UI-Abläufe
    • CI/CD → GitLab-Pipelines mit ESLint, Prettier, Jest und automatischen Bereitstellungen
    • DSGVO-Konformität → Datenspeicherung und -verarbeitung sind auf die Einhaltung von Datenschutzvorschriften ausgelegt

    Funktionen in Aktion

    • 🌍 Mehrsprachiges Erlebnis: Filme und Oberfläche auf Englisch und Französisch
    • 🤖 Cineve AI: Mit einem intelligenten Assistenten chatten, um Empfehlungen zu erhalten
    • 👤 Benutzerkonten: Ein Konto erstellen, um Filter, Filmlisten und Vorlieben zu speichern
    • ⚡ Empfehlungen in Echtzeit: Während der Interaktion sofortige Aktualisierungen von Cineve AI erhalten
    • 🎥 Dynamische Filmkarten: Hover-Animationen, Bewertungen, Links
    • 📊 Einblicke in Besetzung und Filmcrew: Aufklappbare Bereiche und Filmografien
    • 📈 Karrierestatistiken: Visualisierte Entwicklungen im Zeitverlauf und nach Genre
    • 📅 Zeitachsenansicht: Schauspielkarrieren Jahr für Jahr dargestellt
    • 🧪 Optimierter Entwicklungsablauf: TurboPack, sofortige Aktualisierung, skalierbare Komponenten

    Erkenntnisse und Erfahrungen

    • Tailwind + Radix UI ermöglichten eine barrierefreie, wiederverwendbare und schnelle UI-Entwicklung
    • Recharts erwies sich als leistungsfähig für die Visualisierung von Karriere- und Filmdaten
    • next-intl ließ sich für mehrsprachiges Routing und Übersetzungen reibungslos integrieren
    • OpenAI API ermöglichte leistungsfähige Empfehlungen im Gespräch
    • Ein gemeinsames Backend mit Node.js (NestJS) + TypeScript + Prisma + Redis bediente sowohl Dashfolio Core als auch Movies ohne größere Überarbeitung und gewährleistete dabei DSGVO-konforme Datenverarbeitung

    Wie geht es weiter?

    Künftige Verbesserungen konzentrieren sich auf:

    • Ausbau des semantischen Verständnisses und der Personalisierung von Cineve AI
    • Erweiterung der Benutzerprofile um umfangreichere Personalisierungsfunktionen
    • Ergänzung gemeinsamer Funktionen wie geteilter Merklisten
    • Einführung von Benachrichtigungsoptionen für Neuerscheinungen und KI-Vorschläge

    🚀 Live ausprobieren. Auf Englisch und Französisch verfügbar, mit integriertem Cineve AI!

    Wenn du eine mehrsprachige, KI-gestützte oder diagrammbasierte Anwendung entwickelst und Ideen austauschen möchtest, freue ich mich über den Kontakt.

    🔗 LinkedIn - Steward OUADI