Create a React App to filter Hacktoberfest issues on the basis of languages and labels

[vinitshahdeo]

npm i hacktoberfest-issue-hunt

As hacktoberfest-issue-hunt is available as an NPM module, can we make a demo React App with an option to filter hacktoberfest issues based on languages like js, python, go and labels like first timers only, beginner friendly, good first issues.

• Refer react-bootstrap
• Check hacktoberfest-issue-hunt on NPM

You can Create React App to set up the React app by running one command.

npx create-react-app hacktoberfest-issue-hunt
cd hacktoberfest-issue-hunt
npm start

[harish127]

How can I contribute?

[heysujal]

I have created this initial app https://github.com/heysujal/hacktoberfest-issue here https://hacktoberfest-issues.netlify.app/

[lbaweja1999]

Hi @vinitshahdeo, I want to work on it. I would like to create a react app

[lbaweja1999]

Hi @vinitshahdeo, I want to work on it. I would like to create a react app

I have tried creating a simple app. Please check it out https://hacktoberfest-issues-hunt.netlify.app/. If you want i can make UI changes to make its look and feel much better.

[vinitshahdeo]

@lbaweja1999 can you please reduce the width of the column and use some styling for table? Also, showing direct links doesn't look good, maybe we can get rid of that.

[vinitshahdeo]

@heysujal This looks cool, can you please populate 100 issues and add some options to filter the issues?

[lbaweja1999]

@lbaweja1999 can you please reduce the width of the column and use some styling for table? Also, showing direct links doesn't look good, maybe we can get rid of that.

Sure @vinitshahdeo. Will update you.

[vinitshahdeo]

@heysujal, @morelmiles, @lbaweja1999, @ishikkkkaaaa, @Gauravmauryaios, @StarTrooper08, @san-coding

Released v2 🎉

• Refer to the release here.
• Check out on NPM.

Below is the latest response:

[
  {
    title: "Add More Inspirational Quotes",
    link: "https://github.com/vinitshahdeo/inspirational-quotes/issues/4",
    labels: ['good first issue', 'help wanted', 'hacktoberfest'],
    state: 'open',
    comments: 2,
    createdAt: 'Monday, October 11th 2021'
  },
  {
    title: "Create a React App to filter Hacktoberfest issues on the basis of languages and labels",
    link: "https://github.com/vinitshahdeo/hacktoberfest-issue-hunt/issues/1",
    labels: ['good first issue', 'help wanted', 'hacktoberfest'],
    state: 'open',
    comments: 5,
    createdAt: 'Sunday, October 10th 2021'
  }
]

@heysujal & @lbaweja1999, I have added your React Apps to the README.md. Thanks for your contributions. See if you can improve it a bit by upgrading to v2.0.1.

[Ctoic]

@vinitshahdeo Kindly guide me on how I can contribute to the Hactoberfest ?

[StarTrooper08]

Hello @Ctoic you can join our discord channel where you find helpful community peers

https://discord.gg/qqajmBH6

[heysujal]

thanks @vinitshahdeo for adding my app 😀. Now I am working to improve it.

[lbaweja1999]

@heysujal, @morelmiles, @lbaweja1999, @ishikkkkaaaa, @Gauravmauryaios, @StarTrooper08, @san-coding

Released v2 🎉

• Refer to the release here.
• Check out on NPM.

Below is the latest response:

[
  {
    title: "Add More Inspirational Quotes",
    link: "https://github.com/vinitshahdeo/inspirational-quotes/issues/4",
    labels: ['good first issue', 'help wanted', 'hacktoberfest'],
    state: 'open',
    comments: 2,
    createdAt: 'Monday, October 11th 2021'
  },
  {
    title: "Create a React App to filter Hacktoberfest issues on the basis of languages and labels",
    link: "https://github.com/vinitshahdeo/hacktoberfest-issue-hunt/issues/1",
    labels: ['good first issue', 'help wanted', 'hacktoberfest'],
    state: 'open',
    comments: 5,
    createdAt: 'Sunday, October 10th 2021'
  }
]

@heysujal & @lbaweja1999, I have added your React Apps to the README.md. Thanks for your contributions. See if you can improve it a bit by upgrading to v2.0.1.

Thanks @vinitshahdeo .I will work on improving it and let you know asap.

[lbaweja1999]

@heysujal, @morelmiles, @lbaweja1999, @ishikkkkaaaa, @Gauravmauryaios, @StarTrooper08, @san-coding

Released v2 🎉

• Refer to the release here.
• Check out on NPM.

Below is the latest response:

[
  {
    title: "Add More Inspirational Quotes",
    link: "https://github.com/vinitshahdeo/inspirational-quotes/issues/4",
    labels: ['good first issue', 'help wanted', 'hacktoberfest'],
    state: 'open',
    comments: 2,
    createdAt: 'Monday, October 11th 2021'
  },
  {
    title: "Create a React App to filter Hacktoberfest issues on the basis of languages and labels",
    link: "https://github.com/vinitshahdeo/hacktoberfest-issue-hunt/issues/1",
    labels: ['good first issue', 'help wanted', 'hacktoberfest'],
    state: 'open',
    comments: 5,
    createdAt: 'Sunday, October 10th 2021'
  }
]

@heysujal & @lbaweja1999, I have added your React Apps to the README.md. Thanks for your contributions. See if you can improve it a bit by upgrading to v2.0.1.

Thanks @vinitshahdeo .I will work on improving it and let you know asap.

Hi @vinitshahdeo. I have upgraded my app to v2.0.3 and also made changes in the UI. Hope it looks good now. You can check it again https://hacktoberfest-issues-hunt.netlify.app/. Let me know if more changes are required.

[vinitshahdeo]

@lbaweja1999 It looks great. A few changes:

• Can you reduce the table size? Right now, is it covering the 100% width of the page?
• Can you use badges for displaying labels?

[lbaweja1999]

@lbaweja1999 It looks great. A few changes:

• Can you reduce the table size? Right now, is it covering the 100% width of the page?
• Can you use badges for displaying labels?

okay will try doing that too

[jisazamp]

Hey @vinitshahdeo!

I would love to contribute to and build this React application, how could I proceed?

[VedantDewangan]

Hello

I hope this message finds you well! I’m a newcomer to open source and am eager to participate in Hacktoberfest 2024. This will be my first contribution, and I would greatly appreciate your guidance.

I’m considering building a React app that displays GitHub issues and allows users to filter them by label and language. Would you recommend this approach, or do you have any suggestions on how I can best contribute to the project?

Thank you for your help!