Project 1 - GitHub Stats GUI

This guide is a straightforward introduction to creating a GitHub Stats GUI for those new to the concept.

Although could be argued we are not technically creating/coding an application from scratch, we are technically still creating and deploying an application!

From creating our personal key to access API to then deploying our product on our Github, there's no shortage of development, and we will indeed be left with a final ReadME statistics application which will constantly run and display our GitHub Stats!

This section focuses on how to use GitHub's APIs to fetch and display your coding activity statistics dynamically on your GitHub profile.

It will guide you through setting up a visualization of your GitHub statistics, enhancing the visual appeal of your GitHub profile.

In simple terms, we need a setup to visually represent our GitHub activity, showcasing various statistics such as commits, pull requests, and most used languages. By the end of this introduction, you will have a dynamic GitHub Stats GUI displayed on your profile.

Software Setup

In this section, we'll outline all the software components required for the project. This includes:

GitHub Account: Ensure you have a GitHub account where you can modify your profile README.
Text Editor: Any modern text editor like VS Code, Atom, or Sublime Text for editing your README file.
Markdown Knowledge: Basic understanding of Markdown used to format README files.

Knowledge Prerequisites

To successfully complete this project, it's recommended to have a basic understanding of the following:

Using GitHub: Ability to navigate through GitHub and understand its basic functionalities.
Markdown Editing: Familiarity with Markdown for editing README files on GitHub.
Understanding API Usage: Basic knowledge of how APIs work to fetch data dynamically (optional but helpful).

Difficulty Rating

Very Easy Difficulty

Project Time!!!

Done

Ensure you have a repository named after your username on GitHub. Inside, create a README.md file that will be visible on your GitHub profile.

Done

Visit the [github-readme-stats](https://github.com/anuraghazra/github-readme-stats) repository.
Simply change the value assigned to ?username which we have convieniently underlined to your username:

[![Stezzly's GitHub stats](https://github-readme-stats.vercel.app/api?username=Stezzly)](https://github.com/anuraghazra/github-readme-stats).

Then paste this code into your README.md just created.

Voila! You have successfully added a GitHub stats display! But why are the stats so bad? Well, this could be because either you simply have bad stats, or your private stats are not showing

This is where we must integrate API

Done

To display our private statistics we much connect our account through API so that our personal information can be accesed. Dont worry, we will still be deploying ourself on a trusted platform called Vercel

Vercel is a wonderful tool which we will be using to host and deploy our own Web application. Earlier when we seen our GitHub Stats GUI it was being generated from another host that someone else deployed. Even though it displayed our statistics, we were not the ones actually creating the statisical or visual generation. Rather, we were stealing both code and processing power from the wonderful anuraghazra.

We will still continue to steal code... but we will step up our own server on Vercel to then run this code.

Here, you can find a wonderful guide by anuraghazra. Simply click the 🛠️ Step-by-step guide on setting up your own Vercel instance drop down, and follow along step by step. Once you are complete, return here as the following steps to complete the project on anuraghazra's github are vaugue.

First, we want to check that our server has successfully deployed. We can go back over to Vercel and check the our github-readme-stats project which we have created. The status should show ready. If not, you must go back and properly redeploy the project

If the project is ready, then it means then you are good to go. Now we simply just need to replace the server link to be our own.

To do this we need to get our link from our deployed project on Vercel. If we go back over to our project where we verified the ready status earlier, we can see there is also a Domains section which lists a url.

This is the URL we will be using to connect to our newly deployed server

Simply take the code we had in our ReadME.md eariler and replace the underlined with your server domain URL: [![Stezzly's GitHub stats](https://github-readme-stats-khaki-kappa.vercel.app/api?username=Stezzly)](https://github.com/anuraghazra/github-readme-stats)

What we have just done is linked our server which has access to our private GitHub API in our Markdown. Just like that, we have a GUI to quickly and visually show our GitHub Stats

Done

What if this UI doesn't represent you? Well, you can customize the appearance of your GitHub stats by modifying the URL parameters such as `theme`, `show_icons`, etc., in the Markdown code to match your style.

I personally like the name and look of the tokyonight them therefore I will go with that one.

Here's how it looks: [![Stezzly's GitHub stats](https://github-readme-stats-khaki-kappa.vercel.app/api?username=Stezzly&theme=tokyonight)](https://github.com/anuraghazra/github-readme-stats)

Done

It is likely that you were commiting along the way, and if you were good for you. It's good to test along the way so problems don't back and stack up.

Here is where we make can add any final touches to our project. For example the total commits by defaults shows the total yearly commits, I would also like to showcase my total commits of all time. Unfortunately, it seems this is broken, as well as the commit count in general. Using this argument changes the text heading but does not update the count. Will have to delve deeper and look at docs to help fix.

We can simply add &include_all_commits = true after the user name to specify argument

Take one final last look and preview the changes on your GitHub repository to ensure everything looks good and is well personalized to your liking then commit the changes to save the updated README with your GitHub stats displayed and complete the project.

App Development - Project 1

Project 1 - GitHub Stats GUI

Software Setup

Knowledge Prerequisites

Difficulty Rating

Very Easy Difficulty

Project Time!!!

Congratulations you now have a pretty visual representation of your Github stats and are ready to really show the world your skills as a coder!

Additional Resources