Create account

DEV Community

Nabil Alamin

Posted on May 23, 2023

Play a Game of Tetris generated from your GitHub

#githubhack23 #nextjs #typescript #react

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

arndom / github-contribution-tetris

Play a game of Tetris generated from your github contribution graph

About GitHub Contribution Tetris 🌟

GitHub Contribution 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. It was built with Next.js and TS, while also taking bits and pieces from npm packages:

Developing locally

# install dependencies
yarn

# run locally
yarn dev

Developing using codespaces

Navigate to the repo link: https://github.com/arndom/github-contribution-tetris and click <>Code then select codespaces and click + to create a codespace with the already provided dev-container

Leave a 🌟 if you found this interesting.

View on GitHub

Permissive License

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:

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.