Using the Github API in your React application

Everything I know about design and engineering

Prerequisites:

Knowledge about the following is required to better understand this guide:

Node.js and npm:

Ensure you have Node.js installed on your machine. You can download it from the official Node.js website.
Verify its installation by running npm -v in your terminal.

React application: This guide assumes that you have correctly setup your React application using create-react-app or vite.

A Github account: You can signup here

A personal access token from your Github account:

Generate a personal access token by following these steps:

Go to your GitHub settings.
Navigate to "Developer settings" > "Personal access tokens."
Click on "Generate token" and follow the instructions.

Note: Keep your token secure and do not share it publicly.

Step 1: Understanding the Github API

The Github API is used for different types of data related to a Github user. It provides a wide range of functionalities that allow users to interact with various aspects of the GitHub platform programmatically. Some common actions that can be performed using the GitHub API include:

Retrieve User Information: fetch details about a GitHub user, including their profile information, repositories, and activities(commits, stars, and followers).

Manage Repositories:

Create new repositories, list repositories a user owns or has access to. Get information about a specific repository, including its branches, contributors, and issues.

Issues and Pull Requests:

List issues and pull requests for a repository. Create, close, or comment on issues and pull requests.

Gists:

Create, list, and manage GitHub Gists (small snippets of code or notes).

Organization Information:

Retrieve details about GitHub organizations, including members, repositories, and teams.

Search:

Perform advanced searches for repositories, users, and code.

Notifications:

Get information about a user's notifications and mark them as read.

Webhooks:

Set up and manage webhooks to receive notifications about events happening in a repository.

Deployments:

Access information about deployments for a repository.

Actions:

Trigger GitHub Actions workflows programmatically.

To learn more about the Github API, visit Github's documentation. For this tutorial, the focus would be on fetching a user's realtime activity.

Step 2: Setting up the Github API

The following are the steps to take to set up the Github API and fetch a users activity data:

Install the GitHub client package

  npm i @octokit/rest

Store token in .env file

Create a file called .env and store the token gotten from Github. This file should be placed in the root

  REACT_APP_GITHUB_TOKEN = "RandomStringsGottenFromGithub"

Fetch data using endpoint

NOTE: Excluding the Authorization token from the request only gives you access to data that is publicly available.

  import React from "react";
  import { Octokit } from "@octokit/rest";

  const fetchGithubActivityData = async () => {
      try {
        const octokit = new Octokit({
          auth: process.env.REACT_APP_GITHUB_TOKEN,
        });

        const response = await octokit.request("GET /users/{username}/events", {
          username: "{username}",
          headers: {
            accept: "application/vnd.github+json",
            "X-GitHub-Api-Version": "2022-11-28",
          },
          per_page: 8,
        });
        return response.data;

      } catch (e) {
        console.log(e);
      }
    };

Use data in user interface as required:

The data retrieved from the GET users event (activity) endpoint shows an array of a users recent activity. Github categorizes users activity into 17 events which have been further described here.

The data shows event type, repository, repository url, user activity on repository among a lot of other information which can be used in the UI as desired.

Take note that without the 'auth' key in the request only public user activities are retrieved

Consider loading and error states

Using the Github API in your React application

Comments

More from this blog

The Question I Ask Before Building Anything

3 UX mistakes that might be costing you users

Beyond Alt Texts: How AI can Help Solve the "Cognitive Gap" in Modern UX

That’s AI? Intelligence in Everyday Interfaces

Should We Really Build Carousels Without JS?

Prerequisites:

Step 1: Understanding the Github API

Step 2: Setting up the Github API

Rate Limiting

More resources

Command Palette

Comments

More from this blog

Prerequisites:

Step 1: Understanding the Github API

Step 2: Setting up the Github API

Rate Limiting

More resources