Publicado el

Creación de Dashfolio Movies & Cineve AI - Una plataforma de cine full-stack multilingüe con Next.js, NestJS y OpenAI

Autores

    Creación de Dashfolio Movies y Cineve AI: Una experiencia full-stack para descubrir películas

    Dashfolio Movies es una plataforma multilingüe para descubrir películas que permite a los usuarios explorar filmes en tendencia, mejor valorados y en cartelera, navegar por género, consultar información sobre el reparto y el equipo, e interactuar con estadísticas de sus carreras en una interfaz completamente localizada.

    El proyecto también incluye Cineve AI, un asistente de cine inteligente que recomienda películas mediante consultas en lenguaje natural, tono, estado de ánimo y temas, así como filtros avanzados como duración, año de estreno, plataforma y exclusiones.

    En el backend, la plataforma utiliza Node.js (NestJS) con TypeScript, Prisma, PostgreSQL, Redis y AWS RDS, junto con scripts de Python para enriquecer datos y automatizar las interacciones con API. En el frontend, Dashfolio Movies está construido con JavaScript/TypeScript, React.js y Next.js 15 App Router, con estilos de Tailwind CSS y enriquecido con Radix UI, Framer Motion y Recharts para ofrecer una experiencia rápida, adaptable y animada. Las funciones de IA utilizan la API de OpenAI, y todo el sistema se diseñó teniendo en cuenta el cumplimiento del RGPD.

    Objetivos del proyecto

    • Ofrecer una experiencia atractiva y multilingüe para descubrir películas
    • Permitir a los usuarios explorar películas en tendencia, mejor valoradas y en cartelera
    • Facilitar la exploración detallada de géneros, reparto y estadísticas del equipo
    • Proporcionar un asistente de cine con IA y recomendaciones personalizadas
    • Mostrar contenido localizado en inglés y francés
    • Ofrecer gráficos interactivos y cronologías profesionales de los participantes
    • Garantizar que la aplicación sea modular, escalable y esté preparada para producción

    Cineve AI - El asistente de cine inteligente

    Cineve AI incorpora recomendaciones con IA directamente en la experiencia de descubrimiento de películas:

    • Comprende la intención del usuario mediante lenguaje natural, contexto, filtros e historial
    • Busca en una base de datos seleccionada y enriquecida con IA de más de 10.000 películas
    • Explica las recomendaciones con resúmenes, razones y enlaces
    • Admite filtrado avanzado (duración, año de estreno, plataforma de streaming, exclusiones)
    • Mantiene conversaciones multilingües (inglés/francés)

    Arquitectura del frontend - React.js, Next.js, TypeScript y Tailwind

    1. Página de inicio con pestañas

    • Implementada con Tabs (Radix UI) y useInfiniteQuery (React Query)
    • Muestra tarjetas de películas animadas (react-spring)
    • Desplazamiento infinito con obtención fluida de datos de la API

    2. Páginas de géneros

    • Rutas dinámicas: /genres/:slug
    • Resultados paginados obtenidos por identificador de género
    • Diseño coherente de tarjetas y cuadrículas

    3. Páginas de detalles de películas

    • Ruta dinámica: /movies/:slug
    • Los detalles incluyen:
      • Cartel, tráiler, sinopsis
      • Fecha de estreno, valoración, número de votos
      • Presupuesto e ingresos (AnimatedNumber)
      • Productoras y países
      • Paneles ampliables del reparto y el equipo

    4. Páginas de detalles de personas

    • Ruta dinámica: /persons/:slug
    • Funciones:
      • Foto de perfil, biografía, apariciones destacadas
      • Filmografía ampliable con vistas previas al pasar el cursor
      • Estadísticas profesionales (películas/año, películas/género con Recharts)
      • Vista cronológica con miniaturas de películas

    5. Internacionalización (i18n)

    • Basada en next-intl
    • Enrutamiento dinámico con URL que incluyen el idioma como prefijo
    • Hook personalizado useLocalizedPath()

    6. Cuentas de usuario y personalización

    • Los usuarios pueden crear cuentas para guardar filtros, listas de películas y preferencias
    • Los perfiles permiten una experiencia personalizada para descubrir películas
    • Las configuraciones guardadas se sincronizan entre sesiones

    7. Recomendaciones en tiempo real

    • Cineve AI ofrece recomendaciones actualizadas a medida que los usuarios ajustan los filtros o interactúan
    • Los resultados se transmiten al instante para una experiencia conversacional fluida
    • Admite consultas multilingües y comprensión del contexto

    Tecnologías de interfaz

    • Tailwind CSS → Diseño adaptable basado en utilidades con modo oscuro
    • Radix UI → Componentes accesibles (Tabs, Tooltip, Dialog, HoverCard)
    • Framer Motion → Animaciones y transiciones fluidas
    • Recharts → Estadísticas profesionales y visualizaciones de datos
    • Lucide Icons → Iconografía ligera

    Arquitectura del backend - Node.js (NestJS), TypeScript y PostgreSQL

    • Node.js (NestJS) → Diseño de backend modular y escalable con TypeScript
    • Prisma ORM → Acceso a bases de datos con seguridad de tipos mediante PostgreSQL
    • PostgreSQL (AWS RDS) → Base de datos administrada y fiable
    • Redis → Capa de caché rápida para consultas de API
    • Scripts de Python → Canalizaciones de datos, integraciones con API, automatización
    • API de OpenAI → Análisis semántico, chat y recomendaciones de películas
    • Pruebas → Jest para pruebas unitarias y de integración, y Cypress para flujos de interfaz de extremo a extremo
    • CI/CD → Canalizaciones de GitLab con ESLint, Prettier, Jest y despliegues automáticos
    • Cumplimiento del RGPD → Almacenamiento y tratamiento de datos diseñados para respetar las normas de privacidad

    Funciones en acción

    • 🌍 Experiencia multilingüe: Películas e interfaz en inglés y francés
    • 🤖 Cineve AI: Conversa con un asistente inteligente para recibir recomendaciones
    • 👤 Cuentas de usuario: Crea una cuenta para guardar filtros, listas de películas y preferencias
    • ⚡ Recomendaciones en tiempo real: Recibe actualizaciones instantáneas de Cineve AI mientras interactúas
    • 🎥 Tarjetas de películas dinámicas: Animaciones al pasar el cursor, valoraciones, enlaces
    • 📊 Información sobre el reparto y el equipo: Secciones y filmografías ampliables
    • 📈 Estadísticas profesionales: Tendencias visualizadas a lo largo del tiempo y por género
    • 📅 Vista cronológica: Carreras de actores mostradas año a año
    • 🧪 Flujo de desarrollo optimizado: TurboPack, actualización instantánea, componentes escalables

    Aprendizajes y conclusiones

    • Tailwind + Radix UI permitieron desarrollar rápidamente interfaces accesibles y reutilizables
    • Recharts demostró su potencia para visualizar datos de carreras y películas
    • next-intl se integró con facilidad para el enrutamiento multilingüe y las traducciones
    • La API de OpenAI hizo posibles recomendaciones conversacionales potentes
    • Un backend compartido de Node.js (NestJS) + TypeScript + Prisma + Redis dio servicio tanto a Dashfolio Core como a Movies sin grandes modificaciones, garantizando un tratamiento de datos conforme al RGPD

    ¿Qué viene después?

    Las futuras mejoras se centrarán en:

    • Ampliar la comprensión semántica y la personalización de Cineve AI
    • Mejorar los perfiles de usuario con funciones de personalización más completas
    • Añadir funciones colaborativas como listas compartidas de películas pendientes
    • Introducir opciones de notificación de nuevos estrenos y sugerencias de IA

    🚀 Pruébalo en línea. ¡Disponible en inglés y francés, con Cineve AI integrado!

    Si estás creando una aplicación multilingüe, con IA o basada en gráficos y quieres intercambiar ideas, me encantará conectar contigo.

    🔗 LinkedIn - Steward OUADI