DEV Community

Cover image for Play a Game of Tetris generated from your GitHub
Nabil Alamin
Nabil Alamin

Posted on

13 4 3 4 2

Play a Game of Tetris generated from your GitHub

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

Screenshots

Game Select Screen

Game Piece Screen

Game screen

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

GitHub logo arndom / github-contribution-tetris

Play a game of Tetris generated from your github contribution graph

demo

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
Enter fullscreen mode Exit fullscreen mode

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.






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:

Inspiration

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.

Additional Info (Future plans)

  • Mobile responsive
  • Sounds
  • And more...

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

End GIF

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (7)

Collapse
 
timotej_avsec profile image
Timotej Avsec

Ok, this is epic :D

Collapse
 
mxhdiqaim profile image
mahdi

Epic 😱

Collapse
 
dyaskur profile image
Muhammad Dyas Yaskur

Amazing, epic submission.
I just played and remember my childhood.
gh-tetris.vercel.app/dyaskur?year=...

Collapse
 
vulcanwm profile image
Medea

this is amazing!

Collapse
 
jaded_developer profile image
jade

Nabil you're too cool fr

Collapse
 
arndom profile image
Nabil Alamin

Thanks jade

Collapse
 
pizofreude profile image
Pizofreude

Goodness gracious, this is oh-may-zink.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay