Pubblicato il

Creare Dashfolio Movies & Cineve AI - Una piattaforma cinematografica full-stack multilingue con Next.js, NestJS e OpenAI

Autori

    Creare Dashfolio Movies e Cineve AI: un’esperienza full-stack per scoprire film

    Dashfolio Movies è una piattaforma multilingue per scoprire film che consente agli utenti di esplorare i titoli di tendenza, con le valutazioni più alte e attualmente al cinema, navigare per genere, approfondire le informazioni su cast e troupe e interagire con le statistiche di carriera in un’interfaccia completamente localizzata.

    Il progetto include anche Cineve AI, un assistente cinematografico intelligente che consiglia film usando richieste in linguaggio naturale, tono, stato d’animo e temi, oltre a filtri avanzati come durata, anno di uscita, piattaforma ed esclusioni.

    Sul backend, la piattaforma usa Node.js (NestJS) con TypeScript, Prisma, PostgreSQL, Redis e AWS RDS, insieme a script Python per l’arricchimento dei dati e l’automazione delle API. Sul frontend, Dashfolio Movies è realizzato con JavaScript/TypeScript, React.js e Next.js 15 App Router, con stili in Tailwind CSS e arricchito da Radix UI, Framer Motion e Recharts per un’esperienza veloce, responsive e animata. Le funzionalità di IA sono alimentate dall’API OpenAI e l’intero sistema è stato progettato tenendo presente la conformità al GDPR.

    Obiettivi del progetto

    • Offrire una bella esperienza multilingue per scoprire film
    • Consentire agli utenti di esplorare i film di tendenza, con le valutazioni più alte e attualmente al cinema
    • Permettere di approfondire generi, cast e statistiche della troupe
    • Fornire un assistente cinematografico basato sull’IA con consigli personalizzati
    • Mostrare contenuti localizzati in inglese e francese
    • Offrire grafici interattivi e cronologie di carriera per i professionisti del cinema
    • Garantire che l’app sia modulare, scalabile e pronta per la produzione

    Cineve AI - L’assistente cinematografico intelligente

    Cineve AI porta i consigli basati sull’IA direttamente nell’esperienza di scoperta dei film:

    • Comprende l’intento dell’utente usando linguaggio naturale, contesto, filtri e cronologia
    • Cerca in un database curato e arricchito con l’IA di oltre 10.000 film
    • Spiega i consigli con riassunti, motivazioni e link
    • Supporta filtri avanzati (durata, anno di uscita, piattaforma di streaming, esclusioni)
    • Gestisce conversazioni multilingue (inglese/francese)

    Architettura frontend - React.js, Next.js, TypeScript & Tailwind

    1. Pagina iniziale con schede

    • Implementata con Tabs (Radix UI) e useInfiniteQuery (React Query)
    • Mostra schede dei film animate (react-spring)
    • Scorrimento infinito con recupero fluido dei dati dalle API

    2. Pagine dei generi

    • Route dinamiche: /genres/:slug
    • Risultati paginati recuperati tramite l’ID del genere
    • Design coerente di schede e griglie

    3. Pagine di dettaglio dei film

    • Route dinamica: /movies/:slug
    • I dettagli includono:
      • Locandina, trailer, panoramica
      • Data di uscita, valutazione, numero di voti
      • Budget e incassi (AnimatedNumber)
      • Società e paesi di produzione
      • Pannelli espandibili per cast e troupe

    4. Pagine di dettaglio delle persone

    • Route dinamica: /persons/:slug
    • Funzionalità:
      • Foto del profilo, biografia, interpretazioni principali
      • Filmografia espandibile con anteprime al passaggio del mouse
      • Statistiche di carriera (film/anno, film/genere con Recharts)
      • Vista cronologica con miniature dei film

    5. Internazionalizzazione (i18n)

    • Basata su next-intl
    • Routing dinamico con URL che hanno la lingua come prefisso
    • Hook personalizzato useLocalizedPath()

    6. Account utente e personalizzazione

    • Gli utenti possono creare account per salvare filtri, elenchi di film e preferenze
    • I profili consentono un’esperienza personalizzata di scoperta dei film
    • Le configurazioni salvate si sincronizzano tra le sessioni

    7. Consigli in tempo reale

    • Cineve AI fornisce consigli aggiornati mentre gli utenti affinano i filtri o interagiscono
    • I risultati vengono trasmessi istantaneamente in streaming per un’esperienza fluida e conversazionale
    • Supporta richieste multilingue e comprensione del contesto

    Stack dell’interfaccia

    • Tailwind CSS → Design basato su classi di utilità, responsive e con modalità scura
    • Radix UI → Componenti accessibili (Tabs, Tooltip, Dialog, HoverCard)
    • Framer Motion → Animazioni e transizioni fluide
    • Recharts → Statistiche di carriera e visualizzazioni dei dati
    • Lucide Icons → Iconografia leggera

    Architettura backend - Node.js (NestJS), TypeScript & PostgreSQL

    • Node.js (NestJS) → Design del backend modulare e scalabile con TypeScript
    • Prisma ORM → Accesso al database con sicurezza dei tipi e PostgreSQL
    • PostgreSQL (AWS RDS) → Database gestito affidabile
    • Redis → Livello di cache veloce per le query API
    • Script Python → Pipeline di dati, integrazioni API, automazione
    • API OpenAI → Analisi semantica, chat e consigli cinematografici
    • Test → Jest per test unitari e di integrazione e Cypress per flussi dell’interfaccia end-to-end
    • CI/CD → Pipeline GitLab con ESLint, Prettier, Jest e distribuzioni automatiche
    • Conformità al GDPR → Archiviazione ed elaborazione dei dati progettate per rispettare le normative sulla privacy

    Funzionalità in azione

    • 🌍 Esperienza multilingue: film e interfaccia in inglese e francese
    • 🤖 Cineve AI: chatta con un assistente intelligente per ricevere consigli
    • 👤 Account utente: crea un account per salvare filtri, elenchi di film e preferenze
    • ⚡ Consigli in tempo reale: ricevi aggiornamenti istantanei da Cineve AI mentre interagisci
    • 🎥 Schede dei film dinamiche: animazioni al passaggio del mouse, valutazioni, link
    • 📊 Approfondimenti su cast e troupe: sezioni espandibili e filmografie
    • 📈 Statistiche di carriera: tendenze visualizzate nel tempo e per genere
    • 📅 Vista cronologica: carriere degli attori mostrate anno per anno
    • 🧪 Flusso di sviluppo ottimizzato: TurboPack, aggiornamento istantaneo, componenti scalabili

    Lezioni apprese e considerazioni

    • Tailwind + Radix UI hanno consentito uno sviluppo dell’interfaccia accessibile, riutilizzabile e rapido
    • Recharts si è dimostrato potente per visualizzare dati sui film e sulle carriere
    • next-intl si è integrato senza difficoltà per il routing multilingue e le traduzioni
    • L’API OpenAI ha reso possibili potenti consigli conversazionali
    • Un backend condiviso Node.js (NestJS) + TypeScript + Prisma + Redis ha servito sia Dashfolio Core sia Movies senza grandi rielaborazioni, garantendo al contempo una gestione dei dati conforme al GDPR

    Cosa ci aspetta?

    I miglioramenti futuri si concentreranno su:

    • Ampliare la comprensione semantica e la personalizzazione di Cineve AI
    • Arricchire i profili utente con funzionalità di personalizzazione più avanzate
    • Aggiungere funzionalità collaborative come liste di film da vedere condivise
    • Introdurre opzioni di notifica per nuove uscite e suggerimenti dell’IA

    🚀 Provalo online. Disponibile in inglese e francese, con Cineve AI integrato!

    Se stai creando un’applicazione multilingue, basata sull’IA o sui grafici e vuoi scambiare idee, mi farebbe piacere entrare in contatto.

    🔗 LinkedIn - Steward OUADI