Este desafio consiste em aprimorar uma página de listagem de produtos que contém um campo de busca conectado ao backend.
Seu objetivo será identificar problemas reais enfrentados em produção e aplicar melhorias significativas na experiência do usuário, na performance da página e na qualidade do código.
Você irá trabalhar sobre uma base existente, com foco em:
- Melhorar o desempenho da aplicação
- Corrigir comportamentos problemáticos
- Evoluir a experiência do usuário (UX/UI)
- Escrever código limpo e testável
A funcionalidade de busca de produtos é o principal foco deste teste.
Essa funcionalidade está gerando sobrecarga no servidor em situações de alto tráfego. Esperamos que você identifique a origem do problema e aplique uma solução eficaz e escalável.
- Um layout inicial com grid de produtos
- Um campo de busca funcional (mas com problemas)
- Componentes prontos para estilização e refatoração
Esperamos que você:
- Corrija o problema de sobrecarga no servidor
- Identifique e corrija problemas de performance e UX
- Aplique boas práticas de HTML, CSS e TypeScript
❗ Existem falhas específicas no código atual que impactam diretamente a experiência e performance. Parte do desafio é percebê-las e solucioná-las por conta própria, mas se tiver alguma dúvida estamos aqui para ajudar.
- Foque em qualidade de entrega e atenção aos detalhes.
- Documente suas decisões técnicas.
- UX e performance são tão importantes quanto o código em si.
- Evite overengineering — soluções simples e bem feitas são mais valiosas do que complexidade desnecessária.
- Clone este repositório
- Instale as dependências com
npm installouyarn - Inicie o projeto com
npm run devouyarn dev
Boa sorte! Qualquer dúvida, estamos à disposição.