MLH Fellowbook

Your MLH Fellows at your fingertips!

Comment 1

Project Overview & Inspiration

With Fellowbook, we source, sort and summarize data on all 120 fellows of the 2020 MLH Fellowship, making it available through a snappy 24/7 chatbot and a picture-based directory app with search functionality.

Why? The problem we faced was simple: How do we keep track of +120 new people? All with their own nationalities, technologies, projects, pods, interests, and even how popular they are, and of course what they look like?

How? Our solution is for the lazy as much as for the diligent! For the lazy, we offer a Discord chatbot that answers your command !gimme username in miliseconds, so that the data you need is right at your fingertips while you're all chattering away. And for the diligent, we also offer full-blown picture-based directory app with search functionality at mlhfellowbook.herokuapp.com, so that you can look at and learn from the full cohort to your heart's content.

Who are we?

We are Pod 0.2.1 (Distributed Dodos) of Class 0 of the MLH Fellowship. Shubham Jain, Kenneth Aladi, Iván Ovejero.

How we built it

We decided to split up the project into three sections, and to make use of the following open-source technologies:

  1. For the backend, we used the Github API, AWS Amplify, and of course the AWS DynamoDB database. These three technologies were extremely useful for sourcing, storing and sorting data about every fellow, including auth headers and other finnicky details, and providing data reliably. Particularly the GitHub API was very intuitive, with great developer experience.

  2. For the Discord bot, we used Node.js, Discord.js and Heroku, in order to build and host an interactive script that, on demand, receives commands from the fellows in the MLH Discord server, and responds with the data provided by the backend, in the form of a mini-report. Heroku was amazing in allowing us to operate 24/7 with fast response times, completely free of charge.

  3. For the frontend, we used React.js, namely create-react-app and including Babel.js, to create for everyone a full-blown picture-based directory of all 120 fellows, including search functionality, authenticated requests, and a UI inspired by Material Design.

An important factor in the success of this project was using GitHub and the GitHub flow throughout the project. We focused on: filing issues, creating branches, commenting and answering comments, committing frequently, opening pull requests for reviewing and merging our branches into master, choosing a open source license, and hacking together a colorful README which couldn't have been possible whilst remote-working without GitHub!

Challenges we ran into

  1. At first we (understandably!) had troubles coordinating between each other, given the 4 hour time difference between us, and interacting fully remotely which none of us were very used to. We were able to overcome this by deciding on a set of times to work on during the day such that we have a 4-hour overlap where we're all online to help and update each other.

  2. None of us have ever used AWS Amplify (or any AWS services) in the past. This meant it took some time to read through the documentation, understand what the services do, and understand how to use them. It was in particular difficult to setup the API endpoint with lambda functions, with CLI errors and functions seemingly not running, but with lots of research and pulling together as a team, we overcame this!

  3. Discord bots were also new to us all, so we first had to research how to make a Discord server. An initial confusion we had for some time was answering the question "where does the bot actually run?" which the Discord.js Guide didn't seem to mention. We were able to figure this out by researching for more tutorials on making a Discord bot online, and open source examples on GitHub!

  4. Authorisation. The MLH Fellowship is unique. We wanted Fellowbook to be equally as unique and restrict access to the Fellows. This took an extremely long time, trying to understand how OAuth relates to OIDC and even OpenID. We then spend ages trying to use Amazon's Cognito work with GitHub as an Identity Provider, but failing to get the details we requried for a successful deployment. We overcame this by futher research and settling with AWS Custom API Authorizers, writing a lambda function to use a GitHub user's access token to check if they are part of the MLH Fellowship organisation.

Accomplishments that we're proud of

Ultimately, the biggest challenge was getting familiar with with stacks and technologies that none of us had ever come across, so seeing it all come together in the end was very satisfying and we're really proud of getting all the parts of the service integrated so quickly!

We're also extremely proud of the way we worked as a team and helping each other out throughout it - it's quite hard to work remotely for the first time but we managed it!

We spent several hours trying to get the AWS API working with authorisation to ensure users are really Fellows in the program. We're proud that we managed to get this working with the awesome AWS custom API Authorizers in the end, with a lamdba function (also deployed with AWS Amplify!) that uses the user's GitHub access token to ensure they are a Fellow.

What we learned

So much!

  1. We learnt how to work effectively together remotely, using tools like GitHub for source control and project management, and Google Meet/Discord for video meetings between us all.
  2. We learnt how to use AWS services and the AWS Amplify CLI tool to deploy our own API, authorisation, and database.
  3. We learnt how to use Discord.js to create our very own Discord bot that uses our own API to fetch data.
  4. We learnt how to use services like Heroku to deploy Node.js servers and even our static website!

What's next for Fellowbook

Fellowbook, as-is, is complete with nothing pending in the UI. To further improve the service, we would like to do a variety of things such as:

  • Add Fellowship-specific data: some people aren't comfortable with e.g. sharing their actual profile picture on public GitHub, but might be more willing to do so with an internal Fellowship application. We'd like to add an option to the web-interface to update whatever information you want to if you're comfortable with it
  • Add live updates to the website (and possibly bot!). Wouldn't it be awesome to stream, live, the amazing open-source contributions our fellow Fellows are doing!?
  • And of course, clean up the code. This was a hackathon so as expected, the code isn't of the best quality. Whilst we did do code reviews, our system architecture in particular could use some more thought!

Built with

AWS Amplify (DynamoDB, Lambdas, REST API), React.js, Babel.js, Discord.js, Node.js, Heroku CLI, create-react-app

Try it out

Share this project:

Updates