Aplicação de exploração de filmes e séries com dados em tempo real, desenvolvida com React, focada em consumo de API, gerenciamento de estado assíncrono e navegação SPA.
🔗 Demo: https://watchit123.netlify.app/
- 🔎 Busca de filmes e séries por nome
- 📈 Listas de populares e mais bem avaliados
- 🎥 Reprodução de trailers
- 🧑🤝🧑 Exibição de elenco (ator/personagem)
- 📺 Detalhes de séries (temporadas e episódios)
- 🌐 Informações sobre plataformas de streaming
- ➕ Paginação via botão “Carregar mais”
- 📱 Layout responsivo (mobile-first)
- 🔗 Links para páginas externas do TMDB
- React
- React Router
- React Query (TanStack Query)
- Fetch API
- CSS
- React Icons
- API do TMDB
- Netlify Functions (proteção de chave de API)
Durante o desenvolvimento deste projeto, aprofundei conhecimentos em:
- Consumo de APIs externas e tratamento de dados
- Gerenciamento de estado assíncrono com TanStack Query
- Estruturação de aplicações SPA com React Router
- Organização de componentes e separação de responsabilidades
Aplicação com implementação de práticas de acessibilidade em SPA:
- HTML semântico e landmarks
- Navegação por teclado
- Uso de WAI-ARIA quando necessário
- Contraste de cores validado
Este projeto foi desenvolvido antes de uma experiência mais aprofundada com leitores de tela.
- Mudanças de rota na SPA não são anunciadas automaticamente
- O modal de reprodução de trailer não possui gerenciamento completo de foco (focus trap)
- Paginação com botão “Carregar mais” para melhor controle de navegação e foco
- Uso de Netlify Functions para evitar exposição da chave da API
Aplicar na prática conceitos de consumo de APIs, gerenciamento de estado assíncrono e construção de interfaces SPA com React.
Pedro Fernandes