What is this?
This is a tool, purely for fun, to put text and different graphics into a mocked-up Github Contributions Graph (see this if you don’t know what that means). This was a random idea that I had, and wanted to see if it was possible to build from scratch, with minimal component libraries. It ended up working better than I had expected; just take a look below!
Tech Stack and Learning:
Most of what I used to build this was pretty vanilla React stuff:
- Materialize CSS (for styling)
- Canvas API
I also tried to use React Hooks more on this project than I previously have (I’m used to TypeScript Class or JS ES6 Class based components), which required some additional research and self-educating.
For those unfamiliar with the site Github, it is hard to describe the full depth of what they offer, but at its core, Github is a service that developers can use to store their code, as well as track changes and collaborate with other developers.
As a Github user, you get your own profile page (for example, github.com/joshuatz), which you can customize with some links and text. One of the fun features of Github’s profile page is an automated widget, commonly referred to as the Github Contribution Graph. It shows how frequently you have been pushing code through Github, with different intensities of green to signify more activity on a given day. Here is an example: