MyFlix é uma aplicação web moderna e responsiva para descoberta de filmes e séries, inspirada no design da Netflix. O projeto utiliza a API do TMDB (The Movie Database) para fornecer informações atualizadas sobre milhares de títulos.
- 🎯 Hero Banner Dinâmico - Destaque rotativo com os conteúdos mais populares
- 🔥 Seções Categorizadas - Em Alta, Populares, Top Avaliados, Em Breve
- 🔍 Busca Avançada - Sistema de busca com filtros por tipo (filme/série)
- 📺 Páginas Detalhadas - Informações completas sobre filmes e séries
- 🎭 Elenco e Equipe - Visualização dos atores e criadores
- 💡 Recomendações - Sugestões personalizadas baseadas no conteúdo
- 🎬 Trailers Integrados - Player de vídeos do YouTube
- 📱 Design Responsivo - Otimizado para todos os dispositivos
- ⚡ Animações Suaves - Experiência de usuário fluida e moderna
O projeto foi desenvolvido com foco em:
- Identidade Visual: Paleta de cores inspirada na Netflix (#E50914)
- Tipografia: Fonte Poppins para legibilidade e modernidade
- Micro-interações: Animações e transições suaves
- Glassmorphism: Efeitos de blur e transparência
- Gradientes: Uso estratégico para depth e hierarquia visual
- Dark Mode: Interface escura para conforto visual
- React 18 - Biblioteca JavaScript para interfaces
- Vite - Build tool e dev server ultrarrápido
- React Router DOM - Roteamento declarativo
- react-circular-progressbar - Indicadores de avaliação
- react-modal - Modais acessíveis
- react-youtube - Player de trailers
- react-icons - Ícones vetoriais
- CSS Modules - Estilos com escopo local
- CSS Custom Properties - Variáveis CSS para tematização
- Flexbox & Grid - Layouts modernos e responsivos
- TMDB API - Base de dados de filmes e séries
myflix/
├── public/
├── src/
│ ├── assets/
│ ├── components/
│ │ ├── Header/
│ │ │ ├── Header.jsx
│ │ │ └── Header.module.css
│ │ ├── Footer/
│ │ │ ├── Footer.jsx
│ │ │ └── Footer.module.css
│ │ ├── MovieCard/
│ │ │ ├── MovieCard.jsx
│ │ │ └── MovieCard.module.css
│ │ └── TrailerModal/
│ │ ├── TrailerModal.jsx
│ │ └── TrailerModal.module.css
│ ├── pages/
│ │ ├── Home/
│ │ │ ├── Home.jsx
│ │ │ └── Home.module.css
│ │ ├── Movie/
│ │ │ ├── Movie.jsx
│ │ │ └── Movie.module.css
│ │ ├── Series/
│ │ │ ├── Series.jsx
│ │ │ └── Series.module.css
│ │ └── Search/
│ │ ├── Search.jsx
│ │ └── Search.module.css
│ ├── App.jsx
│ ├── main.jsx
│ └── index.css
├── .env
├── package.json
└── vite.config.js
- Node.js 16.x ou superior
- NPM ou Yarn
- Clone o repositório
git clone https://github.com/seu-usuario/myflix.git
cd myflix- Instale as dependências
npm install
# ou
yarn install- Configure as variáveis de ambiente
Crie um arquivo .env na raiz do projeto:
VITE_API_KEY=sua_chave_da_api_tmdb📝 Como obter a chave da API:
- Acesse TMDB
- Crie uma conta gratuita
- Vá em Configurações > API
- Solicite uma chave de API
- Inicie o servidor de desenvolvimento
npm run dev
# ou
yarn dev- Acesse a aplicação
Abra o navegador em http://localhost:5173
npm run dev # Inicia o servidor de desenvolvimento
npm run build # Cria build de produção
npm run preview # Preview do build de produção
npm run lint # Executa o linter- Hero banner com conteúdo em destaque
- 5 seções com carrosséis horizontais
- Loading states com spinners
- Navegação fluida entre seções
- Backdrop de alta resolução
- Informações detalhadas (duração, orçamento, receita)
- Avaliação com progress bar circular
- Botão para assistir trailer
- Seção de elenco principal
- Recomendações relacionadas
- Todas as features da página de filme
- Informações de temporadas e episódios
- Grid de temporadas com detalhes
- Status de produção
- Busca multi-categoria (filmes e séries)
- Filtros interativos
- Contador de resultados
- Estado vazio estilizado
- Loading state
- Hover com informações extras
- Badge de tipo (filme/série)
- Rating visível
- Thumbnail de alta qualidade
- Animações suaves
- Busca com expansão ao focar
- Logo animado
- Sticky positioning
- Efeito blur no scroll
- Links de navegação
- Redes sociais
- Créditos da API
- Copyright dinâmico
--netflix-red: #E50914
--background-dark: #141414
--background-medium: #222222
--text-white: #FFFFFF
--text-gray: #b3b3b3
--border-gray: #4d4d4dO projeto é totalmente responsivo com breakpoints em:
- Desktop: > 1024px
- Tablet: 768px - 1024px
- Mobile: < 768px
- Code Splitting com React Router
- Lazy Loading de imagens
- CSS Modules para estilos isolados
- Vite para builds otimizados
- Debounce em buscas
- Sistema de favoritos com localStorage
- Modo claro/escuro
- Integração com autenticação
- Listas personalizadas
- Compartilhamento social
- PWA com offline support
- Internacionalização (i18n)
- Testes unitários e E2E
Contribuições são sempre bem-vindas!
- Fork o projeto
- Crie uma branch para sua feature (
git checkout -b feature/AmazingFeature) - Commit suas mudanças (
git commit -m 'Add some AmazingFeature') - Push para a branch (
git push origin feature/AmazingFeature) - Abra um Pull Request
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Desenvolvido com ❤️ para os amantes de cinema
⭐ Deixe uma estrela se você gostou do projeto!
🐛 Encontrou um bug? Abra uma issue
💡 Tem uma sugestão? Contribua com o projeto
- TMDB pela API gratuita
- React Icons pelos ícones
- Comunidade React pela inspiração
Powered by TMDB API