Entrevistas de design de sistemas frontend

Entrevistas de frontend para nível sênior pedem que você projete um recurso de interface não trivial de ponta a ponta: feed de notícias, preenchimento automático, galeria de imagens e painel com rolagem infinita. Elas avaliam arquitetura, percepção dos compromissos, intuição para desempenho e comunicação — não conhecimentos triviais sobre frameworks.

A maioria das entrevistas de 45 a 60 minutos segue esta estrutura: 1) Esclarecer os requisitos (5 min). 2) Esboçar a arquitetura de alto nível (10 min). 3) Decompor os componentes (10 min). 4) Buscar dados + estado (10 min). 5) Desempenho + acessibilidade (10 min). 6) Aprofundar uma área (à escolha do entrevistador).

Não comece a programar. Pergunte: quais dispositivos são o alvo? haverá login ou uso anônimo? haverá suporte sem conexão? atualizações em tempo real? qual é a escala esperada (10 usuários ou 10 milhões)? quais são os requisitos de acessibilidade? quais navegadores serão compatíveis? São decisões que repercutem em todo o projeto.

Desenhe os blocos: cliente (SPA ou SSR?), gateway da API, serviços, cache e CDN. Indique as ações do usuário e o fluxo de dados. Mencione os casos extremos logo no início — isso mostra que você já criou sistemas reais.

Esboce uma hierarquia de componentes. NewsFeed → Header, Story[], Composer. Story → Avatar, Content, Actions, Comments. Identifique quais componentes são reutilizáveis e quais são específicos do recurso.

Onde cada parte do estado fica? Local (useState), URL (router), estado do servidor (React Query) ou estado do cliente (Zustand)? Discuta a estratégia de busca: SSR inicial, rolagem infinita, atualizações em tempo real por WebSocket e interface otimista.

Divisão de código nos limites das rotas. Listas virtualizadas para feeds longos. Otimização de imagens (carregamento tardio + AVIF/WebP). Evite bloquear a linha de execução principal. Orçamentos do empacotamento. SW com prioridade para o cache em visitas repetidas.

HTML semântico. Navegação por teclado. Funções ARIA e regiões dinâmicas. Contraste de cores. Testes com leitor de tela. Pontos extras: mencione o gerenciamento do foco durante a mudança de rota.

Discuta: rolagem infinita com IntersectionObserver, virtualização para economizar memória, curtidas otimistas, indicador em tempo real de novas publicações, carregamento tardio de imagens com espaço reservado desfocado, SSR para SEO e cache de borda com ISR para linhas do tempo populares.

Discuta: entrada com atraso, AbortController para cancelar solicitações obsoletas, deduplicação de solicitações, cache de respostas (LRU), navegação por teclado (cima/baixo/Enter/Escape), funções ARIA de combobox e tratamento do teclado virtual móvel.

Discuta: layout em mosaico versus grade, srcset responsivo para telas retina, carregamento tardio baseado em interseção, pré-carregamento da próxima imagem, lightbox/modal com captura de foco, gestos de deslize em dispositivos móveis, navegação pelas setas do teclado e links diretos.

Para cada escolha, mencione a alternativa e explique por que escolheu uma delas. 'Eu usaria IntersectionObserver para o carregamento tardio porque ele é nativo e eficiente. Alternativa: um ouvinte de rolagem com limitação de frequência — mais simples, mas menos fluido em CPUs lentas.' É isso que os entrevistadores de nível sênior valorizam.

1) Começar a programar antes de esclarecer os requisitos. 2) Ignorar a acessibilidade. 3) Esquecer os estados de erro (falha de rede, resultados vazios). 4) Não pensar nos estados de carregamento. 5) Dar respostas vagas ("Eu usaria React" — qual arquitetura?).

Pedem que você projete uma caixa de pesquisa com preenchimento automático em uma entrevista de projeto de sistemas. Qual é a primeira coisa que você deve fazer?

Esclareça primeiro o escopo. Arquitetura de alto nível (cliente, API, cache e CDN). Árvore de componentes. Localização do estado (local, URL, cache do servidor ou global). Estratégia de busca de dados. Desempenho (dividir o código, virtualizar e otimizar imagens). Acessibilidade (teclado, ARIA e contraste). Comunique os compromissos. Evite começar pelo código. Pratique padrões clássicos: feed, preenchimento automático, galeria e painel.