[TESTE ] Jorge Madson Santos Viana - Desenvolvedor Frontend

[JorgeMadson]

📝 Descrição

Site de busca no github implementado usando SWR e fetch do Next.js para cache.
Usei a biblioteca NUQS que salva o estado na URL assim a pessoa pode compartilhar o link e já vir com estado da aplicação conforme ela deixou.
O foco foi performance e user experience, dois atributos muito importantes para ecommerces.
Pois uma página rápida ranqueia melhor e um site fácil de usar converte melhor.

✅ Checklist de Requisitos

• Design Atômico implementado
• Hooks do React utilizados adequadamente
• Cache implementado ( SWR e Next.js)
• Testes unitários incluídos
• TypeScript configurado
• Responsividade implementada

🧪 Testes

• Total de testes: 79

• Componentes testados:

  • error.tsx
  • button-atom
  • input-atom
  • back-link
  • pagination-controls
  • repo-dates
  • repo-stats
  • repo-details
  • badge.tsx
  • button.tsx
  • card.tsx
  • input.tsx

• Hooks testados:

  • useDebounce.ts
  • useGitHubSearch.ts
  • useKeyboardNavigation.ts

• Cobertura estimada: 90%

🚀 Como executar

Usei pnpm pois acho ele rápido e ocupa menos espaço no disco.

# Comandos para instalar e executar
pnpm i
pnpm dev
pnpm test

📱 Screenshots

test-sizebay.mp4

🔧 Decisões Técnicas

Explique brevemente suas principais decisões arquiteturais:

• Por que escolheu determinada biblioteca de cache
  • O SWR é menor e ideal para cache mais pontuais. Como só temos uma chamada client side, achei que valia a pena usar. Outras bibliotecas como o react query são bem maiores e com mais funcionalidades. E next.js já tem o fetch com cache nativamente. Então menos dependências são necessárias no projeto.
• Como organizou os componentes atômicos
  O conteúdo do README ajudou bastante, segui bem as dicas e fui fazendo do menor para o maior, respeitando a hierarquia:
  atoms → molecules → organisms → templates .
• Desafios encontrados e soluções

1. Gerenciamento de Estado na URL
   • Desafio: Usando o estado de busca localmente funciona, mas queria que fosse possível compartilhar links com o estado da aplicação.
   • Solução: Refatorei para usar NUQS, que sincroniza o estado com a URL e permite compartilhamento de links.
2. Navegação de Volta Inconsistente
   - Desafio: O botão de volta estava retornando para a página home limpa, perdendo o contexto da busca
   - Solução: Implementei lógica de voltar pelo router ao invés de voltar por link, mantendo o contexto do usuário
3. Acessibilidade e Navegação por Teclado
   - Desafio: Aplicação não era acessível para navegação por teclado
   - Solução: Um hook customizado useKeyboardNavigation e suporte completo a navegação por teclado, incluindo foco visual e ARIA labels
4. Testes com Mocks Complexos
   - Desafio: Testar hooks customizados e componentes que dependem de APIs externas
   - Solução: Mocks detalhados para a GitHub API e usando React Testing Library para testar comportamentos de loading,
   erro e sucesso

⏱️ Tempo Investido

Aproximadamente 5 horas.