[TESTE] Daniel Gustavo Favero - Desenvolvedor Frontend

[danielg-favero]

📝 Descrição

Este projeto é uma aplicação web que permite aos usuários pesquisar perfis e repositórios públicos do GitHub.

⚡ Principais funcionalidades

• 🔐 Autenticação social com GitHub via NextAuth
• 👤 Busca de usuários e listagem de repositórios utilizando a API pública do GitHub
• 📂 Página de detalhes para cada repositório, também integrada à API pública
• 📱 Design responsivo, garantindo uma boa experiência em diferentes dispositivos
• ⚡ Cache de requisições com o fetch cache do Next.js, otimizando desempenho e tempo de resposta
• 🌙 Switch de tema (modo claro/escuro)
• 📝 Documentação de componentes usando o Storybook

Links de Deploy

• Deploy
• Chromatic

✅ Checklist de Requisitos

• Design Atômico implementado
• Hooks do React utilizados adequadamente
• Cache implementado: Solução nativa do Next.JS
• Testes unitários incluídos
• TypeScript configurado
• Responsividade implementada

🧪 Testes

• Total de testes: 27
• Componentes testados:
  • Button: atom
  • Input: atom
  • Typography: atom
  • RepositoriesList: template
• Hooks testados:
  • usePagination
• Cobertura estimada: 31%

🚀 Como executar

1. Instale as dependências do projeto

npm install

O projeto utiliza npm como gerenciador de pacotes, caso não tenha instalado na sua máquina siga os passos da Documentação

2. Configure as credenciais do NextAuth

Rode o comando

npx auth secret

Esse comando gera um arquivo .env.local e dentro dele uma chave para criptografar tokens de sessão do NextAuth.

Configure um novo App OAuth no seu perfil do github. Em caso de dúvidas siga a documentação.

Informe os seguintes valores para os campos:

• Application name*: <nome-para-o-app>
• Homepage URL*: localhost:3000
• Application description: <descricao-para-o-app>
• Authorization callback URL*: localhost:3000/api/auth/callback/github

Ao final, clique em Update application. Você será redirecionado para página do seu aplicativo OAuth.

Clique em Generate a new client secret para gerar uma nova chave de acesso.

Copie o ClientID e o Client secret e cole dentro do arquivo .env.local nas seguintes variáveis:

AUTH_GITHUB_ID="<client-ID>"
AUTH_GITHUB_SECRET="<client-secret>"

3. Insira a URL https://api.github.com na variável GITHUB_API_URL dentro de .env.local

GITHUB_API_URL="https://api.github.com"

Ao final, o arquivo .env.example fica:

AUTH_SECRET="<nextauth-secret>"
AUTH_GITHUB_ID="<client-ID>"
AUTH_GITHUB_SECRET="<client-secret>"
GITHUB_API_URL="https://api.github.com"

4. Rode o servidor de desenvolvimento

npm run dev

5. Acesse o endereço localhost:3000 em seu navegador.

📱 Screenshots

• Video Demonstração

🔧 Decisões Técnicas

Next.js

O Next.js foi escolhido como framework principal por sua simplicidade, performance e suporte a recursos modernos, como Server Components e roteamento otimizado via App Router.

Para as chamadas de API, foi utilizado o fetch nativo do Next.js com cache integrado e request memoization, evitando requisições duplicadas desnecessárias e garantindo uma navegação rápida e fluida. Essa abordagem foi escolhida em vez de chamadas do lado do cliente (e.g. SWR e React Query) devido as soluções de cache nativas, performance e tempo de carregamento

Para garantir escalabilidade e manutenção, foi criado um adapter do fetch na camada de /src/infra/http, permitindo que futuramente seja possível substituir por outro cliente HTTP (como Axios) sem impacto no restante da aplicação.

Organização dos Componentes

A estrutura de componentes segue a filosofia Atomic Design, garantindo organização, reuso e manutenção mais simples:

• atoms: Componentes básicos (e.g. Button, Input, Typography) que formam a base para elementos mais complexos.
• molecules: Combinações de atoms para criar elementos funcionais (e.g. Skeletons, EmptyStates, Pagination).
• organisms: Componentes complexos compostos por atoms e molecules (e.g. listagens, seções de página).
• templates: Seções de página completas, responsáveis por lógica de exibição, chamadas de Services, mapeamento e integração de dados. Testes de integração são realizados aqui.
• pages: Páginas completas, incluindo estados como Loading, Error ou Empty. Instanciam Services e tratam parâmetros de rota.

Muitos componentes utilizam o Composition Pattern, permitindo maior flexibilidade e controle na construção da interface.

Essa organização facilita manutenção, escalabilidade e teste dos componentes.

Principais Desafios

Login Social

Implementar o login via GitHub com NextAuth foi um desafio interessante especialmente porque o aplicativo precisava estar envolvido pelo provider do NextAuth. Nos testes, foi necessário mockar métodos do NextAuth para simular autenticação e garantir que os testes funcionassem corretamente.

Essa ideia surgiu quando o número de requisições para a API pública do Github para meu IP hávia acabado.

Paginação de Dados

A API pública do GitHub fornece informações paginadas nos headers das respostas. Foi necessário interpretar esses headers corretamente e integrá-los ao componente Pagination, garantindo que a navegação entre páginas funcionasse de forma consistente.

Decisões Arquiteturais

Definir a arquitetura do projeto exigiu planejamento cuidadoso. Foi necessário:

• Escolher ferramentas e padrões de desenvolvimento;
• Organizar os componentes e separar responsabilidades;
• Garantir que o código fosse escalável, modular e testável.

Essa abordagem garantiu um projeto robusto, com boa performance e fácil manutenção.

⏱️ Tempo Investido

Aproximadamente 30 horas, o que incluiu:

• Inicialização do projeto
• Entendimento da problemática
• Definição da arquitetura
• Separação das atividades e estimativa de esforço
• Desenvolvimento
• Documentação
• Testes unitários
• Teste de integração
• Correção de bugs
• Testes de usabilidade
• Deploy da aplicação
• Deploy da documentação do Storybook