Inspiration

When we started the fellowship, we knew we were going to work on amazing open source projects, by even more amazing maintainers, contributors, and developers alike. Once the repositories/projects we would be working on were shown, one question really lingered in the air.

How Open Source Friendly is this repo really?

We can always turn to majors repos like React, Vue, Flask, etc. But these don't paint a picture on what less popular yet still quite active open source projects look like (from a codebase perspective). This idea clicked even further when we were going through the quite frankly simple yet effective LMS Platform for the first week, which consisted of literally, what makes a repo a good open source repo/project.

So putting two and two together, RepoRankr was born!

What it does

RepoRankr's main feature is to scan any GitHub Repository and determine a Grade score for how well said repo conforms to best practices of Open Source.

Such as (but not limited to):

  • Number of Contributors
  • Most Recent Pull Requests and Issues Dates (both opened and closed)
  • Issue and Pull Request Templates
  • Number of topics
  • Checks for homepage URL, short description and repo name
  • License verification (More open licenses are favoured)

How we built it

The app infrastructure was quite straightforward, we use Next.js as our React Framework of choice, so we can easily deploy to Vercel. GraphQL calls are made using Apollo Client, and REST calls via Axios.

We leveraged StyleX to style our components and landing page, while it wasn't out-of-the-norm, per say, we still ran into a few unfavourable challenges.

We utilise the raw power of the GitHub GraphQL API (as well as the REST equivalent for a tiny call), in order to scan the repo, we then format the returned data into a more 'friendly' model, pass that through our rank determination algorithm and Bob's your uncle, the client website will get a grade score, as well as a rundown on some of the checks.

Challenges we ran into

1. Time Zone Challenges

Since each member is quite literally, scattered around the world, our time-zones are not very compatible. We did find a good compromise for a daily standup time (08:00 EST), but we ran into situations where after the standup's over, the majority of the team would be asleep, leaving 1 or 2 developers contributing alone, and finding it hard to sync up until the next standup.

2. StyleX Problems

Overall we found the development process using stylex quite abnormal compared to just using css modules from next.js, especially with patterns such as copy pasting with the chrome debugger, and nesting and css selectors.

In general, would we use styleX as our css alternative of choice in the future? Problably not.

Did we learn a thing or two about how stylex transforms regular css-in-js into utility classes? Yup!

Accomplishments that we're proud of

Super proud on the API flow we developed, and understanding the GitHub APIs.

What we learned

  • CSS-in-JS in practice
  • More refinement in GraphQL knowledge
  • Working as an async team with members all over the world

What's next for RepoRankr

  • Improve analysis results
  • More detailed badges
  • Actually make our own repository more Open Source Friendly

Built With

  • apollo
  • github-graphql-api
  • github-rest-api
  • graphql
  • javascript
  • nextjs
  • react
  • stylex
  • vercel
Share this project:

Updates