Add Pull Requests, Issues to Your Portfolio

In the competitive world of software development, having a strong GitHub profile is crucial. It not only showcases your coding skills but also your contributions to open source projects. In this blog, we'll explore how to effectively add pull requests and issues to your portfolio using the GitHub REST API.

How to Use the GitHub REST API

The GitHub REST API provides a powerful way to interact with GitHub programmatically. You can use it to fetch data about your repositories, issues, pull requests, and more. Here's a quick overview of how to get started:

• Authentication: To access the API, you'll need to authenticate using a personal access token. You can create one in your GitHub account settings.
• Making Requests: Use a tool like Postman or a programming language of your choice to make HTTP requests to the API endpoints.
• Handling Responses: The API will return data in JSON format. Make sure to handle the responses appropriately in your application.

First Step: Installing Dependencies

Before you can use the GitHub REST API, you'll need to install some dependencies. If you're using Node.js associated JavaScript framework, you can use the following command:

npm install @octokit/rest

Second Step: Adding Authentication

Adding authentication is not necessary for public repositories, but adding a personal access token is recommended for private repositories or to increase your API rate limit.

To authenticate, create a personal access token in your GitHub account settings.

Then, add your token to your environment variables or directly in your code (not recommended for production). Here's an example of how to set up authentication using the Octokit library:

const { Octokit } = require("@octokit/rest");
const octokit = new Octokit({
  auth: process.env.GITHUB_TOKEN // or your token directly
});

Third Step: Fetching Pull Requests and Issues

Once you have set up authentication, you can start fetching pull requests and issues. You can create two variables and give github username to "owner" and repository name to "repo". Here's how to do it:

const owner = 'your-username';
const repo = 'your-repo';

const result =  await octokit.request("GET /repos/{owner}/{repo}/issues", {
  owner,
  repo,
  state: "all",
  per_page: 100,
  headers: {
    "X-GitHub-Api-Version": "2022-11-28",
  },
});

This will fetch all issues (including pull requests) from the specified repository. You can filter them based on their type using the pull_request property in the response.

Additional: For Repositories with Multiple Owners

If you're working with a repository that has multiple owners, you can use the

const repos = [
  { owner: 'owner1', repo: 'repo1' },
  { owner: 'owner2', repo: 'repo2' },
  // Add more repositories as needed
];

const results = await Promise.all(repos.map(({ owner, repo }) => 
  octokit.request("GET /repos/{owner}/{repo}/issues", {
    owner,
    repo,
    state: "all",
    per_page: 100,
    headers: {
      "X-GitHub-Api-Version": "2022-11-28",
    },
  })
));

sessionStorage.setItem("openContributionData", JSON.stringify({
  repos,
  responses: results,
}));

You can add this code after the API request to store the results in sessionStorage.

Then, you can add above API request call to a function and call it in useEffect hook to fetch the data when the component mounts. And call that function with a condition to check if the data is already in sessionStorage or not. Like this:

useEffect(() => {
const data = sessionStorage.getItem("openContributionData");
  if (data) {
    const parsedData = JSON.parse(data);
    setResponses(parsedData.responses);
  }
  else {
    fetchPullRequests();
  }
}, []);

Show Pull Requests and Issues in Your Portfolio

Now that you have fetched the pull requests and issues, you can display them in your portfolio using response data. Here's a simple example of how to do this:

responses.map((response, idx) => (
  //use repos[idx].owner and repos[idx].repo to display the owner and repo name
  response.data.filter(issue => issue.user.login === "your-github-username") // Filter issues and PRs by your GitHub username
    .map(issue => (
      // use issue.number and issue.title to display the issue number and title
      // You can use issue.pull_request to check if it's a pull request
      // You can use issue.state to check if it's open or closed
      // You can use issue.created_at to display the created date
      // You can use issue.pull_request.merged_at to display the merged date or use it to check if it's merged
    ))
));

You can find more information here:

• GitHub REST API Documentation
• Octokit REST.js Documentation
• Creating a Personal Access Token on GitHub

Conclusion

By leveraging the GitHub REST API, you can effectively showcase your contributions to open source projects in your portfolio. This not only enhances your visibility in the developer community but also demonstrates your commitment to collaborative software development. Remember to keep your contributions updated and engage with the community to maximize the impact of your portfolio.

Feel free to reach out if you have any questions or need further assistance with using the GitHub REST API.

Happy coding!