Open Source Project Discovery

• 

  Search for Open Source projects with several queries.

• 

  See the list of projects and visit their respective github urls.

• 

  Mark the projects as starred to view later.

Inspiration

The inspiration for this project came from the need to make open-source contributions more accessible to beginners. Often, finding quality repositories that match interests and skill levels can be a daunting task, especially for those new to the open-source community. This app simplifies the process of discovering, starring, and keeping track of open-source GitHub repositories in an intuitive way, encouraging more people to get involved in contributing to projects.

What it does

The app allows users to search for open-source repositories on GitHub, explore their details (such as stars, forks, language, etc.), and star their favorite ones. It also provides a personalized list of starred repositories for easy reference and interaction. The goal is to make the process of finding and keeping track of repositories easy for beginners.

How I built it

I built the app using several technologies:

• Frontend: React.js for the UI, handling form submissions, and rendering the list of repositories.
• Backend: Express.js for serving the API and handling requests for user repository data.
• Database: MongoDB for storing user data, including starred repositories.
• API: GitHub's API for searching and fetching repository details.
• Axios: For making HTTP requests to both the backend API and GitHub API.
• CSS: TailwindCSS for styling and ensuring a responsive design.

Challenges I ran into

While building the app, I encountered a few challenges:

• It was my first full-stack project and I completed it in just around the 9-hour window. Also, some tech stacks were new to me.
• Integrating the GitHub API and handling pagination efficiently.
• Implementing a smooth user experience for starring and un-starring repositories without causing excessive API calls.
• Managing state between the fetched repositories and starred repositories lists in a way that minimized re-renders and improved performance.
• Some setbacks included adding proper authentication, handling pagination on the account page, and making sure CRUD operations like deletion and updating in the database were properly handled.I will fix it soon.

Accomplishments that I'm proud of

I'm proud of creating a user-friendly interface that makes it easy for beginners to explore and star repositories without friction. The integration between React, the backend, and GitHub's API works seamlessly, allowing for efficient searching, starring, and tracking repositories. I successfully built a project that lowers the barrier to getting involved in open-source.

What I learned

Throughout the project, I learned more about effectively using React’s state management, handling real-time interactions between the frontend and backend, and integrating third-party APIs (like GitHub’s API). I also gained experience in dealing with challenges around user experience, such as managing API limits and optimizing the performance of the app to handle larger data sets.

What's next for Open Source Project Discovery

In the future, I plan to:

• There are issues in setting the correct object data variables to their respective fields like stars and URL of the fetched array of objects of the repository data.
• Add user authentication to personalize the experience and allow for secure starring of repositories.
• Implement more robust features such as the ability to delete or update starred repositories directly from the app.
• Improve the pagination functionality on the account page for better navigation.
• Add new features like filtering by issues, contributions, and more personalized repository recommendations.
• Add integration to send request to the user's GitHub account to directly star from this app.
• Finally, deploy the application on a production server with a properly configured domain name.

Built With

• axios
• chatgpt
• express.js
• github-api
• javascript
• mongodb
• react.js
• tailwindcss
• vite