GitHub Connection Visualizer is an open-source web application designed to help developers and GitHub users explore and understand their network of followers and followings in a structured and secure way. Unlike typical follow/unfollow scripts, this application focuses on visualization, exploration, and data management, empowering users to identify meaningful connections and manage their network more effectively without compromising privacy or security.
The application integrates with the GitHub API to fetch user follower and following data. To comply with GitHub’s API limitations, the app introduces a Data Scanning Monitor that displays request usage in real time, ensuring smooth operation within the 60-requests-per-hour limit. For accounts with fewer than 6.0k (6,000) followers/followings, data scans can be completed within a single hour. For larger networks, the application uses a special approach to resume scanning and ensures continuity by combining monitored requests with the backup/restore system.
Connections are automatically analyzed and classified into four categories:
- Unfollowers: People you follow, but they do not follow you back.
- Fans: People who follow you, but you do not follow them back.
- Mixed Connections: Only shows Unfollowers and Fans.
- Settled Connections: People where you both follow each other.
This structured filtering allows users to focus on managing their GitHub relationships based on real needs.
User data is never stored on external servers. Instead, the app provides a fully encrypted backup mechanism. Each backup file is encrypted with a randomly generated passphrase that the user can copy and save securely. To restore data, the exact same passphrase must be provided. This ensures that only the intended user can access their backup file, preventing unauthorized use or tampering.
Backup files include metadata such as versioning and app identification, ensuring compatibility across different releases of the application. The app automatically generates a new passphrase after every download to avoid accidental overwrites or confusion.
Passphrases are automatically generated by the application to guarantee high entropy and eliminate user-side errors. A dedicated “copy to clipboard” feature allows users to store the passphrase safely. Since the strength of the passphrase is managed by the system, users do not need to worry about password complexity or weakness.
To restore a backup, the user follows a simple and secure workflow:
- Verify the GitHub username associated with the backup.
- Upload the encrypted backup file.
- Provide the correct passphrase.
- Run the decryption process to recover all previous data, including followers, followings, and progress markers.
If mismatches occur due to wrong usernames, modified files, or incorrect passphrases, inline error messages clearly guide the user on what went wrong.
Backups are account-bound. If a user attempts to restore a backup file belonging to another GitHub account, the system blocks the process and displays a clear error message. This prevents cross-account misuse and ensures data integrity.
Unlike other tools, GitHub Connection Visualizer does not require personal access tokens or user authentication. All data retrieval happens directly through the GitHub public API. Since no tokens are collected, the application cannot provide direct actions like "follow" or "unfollow" within its UI. Instead, for each user entry, the app provides quick-access buttons to their Profile and Repositories, allowing users to take action directly on GitHub if they are logged into their account in the browser.
The application uses a clean, dark-themed design with subtle glassmorphic effects to create a modern, professional appearance. Special attention has been given to usability, including inline error messages, tooltips, popovers with contextual instructions, and responsive layouts. While the app blocks use on small screens to ensure clarity, all desktop interactions are optimized for accessibility and ease of use.
This tool introduces several advanced workflows, such as encrypted backup/restore and structured data scanning. To support users, the application includes:
- Detailed inline instructions directly within the interface.
- Info buttons for each major section that provide contextual help.
- Consistent tooltips to explain terminology and actions.
Users are strongly encouraged to follow these in-app guides to achieve the best experience and avoid common mistakes. The combination of detailed instructions and intuitive UI ensures that even new users can effectively learn how to use the tool.
The application follows a modular and maintainable design, inspired by enterprise-level principles and built using a fully object-oriented approach. Rather than scattering logic across isolated functions, all functionality is encapsulated within well-structured classes that clearly separate responsibilities. This improves maintainability, scalability, and readability while allowing future contributors to extend the system without breaking existing functionality.
Key highlights include:
-
Object-Oriented Structure: Core features such as data scanning, filtering, backup/restore, and UI rendering are implemented as dedicated classes, each with clearly defined responsibilities. Encapsulation ensures internal details remain hidden while exposing only necessary methods to the rest of the system.
-
Singleton Pattern in ComponentRenderer: To avoid performance overhead from repeatedly querying the DOM, the
ComponentRendererclass follows the Singleton pattern. It maintains private references to frequently updated elements (such as the copyright date, filters, and notification containers), ensuring efficient and consistent UI updates throughout the application. -
Page-Specific Modules: Each page (main app, privacy policy, terms of use) loads only the scripts relevant to its needs. For example,
app.jsmanages the scanning logic and interactive features, whileprivacy.jsandterms.jsprovide lightweight event handling limited to those pages. This prevents unnecessary code execution and improves page performance. -
Data Scanning Monitor: Implemented as an independent component, the monitor tracks API usage and scanning progress. Its modular design means it can be extended to support additional APIs or monitoring rules in the future without impacting other modules.
-
Backup and Restore Engine: The encryption and file-handling logic is encapsulated in its own class. It provides methods for securely generating passphrases, encrypting/decrypting user data, and validating account ownership. This ensures the backup system remains isolated from UI logic and can evolve independently.
-
Error Handling and Messaging Layer: Instead of embedding raw error messages into the logic, the system uses structured methods to display context-aware inline notifications. This design centralizes error handling, keeps the UI consistent, and makes debugging simpler.
Together, this architecture mirrors enterprise-grade software design principles while keeping the project lightweight and accessible. The strong emphasis on object orientation ensures the application can grow over time without introducing unnecessary complexity.
A high-level architecture diagram can be included here to illustrate the flow between UI Components, Data Scanning Monitor, Backup/Restore Engine, and GitHub API interaction.
Security and privacy are core principles of GitHub Connection Visualizer:
- No personal access tokens are required or stored.
- All backups are encrypted locally and never uploaded to any server.
- Backups are account-specific and cannot be decrypted by other users.
- The app is fully open source, allowing the community to verify and improve the code.
This application is governed by a dedicated Privacy Policy and Terms of Use. These documents explain how data is handled, user responsibilities, and the limitations of the tool.
Please review these pages before using the application.
- Clone the repository and open the project in your preferred code editor.
- Serve the application locally with a static server or deploy via GitHub Pages.
- Open the application in a desktop browser.
- Begin by entering a GitHub username, scanning connections, and exploring results.
This project is licensed under the MIT License. Contributions are welcome.