Publié le

Créer Dashfolio Movies et Cineve AI : une plateforme cinéma full-stack multilingue avec Next.js, NestJS et OpenAI

Auteurs

    Créer Dashfolio Movies et Cineve AI : une expérience full-stack de découverte de films

    Dashfolio Movies est une plateforme multilingue de découverte de films. Elle permet d’explorer les films tendance, les mieux notés et actuellement à l’affiche, de parcourir les genres, de découvrir la distribution et les équipes techniques, et de consulter des statistiques de carrière dans une interface entièrement localisée.

    Le projet comprend aussi Cineve AI, un assistant cinéma intelligent qui recommande des films à partir de requêtes en langage naturel, du ton, de l’ambiance et des thèmes, ainsi que de filtres avancés comme la durée, l’année de sortie, la plateforme et les exclusions.

    Côté backend, la plateforme utilise Node.js (NestJS) avec TypeScript, Prisma, PostgreSQL, Redis et AWS RDS, associés à des scripts Python pour l’enrichissement des données et l’automatisation des API. Côté frontend, Dashfolio Movies repose sur JavaScript/TypeScript, React.js et Next.js 15 App Router, avec des styles Tailwind CSS et les bibliothèques Radix UI, Framer Motion et Recharts pour une expérience rapide, adaptative et animée. L’API OpenAI fournit les fonctionnalités d’IA, et l’ensemble du système a été conçu en tenant compte de la conformité au RGPD.

    Objectifs du projet

    • Proposer une belle expérience multilingue de découverte de films
    • Permettre d’explorer les films tendance, les mieux notés et à l’affiche
    • Explorer en détail les genres, la distribution et les statistiques des équipes techniques
    • Fournir un assistant cinéma par IA avec des recommandations personnalisées
    • Afficher du contenu localisé en anglais et en français
    • Proposer des graphiques interactifs et des chronologies de carrière pour les contributeurs
    • Garantir une application modulaire, évolutive et prête pour la production

    Cineve AI : l’assistant cinéma intelligent

    Cineve AI intègre directement des recommandations par IA à la découverte de films :

    • Comprend l’intention grâce au langage naturel, au contexte, aux filtres et à l’historique
    • Effectue ses recherches dans une base de plus de 10 000 films soigneusement sélectionnés et enrichis par IA
    • Explique ses recommandations avec des résumés, des raisons et des liens
    • Prend en charge des filtres avancés : durée, année de sortie, plateforme de streaming et exclusions
    • Mène des conversations multilingues en anglais et en français

    Architecture frontend : React.js, Next.js, TypeScript et Tailwind

    1. Page d’accueil avec onglets

    • Réalisée avec Tabs de Radix UI et useInfiniteQuery de React Query
    • Affiche des cartes de films animées avec react-spring
    • Défilement infini avec récupération fluide des données API

    2. Pages de genres

    • Routes dynamiques : /genres/:slug
    • Résultats paginés récupérés par identifiant de genre
    • Conception cohérente des cartes et des grilles

    3. Pages de détails des films

    • Route dynamique : /movies/:slug
    • Les détails comprennent :
      • Affiche, bande-annonce et résumé
      • Date de sortie, note et nombre de votes
      • Budget et recettes avec AnimatedNumber
      • Sociétés et pays de production
      • Panneaux dépliables de la distribution et de l’équipe technique

    4. Pages de détails des personnes

    • Route dynamique : /persons/:slug
    • Fonctionnalités :
      • Photo de profil, biographie et principales apparitions
      • Filmographie dépliable avec aperçus au survol
      • Statistiques de carrière : films par année et par genre avec Recharts
      • Vue chronologique avec miniatures des films

    5. Internationalisation (i18n)

    • Assurée par next-intl
    • Routage dynamique avec préfixes de langue dans les URL
    • Hook personnalisé useLocalizedPath()

    6. Comptes utilisateur et personnalisation

    • Les utilisateurs peuvent créer un compte pour enregistrer filtres, listes de films et préférences
    • Les profils permettent une découverte de films personnalisée
    • Les configurations enregistrées sont synchronisées entre les sessions

    7. Recommandations en temps réel

    • Cineve AI actualise les recommandations lorsque les utilisateurs affinent les filtres ou interagissent
    • Les résultats sont transmis instantanément en continu pour une expérience conversationnelle fluide
    • Prend en charge les requêtes multilingues et la compréhension du contexte

    Technologies d’interface

    • Tailwind CSS → Conception adaptative centrée sur les utilitaires, avec mode sombre
    • Radix UI → Composants accessibles : Tabs, Tooltip, Dialog, HoverCard
    • Framer Motion → Animations et transitions fluides
    • Recharts → Statistiques de carrière et visualisations de données
    • Lucide Icons → Iconographie légère

    Architecture backend : Node.js (NestJS), TypeScript et PostgreSQL

    • Node.js (NestJS) → Conception backend modulaire et évolutive avec TypeScript
    • Prisma ORM → Accès à PostgreSQL avec un typage sûr
    • PostgreSQL (AWS RDS) → Base de données gérée et fiable
    • Redis → Couche de cache rapide pour les requêtes API
    • Scripts Python → Pipelines de données, intégrations API et automatisation
    • API OpenAI → Analyse sémantique, conversation et recommandations de films
    • Tests → Jest pour les tests unitaires et d’intégration, Cypress pour les parcours complets d’interface
    • CI/CD → Pipelines GitLab avec ESLint, Prettier, Jest et déploiements automatiques
    • Conformité au RGPD → Stockage et traitement des données conçus pour respecter les règles de protection de la vie privée

    Les fonctionnalités en action

    • 🌍 Expérience multilingue : films et interface en anglais et en français
    • 🤖 Cineve AI : échangez avec un assistant intelligent pour obtenir des recommandations
    • 👤 Comptes utilisateur : créez un compte pour enregistrer filtres, listes de films et préférences
    • ⚡ Recommandations en temps réel : recevez des mises à jour instantanées de Cineve AI au fil de vos interactions
    • 🎥 Cartes de films dynamiques : animations au survol, notes et liens
    • 📊 Informations sur la distribution et les équipes : sections et filmographies dépliables
    • 📈 Statistiques de carrière : tendances visualisées au fil du temps et par genre
    • 📅 Vue chronologique : carrières des acteurs présentées année par année
    • 🧪 Processus de développement optimisé : TurboPack, actualisation instantanée et composants évolutifs

    Enseignements et points à retenir

    • Tailwind et Radix UI ont permis un développement d’interface accessible, réutilisable et rapide
    • Recharts s’est révélé puissant pour visualiser les données de carrière et de films
    • next-intl s’est intégré facilement pour le routage multilingue et les traductions
    • L’API OpenAI a permis de puissantes recommandations conversationnelles
    • Un backend partagé Node.js (NestJS), TypeScript, Prisma et Redis a servi Dashfolio Core et Movies sans refonte majeure, tout en assurant une gestion des données conforme au RGPD

    Et ensuite ?

    Les améliorations futures porteront sur :

    • L’élargissement de la compréhension sémantique et de la personnalisation de Cineve AI
    • L’enrichissement des profils utilisateur avec davantage de personnalisation
    • L’ajout de fonctions collaboratives comme les listes de films à voir partagées
    • L’introduction de notifications pour les nouvelles sorties et les suggestions de l’IA

    🚀 Essayez la plateforme. Disponible en anglais et en français, avec Cineve AI intégré !

    Si vous créez une application multilingue, enrichie par l’IA ou centrée sur les graphiques et souhaitez échanger des idées, je serai ravi d’en discuter.

    🔗 LinkedIn : Steward OUADI