Pular para conteúdo

Projeto 04 – Explorador de Repositórios do GitHub 🐙

Neste projeto, você vai construir uma aplicação real que consome a API oficial do GitHub para listar os projetos de qualquer usuário.

🎯 Objetivo

Dominar o consumo de APIs (Fetch), manipular estados assíncronos e utilizar o useEffect para sincronização de dados.

🛠️ Requisitos

  • Uso de useEffect para busca inicial.
  • Uso de fetch para chamada de API.
  • Gerenciamento de estados de: loading, error e data.
  • Interface organizada para exibir os repositórios.

📝 Passo a Passo

1. Preparação da API

A URL base será: https://api.github.com/users/[NOME_USUARIO]/repos.

2. Estados Iniciais

No seu componente principal, crie: 

const [repos, setRepos] = useState([]);
const [loading, setLoading] = useState(true);

3. Chamada Assíncrona

Crie uma função carregarRepositorios dentro do useEffect. - Use try/catch para capturar erros de rede. - Converta a resposta para JSON. - Salve no estado repos e mude loading para false.

4. Interface Reativa

  • Exiba um spinner ou texto "Carregando..." enquanto o estado for true.
  • Use o .map para listar repo.name e repo.html_url.
  • Estilize a lista usando CSS Grid ou Flexbox.

✅ Critérios de Entrega

  • A página deve carregar repositórios reais do seu próprio GitHub ao abrir.
  • Deve haver um tratamento básico de erro (ex: Usuário não encontrado).
  • A lista deve ser clicável e levar para o repositório original.

Limite de Taxa

A API do GitHub tem um limite de requisições por hora para usuários não autenticados. Se parar de funcionar, aguarde alguns minutos!