How my website lists my latest GitHub Repositories?

If you have ever visited the about page of my website then you might have noticed that most of the data is displayed dynamically. For example, whenever a new article is published, the about page will automatically update the latest article section.

An another example is of the section that displays my two last updated GitHub respositories (see where the arrows are pointing):

In this article, I will show you how it's done. Before that, this is how I got the idea 🤔:

A while ago I saw this tweet from "Fabrizio" & I was like how cool is that. And then my second thought was, you know what's cooler than that, how about using that into my website too.

Earlier I was going to use the Github API with my personal access token but then I realized that would be overkill because I only needed 3 things -

• The name of the Github Repository
• The description
• A URL to that repo

And since these will only take into account my public repositories, I can just use the publicly available endpoint to call the Github API to list my public repositories.

GitHub API Endpoint

On GitHub docs under the Users section, you might find this URL /users/{username} for the GET request that lists publicly available information about someone with a GitHub account. But we are only interested in repositories. We can use the URL given below for that:

https://api.github.com/users/{username}/repos

For example, https://api.github.com/users/AyushSaini00/repos is the URL for my GitHub username. On clicking, you will see an array of objects containing information about my public git repositories.

Fetching the data

We will use fetch API to fetch the data from the GitHub API endpoint.

const endpoint = `https://api.github.com/users/AyushSaini00/repos`;

const getData = () => {
  fetch(endpoint)
        .then(response => {
            return response.json();
        })
        .then(data => {
            console.log(data);
        })
}

getData();

When the above-written code is run, you can see the array of objects of public repositories on the browser console window. You can see that it returns a lot of information that might not be useful for us like we are also only concerned with the three properties - name, description, and URL. So you can think of destructuring the array of objects here.

Sorting the recently updated Repositories

On inspecting the large JSON, you can find that every object has a key of updated_at, whose value represents the last time the repo was updated. We can use this to sort the two latest updated repositories.

const firstTwoRepos = (repos) => {
  return repos
    .sort(
      (a, b) => Number(new Date(b.updated_at)) - Number(new Date(a.updated_at))
    )
    .slice(0, 2);
}

Look how I also chained the method slice to return only the first 2 elements of the sorted data array.

//..code
    .then(data => {
        firstTwoRepos(data);
    })
//..code

Destructuring the array of objects

//..code
    .then((data) => {
      const [
        {
          name: firstRepoName,
          html_url: firstRepoURL,
          description: firstRepoDescription
        },
        {
          name: secondRepoName,
          html_url: secondRepoURL,
          description: secondRepoDescription
        }
      ] = firstTwoRepos(data);
    });
//..code

We can check the values by console.log()

console.log(
    'First Repo : ', 
    firstRepoName, 
    firstRepoDescription, 
    firstRepoURL
);
console.log(
    'Second Repo : ', 
    secondRepoName, 
    secondRepoDescription, 
    secondRepoURL
);

On the browser console, you will see something like this:

Now you can easily add the value of these variables to the DOM to display them on the browser.

Here's a pen for the same project on my codepen. Feel free to experiment with that if you want. Do share what you build with this, I would love to see that 😆.

📖 Resources

• GitHub Docs
• Fabrizio's Tweet