What I built

I built a site where you can generate and play Tetris based on your GitHub contribution graph.

Category Submission:

• Wacky Wildcards

App Link

• https://gh-tetris.vercel.app/

Screenshots

Description

GH Tetris is a site where you enter your GitHub username, select a year of activity, and then get a playable generated Tetris game from that activity.
 

Link to Source Code

# install dependencies
yarn

# run locally
yarn dev

Permissive License

• MIT

Background

When this was announced, I had no intention of participating, as time and ideas were scarce. Then one evening while on YT shorts I saw this ad and got instantly reminded of the GitHub Contribution graph:

That changed my mind, and I went down the rabbit hole of planning and building.
 

How I built it

OSS really helped a lot during the build process; initially while thinking about this, I had planned to build it all from the ground up in Next.js, but time was the biggest constraint so after some googling and prompt engineering 😉, I found two repositories that were npm packages that helped me a lot:

• GitHub Contributions Canvas
• React-tetris

So with these two I had a solid starting point which allowed me to build fast. I took bits and pieces coupled with my own logic, custom functionalities and UI to create this application.

My biggest pain point while building this was that when I got to production, there was a 504 gateway timeout due to the SSR not being properly optimised in the /[user] route. Trying to fix that took more time than I'd like to admit...at the end of the day, I went with CSR as a hotfix (will attempt refactoring back to SSR after submission).

I added a base development container to the repo to allow potential contributors to test the repository in Codespaces without having to clone/fork the repo.

Additional Info (Future plans)

• Mobile responsive
• Sounds
• And more...

Anyway, I hope you enjoy my submission, have a nice day.