{"id":50955530,"url":"https://github.com/poferraz/github-stars-visualizer","last_synced_at":"2026-06-18T06:02:27.683Z","repository":{"id":362992713,"uuid":"1261562928","full_name":"poferraz/github-stars-visualizer","owner":"poferraz","description":"Map your GitHub Stars in a nostalgic 90s OS desktop environment, complete with animated force-graphs, mechanical floppy click sounds, and a CRT monitor glow!","archived":false,"fork":false,"pushed_at":"2026-06-06T21:45:19.000Z","size":14586,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-06-06T23:14:03.415Z","etag":null,"topics":["ai","ai-tools","api","canvas-rendering","client-side-ai","cyberpunk","force-graph","gemini","github-stars","interactive-visualizations","mind-map","node","nostalgia","openai","react","retro-os","vite","web-audio-api","windows-95"],"latest_commit_sha":null,"homepage":"https://git-start.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/poferraz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-06T21:27:15.000Z","updated_at":"2026-06-06T21:45:22.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/poferraz/github-stars-visualizer","commit_stats":null,"previous_names":["poferraz/github-stars-visualizer"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/poferraz/github-stars-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poferraz%2Fgithub-stars-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poferraz%2Fgithub-stars-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poferraz%2Fgithub-stars-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poferraz%2Fgithub-stars-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/poferraz","download_url":"https://codeload.github.com/poferraz/github-stars-visualizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/poferraz%2Fgithub-stars-visualizer/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34478108,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-18T02:00:06.871Z","response_time":128,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","ai-tools","api","canvas-rendering","client-side-ai","cyberpunk","force-graph","gemini","github-stars","interactive-visualizations","mind-map","node","nostalgia","openai","react","retro-os","vite","web-audio-api","windows-95"],"created_at":"2026-06-18T06:02:26.952Z","updated_at":"2026-06-18T06:02:27.666Z","avatar_url":"https://github.com/poferraz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"banner.png\" alt=\"GitStars Map - Retro OS Edition\" width=\"100%\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e🕸️ GitStars Map - Retro OS Edition v1.0\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  A nostalgic 90s-2000s desktop operating system environment (styled like Windows 95/98) running inside the browser to explore and map your GitHub Stars, resembling Obsidian's force-directed graph view.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://git-starmap.vercel.app/\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Live_Demo-Try_It_Online-FF5733?style=for-the-badge\u0026logo=vercel\" alt=\"Live Demo\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e⚡ Try it online! Link your read-only token and explore your stars instantly: \u003ca href=\"https://git-starmap.vercel.app/\"\u003egit-starmap.vercel.app\u003c/a\u003e ⚡\u003c/strong\u003e\n\u003c/p\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-19-blue?style=for-the-badge\u0026logo=react\" alt=\"React 19\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Vite-8-646CFF?style=for-the-badge\u0026logo=vite\" alt=\"Vite 8\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Vitest-4-76E1FE?style=for-the-badge\u0026logo=vitest\" alt=\"Vitest 4\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Security-Client--Side-brightgreen?style=for-the-badge\u0026logo=shield\" alt=\"Client-Side Only\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow?style=for-the-badge\" alt=\"MIT License\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"#-features\"\u003eFeatures\u003c/a\u003e •\n  \u003ca href=\"#-security-first-architecture\"\u003eSecurity Architecture\u003c/a\u003e •\n  \u003ca href=\"#%EF%B8%8F-how-it-works\"\u003eHow It Works\u003c/a\u003e •\n  \u003ca href=\"#-getting-started\"\u003eGetting Started\u003c/a\u003e •\n  \u003ca href=\"#-technical-stack\"\u003eTech Stack\u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## 🚀 Features\n\n*   📺 **Nostalgic CRT Monitor Shader:** CSS-driven scanlines, vignetting, phosphor glowing, and subtle flicker filters that can be toggled on/off via the taskbar tray.\n*   🪟 **Draggable Retro Windows:** Multiple windows for Settings, Help, Mind Map Graph, and Properties. Windows support dragging, Z-index focusing, and minimizing.\n*   🔊 **Real-time 8-Bit Audio Synthesis:** Dynamic micro-beeps synthesized on the fly using the Web Audio API (success chirps, error buzzes, click responses, and floppy drive seek clicks during loading).\n*   🤖 **Universal Client-Side AI Router:** Connects directly from your browser to:\n    *   **Google Gemini API** (Free Tier supported natively via AI Studio)\n    *   **OpenRouter** (Aggregated access to free and cheap models)\n    *   **OpenAI** (GPT-4o-mini, custom URLs)\n    *   **Groq** (Llama 3)\n    *   **Custom Endpoints** (e.g., Ollama or custom API proxies)\n*   🛡️ **100% Billing Protection:** Built-in **Local Rate Limiter Security Guard** checks counts in `localStorage` and client-side blocks requests exceeding 15/min or 1500/day. Standard free-tier Google AI Studio accounts will return `HTTP 429` (Too Many Requests) rather than rolling over to billing.\n*   🕸️ **Obsidian-Style Mind Map:** Interactive Canvas 2D force-directed graph rendering repo and category nodes. Stars are sized logarithmically by star counts and color-coded by programming language, connected with animated data stream particles.\n\n---\n\n## 📸 Screenshots \u0026 Artwork\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"readme-poster.png\" alt=\"GitStars Map Promotional Poster\" width=\"100%\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/Screenshot%202026-06-06%20at%2012.41.21%20PM.png\" width=\"48%\" alt=\"Mind Map Setup\" /\u003e\n  \u003cimg src=\"screenshots/Screenshot%202026-06-06%20at%2012.54.34%20PM.png\" width=\"48%\" alt=\"Obsidian style force graph\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"screenshots/Screenshot%202026-06-06%20at%2012.57.22%20PM.png\" width=\"48%\" alt=\"Settings and API Configuration\" /\u003e\n  \u003cimg src=\"screenshots/Screenshot%202026-06-06%20at%2012.58.24%20PM.png\" width=\"48%\" alt=\"Retro CRT scanline filters\" /\u003e\n\u003c/p\u003e\n\n---\n\n## 🔒 Security-First Architecture\n\nWe take privacy and API billing security seriously:\n\n1.  **Zero Server Backend:** No databases, no proxy servers. All API key variables are entered by visitors, saved in their browser's private `localStorage`, and executed directly to GitHub/Google endpoints.\n2.  **No Hardcoded Keys:** Your source code is 100% clean of API keys. No secrets are committed or stored on servers.\n3.  **Local Rate Limiting Guard:** Even if your API keys are loaded, the browser strictly rate-limits requests to protect you from unexpected bill spikes or API bans.\n\n---\n\n## 🕹️ How It Works\n\n```mermaid\ngraph TD\n    User([User's Browser]) --\u003e OS[Retro OS Environment]\n    OS --\u003e Graph[Canvas Force Graph Node Mapping]\n    OS --\u003e Sounds[Web Audio API sound synthesis]\n    OS --\u003e Shader[CRT Post-processing Shader]\n    OS --\u003e Guard[Security Guard Rate Limiter]\n    \n    Guard --\u003e Router[Universal Client AI Router]\n    Router --\u003e |Direct Client Call| Gemini[Google Gemini API]\n    Router --\u003e |Direct Client Call| OpenRouter[OpenRouter API]\n    Router --\u003e |Direct Client Call| OpenAI[OpenAI API]\n    Router --\u003e |Direct Client Call| Groq[Groq API]\n    \n    OS --\u003e |Direct Client Call| GitHub[GitHub API]\n    \n    subgraph Browser Storage\n        Keys[localStorage: API Keys]\n        Cache[localStorage: Star Data \u0026 Limits]\n    end\n    \n    OS -.-\u003e Keys\n    Guard -.-\u003e Cache\n```\n\n---\n\n## 📦 Getting Started\n\n### Prerequisites\n\nYou will need:\n1.  **Node.js** (v18+)\n2.  **Google Gemini API Key** (optional, but needed for AI mapping): Get one for free at [Google AI Studio](https://aistudio.google.com/).\n3.  **GitHub PAT** (optional, recommended): Generate a read-only token for public scopes on [GitHub Settings](https://github.com/settings/tokens).\n\n### Running Locally\n\n1.  Clone or navigate to the directory:\n    ```bash\n    git clone https://github.com/yourusername/github-stars-visualizer.git\n    cd github-stars-visualizer\n    ```\n2.  Install dependencies:\n    ```bash\n    npm install\n    ```\n3.  Launch the development server:\n    ```bash\n    npm run dev\n    ```\n4.  Run unit tests (TDD suite):\n    ```bash\n    npm test\n    ```\n\n---\n\n## 🏗️ Technical Stack\n\n*   **UI Framework:** React 19 + Vite 8\n*   **Graph Renderer:** Canvas-based `force-graph`\n*   **Styling:** Vanilla CSS (retro custom bevels \u0026 layouts)\n*   **Test Suite:** Vitest (15 unit tests verifying rates, routers, and graph builders)\n*   **Sound Synth:** Native HTML5 Web Audio API\n\n---\n\n## 🤝 Contributing\n\nWe welcome contributions! Please read our [Contributing Guidelines](CONTRIBUTING.md) to get started on setting up the local dev environment, styling specifications, and TDD workflow instructions.\n\n---\n\n## 💎 Credits \u0026 Open Source Acknowledgements\n\nThis project was built possible by these fantastic open-source libraries, assets, and inspirations:\n\n*   **Frontend \u0026 Tooling:** [React 19](https://react.dev/), [Vite 8](https://vite.dev/), [ESLint](https://eslint.org/)\n*   **Data Visualization:** [force-graph (HTML5 Canvas)](https://github.com/vasturiano/force-graph) by Vasco Asturiano\n*   **Visualization \u0026 Physics Inspirations:**\n    *   [The R Graph Gallery - Network Analysis](https://r-graph-gallery.com/network.html)\n    *   [Flourish Studio - Network Charts](https://flourish.studio/visualisations/network-charts/)\n    *   [Gephi - Open Graph Viz Platform](https://gephi.org/)\n    *   [RawGraphs](https://www.rawgraphs.io/)\n    *   [DAGitty - Directed Acyclic Graphs](https://dagitty.net/)\n*   **AI Integration:** [@google/generative-ai SDK](https://github.com/google/generative-ai-js)\n*   **Icons:** [Lucide React](https://lucide.dev/)\n*   **Testing Suite:** [Vitest 4](https://vitest.dev/)\n*   **Typography:** [Google Fonts: VT323](https://fonts.google.com/specimen/VT323) (nostalgic pixel font) and [Google Fonts: Courier Prime](https://fonts.google.com/specimen/Courier+Prime) (monospace console font)\n*   **Visual Style \u0026 Retro Design:** Classic Windows 95/98 styling and beveled theme designs.\n\n---\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoferraz%2Fgithub-stars-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpoferraz%2Fgithub-stars-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpoferraz%2Fgithub-stars-visualizer/lists"}