Skip to content

Design Document: GitHub Contribution Graph Studio

Jump to bottom
Ryan Legler edited this page Jan 8, 2024 · 2 revisions

Problem Statement

The GitHub Contributions Calendar react component works great for displaying the github contribution graph on your website. However, there are limitations as it only works with React and customizing the appearance using props can be challenging and unintuitive for some users.

Proposed Solution

Overview

The proposed solution involves creating a standalone web application that allows users to customize the GitHub Contributions graph and obtain an embed code. The web app will provide an intuitive user interface, abstracting the complexities of React development and prop configuration.

Features

  1. User Authentication:

    • No Authentication is needed, Users simply provide the Github username they wish to visualize the graph for.

  2. Customization UI:

    • An intuitive real-time designer UI will allow users to customize various aspects of the graph, such as:
      • Color schemes for contributions on different days.
      • Font styles, sizes, and other design-related properties.
      • Configuration of the year(s) to display.
      • other cool things we come up with...

  3. Preview Panel:

    • Users can see real-time previews of their customizations before finalizing them.

  4. Embed Code Generation:

    • Upon finalizing the customization, users can generate an embed code snippet for their customized GitHub Contributions Calendar.

  5. Embedding Options:

    • Users can choose options related to the embed form-factor and copy the generated code for easy integration into their websites.

  6. Session:

    • The users session (customization choices) will be stored in local storage for later recall and adjustment.

Conclusion

The proposed GitHub contributions graph customization web app aims to provide an accessible solution for developers who want to showcase their contributions on any website, regardless of the technology stack. The intuitive UI and embed code generation will make the process seamless for users with varying technical expertise.

Out of scope (potentially a stretch goal)

  1. User Authentication:

    • Users can sign up or log in to the web app, enabling them to save and manage their customized graph.

  2. Dashboard:

    • Users have a personalized dashboard displaying their saved graphs, recent customizations, and options to create a new graph.
Clone this wiki locally