GitHuGG is the perfect tool for you to monitor your GitHub, followers, and who you follow in a simple and easy way, available for any browser or operating system via pwa.
O gerenciador perfeito em Progressive Web App (PWA) para monitorar seus seguidores no GitHub de forma simples, rápida e segura.
- Sobre o Projeto
- Funcionalidades
- Tecnologias
- Arquitetura
- Estrutura do Projeto
- Começando
- Scripts Disponíveis
- Qualidade e Segurança
- Contribuindo
- Change Log
- Licença
- Contato
O GitHuGG PWA é uma ferramenta estática desenvolvida em Vanilla JS que ajuda você a monitorar seu GitHub, identificar quem não te segue de volta e gerenciar seus relacionamentos de forma intuitiva, segura e executável em qualquer navegador. A refatoração seguiu os pilares da engenharia moderna: responsabilidade única por arquivo, bounded contexts, e inversão de dependência via contratos tipados.
Este projeto prioriza:
- Zero dependências excessivas no cliente: Lógica leve e rápida em Vanilla JS.
- PWA Ready: Instalação offline como app nativo utilizando Service Worker e Manifest.
- Consumo Direto Stateless: Integração com a API Oficial do GitHub.
🔗 Acesse a Demonstração Ao Vivo
- Monitoramento em tempo real dos seus seguidores no GitHub.
- Identificação clara de quem não te segue de volta e quem você não segue.
- Instalável na tela inicial do seu smartphone ou desktop.
- Funcionamento intermitente garantido com cache responsivo via Service Worker.
- Respostas ágeis utilizando Vanilla JS puro para reatividade do DOM.
graph TD
subgraph "Frontend Engine"
UI[DOM Layout / UI]
CSS[Design Tokens / CSS]
SW[sw.js - Service Worker Cache]
end
subgraph "Core Business"
script[script.js - Reatividade & Orquestrador]
utils[utils.js - Utilitários, Fetching e Prevenção XSS]
end
External[GitHub REST API v3]
UI --> script
script --> utils
utils --> External
External --> script
script --> UI
SW --> UI
| Decisão | Justificativa |
|---|---|
| Vanilla JS | Lógica leve, rápida e sem dependências excessivas no cliente. |
| Vite | Toolchain de build ágil e servidor de desenvolvimento otimizado. |
| PWA | Service Worker e manifest para instalação offline como app nativo. |
| ESLint + Prettier | Verificação de sintaxe rígida e código uniformemente formatado. |
| GitHub REST API | Consumo direto e stateless da API Oficial do GitHub (v3). |
githuggpwa/
├── .github/
│ └── workflows/ # CI pipeline (Lint, Test, Build)
├── public/ # Ativos estáticos e Service Worker
│ ├── sw.js
│ ├── manifest.json
│ └── favicon.png
├── src/
│ ├── css/ # Design Tokens & Atomic Design
│ └── jvs/ # Lógica baseada em ESModules
│ ├── script.js
│ └── utils.js
├── tests/ # Suite de testes (Vitest)
├── index.html # Entry point da UI
├── package.json # Manifest do projeto
└── vite.config.js # Configuração do bundler Vite
Para ambiente de desenvolvimento local, certifique-se de ter:
- Node.js: >= 20.0.0
- NPM: >= 9.x.x
Instalando via repositório local (desenvolvimento):
git clone https://github.com/ESousa97/githuggpwa.git
cd githuggpwa
npm install
npm run devInstalação como Aplicativo Nativo de Desktop / Mobile (PWA Desktop App):
Passo 1 (Web app Chrome): Acesse: https://githuggpwa.vercel.app/
Passo 2 (Clique no botão Instalar na barra de endereços do Chrome e instale):
Passo 3 (Desktop app: Clique em Sim para fixar o ícone na barra de tarefas):
Passo 4 (Desktop app: Como desinstalar com facilidade):
Para a versão online, basta acessar o aplicativo direto no navegador.
📋 Captura de Tela
- Abra o arquivo
index.htmlno navegador ou a URL vercel- Bastando entrar no endereço ou usando o PWA offline instalado.
- Digite seu usuário do GitHub
- Exemplo:
octocat
- Exemplo:
- (Opcional) Adicione um token de acesso
- Necessário apenas se você quiser deixar de seguir usuários.
- Crie um token em:
https://github.com/settings/tokenscom a permissão:user:follow.
- Clique em "Verificar"
- A aplicação irá buscar seus seguidores e quem você segue.
- Deixar de seguir (opcional)
- Se você forneceu um token válido, poderá clicar no botão "Deixar de seguir" para cada usuário que desejar.
- GitHuGG PWA (Desktop)
- Utilize os botões
[about]para visualizar informações sobre o PWA e[guide]para um breve guia na tela de inicio.
- Utilize os botões
| Comando | Descrição |
|---|---|
npm run dev |
Inicia o servidor local com hot reload via Vite. |
npm run build |
Compila arquivos estáticos otimizados para produção na pasta /dist. |
npm run preview |
Visualiza o build de produção localmente. |
npm run lint |
Roda varredura do ESLint para encontrar inconsistências em .js. |
npm run format |
Aplica as regras do Prettier nos arquivos do projeto. |
npm run test |
Executa testes unitários baseados no Vitest. |
npm run validate |
Roda formatadores, linters, testes e compilação em um só comando (recomendado antes de comitar). |
- CI Pipeline: Lint e Testes automáticos em cada Push/PR usando GitHub Actions.
- Formatação Rígida: Combinação de ESLint e Prettier garantindo consistência no código-fonte.
- Segurança Nativa: Prevenção ativa contra injeção XSS implementada via utils puramente funcionais no cliente. O token de acesso provido é usado de maneira efêmera e jamais salvo externamente.
Se você está interessado em contribuir para o GitHuGG, por favor consulte o nosso guia detalhado em CONTRIBUTING.md detalhando padrões de nomenclatura de submissão e code-styles vigentes.
| Version | Version Name | Upgrade Latency |
|---|---|---|
| 0.0.0 | githugg pwa | START APP |
| 0.0.1 | githugg pwa | VERSION VIEWER |
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
José Enoque Costa de Sousa
Valeu por usar githugg pwa. tmj! 💜🧡
Desenvolvido por Enoque Sousa © 2025 (githugg web)
PWA Powered By codebabel © 2025 (githugg pwa)
Status do Projeto: Active