Aplicação para acompanhar repositórios do GitHub e navegar pelas issues de cada um. Você adiciona um repositório pelo caminho dono/nome, ele fica salvo na sua lista, e ao abrir os detalhes é possível filtrar as issues por estado e paginar os resultados.
📸 Adicione aqui um print da tela inicial — de preferência um GIF curto mostrando a adição de um repositório e a navegação até as issues.
- Adicionar repositórios pelo formato
dono/nome(ex.:facebook/react), validando a existência via API do GitHub - Lista persistente: os repositórios salvos continuam lá depois de fechar o navegador, gravados no
localStorage - Bloqueio de duplicatas e feedback visual de erro no formulário quando o repositório não existe ou já foi adicionado
- Spinner durante a requisição, com o botão desabilitado enquanto a busca acontece
- Remoção de qualquer repositório da lista
- Página de detalhes com avatar do dono, nome e descrição do repositório
- Issues com filtro por estado — todas, abertas ou fechadas — e paginação de 5 em 5, incluindo as labels de cada issue e o autor
| Área | Tecnologia |
|---|---|
| Base | React 19 · TypeScript · Vite 7 |
| Compilador | React Compiler (via babel-plugin-react-compiler) |
| Estilos | styled-components |
| Rotas | React Router 7 |
| HTTP | Axios |
| Ícones | react-icons |
Persistência local sem biblioteca. A lista vive no
localStorage, sincronizada por dois efeitos: um lê no primeiro render, o outro grava a cada mudança. UmuseRefcomo flag de primeiro render evita que a leitura inicial seja imediatamente sobrescrita por uma gravação vazia.Validação pela própria API. Em vez de checar o formato do texto digitado, a aplicação tenta buscar
repos/{dono/nome}— se o GitHub responder com erro, o repositório não existe. Menos código de validação e um resultado mais confiável.Requisições paralelas na página de detalhes. Os dados do repositório e a primeira leva de issues são buscados com
Promise.all, para que a tela não espere duas viagens sequenciais até a API.Filtro e paginação no servidor. Ambos são enviados como parâmetros (
state,page,per_page) em vez de filtrar no cliente, o que mantém o payload pequeno independentemente do tamanho do repositório consultado.React Compiler habilitado, o que dispensa boa parte da memoização manual que normalmente seria necessária nas listas.
- Node.js 20+
git clone https://github.com/LuizMath/Repositorios.git
cd Repositorios
npm install
npm run devA aplicação sobe em http://localhost:5173. Não há variáveis de ambiente: a API pública do GitHub é consumida sem autenticação.
ℹ️ Sem token, a API do GitHub limita a 60 requisições por hora por IP. Se a busca começar a falhar de repente, é provavelmente esse limite.
npm run dev # servidor de desenvolvimento
npm run build # checagem de tipos + build de produção
npm run preview # pré-visualiza o build
npm run lint # ESLintsrc/
├── pages/
│ ├── Main/ # lista de repositórios e formulário
│ └── Repositorio/ # detalhes e issues
├── services/api.ts # instância do Axios (api.github.com)
├── styles/global.ts # reset e estilos globais
└── routes.tsx # rotas da aplicação
- Tipar as respostas da API na página de detalhes, hoje ainda em
{}e[]sem tipo - Exibir a mensagem de erro real da API ao usuário, em vez de apenas destacar o campo
- Desabilitar o botão "Próxima" quando não houver mais issues a carregar
- Autenticação opcional com token pessoal, para ampliar o limite de requisições
MIT