Skip to content

Instantly share code, notes, and snippets.

@vinitshahdeo
Last active May 31, 2022 17:48
Show Gist options
  • Save vinitshahdeo/3f9844e4e8065a553bb21a1f299d4c24 to your computer and use it in GitHub Desktop.
Save vinitshahdeo/3f9844e4e8065a553bb21a1f299d4c24 to your computer and use it in GitHub Desktop.
Create a React App to display the Hacktoberfest issues in tabular form

Problem Statement

Hacktoberfest is well known open-source celebration that encourages participation in the open source community. The open issues of public repositories on GitHub that are labelled as hacktoberfest are eligible for contribution through Hacktoberfest.

Although there are ways provided by GitHub to filter the issues, we have a npm module (hacktoberfest-issues-hunt) to list Hacktoberfest Issues.

Let's create a React App using hacktoberfest-issues-hunt module to display all the Hacktoberfest issues in tabular form.

If you're looking for online IDEs, it's recommended to use CodeSandbox.

NPM VERSION

NOTE: To use hacktoberfest-issues-hunt module, you need to supply your personal access token provided by GitHub. You can easily create one here.

Additional features

  • An option to search issues based on langauges like js, cpp, go, python, etc.
  • An option to search issues based on labels like first timers only, beginner friendly, help wanted, etc.
  • Enable pagination (show 10 issues per page)

Suggestions

  • You may use any framework like Bootstrap to make it responsive.
  • The npm module hacktoberfest-issues-hunt supports options to filter the issues based on languages and labels.

Resources

Security Warning

Never push your token on GitHub. It "acts as a password" coupled with rights which can be revoked. Please revoke/delete your token if you've committed by mistake.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment