Publicado em

Criando Dashfolio Movies & Cineve AI - Uma plataforma de filmes full stack e multilíngue com Next.js, NestJS e OpenAI

Autores

    Criando Dashfolio Movies e Cineve AI: uma experiência full stack de descoberta de filmes

    Dashfolio Movies é uma plataforma multilíngue de descoberta de filmes que permite aos usuários explorar filmes em alta, mais bem avaliados e em cartaz, navegar por gênero, consultar informações sobre elenco e equipe e interagir com estatísticas de carreira em uma interface totalmente localizada.

    O projeto também inclui Cineve AI, um assistente inteligente de cinema que recomenda filmes usando consultas em linguagem natural, tom, estado de espírito e temas, além de filtros avançados como duração, ano de lançamento, plataforma e exclusões.

    No backend, a plataforma utiliza Node.js (NestJS) com TypeScript, Prisma, PostgreSQL, Redis e AWS RDS, combinados com scripts em Python para enriquecimento de dados e automação de APIs. No frontend, Dashfolio Movies é construído com JavaScript/TypeScript, React.js e Next.js 15 App Router, estilizado com Tailwind CSS e enriquecido com Radix UI, Framer Motion e Recharts para uma experiência rápida, responsiva e animada. Os recursos de IA são alimentados pela API da OpenAI, e todo o sistema foi projetado levando em conta a conformidade com o GDPR.

    Objetivos do projeto

    • Oferecer uma experiência bonita e multilíngue de descoberta de filmes
    • Permitir que os usuários explorem filmes em alta, mais bem avaliados e em cartaz
    • Possibilitar a exploração detalhada de gêneros, elenco e estatísticas da equipe
    • Disponibilizar um assistente de cinema com IA e recomendações personalizadas
    • Exibir conteúdo localizado em inglês e francês
    • Oferecer gráficos interativos e linhas do tempo de carreira dos profissionais
    • Garantir que a aplicação seja modular, escalável e pronta para produção

    Cineve AI - O assistente inteligente de cinema

    Cineve AI traz recomendações com IA diretamente para a experiência de descoberta de filmes:

    • Compreende a intenção do usuário usando linguagem natural, contexto, filtros e histórico
    • Pesquisa em um banco de dados selecionado e enriquecido por IA com mais de 10.000 filmes
    • Explica as recomendações com resumos, motivos e links
    • Oferece filtragem avançada (duração, ano de lançamento, plataforma de streaming, exclusões)
    • Participa de conversas multilíngues (inglês/francês)

    Arquitetura do frontend - React.js, Next.js, TypeScript e Tailwind

    1. Página inicial com abas

    • Implementada com Tabs (Radix UI) e useInfiniteQuery (React Query)
    • Exibe cartões de filmes animados (react-spring)
    • Rolagem infinita com buscas contínuas na API

    2. Páginas de gênero

    • Rotas dinâmicas: /genres/:slug
    • Resultados paginados buscados pelo ID do gênero
    • Design consistente de cartões e grade

    3. Páginas de detalhes dos filmes

    • Rota dinâmica: /movies/:slug
    • Os detalhes incluem:
      • Pôster, trailer, sinopse
      • Data de lançamento, avaliação, contagem de votos
      • Orçamento e receita (AnimatedNumber)
      • Produtoras e países de produção
      • Painéis expansíveis de elenco e equipe

    4. Páginas de detalhes das pessoas

    • Rota dinâmica: /persons/:slug
    • Recursos:
      • Foto de perfil, biografia, principais participações
      • Filmografia expansível com prévias ao passar o cursor
      • Estatísticas de carreira (filmes/ano, filmes/gênero com Recharts)
      • Visualização em linha do tempo com miniaturas dos filmes

    5. Internacionalização (i18n)

    • Baseada em next-intl
    • Roteamento dinâmico com URLs prefixadas pelo idioma
    • Hook personalizado useLocalizedPath()

    6. Contas de usuário e personalização

    • Os usuários podem criar contas para salvar filtros, listas de filmes e preferências
    • Os perfis permitem uma experiência personalizada de descoberta de filmes
    • As configurações salvas são sincronizadas entre sessões

    7. Recomendações em tempo real

    • Cineve AI fornece recomendações atualizadas conforme os usuários refinam os filtros ou interagem
    • Os resultados são transmitidos instantaneamente para uma experiência fluida de conversa
    • Oferece suporte a consultas multilíngues e compreensão contextual

    Tecnologias da interface

    • Tailwind CSS → Design responsivo baseado em classes utilitárias, com modo escuro
    • Radix UI → Componentes acessíveis (Tabs, Tooltip, Dialog, HoverCard)
    • Framer Motion → Animações e transições suaves
    • Recharts → Estatísticas de carreira e visualizações de dados
    • Lucide Icons → Iconografia leve

    Arquitetura do backend - Node.js (NestJS), TypeScript e PostgreSQL

    • Node.js (NestJS) → Design modular e escalável de backend com TypeScript
    • Prisma ORM → Acesso ao banco de dados com segurança de tipos e PostgreSQL
    • PostgreSQL (AWS RDS) → Banco de dados gerenciado confiável
    • Redis → Camada de cache rápida para consultas à API
    • Scripts em Python → Pipelines de dados, integrações de APIs, automação
    • API da OpenAI → Análise semântica, chat e recomendações de filmes
    • Testes → Jest para testes unitários e de integração e Cypress para fluxos de interface de ponta a ponta
    • CI/CD → Pipelines GitLab com ESLint, Prettier, Jest e implantações automáticas
    • Conformidade com o GDPR → Armazenamento e processamento de dados projetados para respeitar os regulamentos de privacidade

    Recursos em ação

    • 🌍 Experiência multilíngue: filmes e interface em inglês e francês
    • 🤖 Cineve AI: converse com um assistente inteligente para receber recomendações
    • 👤 Contas de usuário: crie uma conta para salvar filtros, listas de filmes e preferências
    • ⚡ Recomendações em tempo real: receba atualizações instantâneas do Cineve AI enquanto interage
    • 🎥 Cartões de filmes dinâmicos: animações ao passar o cursor, avaliações, links
    • 📊 Informações sobre elenco e equipe: seções expansíveis e filmografias
    • 📈 Estatísticas de carreira: tendências visualizadas ao longo do tempo e por gênero
    • 📅 Visualização em linha do tempo: carreiras de atores apresentadas ano a ano
    • 🧪 Fluxo de trabalho de desenvolvimento otimizado: TurboPack, atualização instantânea, componentes escaláveis

    Aprendizados e conclusões

    • Tailwind + Radix UI possibilitaram o desenvolvimento rápido de interfaces acessíveis e reutilizáveis
    • Recharts se mostrou poderoso para visualizações de dados de carreiras e filmes
    • next-intl integrou-se facilmente ao roteamento e às traduções multilíngues
    • A API da OpenAI viabilizou recomendações poderosas por conversa
    • Um backend compartilhado de Node.js (NestJS) + TypeScript + Prisma + Redis atendeu tanto o Dashfolio Core quanto o Movies sem grandes reformulações, garantindo o tratamento de dados em conformidade com o GDPR

    O que vem a seguir?

    As melhorias futuras se concentrarão em:

    • Ampliar a compreensão semântica e a personalização do Cineve AI
    • Aprimorar os perfis de usuário com recursos de personalização mais completos
    • Adicionar recursos colaborativos, como listas compartilhadas de filmes para assistir
    • Introduzir opções de notificação para novos lançamentos e sugestões de IA

    🚀 Experimente a versão online. Disponível em inglês e francês, com Cineve AI integrado!

    Se você está criando uma aplicação multilíngue, com IA ou baseada em gráficos e quer trocar ideias, adoraria conversar.

    🔗 LinkedIn - Steward OUADI