— Easily contribute to your favourite OSS projects

Giistr (Github issue tracker) is a tool which help developers quickly find a task (issue) that fits their profile. The app displays all the open-source repositories you’ve starred on Github and their issues in one view so you can easily apply filters and find an exact one you are fit to fix.

Two weeks ago on a usual raining Sunday in London, I had some free time and I wanted to fill this time doing something useful, so I thought why not contribute to a JavaScript library I like?

I spent a lot of time on Github digging into every issue of every repository I starred then gave up because in the end I was just spending too much time on searching.

This problem could be easily solved using the Github API and it made sense to me to start working on a tool which could help developers quickly find an issue appropriated to their profile. I motivated two friends of mine to help me on the project and we ended up with this :

An efficient collaboration

I spoke to a talented designer (Jason) — who is also a friend — and asked for his help in making something easy to use, and nice to look at. Jason spent fews evening during one week to finish a first iteration of the platform. During his work he was inspired by some search engine and came with multiple approach for this tool, we selected the one we were satisfied with and started the integration.

At the end we were 3 working on this platform as a side project, we experimented some new tools and decided to release everything on Github.

Design aspect

Jason started to take notes of the project, as a designer without programming experience it was complex for him to get the purpose of the project. He spent time investigating on every user experience problems and came up with something great. Then he used sketch to quickly makes some mockups (low-files and high-files).

Once he had something he was happy with, we discuss and he shared the mockups to Zeplin (which is a software I use to get all the dimensions, colours and icons for the integration).

Tech side

We decided to play with some of the latests technologies and started using Typescript, React, Redux, ImmutableJs and Babel for the development. We also picked IBM Bluemix to host the platform, it is something completely new to us and we are satisfied with it so far. We made our mind about this stack and here are our thoughts :

Pain points

  • Annoying to set it up, it took me time to configure Webpack with Typescript and Babel for production and development
  • I couldn’t find a proper styling library for React in a Typescript environment. (I solved this by writing my own type declaration file for the one I picked)
  • It is annoying to type-check a value we get from an Immutable structure.
  • Redux Thunk — I know there are multiple nicest solutions to solve the async actions problems out there (and I plan to try redux-saga) but I am open to any advice about this.

Nice points

  • Type-checking — Go to definition, Autocompletion which at the end makes the code almost always work at runtime so you are spending more time on your IDE and less time on the browser. This combined to an Eslint check on your IDE is very good for productivity.
  • Write modern ES2015 javascript code, write less code.
  • All the benefits React provide (This has been developed enough on different blog posts)
  • Bluemix is based on open-source solutions (Cloudfoundry), it’s free and easy to get in for a simple project

Finally, what’s next ?

We are aware that some features are missing to make this tool very handy and we already plan to add the following ones:

  • Differentiate the Pull requests and the issues
  • Add the possibility to hide a repository user don’t care about
  • Save the filter settings locally
  • Give the possibility to load all the repositories and to load all the issues
  • Add a link to the Github contributors view in the about page

If you have any suggestion you can already open an issue on our repository or if you find any bug feel free to contribute by opening a Pull Requests.