PrimeFlix Moderno é uma aplicação de streaming premium, pensada para entregar uma experiência fluida, envolvente e visualmente marcante. Cada detalhe — da arquitetura ao design — foi cuidadosamente planejado para refletir excelência técnica, usabilidade refinada e uma identidade visual coerente com plataformas de entretenimento de alto nível.
- ✅ Domínio técnico completo: arquitetura escalável, componentes reutilizáveis, performance otimizada
- ✅ Visão de produto: cada decisão foi pensada para entregar valor real ao usuário
- ✅ Uso estratégico de IA: aceleração com Copilot e Gemini, sem abrir mão da autoria e qualidade
- ✅ Design e UX refinados: interface fluida, estética minimalista e heurísticas de Nielsen aplicadas
- ✅ Organização impecável: estrutura de pastas clara, documentação completa e código limpo
PrimeFlix Moderno é mais que uma aplicação React. É uma demonstração clara de engenharia de produto moderna, onde cada componente, cada decisão e cada linha de código foram pensadas para:
- Encantar o usuário com uma experiência fluida, imersiva e visualmente harmônica
- Impressionar recrutadores com organização, clareza arquitetural e domínio técnico
- Mostrar como IA pode acelerar sem comprometer qualidade, visão ou autoria
| Tecnologia | Finalidade |
|---|---|
| React 18 | UI declarativa e componentizada |
| Vite | Bundler moderno e ultra-rápido |
| TailwindCSS | Estilização utilitária e responsiva |
| Styled Components | Estilo dinâmico por componente |
| Axios | Requisições HTTP com interceptadores |
| React Router DOM | Navegação SPA com rotas dinâmicas |
| FontAwesome | Ícones acessíveis e modernos |
| ESLint + Plugins | Padronização e qualidade de código |
/primeflix-moderno
├── src/
│ ├── assets/ # Imagens, ícones e arquivos estáticos
│ ├── components/ # Componentes reutilizáveis da aplicação
│ │ ├── common/ # Elementos visuais globais
│ │ │ ├── BackgroundGlow.jsx
│ │ │ ├── LoadingSpinner.jsx
│ │ │ └── ScrollProgress.jsx
│ │ ├── features/ # Componentes com funcionalidades específicas
│ │ │ ├── ConfirmationModal.jsx
│ │ │ ├── CookieConsentBanner.jsx
│ │ │ ├── HeroCarousel.jsx
│ │ │ ├── MovieCarousel.jsx
│ │ │ └── MovieForm.jsx
│ │ ├── layout/ # Estrutura visual da aplicação
│ │ │ ├── Footer/
│ │ │ │ ├── BackToTopButton.jsx
│ │ │ │ ├── footer.data.js
│ │ │ │ ├── FooterLinkColumn.jsx
│ │ │ │ ├── NewsletterForm.jsx
│ │ │ │ └── SocialLinks.jsx
│ │ │ ├── Header/
│ │ │ │ ├── header.data.js
│ │ │ │ ├── MobileMenu.jsx
│ │ │ │ ├── NavLinks.jsx
│ │ │ │ ├── ProfileDropdown.jsx
│ │ │ │ └── Search.jsx
│ │ │ ├── Footer.jsx
│ │ │ ├── Header.jsx
│ │ │ └── RootLayout.jsx
│ │ ├── ui/ # Componentes visuais genéricos e reutilizáveis
│ │ │ ├── MovieCard/
│ │ │ │ ├── CardHoverOverlay.jsx
│ │ │ │ ├── CardImage.jsx
│ │ │ │ └── useMovieCardLogic.js
│ │ │ ├── Button.jsx
│ │ │ ├── ErrorDisplay.jsx
│ │ │ ├── Input.jsx
│ │ │ ├── LoadingSkeleton.jsx
│ │ │ ├── MovieCard.jsx
│ │ │ ├── Spinner.jsx
│ │ │ └── Toast.jsx
│ ├── contexts/ # Contextos globais para gerenciamento de estado
│ │ ├── auth-context.js
│ │ ├── AuthProvider.jsx
│ │ ├── MovieContext.jsx
│ │ └── PageTransitionContext.jsx
│ ├── hooks/ # Hooks personalizados
│ │ ├── useAuth.js
│ │ ├── useCarouselScroll.js
│ │ ├── useClickOutside.js
│ │ ├── useHeroCarousel.js
│ │ ├── usePageData.js
│ │ ├── useScroll.js
│ │ └── useToast.js
│ ├── pages/ # Páginas principais da aplicação
│ │ ├── AddMoviePage.jsx
│ │ ├── EditMoviePage.jsx
│ │ ├── HomePage.jsx
│ │ ├── MoviesPage.jsx
│ │ ├── MyListPage.jsx
│ │ ├── NotFoundPage.jsx
│ │ ├── PlaceholderPage.jsx
│ │ └── SeriesPage.jsx
│ ├── services/ # Lógica de negócio e integração com APIs
│ │ ├── movieStorageService.js
│ │ └── tmdbService.js
│ ├── utils/ # Funções auxiliares e utilitárias
│ │ ├── imageUrlBuilder.js
│ │ └── throttle.js
│ ├── App.jsx # Componente raiz da aplicação
│ ├── index.css # Estilos globais
│ └── main.jsx # Ponto de entrada da aplicação
├── .env # Variáveis de ambiente
├── package.json # Dependências e scripts do projeto
├── tailwind.config.js # Configuração do TailwindCSS
├── postcss.config.js # Configuração do PostCSS- Destaque visual da home
- Navegação fluida e responsiva
- Integração com dados dinâmicos
- Exibição de filmes/séries
- Design adaptável e acessível
- Botões de ação (favoritar, assistir, etc.)
- Formulário para adicionar/editar conteúdo
- Validação de campos e UX clara
- Feedback visual para erros
Este projeto utiliza a The Movie Database (TMDB) como fonte principal de dados para filmes e séries.
A API fornece informações atualizadas e confiáveis, permitindo que a aplicação exiba conteúdos reais com imagens, descrições, avaliações e muito mais.
Este projeto foi desenhado com base nas 10 heurísticas de usabilidade de Jakob Nielsen:
- Visibilidade do status do sistema
- Correspondência entre sistema e mundo real
- Controle e liberdade do usuário
- Consistência e padrões
- Prevenção de erros
- Reconhecimento em vez de memorização
- Flexibilidade e eficiência de uso
- Design estético e minimalista
- Ajuda para reconhecer e recuperar erros
- Ajuda e documentação
Cada componente foi avaliado e ajustado com base nessas heurísticas, garantindo uma experiência intuitiva, eficiente e agradável.
- Uso de
.envpara variáveis sensíveis - Prevenção contra XSS e falhas comuns
- Lazy loading e code-splitting para otimização
- Imagens otimizadas e renderizações controladas
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
}- Autenticação com Firebase ou OAuth
- Sistema de recomendação inteligente
- Modo escuro e preferências do usuário
- Testes automatizados com Jest + React Testing Library
Renato Filho — Desenvolvedor Frontend com foco em excelência, usabilidade e arquitetura limpa.
Este projeto foi acelerado com IA (Copilot + Gemini), mas cada decisão técnica e visual foi tomada com base em experiência, pesquisa e domínio de boas práticas.
Mesmo com IA, o domínio é meu.
A arquitetura foi pensada, não gerada.
O design foi alinhado, não improvisado.
O resultado é um projeto que une velocidade, qualidade e visão de produto.