GitHub provides a powerful API that allows developers to access and interact with various data from GitHub repositories, users, and more. In this tutorial, we will explore how to use the GitHub API with personal access tokens to fetch user data, and we will also integrate the GitHub Calendar library to visualize user contributions over time.

Table of Contents

1. Introduction to GitHub API and Personal Access Tokens
2. Generating a Personal Access Token
3. Fetching User Data using GitHub API
4. Integrating GitHub Calendar Library
5. Conclusion

1. Introduction to GitHub API and Personal Access Tokens

The GitHub API offers endpoints that allow developers to programmatically interact with GitHub resources such as repositories, issues, and users.

ADVANTAGES OF USING PERSONAL TOKENS

1. Personal access tokens provide a secure and standardized way to authenticate and authorize users or applications when interacting with the GitHub API.

2.GitHub API requests are subject to rate limits. By using a personal access token, applications can make authenticated requests, which usually have higher rate limits compared to unauthenticated requests.

and much more...

2. Generating a Personal Access Token

To generate a personal access token, follow these steps:

1. Log in to your GitHub account.
2. Go to your GitHub Settings.
3. Select Developer settings from the left sidebar, and then click on Personal access tokens.
4. Click on the Generate new token button. Give your token a meaningful name and select the scopes (permissions) you need.
5. Click the Generate token button at the bottom.

Make sure to copy your generated token immediately, as you won't be able to see it again.

3. Fetching User Data using GitHub API

Now that we have our personal access token, let's use it to fetch user data from the GitHub API.

We'll use the axios library to make HTTP requests. If you haven't installed it, you can do so using:
npm install axios

Here's how to fetch user data using the GitHub API and your personal access token:

// src/App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
  const [userData, setUserData] = useState({});

  useEffect(() => {
    const token = 'YOUR_PERSONAL_ACCESS_TOKEN';

    axios.get('https://api.github.com/user/yourgithubUserName', {
      headers: {
        Authorization: `token ${token}`,
      },
    })
    .then(response => {
      setUserData(response.data);
    })
    .catch(error => {
      console.error('Error fetching user data:', error);
    });
  }, []);

  return (
    <div>
      <h1>GitHub User Data</h1>
      <div>{JSON.stringify(userData, null, 2)}</pre>
    </div>
  );
};

export default App;

Replace 'YOUR_PERSONAL_ACCESS_TOKEN' with the actual personal access token you generated.

You can create your own Card to display the user data like username,profile pic,bio,public repos,etc

It would look like this

*You can also use the repo api to get all the information about repostiories:
*
Just replace the api link with https://api.github.com/user/yourgithubUserName/repos

4. Integrating GitHub Calendar Library

The GitHub Calendar library allows you to visualize a user's contributions (commits, pull requests, issues, etc.) over time in a calendar heatmap.

To integrate the GitHub Calendar library, we'll use the react-github-calendar package. Install it using:

npm install react-github-calendar

Here's how to integrate the GitHub Calendar library into your React app:

// src/App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import GitHubCalendar from 'react-github-calendar';

const App = () => {
  const [userData, setUserData] = useState({});

  useEffect(() => {
    const token = 'YOUR_PERSONAL_ACCESS_TOKEN';

    axios.get('https://api.github.com/user', {
      headers: {
        Authorization: `token ${token}`,
      },
    })
    .then(response => {
      setUserData(response.data);
    })
    .catch(error => {
      console.error('Error fetching user data:', error);
    });
  }, []);

  return (
    <div>
      <h1>GitHub User Data</h1>
      <pre>{JSON.stringify(userData, null, 2)}</pre>

      {userData.login && (
        <div>
          <h2>GitHub Contributions Calendar</h2>
          <GitHubCalendar
            username={userData.login}
            blockSize={15}
            blockMargin={2}
          />
        </div>
      )}
    </div>
  );
};

export default App;

Replace 'YOUR_PERSONAL_ACCESS_TOKEN' with your actual personal access token.

This is how it looks:

Refer the official github repo for more more information :

pnpm install react-github-calendar

pnpm install
pnpm dev

cd example
pnpm install
pnpm dev

npm publish --dry-run

# When you're happy
npm publish --access=public

pnpm run deploy

The owner of the repo has also created a website for calendar and visualization and customizations you can do.

5. Conclusion

In this tutorial, we learned how to use the GitHub API with personal access tokens to fetch user data and integrate it with the GitHub Calendar library. We generated a personal access token, used it to authenticate API requests, fetched user data, and visualized GitHub contributions over time using the calendar heatmap.