Frontend até
Cinedash
Interface de alta performance para descoberta de filmes entregue sob um prazo de sete dias.
Visão geral de engenharia & posicionamento
Um frontend de descoberta de filmes que combina estado tipado na URL, queries infinitas, renderização virtualizada, estado persistente do usuário, estados explícitos de interface, testes automatizados, CI e deploy na Cloudflare Pages.
Arquitetura do fluxo de dados & estados
Query params da URL
Estado navegável do roteador
TanStack Query
Cache do servidor & prefetch
Store Zustand
Favoritos persistentes
TanStack Virtual
Renderização da viewport no DOM
Sequência de execução:Parâmetros de busca da URL ➔ Busca & deduplicação com TanStack Query ➔ Grid virtualizado da viewport ➔ Persistência Zustand
Foco de engenharia & temas centrais
- Atribuição de cada forma de estado a um mecanismo compatível com seu ciclo de vida
- Representação de busca e filtros como estado de produto navegável na URL
- Renderização virtualizada para manter o custo proporcional à viewport à medida que as coleções crescem
- Tratamento de carregamento, falha e ausência como estados explícitos da interface
- Combinação de amplo escopo de engenharia com testes rigorosos sob prazo restrito
Principais trade-offs & decisões de engenharia
- Separação do estado de busca via URL (TanStack Router) dos filtros temporários da UI e favoritos persistentes (Zustand)
- Uso do TanStack Virtual para manter o custo de renderização proporcional à viewport visível à medida que o catálogo cresce
- Prefetch baseado em intenção nos cards de filmes para tornar as transições de rota mais fluidas e reduzir o atraso percebido
- Configuração de mocks de rede com MSW para simular comportamento realista da rede, estados de loading e cenários de falha durante os testes
Evidências de implementação verificadas
- O repositório contém 77 arquivos de especificação com Vitest, React Testing Library e MSW
- Estados explícitos de interface para loading, skeleton, erro, vazio e conteúdo preenchido
- Busca, ordenação, paginação e sincronização de rota nos favoritos
- Busca de filmes com debounce e deduplicação entre páginas de query infinita
Stack tecnológica verificada
- React 19
- Vite
- TypeScript Estrito
- TanStack Query
- TanStack Router
- TanStack Table
- TanStack Virtual
- Persistência Zustand
- React Hook Form
- Zod
- Tailwind CSS
- Vitest & RTL
- MSW
- Cloudflare Pages
Escopo do projeto
- A autenticação é simulada, enquanto a descoberta de filmes é integrada ao TMDB. A implementação foca em arquitetura frontend, coordenação de estado remoto, filtros navegáveis, renderização escalável de coleções, favoritos persistentes e estados explícitos de interface.