Building a Github Team Event Tracker (MicroManager)
For fun I recently built a small node app that displays all the current Github events for our team broken out by member. Above we can see the app running on one of my favorite public projects, Three JS. You can also see the app running live at here:
The app can be used on your repo with just a single line change! Full source and setup instructions here:
Features
The app has several add ons to allow you to organize your team’s information a bit more simply.
Current Events
We can see in the example at the top of the page a few of the events have a green background. This is a notification that the event occurred in the last 30 minutes. A yellow background is used for events in the 30 to 120 minute window. And faded events signify that they are from the previous day.
Linking
All of the events shown on the board are active links back to the Github event. This lets you quickly navigate to a PR or comment once you see it on the board.
Member Selection
There is a sliding menu on the right hand side that allows you to select which team members you want displayed. If the # of team members is too wide for the screen, the app will automatically break the display into two rows.
Currently Winning
This feature shows who is “winning” on your board. So far winning is defined as who has submitted the most events in the last 2 hours.
Tech Used
This project was conceived as something fun to show on our in office TV. As with most side projects it led me to a few interesting technologies I had not had a chance to previously use.
Websockets
I knew I wanted the app to update in real time, so I sought out solutions that would work with my chosen server NodeJS. I went with socket.io as it appeared to be a mature simple tool to use. This app is an especially simple use case because there is no data moving from client to server. However it was fun to see the different types of communications available in socket.io. The only addition I made to socket.io basics was adding authentication to the requests. This can be seen in the “on connection” function in server.js
Github Oauth
The app offers an ENV option to require Github authentication. Directions are shown in the project readme. In order to do this I manually implemented the Github Oauth flow in NodeJS.
Docker/AWS ECS
For hosting I chose to try out the Elastic Container Service on ECS. This service allows you to push up a docker container to AWS and have the new container run on server restart. The hardest part is getting everything in your app set up to run correctly in a docker container. Once you have that arranged, the ECS service is very easy to use. I used this excellent tutorial to get my first image up. https://medium.freecodecamp.org/how-to-deploy-a-node-js-application-to-amazon-web-services-using-docker-81c2a2d7225b
Setting up your own MicroManager App
If anyone is interested in setting up the app for their own repo, instructions are in the Github Readme. It can be run locally or online. Comment here if you have any questions/suggestions. Thanks for reading!
