Using the Github API in your React application

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

Rate Limiting

The number of requests a user can make at a given time is controlled bby Github. For unauthenticated requests, the rate limit is 60 requests per hour, while for authenticated users, there's a personal rate limit of 5,000 requests per hour.

Using the Github API in your React application

Table of contents

Prerequisites:

Step 1: Understanding the Github API

Step 2: Setting up the Github API

Rate Limiting

More resources