GitSnap

Project Overview

GitSnap is a Chrome extension designed to enhance your GitHub experience by transforming repository data into visually engaging charts. This is a fun project inspired by the CSS viewer extension that uses the Echarts library to generate various chart types—such as line, pie, and bar charts.

The extension enables users to hover over repository links on GitHub, which triggers the display of dynamic charts showcasing contributor activity, branch statistics, pull requests, and issue tracking in a user-friendly format. This tool is particularly beneficial for developers and project managers who aim to assess repository performance and make informed decisions based on up-to-date metrics.

Technologies

• HTML: Defines the structure of content structure and layout.

• CSS: Styles and presents HTML elements, colors, fonts, and more.

• JavaScript: Adds interactivity to web pages, enabling dynamic functionality and user interactions.

• Web Extension API: A set of APIs that allow developers to create browser extensions, enhancing browser functionality.

• Echarts: A powerful JavaScript charting library for creating interactive, customizable visualizations/charts.

Features

• Custom Toggle Switches: Allows users to custom select the chart to visualize either Contributors, Pull Requests, Issues or Branches, or a combination of any.

• Contributor Insights: View key project contributors with detailed metrics on distribution.

• Pull Request Monitoring: Track the status/trend of open and merged pull requests over time.

• Issue Tracking Visualization: Monitor open and closed issues over time.

• Branch Structure Visualization: Explore branches to understand their relationships and hierarchy within a repository.

Challenges

During the development of GitSnap, I encountered several challenges that enhanced my learning experience:

• Script Integration Issues: Initially, I had difficulty distinguishing between background scripts and content scripts, often using them interchangeably. This confusion led to unexpected results until I clarified their distinct roles.

• Library Integration: I faced difficulties integrating the D3.js library for visualizations. Eventually, I transitioned to Echarts due to its superior documentation and user-friendly interface.

Achievements

This project provided invaluable insights into browser extension development and data visualization techniques.

The GitSnap extension features a straightforward landing page at gitsnap.netlify.app that educates users on its benefits and addresses frequently asked questions. Currently, it boasts approximately 9 active weekly users and improved page impressions.