GitHub issues API tutorial

Hello friend ✋ and welcome to this tutorial. Let’s build a simple web application by learning the fundamentals of the GitHub API and then display dynamic data to the front-end!

But first, do you know what it is GitHub? or an API? and how to consume it?

Well, don’t worry 😅 we’ll learn together what are all this sophisticated concepts. And you’ll figure it out that isn’t has hard as it looks like. So let’s start! 😉

What is it GitHub?

GitHub is one of the best ways to collaborate on software and discover new projects using Git, the popular Version Control System (VCS).

Git helps you keep track of the changes you make to your code. It is basically the history tab for your code editor

GitHub has also created an awesome API for us to build applications with, and the good news is that it’s really easy to get started.

An API for a website is code that allows two software programs to communicate with each other. The API spells out the proper way for a developer to write a program requesting services from an operating system or other application.

Using the GitHub API

GitHub’s API makes it nice and simple to put together a request that will return a GitHub repository issues list and all of the corresponding data for each issue.

A repository a.k.a. repo is nothing but a collection of source code.

This example below will give us the first 30 issues for the repo octocat/hello-world (copy and paste this url into your browser)

https://api.github.com/repos/octocat/hello-world/issues

This is an API endpoint that GitHub has provided that allows us to return the issues for a specified repo in JSON format. In this case, you should see something similar to this below:

JSON is a standardized format commonly used to transfer data as text that can be sent over a network. It represents objects as name/value pairs

So now that we are less loss in all this fancy terminology, lets start to do some code. Are you ready?

Setup a Connection to GitHub’s API Server

So we need to request or consume the info that our previous endpoints give us back. And for that we will use the fetch() method. This is used to request to the server and load the information in the webpages. The request can be of any APIs that returns the data of the format JSON or XML.

Create API Function Wrapper

Let’s wrap our entire GitHub API call into a function so that we can dynamically pass in the GitHub repo name that we’d like to request info for.

Now add the code for doing a fetch request

Let’s take the name argument that we're passing into to our function and use that dynamically within the GitHub API endpoint like so:

We also added some headers recommended for Github Documentation, and a authorization token

Viewing the Entire API Response

After running the code above (you can run it in your browser console), you will see a response that returns an array of 30 objects. Each object contains information about a particular issue.

👏👏👏 Awesome! 👏👏👏

Now that we’ve setup our GitHub API request, we’d naturally want to display this somewhere to the users of our application, and not just in the browser console. So how do we do that?

Creating a Simple GitHub API Example Application

Let’s setup a simple project that will display the data of the specified repo name right on our webpage.

1. Create directory named github-api on your desktop
Let’s create directory on our desktop named github-api which will hold the files to our simple GitHub API example application.

2. Within github-api directory, add file index.html
This file will contain the HTML markup for our web app.

3. Within github-api directory, add file app.js
This file will contain the code we just wrote. We will tweak it along the way to get it to display the requested data on the webpage.

Our index.html file

This one will be pretty straight forward. Just some simple HTML boilerplate with an h3, a form, a ul, and a link to the app.js file.

Just to spice things up, we will also import the Bootstrap CSS Library and add a few Bootstrap classes to our HTML elements.

We will use the Bootstrap CSS CDN:

You can find the docs for the CDN here: https://getbootstrap.com/docs/4.1/getting-started/introduction/

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

We will use a few common Bootstrap classes:

I have linked to the corresponding sections of the Bootstrap documentation for each of the classes here.

• .text-center | Used for text alignment | View Documentation
• .mt-5, .mx-auto, .mb-5, .ml-2 | Used for margins | View Documentation
• .form-inline | Used for making form fields inline | View Documentation
• .form-control | Used for general appearance of form fields | View Documentation
• .btn | Used for general appearance of buttons | View Documentation
• .btn-primary | Button appearance modifier class | View Documentation
• .list-group | General unordered list styling | View Documentation
• .list-group-item | General unordered list item styling | View Documentation

So your file should looks like this:

Our app.js file

This will be mostly similar to the code we wrote earlier. The main differences will be that we need to retrieve the repo name’s input from the GitHub form, and pass that into our requestReposIssues() function from earlier, then we need to attach the data from our API request to the DOM. We can do this by grabbing on to the ul with an ID of userRepos and appending the data as li's within the ul all from just after the console log that prints the data. Let's give it a shot:

Trying Out Our GitHub API App

Now that we’ve put together all of our code for the front-end markup, our API request, and added some Bootstrap styling — we should be ready to rock.

All you have to do is open up the index.html file in your browser. On a Mac, you can just double-click the file itself, or right-click > Open With > Google Chrome.

Our Simple App UI

And there it is! Here’s what all of our hardworks gone into. This will give you a great framework to build upon and expand your app.

Enter a GitHub Repo name

Now for the fun part. Enter your GitHub repo name or even ones like facebook/react, vuejs/vue, angular/angular.js.

Here’s the results I got when I plugged in facebook/react:

Congratulations, Hacker!

You have successfully built a web application that makes a request to the GitHub API and displays dynamic data to users on the front-end inside the browser! Really cool stuff.

Complete Source Code

Here’s a link to the working source code to this tutorial: https://github.com/cecitorres/github-api

Stay Tuned

If you have any questions or improvements, or if you’d like to see additional examples, feel free to reach out to me anytime at hi@cecitorres.dev. If you’re enjoying my posts, please subscribe! ✨