[TESTE] Victor Vinicius Tavares - Desenvolvedor Frontend

[VictorTavaress]

📝 Descrição

Aplicação desenvolvida em Next.js seguindo o Design Atômico, utilizando React Query para gerenciamento e cache de dados da API do GitHub.
O projeto permite:

• Pesquisar, filtrar e favoritar (dar estrela) em repositórios
• Visualizar detalhes de um repositório específico sem recarregar dados já armazenados em cache
• Voltar à pesquisa anterior usando query params sem nova requisição à API
• Componentes baseados na biblioteca shadcn/ui para garantir consistência visual
• Testes unitários em componentes e hooks para validar comportamento e evitar regressões

---

🔧 Decisões Técnicas

1. Escolha do React Query

Optei por usar o React Query (TanStack Query) como biblioteca de cache por três motivos principais:

• Comparação com SWR: SWR é simples e performático, mas o React Query oferece mais controle, como invalidação seletiva de cache, prefetching e optimistic updates.
• Comparação com Next.js (fetch/server actions): O fetch do Next é ótimo para SSR, mas para interatividade no cliente e cache persistente o React Query é mais flexível e desacoplado do ciclo de renderização do servidor.
• Benefício chave: Ferramentas de devtools, retry, sincronização em background e suporte nativo a estados complexos de loading, error e success.

---

2. Organização Atômica

Seguindo o Atomic Design, a estrutura foi dividida em:

• Átomos: Botões, inputs, ícones e elementos visuais básicos (baseados no shadcn/ui)
• Moléculas: Combinação de átomos para formar blocos funcionais, como formulários de busca
• Organismos: Partes mais complexas da interface, como a listagem de repositórios
• Templates: Estruturas que definem a organização da página
• Pages: Camada final que integra os templates com dados reais

---

3. Desafios e Soluções

• Cache Persistente & Invalidação:

  • Problema: Quando o usuário dava estrela, o React Query não invalidava o cache automaticamente, causando atraso na atualização visual.
  • Solução: Implementei optimistic updates para atualizar a interface instantaneamente, enquanto a requisição ao GitHub era processada em segundo plano.

• Configuração de Testes:

  • Problema: Pequena incompatibilidade entre o tsconfig.json principal e a configuração necessária para Jest.
  • Solução: Criei um tsconfig.test.json separado apenas para testes, garantindo tipagem correta e sem afetar o build principal.

✅ Checklist de Requisitos

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

🧪 Testes

• Total de testes: 17

• Componentes testados:

  • Button (components/atoms/Button)
  • Input (components/atoms/Input)
  • SearchForm (components/molecules/SearchForm)
  • button (components/ui/button.tsx)
  • input (components/ui/input.tsx)
  • RepositoriesTemplate (src/__tests__/templates/RepositoriesTemplate.test.tsx)

• Hooks testados:

  • useGithubRepos (hooks/useGithubRepos.ts)

• Cobertura total:

  • Statements: 95.16%
  • Branches: 60.52%
  • Functions: 92.85%
  • Lines: 94.91%

---

🚀 Como executar

# 1️⃣ Instalar dependências
yarn install

# 2️⃣ Executar o projeto em modo desenvolvimento
yarn dev

# 3️⃣ Rodar os testes
yarn test

# 4️⃣ Rodar o Storybook para visualizar alguns componentes isolados
yarn storybook

---

⚙️ Configuração necessária (.env)

Antes de rodar as APIs do GitHub no projeto, crie um arquivo .env na raiz com:

NEXT_PUBLIC_GITHUB_TOKEN=ghp_sua_chave_aqui

---

🔑 Onde conseguir seu GITHUB_TOKEN

1. Entre no GitHub e vá em Settings (Configurações)

2. Clique em Developer settings

3. Vá em Personal access tokens > Tokens (classic)

4. Clique em Generate new token (classic)

5. Marque as permissões:

   • repo → necessário para listar e interagir com repositórios
   • public_repo → necessário para dar estrela em repositórios públicos
   • read:user → necessário para obter informações do usuário

6. Copie o token gerado (ele começa com ghp_) e cole no .env

⚠ Importante: Sem marcar public_repo (ou repo no caso de privados) você não conseguirá usar a função de dar estrela nos repositórios.

---

📌 Por que isso é necessário?

• O token autentica suas requisições à API do GitHub
• Sem ele, o limite é de 60 requisições/hora (modo anônimo)
• Com ele, o limite sobe para 5.000 requisições/hora
• Permite acessar dados privados (se autorizado) e dar/retirar estrelas em repositórios

---

📖 Storybook

O projeto conta com Storybook configurado para exibir alguns componentes isoladamente, permitindo testar e documentar visualmente a UI sem precisar rodar toda a aplicação.

yarn storybook

Ele será executado em http://localhost:6006/.

---

🛠 Yarn vs NPM

O projeto foi configurado usando Yarn, por isso é recomendado continuar usando-o para evitar conflitos no lockfile.

• Se você rodar npm install, será criado um package-lock.json que pode gerar inconsistências nas dependências.
• Para manter tudo estável, use sempre yarn install, yarn dev, yarn test etc.

Video de uso

Gravacao.de.tela.de.2025-08-11.18-32-32.webm