Giter Club home page Giter Club logo

green-tiles's Introduction

Green Tiles

๐Ÿ”จ Automatic contribution graph screenshot tool. Enter any github username and return an image of your current contribution graph.

Demo

Screen.Recording.2024-01-03.at.1.13.35.pm.mov

Notes

Today is day 6/366 and represents milestone ๐Ÿ† for a full week of commits starting on the 31st! Thanks to Jason for creating this group and everyone who has been participating - it helps keep me accountable.

Here was the plan for the project I've been working on ๐ŸŒ:

  • Provide a github username as input and recieve current years contribution graph as output.

Problems ๐Ÿซค:

  • Github do not provide a REST api for this data over the web - you have to use a query client like GraphQL.

Solution ๐Ÿ’ญ:

  • Take a screenshot of github profile page and crop the contribution graph. Do this on a server and provide a web interface.

Obstacle-1 ๐Ÿ—ฟ:

  • The contribution graph can be anywhere on the page, depending if the user has pinned repositories or a large README as a bio.
    • Fix: if a user wants to use the tool, they can simply remove the bio and select an offset option (1, 2 or 3) depending on how many pinned repositories they have or provide a custom offset.

Obstacle-2 ๐Ÿ—ฟ:

  • Then came deployment. I ssh'd into a digital ocean droplet, setup the project and dependencies, only to find the chromium browser screeshots were totally different to the one I was testing locally. At this point it came apparrent how much a pain in the ass it would be to manage this - I almost decided to stop working on the project.
    • Fix: Containerised app with docker -> deploy using fly.io

Outcome ๐Ÿฏ:

  • First MVP shipped of the year. Please try it out! A beta link is here:

https://green-tiles-young-field-7129.fly.dev/

If trying to get your green squares over the internet was a poker game, I am folding; I'll let the GraphQL or the scripters win that pot.

green-tiles's People

Contributors

connorkuljis avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.