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.

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.