1. Objetivo
Construir uma aplicação web que:
- Busca e mostra dados do perfil do GitHub.
- Lista issues de um repositório e filtra por texto (busca).
- Abre post completo (issue) em rota dedicada.
2. Regras e funcionalidades obrigatórias
- Perfil (header/card)
- Buscar dados na GitHub Users API:
GET https://api.github.com/users/{username}.
- Exibir: avatar, nome, bio, username, quantidade de seguidores e link para o GitHub.
- Lista de posts (issues) + busca
- Criar repositório público e usar suas issues como posts.
- Fazer busca paginada pela GitHub Search API:
- Rota base:
GET https://api.github.com/search/issues?q={query} repo:{username}/{repo}.
- Quando não houver termo, listar as últimas issues do repo.
- Renderizar cards com: título, data relativa, resumo do corpo (primeiras linhas) e metadados (comentários, etc.).
- Campo de busca que reconsulta a Search API (debounce recomendado).
- Post (issue) completo
- Rota dinâmica (ex.:
/post/:number).
- Buscar via GitHub Issues API:
GET https://api.github.com/repos/{username}/{repo}/issues/{number}.
- Renderizar o corpo em Markdown → HTML (ex.:
react-markdown + plugins).
- Cabeçalho do post: título, link “ver no GitHub”, data, autor, contagem de comentários.
- Limites e erros da API
- Tratar rate limit (mensagem amigável e fallback).
- Exibir estados de loading e erro nas requisições.
- Opcional: configurar token pessoal para elevar limites (header
Authorization: token).
- Roteamento e acessibilidade
- React Router (rotas para Home e Post).
- Links e botões com rótulos acessíveis; contraste e foco visível.
- Navegação de retorno (“Voltar”) no detalhe do post.
3. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além 🚀
5. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência?
É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar!
Vai ser incrível acompanhar a sua evolução! 💜
Feito com 💜 por Rocketseat 👋
1. Objetivo
Construir uma aplicação web que:
- Busca e mostra dados do perfil do GitHub.
- Lista issues de um repositório e filtra por texto (busca).
- Abre post completo (issue) em rota dedicada.
2. Regras e funcionalidades obrigatórias
- Perfil (header/card)
- Buscar dados na GitHub Users API:
GET https://api.github.com/users/{username}.
- Exibir: avatar, nome, bio, username, quantidade de seguidores e link para o GitHub.
- Lista de posts (issues) + busca
- Criar repositório público e usar suas issues como posts.
- Fazer busca paginada pela GitHub Search API:
- Rota base:
GET https://api.github.com/search/issues?q={query} repo:{username}/{repo}.
- Quando não houver termo, listar as últimas issues do repo.
- Renderizar cards com: título, data relativa, resumo do corpo (primeiras linhas) e metadados (comentários, etc.).
- Campo de busca que reconsulta a Search API (debounce recomendado).
- Post (issue) completo
- Rota dinâmica (ex.:
/post/:number).
- Buscar via GitHub Issues API:
GET https://api.github.com/repos/{username}/{repo}/issues/{number}.
- Renderizar o corpo em Markdown → HTML (ex.:
react-markdown + plugins).
- Cabeçalho do post: título, link “ver no GitHub”, data, autor, contagem de comentários.
- Limites e erros da API
- Tratar rate limit (mensagem amigável e fallback).
- Exibir estados de loading e erro nas requisições.
- Opcional: configurar token pessoal para elevar limites (header
Authorization: token).
- Roteamento e acessibilidade
- React Router (rotas para Home e Post).
- Links e botões com rótulos acessíveis; contraste e foco visível.
- Navegação de retorno (“Voltar”) no detalhe do post.
3. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além 🚀
5. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência?
É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar!
Vai ser incrível acompanhar a sua evolução! 💜
Feito com 💜 por Rocketseat 👋
