Git Contribs

A heatmap component displaying one's GitHub contributions

Important

👉🏻 Access: https://belapferreira.github.io/github-contributions-collection/.

 

 

Settings   |    Cloning the repository   |    Starting the application   |    Techs | Tools | Resources   |    License

📌 Context

At the end of 2020, during one of the first hiring processes I participated in, the challenge was developing a kind of clone of the GitHub contributions heatmap. I made it, using a library, and the idea was to create it from scratch. And guess what: I didn't move forward in the process 😅.

Earlier this year (2024), I was assigned to implement the components of a profile page, one of which was a heatmap. This time, as I improved my skills, I could build it from scratch.

And I just wanted to reproduce part of that here as a way to say to my past self thank you for keeping going and to my current, and fortunately to my future self, never stop learning! 🍀💙

⚙️ Settings

The settings to execute the application on your computer are listed below.

• Git;
• Node;
• Yarn.

🔽 Cloning the repository

1. Through the terminal, go to the directory where you want to have the repository cloned and run the following command:

# cloning the repository
git clone https://github.com/belapferreira/github-contributions-collection

🔰 Starting the application

1. Open the code of the repo cloned, create a .env.local file and add the variables NEXT_PUBLIC_GITHUB_GRAPHQL_API_URL and NEXT_PUBLIC_GITHUB_TOKEN (the GitHub GraphQL API URL is https://api.github.com/graphql and the token you must generate one).

2. Through the terminal, go to the directory where the repository was cloned and run the following command:

# installing dependencies
yarn install

# starting application
yarn dev

🔧 Techs | Tools | Resources

This project was developed using the following resources:

Date FNS | Eslint | Lucide React | Next.js | Prettier | Radix UI | Tailwindcss | TypeScript

📝 License

This project is under MIT license. See LICENSE for more information.

---

Developed by Bela Ferreira 💙 Contact: https://www.linkedin.com/in/belapferreira 😊