GitHub API — Get Your Stats Easily
Most of GitHub’s API from what I can tell is kind of a pain to use. However, when it comes to getting a user’s information its fairly straight forward. No API key or backend needed. It can be called client side and actually has some great presentational value. I used it to just get my stats, but you can in reality get any user’s stats on the platform.
Now, I used the HTTP package Angular provides by default, but for this example I’ll just use the fetch API and some good old Vanilla JavaScript for simplicity sake.
The base url for Github is fairly straightforward and so is the user info route. We simply need to supply the user name in our fetch call.
const baseUrl = 'https://api.github.com';async function getGithubUserInfo(userName) {
try {
const response = await fetch(`${baseUrl}/users/${userName}`);
const json = await response.json(); return new GithubInfo(json);
} catch {
// notify user of error
}
}
Now, I always like to map my data out. The Github API provides quite a bit of data on a user and not all of it follows camel case convention. Nor, is all of it really relevant to me. I like to always assign defaults in my models as it makes testing items down the road easier.
I only care about three properties.
- followers: total follows on the user account
- public_repos(publicRepos): how many repos the user is publically has
- html_url(profilePage): the link to the user’s profile page
export class GithubInfo {
public followers;
public profilePage;
public publicRepos;constructor(data = {}) {
this.followers = data.followers || 0;
this.publicRepos = data.public_repos || 0;
this.profilePage = data.html_url || '';
}}
I’ll include a JSON of all the properties available to just “git” (see what I did there lol) an idea of what the API can return. Some items to note is you can retrieve: company, profile photo, description, your blog url, your followers, and it includes some links to other aspects of the API such as your followers information.
{
"login": "PizzaPokerGuy",
"id": 14266817,
"node_id": "MDQ6VXNlcjE0MjY2ODE3",
"avatar_url": "https://avatars.githubusercontent.com/u/14266817?v=4",
"gravatar_id": "",
"url": "https://api.github.com/users/PizzaPokerGuy",
"html_url": "https://github.com/PizzaPokerGuy",
"followers_url": "https://api.github.com/users/PizzaPokerGuy/followers",
"following_url": "https://api.github.com/users/PizzaPokerGuy/following{/other_user}",
"gists_url": "https://api.github.com/users/PizzaPokerGuy/gists{/gist_id}",
"starred_url": "https://api.github.com/users/PizzaPokerGuy/starred{/owner}{/repo}",
"subscriptions_url": "https://api.github.com/users/PizzaPokerGuy/subscriptions",
"organizations_url": "https://api.github.com/users/PizzaPokerGuy/orgs",
"repos_url": "https://api.github.com/users/PizzaPokerGuy/repos",
"events_url": "https://api.github.com/users/PizzaPokerGuy/events{/privacy}",
"received_events_url": "https://api.github.com/users/PizzaPokerGuy/received_events",
"type": "User",
"site_admin": false,
"name": "Dylan C. Israel",
"company": "Amazon",
"blog": "https://www.YouTube.com/CodingTutorials360",
"location": "Florida",
"email": null,
"hireable": true,
"bio": "I teach tens of thousands of students monthly about web development.",
"twitter_username": "PizzaPokerGuy",
"public_repos": 53,
"public_gists": 4,
"followers": 913,
"following": 2,
"created_at": "2015-09-14T01:42:20Z",
"updated_at": "2021-01-23T23:14:34Z"
}That’s really all there is to it. When working with all API documentation its always kind of a pain to find the information you are looking for. GitHub’s is no different. You can check it out on my website (no judgements as it is a work in progress and mainly for small projects and course redirects). The code for the Angular component and my site is on my GitHub as well if you don’t feel like creating your own.
It’s also worth mentioning that though I have created dozens of courses and video content. This is my first blog really so feel free to give advice in the comments on how to improve please.
