Using the Github API in your React application


3 min read


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

  1. 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.

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

  3. A Github account: You can signup here

  4. 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,
          } catch (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.

More resources