voscarmv / issue-finder

A search engine for newbie-friendly github issues from YCombinator startups.

Issue-Finder

A search engine to find newbie-friendly GitHub issues. The issue finder helps you find a list of beginner-friendly GitHub repos, backed by Y Combinator, that have Ruby and Javascript issues that are good for new contributors.

👉 Watch this YouTube video for a quick user's guide!

Your Open Source Finder

Issue Finder Live

Demo

Learn About Issue Finder from the first Contributors

Issue Scraper Logic - Repository Owner

Video: Oscar Mier

React/Redux Logic | API's | Actions - Project Maintainer

Video: Shadman Ali

UI - Project Maintainer

Video: Steve W Dames Jr

Data Retrieval From Github API

Video: Jose Ramon Castaños

API Request from Y Combinator

Video: Ricardo Valtierra

Honorable Mentions:

Firebase Analytics

Linkedin Post: Denis Lafontant

Built With

• JavaScript
• REACT
• REDUX
• THUNK
• Tailwind CSS

Milestones

• Milestone 1: Setup the project and install dependencies

• Milestone 2: Setup Redux store

• Milestone 3: Setup thunk

• Milestone 4: Add label logic

• Milestone 5: Add filter logic

• Milestone 6: Create basic UI/UX to display App information

• Milestone 7: Add Analytics support

• Milestone 8: Refactor and optimize components/redux

• Milestone 9: Update Meta for SEO

• Milestone 10: Deploy live APP

• Debug linter errors

Screenshots

Contribute to Issue Finder

Pre-requisites

• Code Editor, e.g. VS Code
• Git and a GitHub account

Getting Started

Getting a local copy of Issue Finder up and running is easy with these following steps.

Clone the repository

In your terminal, navigate to the directory you would like to store the project and run the git-command:

git clone https://github.com/voscarmv/issue-finder.git

After the git-command navigate into the project folder using cd:

cd issue-finder

Now you can open the project in your favorite code editor.

Note

For VS Code you can use the command code . to quickly open projects in the editor.

Install dependencies

After you have cloned the project and have navigated into the project. You need to install the required dependencies using npm, or your perferred package manager:

npm install

Configure your environment

You will also need to create a .env file to later store your GitHub access token in.

Note

The access token is needed for the app to make API calls to GitHub.

touch .env

With the .env file created, you can generate an access token in your settings and add that access token to the REACT_APP_API_KEY variable.

echo REACT_APP_API_KEY=ghp_my_github_token > .env

Your token will start with either ghp_ or github_pat_, depending on if you generated a classic token or a fine-tuned token. Both will work for this application.

Important

The GitHub access token doesn't need any scopes to function.

Run the application

Now that the dependencies are installed and your environment is setup. You can run the application using npm or your perferred package manager:

npm start

Linter Setup

• Run npx eslint . which will print any errors found.
• Run npx eslint . --fix to automatically fix the errors.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Usage

• Select a label from the first drop down menu
• Select a language from the second drop down menu
• Click FIND ISSUES to filter through great issues matching your search query
• Click on a issue from the list of issues below to view your next open source contribution on GitHub

Make some coffee in the time you saved finding an amazing issue for your next contribution!

Author 1:

👤 OSCAR MIER

• GitHub: @voscarmv
• YouTube: Oscar Mier
• LinkedIn: Oscar Mier

Author 2:

👤 SHADMAN ALI

• GitHub: @shadmanhere
• Twitter: @shadmanhere
• LinkedIn: Shadman Ali

Author 3:

👤 STEVE W DAMES JR

• GitHub: @steveWDamesJr
• Twitter: @SteveWDamesJr
• LinkedIn: Steve W Dames Jr

Author 4:

👤 JOSE RAMON

• GitHub: @jr-cast
• Twitter: @josercastanos
• LinkedIn: Jose Ramon Castaños

Author 5:

👤 RICARDO VALTIERRA

• GitHub: @ricardovaltierra
• Twitter: @RicardoValtie15s
• LinkedIn: Ricardo Valtierra

Author 6:

👤 DENIS LAFONTANT

• GitHub: @icebox827
• Twitter: @heracles2k5
• LinkedIn: Denis Lafontant

✨ Contributors

Thank you for your commitment and tireless efforts. The value you bring to our team is priceless, and we deeply appreciate your contributions. Your admirable dedication and unwavering commitment are truly commendable. Thanks for all that you do to support our team.

🤝 Contributing

Join our Whatsapp group!

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• Hat tip to anyone whose code was used.

📝 License

This project is MIT licensed.

issue-finder's Issues

filter/menu of the app is not responsive.

filter/menu of the app is not responsive. label and language menu are going outside the screen.

Make filter stay at top of the screen

Filter at top of screen even if you scroll down

Filter

Mobile View

Desktop View

• We are looking to improve the UX of the app by always being able to access the filter inputs even if there is a large output list.

• We should be able to scroll through output issues without loosing sight of our filter options.

• Open a new pull request with changes.

Do not hesitate to let us know if you have any questions 👋

h1, h2, h3, h4, h5 tag working in development but not in production build

h1, h2, h3, h4, and h5 tags are working in development but not in the production build.

development	production

How to recreate this bug?

• to view in the development mode run npm start in the terminal.
• to view in production mode run npm run build in the terminal and then serve the build you get in the build folder.
  • to serve run npm install -g serve followed by serve -s build

Add more detail to results cards

Update Results Cards

Snapshot

Suggestions

• We would like to include titles to our cards. This could improve the UX of the app.

• Open a new pull request with changes

Do not hesitate to let us know if you have any questions 👋

Use Best Practices for Firebase configuration: Move hardcoded API keys to .env

Use Best Practices for Firebase configuration

Location

• src/utility/firebase.js

Instructions

• Create .env file (if not already created)

• Move to .env file:

  • apikey
  • authDomain
  • projectId
  • storageBucket
  • messageingSenderId
  • appId
  • measurementId

• Open a new pull request with changes

Do not hesitate to let us know if you have any questions 👋

Improve User Experience by Redesigning Filter Section

I've identified an issue that significantly affects the user experience on our platform. After conducting searches, I've noticed that the filter section takes up a substantial portion of the screen, causing inconvenience to our users.

Proposed Solution:
To address this issue and enhance the user experience, I propose the following solutions:

1. Redesign the filter section to float above the screen, ensuring it does not obstruct the content.
2. Introduce a "Filter" button that allows users to toggle the visibility of the filter section as per their preference.

All labels are not loading anymore.

All labels are not loading anymore, just because one URL failed to load.

1. go to the 'All' option from the label menu,
2. click on the load labels button to find the bug.

labels will never load.

Take ideas from these sites and integrate them into issue-finder

MLH's David Lazaro gave this awesome talk about where to find good first issues.

There are other github issue search engines out there.

Maybe take some ideas from them and implement them here!

https://www.youtube.com/watch?v=tPRizVvDcKI

Add Footer

Is your feature request related to a problem? Please describe.
To claim copyright issues, I want to add footer to the site

Describe the solution you'd like
Add footer to the site, to claim copyright issues

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

App seems to crash when selecting `All` labels for `Rails`

Opening the App and setting All labels for Rails framework causes currently a blank page and the following log messages: TypeError: u is null and Uncaught TypeError: u is null

• OS: Ubuntu 20.04
• Browser: Firefox
• Version: 107.0 (64-bit)

Update import path for App.js to fix failing tests

The tests are currently not passing due to an incorrect path importing App.js in App.test.js.

Attached is a screenshot showing the error

I would like to work on this issue and fix that.

Update README to make the Dependencies instructions clearer

Hi Team,

Great work on creating this amazing tool. I was setting up the project on my machine and I don't think it might be easily understandable to beginners that they need to add a GitHub token to the label_grouping.js file.

I suggest improving the wording in the dependencies section in the readme file to make it more explicit about what one needs to do.

Also, the linters section mentions creating a .eslintrc.json file, but the file already exists. I can also fix that issue since it is updating the Readme.

I would be happy to make the improvement.

App is not usable in few mobile phone in landscape mode.

The filter menu takes up all of the screen space in the mobile phone when in landscape mode.

Filter Issues as either assigned or unassigned

Hi Team,

Currently, the list of issues displays all issues (Both assigned and unassigned together)

I would like to suggest. Allowing the user to filter the issues found either by all, assigned, or unassigned.

I have given it a try, but I have not been able to get it to work. I still haven't found the right approach.

I will continue trying but if someone else can manage to get it to work. Please post a comment on this issue.

Fix h1 Title sizing issue

Fix h1 Title sizing

h1 Tittle

h1 properties being blocked (size of "Title" is small)

Ideal size of "Issues" Tittle

• We would like to have the "Issues Title appear with proper h1 sized formatting as shown above in the "Ideal Size" snapshot.
• Open a new pull request with changes

Do not hesitate to let us know if you have any questions 👋

Feat: Create a light/dark toggle theme

Toggle Light/Dark mode

• Currently Issue Finder has dark theme. It would be great to improve accessibility to add a Light theme feature to the app.
• Open a new pull request with changes

Do not hesitate to let us know if you have any questions 👋

In firefox for windows, spacing above and below the progress bar is not working as it is working in chrome

In firefox for windows, spacing above and below the progress bar is not working, as it is working in chrome.

BUG : Fix the UI , It's not responsive & Button not VIsible on light mode

Describe the bug
A clear and concise description of what the bug is.
button not visible in light mode , select input is not responsive and need to refactor the UI

To Reproduce
Steps to reproduce the behavior:

1. Go to 'HomePage'
2. Click / Hover on Button 'find issues'
3. Scroll down to '....'
4. See error

Expected behavior
Everything related to features is great. But need to fix the UI .

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS] UBUNTU 22.04.3
• Browser [e.g. chrome, safari] chrome
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.