Giter Club home page Giter Club logo

find-me-issues's Introduction

Find-Me-Issues

Version Maintenance License: MIT

A React.js based web-app to find repositories containing 'good first issues' for open source contribution.

Table of Contents

Description

OpenSource Finder is a user-friendly web application designed to simplify the process of discovering open-source projects suitable for programmers looking to make their first contributions. It streamlines the search for beginner-friendly projects across various programming languages, making it easier for developers to kickstart their open-source journey. Users can search by the number of starts the repository has, the number of forks, as well as search for keywords to find a project suitable for their interests.

Inspiration

The most painful thing for programmers who are new to open-source is finding beginner friendly projects to contribute. This issue will be resolved by Find-Me-Issues, with a simple and easy to use interface, people will be able to filter the repositories with the type of language they want to work with, number of stars the repository has, number of issues the repository currently has open and much more!

Features

  1. Search Functionality: Quickly find projects based on keywords or project categories.

  2. Filter by Programming Language: Easily filter projects by programming language to ensure they are suitable for beginners' skills.

  3. Browse Project Details: Access detailed information about each project, including a brief description and recent issues, as well as a link to the project itself.

  4. Sorting: Sort by number of stars and number of forks to find the optimal open-source project.

  5. Theming: Switch between light and dark themses for a better user experience.

demo

Usage

Tech Stack

JavaScript React Material UI GitHub

Set up

$ git clone https://github.com/version0chiro/Find-Me-Issues.git

$ npm i

$ npm run start // this script is for backend

$ npm run build // this script is for frontend

// Access the application in your browser at 'http://localhost:3000'

How to Use

  1. Search for Projects: Enter keywords or select programming languages and project categories to search for projects.

  2. Filter by Starts and Forks Level: Use the starts filter and the forks filter to narrow down projects that match your experience.

  3. Explore Project Details: Read the a brief description about the project and its issues.

  4. Get Started: Follow the provided links to the project's repository's issues and start contributing.

Contributing

Contributions, issues and feature requests are welcome! Guidelines can be found here.

Issue Tracking

Find or create new and pertinent issues here.

Contributors are encouraged to actively participate in issue tracking by:

  • Confirming Issues: If you can reproduce an issue that someone else reported, provide additional details or steps to help diagnose the problem.

  • Suggesting Solutions: Offer potential solutions or workarounds for issues you've confirmed or have insight into.

  • Prioritizing Issues: Project maintainers often need help in prioritizing and triaging issues. You can help by providing input on the urgency and importance of issues.

  • Implementing Fixes: If you have the skills, consider contributing code to fix issues. Please follow the project's contribution guidelines when doing so.

License

This project is open-source and available under the MIT License.

Acknowledgements

Show your support

Give a star if this project helped you!

find-me-issues's People

Contributors

afif1400 avatar alok722 avatar ayangupta9 avatar carrumdraws avatar d4rkener avatar devalisha avatar emanuelgf avatar erikhartker avatar hunterx18 avatar inezabonte avatar jenish2 avatar jljohnson001 avatar kashyap010 avatar leonakao avatar mauryapradeep avatar nicyuvi avatar nishant219 avatar rajdama avatar richa-09 avatar silentm4gician avatar simongideon avatar veronicadip avatar version0chiro avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

find-me-issues's Issues

Make a better readme

What to do:

Make a better and more elaborate readme file that explains everything properly.

Testing the components

Hello, I would love to have the opportunity to contribute to this project. I would like to contribute with component tests using react-testing-library, anything contact me by email: [email protected]

Broken layout on small viewport

Describe the bug
The layout is broken in small viewports.

To Reproduce
Steps to reproduce the behavior:

  1. start the project (yarn start on client).
  2. Reduce the size of the viewport on whatever browser you are using.
  3. Scroll down the issues list.
  4. Look for out of place elements.

Expected behavior
Responsive layout.

Screenshots
layout

Additional context
Since the project is using react-bootstrap I would suggest using Containers, Rows and Cols to achieve responsiveness.

Add a scroll bar in the language Dropdown

What To Do:

The drop down menu on the right side of the web-app does not have a scroll bar making it difficult to manage as the language support keeps increasing.

Limit the amount of active languages in the dropdown and add a scroll-bar to access all the languages below.

image
Reference: right side drop down

Access the website here for a better reference : here

Emoji fails to load

What to do?

image

As the description is taken from GitHub's API and passed as a prop, sometimes emojis fails to load in description. Try to fix this issue such that all emojis load without any problem.

Newly Revamped Navbar + "Filter" Section

Hello! I noticed that this app's Navbar and Filters section could use some redesigning. I am a professional Graphic Designer and I'm looking into contributing to opensource, so I'd be honored if I was given the opportunity to redesign these sections of your app!

Here are my proposals:

  1. Merge "Select language" and "Search Bar" into a single "double search bar" like the one on Indeed.com.
  2. Create a new "Filters" section that combines the page-search bar and the "Filters" dropdown into a single line
  3. Move "Sort By Stars" and "Sort By Forks" to a new "Sort By" button that is attached to the "Filters" section
  4. Make everything responsive, so it works on mobile devices

IMG_1588

I firmly believe that these changes would modernize the look of the app and lead to a significantly improved user experience.
This would be my first opensource contribution, but I'm excited to learn about the opensource workflow. If it goes smoothly I could even design a new logo for the site!

Add more filter options

What to do:

Add ability to add additional filters to the search, such as minimum number of stars or forks or any other information that may seem important when trying to find relevant projects to contribute to. You are free to use any kind of layout of your own or any library you wanna try and implement. Submit a PR explaining your contribution!

Hide Packages

Suggested to hide the Packages if not being used !!

Toggling the theme button triggers an API call

Describe the bug
When the theme button is toggled, it triggers an API call. This behaviour is not optimal for performance and could be improved.

To Reproduce
Steps to reproduce the behavior:

  1. Open the application
  2. Open devTools to observer network calls
  3. Toggle the theme button

Expected behavior
The theme changes without making an API call.

Add more languages to languages.json

What to do?

Inside the react client folder, there is a JSON file in here, add more languages that are supported by the GitHub search API

Suggestions:

  • Try adding C#
  • Vue.js

React script is outdated in version failing building

Describe the bug
When trying to build the react application, due to react-scripts being less than version 5 it causes opensslErrorStack, which is restricting rehosting the application again. Upgrading the version of the package to 5.0.1 will solve the issue testing a bit how the application works

To Reproduce
Steps to reproduce the behavior:

  1. Pull the package
  2. Run npm install and start the react server
  3. The CLI should prompt ERR_OSSL_EVP_UNSUPPORTED

Expected behavior
Expected is the react application should be hosted in the expected location both local and on a server.

Screenshots
NA

Additional context
NA

Extract the count of open good-first-issues

What to do:

Currently the components render with the count of total issues open in any particular repository. Try understanding the GitHub's API and extract the number of active open issues.

Suggestion

  • Try an inner fetch using the repository's URL or name

Upgrade Card Design

Try to improve the card design using material UI, to fill up the empty space.

Suggestions:
  • Add borders
  • Add overlay
  • Add better buttons

Add a loading animation while the issues render

What to do:

Run a spinning or any other kind of loading animation for a split time period when the issues are being rendered one by one.

Free to follow any approach you feel fit in the scenario.

new issue

Hey, I am Vinayak Kanjiker I would like to contribute in this app can you please assign me a task .
This is for my open source contribution class.
please contact me at [email protected]

Throwing error during starting the server in codespace (Unsupported and outdated version).

Describe the bug
Specifically mentions an "unsupported" operation in the OpenSSL library. Additionally, there is a warning about an outdated version of "caniuse-lite" which is related to browser compatibility data.

To Reproduce
Steps to reproduce the behavior:
When I try to start the server in codespace I find this error. I used "npm run start" command.

Expected behavior
It should have started the server but didn't. It throws errors that make a bad impression.

**Screenshot **
issue

Suggest Further Improvements

What to do:

Any kind of feature you see fit to add to the project, comment down below and if you can generate a PR for any feature upgrade that will also be great!

Filter Repositories on basis of repository's description

What to do:

  • Filter the repositories returned from GitHub on the basis of stars of repo, forks and the length of the description. You are free to implement your own algorithms to get this done.
  • Research the GitHub API properly to understand how this can be done.

Give a description of how you would like to implement this and I will assign it to you. PR without proper descriptions will not be accepted.

Implement a dark mode

What to do:

Implement a dark mode for the whole web-app that has a manual as well as automatic shift into dark mode as per the user system.
The button for shifting to dark mode can be on the top left of the web-app.

Beginner in this Open Source Contribution

Hello, I'm Aryan, and I'm a beginner in open source. I'm currently exploring the field and looking for a suitable "Good First Issue" to contribute to. Is there an opportunity for me to participate in one of your projects?

TypeError: Cannot read property 'repository_url' of undefined

How to reproduce:

  • When trying to shift between pages in quick successions, it results in breaking the app with the following error.
  • Run the sever locally and try to jump between pages fast and you will recreate the error.
TypeError: Cannot read property 'repository_url' of undefined
SingleCard

D:/Codes/webDev/react/findMeIssues/client/src/components/SingleCard.js:8
  5 | import backg from '../git9.jpg';
   6 | 
   7 | const SingleCard = (props) => {
>  8 |   console.log(props.repo.repository_url);
   9 |   const [repo, setRepo] = useState(null);
  10 |   useEffect(() => {
  11 |     // GET request using fetch inside useEffect React hook
`

I feel UI should become more responsive and functionable

The ### UI I feel should get additional functionalities will get started with working of making UI more functional and attractive.
will look for all the depreciated libraries and try to give additional functionalities as follows-

  1. We can let the contributors know more about the open-source projects.
  2. Are they active and what is their frequency of contribution?
  3. UI should be more attractive and developer the details should be available hassle-free to developers.

Find-Me-Issues-2.0

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.