Seu assistente pessoal para encontrar o filme perfeito
CineMatch é uma aplicação web inteligente que utiliza Inteligência Artificial para recomendar filmes personalizados baseados no humor, sentimentos ou preferências do usuário. Desenvolvido durante a Imersão Dev do Futuro, o projeto combina tecnologias modernas para criar uma experiência única de descoberta cinematográfica.
- 🤖 IA Conversacional: Processamento de linguagem natural para entender preferências
- 🎯 Recomendações Personalizadas: Sugestões baseadas em humor e contexto
- 🎨 Interface Moderna: Design responsivo com animações suaves
- 📱 Mobile First: Otimizado para todos os dispositivos
- ⚡ Respostas Rápidas: Integração eficiente com APIs de filmes
- 🎭 Dados Reais: Informações atualizadas do The Movie Database (TMDB)
- HTML5 - Estrutura semântica da aplicação
- CSS3 - Estilização avançada com gradientes e animações
- JavaScript (ES6+) - Lógica da aplicação e manipulação do DOM
- N8N - Orquestração de workflows e automação
- Google Gemini AI - Processamento de linguagem natural
- TMDB API - Base de dados de filmes
- Responsive Design - Interface adaptável
- CSS Animations - Micro-interações e feedback visual
- Modern UI Patterns - Cards, glassmorphism, gradientes
- Navegador web moderno
- Conexão com internet
- Servidor web local (opcional)
- Clone o repositório
git clone https://github.com/seu-usuario/cinematch.git
cd cinematch- Execute localmente
# Usando Python
python -m http.server 8000
# Usando Node.js
npx serve .
# Ou abra diretamente o index.html no navegador- Acesse a aplicação
http://localhost:8000
- Importe o arquivo
CineMatch.jsonno seu N8N - Configure as credenciais necessárias:
- Google Gemini API: Token de acesso ao Gemini
- TMDB API: Bearer token do The Movie Database
No arquivo engine.js, configure:
const CONFIG = {
TOKEN: "seu-token-aqui",
WEBHOOK_URL: "sua-url-webhook-n8n",
AUTH_HEADER: "authorization",
MAX_MOVIES: 6
};cinematch/
├── 📄 index.html # Página principal
├── 📁 src/
│ ├── 📁 css/
│ │ ├── reset.css # Reset CSS
│ │ └── styles.css # Estilos principais
│ ├── 📁 scripts/
│ │ └── engine.js # Lógica da aplicação
│ └── 📁 images/
│ └── botflix-robot.jpg # Logo/Avatar
├── 📄 CineMatch.json # Workflow N8N
└── 📄 README.md # Documentação
- 📝 Input do Usuário: O usuário descreve como está se sentindo ou que tipo de filme quer
- 🤖 Processamento IA: O Google Gemini interpreta a entrada e sugere um filme
- 🔍 Busca no TMDB: O sistema busca informações detalhadas do filme sugerido
- 📊 Exibição: Os resultados são apresentados com pôster, sinopse e avaliação
graph TD
A[Interface Web] --> B[JavaScript Engine]
B --> C[N8N Webhook]
C --> D[Google Gemini AI]
D --> E[TMDB API]
E --> F[Resposta JSON]
F --> A
- 🎭 Tema Dark: Interface elegante em tons de roxo
- ✨ Animações: Micro-interações suaves
- 📱 Responsivo: Funciona em mobile, tablet e desktop
- 🌟 Glassmorphism: Efeitos de vidro translúcido
- ⚡ Performance: Carregamento otimizado de imagens
- Fallback para conexões sem autenticação
- Mensagens de erro amigáveis ao usuário
- Retry automático em caso de falha
- Carregamento lazy de imagens
- Debouncing em requisições
- Cache de respostas da API
- Navegação por teclado
- Contraste adequado
- Textos alternativos para imagens
Contribuições são sempre bem-vindas! Para contribuir:
- 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
Use as Issues do GitHub para reportar bugs ou sugerir funcionalidades.
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
[ALEX SANTIAGO]
Projeto desenvolvido durante a Imersão Dev do Futuro
⭐ Se este projeto foi útil para você, considere dar uma estrela!