Building Gitfame — Github Open Source Contributions Analyzer

All it takes one to learn a new framework, a language or a third party API is to build something out of it. With the same thinking I started with this project Gitfame — Github open source contributions analyzer a long time back in October 2017.

Check it out: https://gitfa.me
Find it on Github:
https://github.com/hereisnaman/gitfame

The open source project was meant to be presented as an example PWA application at GDG-ND Dev Fest 2017, for my talk on “Progressive Web Apps With Polymer”.

Talking about PWAs at GDG-ND Dev Fest 2017

Gitfame 1.0 (Polymer Js)

Gitfame started as a frontend only application based on PolymerJs, though now is based on React Js with a separate server based on a graphql api built with graphql-yoga(nodejs). With the consuming the best of PolymerJs the web app easily implemented the features including:

  1. PRPL pattern (learn more: understanding the PRPL pattern)
  2. Work Offline (learn more: offline caching with service worker)
  3. Push Notification (learn more: using platinum elements)

…and much more.

PolymerJs out-of-box implements sw-toolbox and sw-precache for easily setting up service workers and pre-fetch, pre-load resources.

The webcomponents.org is house for 1000s of web components which makes the development much easier and interesting.

The PolymerJS based Gitfame is available at: https://github.com/hereisnaman/gitfame/tree/polymerjs

Gitfame built with PolymerJs

The earlier version of the Gitfame based on PolymerJs consumed the Github’s V3 Rest API for fetching fresh data for the user and performing basic analysis such as stars, forks and commits per repository and same collectively. Multi pattern caching was established as to provide fast website load and offline user experience. Combining the offline working capabilities and providing a manifest.json for the web app, made the app possible to be saved by the users at home screens on their mobiles.

Gitfame 2.0 (React & Nodejs)

Taking the idea forward I decided to re-write the project using ReactJs for frontend and NodeJs for backend. This time I focused on doing much better analysis and consuming the then new Github V4 graphql API.

Gifame 2.0

Consuming the Github’s graphql API, I was able to reduce the response time to about 75% and later optimizing the requests, to about 60%. With graphql you can request only the particular fields that are required by the app making it faster than consuming the REST API.

Although Github’s graphql API is fast in some cases but till the time of writing this post, is unable to deliver big queries. It breaks even when querying for total commits and total user commits of some big repository in a single request.

The latest version of Gitfame perform in-depth analysis:

  1. Popular owned repository based on stars and forks
  2. Repositories per language analysis
  3. Owned and forked repositories per language distributions
  4. Popular language based on stars and repository count
  5. Primary and sub language repository count distribution
  6. Total stars, forks and watches of owned repositories
  7. Issues and pull requests analysis

Another Iteration: Writing the Graphql API

Recently while learning graphql I thought of updating the then present Gitfame REST API into a graphql API. howtographql.com being my first source of learning graphql, after obviously reading actual graphql specs from the docs, made me aware of the great development going at graphcool, the graphql-yoga and prisma.

Find the Gitfame backend: https://github.com/hereisnaman/api.gitfa.me

I wrote my first ever graphql API using graphql-yoga — a wrapper around graphql-tools, apollo-server and express. The other library prisma — provides database as a graphql API. Working on providing connectors for all major databases, currently Prisma provides connectors for MySQL and Postgres.

Gitfame uses prisma with postgres connector. The database schema is defined in form of graphql schema type definition. Prisma takes this database schema and build or make changed to the database structure. It then generated the graphql API schema for the database, which provides much more advanced query and mutation options than any other ORM I have tried, making it very easy to do tasks like pagination, subscriptions and more.

The then generated database graphql API is consumed by the prisma-binding for performing operations on the DB easily in NodeJs. Gitfame thus have a 2 level graphql API architecture. The application API based on graphql-yoga, which the client side interacts with, above the underneath database API generated by Prisma.

Upcoming Features

Working on making the app much more sharable and interactive the following features are in pipeline:

  1. Share report as image
  2. Latest user searches
  3. Compare users
  4. Push notification alerts

Conclusion

This has been really an interesting project with learning new things by experimenting with different frameworks and libraries. Don’t forget to checkout it out at gitfa.me.