# Using the Github API in your React application

## Prerequisites:

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](https://nodejs.org/).
        
    * 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.](https://docs.github.com/en/rest) 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
    
    ```bash
    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
    
    ```bash
    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.
    
    ```javascript
    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](https://docs.github.com/en/rest/using-the-rest-api/github-event-types?apiVersion=2022-11-28#createevent).
    
    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

* [Github API documentation](https://docs.github.com/en/rest/using-the-rest-api/getting-started-with-the-rest-api?apiVersion=2022-11-28)
    
* [Octokit npm package](https://www.npmjs.com/package/octokit)
    
* [Rate limiting](https://docs.github.com/en/rest/using-the-rest-api/rate-limits-for-the-rest-api?apiVersion=2022-11-28)