June 5th, 2020 - MLH Fellowship Orientation Hackathon Project
by Shubham Jain, Kenneth Aladi and Iván Ovejero.
Fellowbook is a whimsical data stream of all your 120 fellow fellows, made available with a snappy 24/7 chatbot 🤖 and a picture-based directory web-app 📗
—Tagline: Your fellows at your fingertips!
Problem: How in the world do you keep track of all +120 fellows in your head? Way too many! It's like a Russian novel! Help! 😲
Solution: We stream the fellows you need whenever you need them. We'll source, sort, summarize and quantify everyone for the entire summer, for 2020 and upcoming years! 🔥
- For people with goldfish memory, who can only keep 7±2 people in their heads at all times! 😬
- For people who're just too lazy for lookups! Sometimes you just want someone's numbers at a glance! ⭐
- For people who know that popularity contests and checking each other out is always where it's at! ❤️
People love it!
And yes, the bot awards you extremely valuable popularity points.
→ If you want to check yours, you're free to do so in the MLH server right now!
→ If you want to know what they mean, this is open source, so you know what to do!
In the MLH Discord, type !gimme githubUsername and our snappy fellowbot will hand you a summary of everything it knows about them: name, repos, followers, bio, location, assigned pod, and those oh-so-rare popularity points! 😝
Or if you just gotta catch 'em all, just hop on over to the MLH Fellowbook web-app to explore the full FaceFellowbook web app. Follow your fellows!
We're excited to have used lots of open-source tech to create Fellowbook!
We collected public data from Github API endpoints, retrieving stats as well as personal data and sundry bits of information, and then we populated it into an AWS Amplify DynamoDB instance.
- Github APIs (the v3 REST API and the v4 GraphQL API) → Big props to our core data provider!
- AWS Amplify → Tech with the MLH Stamp of Approval®!
- Amazon DynamoDB to securely store Fellow data
- Amazon API Gateway to access Fellow data, using Amazon's awesome custom API Authorizers and our own lambda to authorise users
- Amazon Lambda for effortless server-side Node.js code!
We created a Discord bot ready to answer commands and crunch up mini-reports based on the data we fetched, then we hosted it on Heroku, and let it loose in the official MLH Discord server for people to discover and play around with.
- Discord.js → Chosen by MLH, chosen by us!
- Node.js → insanely easy and quick to setup server!
- Heroku → Big props too! Lifesaver on auth!
We presented all this data for easy exploration with a React web-app created with Facebook's create-react-app, including search functionality, and cherrypicking only the most flattering pictures of all fellows! (Or abstract geometric images as sane defaults.). All quickly deployed on Heroku!
- React → Tech with the MLH Stamp of Approval®!
- Babel → Tech with the MLH Stamp of Approval®!
- Styled Components → For the ❤️ of beautiful UI!
We created our own GitHub OAuth App so users can login with GitHub to authenticate themselves to use the web-app — non-Fellows can't peak!
We initiate the GitHub's OAuth authorisation process ourselves to get an access token, which is used to confirm you are part of the MLH Fellowship GitHub organisation.
There are lots of parts to this project! The main repository is split into:
Most of these files are auto-generated by the amplify CLI tool.
To get started, you'll need to install and use amplify:
cd aws-backend
npm install -g @aws-amplify/cli
amplify configure
amplify init # to create your own project
amplify deploy
The files you will usually be interested in are:
aws-backend/amplify/backend/function/fellowsEndpoint/src/app.js(our/fellowsAWS API endpoint routes)aws-backend/amplify/backend/function/githubauth/src/index.js(our custom API Authorizer function to ensure users are MLH Fellows)aws-backend/amplify/backend/api/api-params(our AWS API parameters)
This contains the server for the Discord Bot, to use:
cd discord-bot
npm install
node index.js # to host locally
You'll also need a .env file containing BOT_TOKEN=[your Discord bot token] and GITHUB_LOGIN_TOKEN=[your Github API access token].
This contains the Node.js scripts used to populate the AWS database of fellows. To use:
cd github-api
npm install
node fetcher.js # to get all relevant data from the GitHub API & save to our remote db
You will need a .env file containing GITHUB_TOKEN=[your GitHub API access token].
This contains the simple Node.js Express server that is hosted on Heroku serving the static built React web app. To use:
cd heroku
npm install -g heroku
heroku login # complete the login process
heroku create # if you want to deploy it yourself
git commit -am "Commit message" # make changes and commit to heroku master
git push heroku master # deploy changes
To deploy the static site, you'll need to add the static files to the heroku/web folder (use git add ... -f).
See Heroku's excellent documentation for more details.
This contains the React web app files, currently hosted at mlhfellowbook.herokuapp.com. To use:
cd web
npm install
npm run-script start # to serve locally
npm run-script build # to build the site
To deploy, follow the steps at the end of the Heroku server dyno instructions!
Remember the rules!
It's not about:
- how good your code is,
- how novel the idea is, or
- how useful the project is.
It is about:
- Impressive: People's wows are on record! Check Discord!
- Design: Slick UI with search and a snappy bot 24/7!
- Completion: No pending functionality, our hack works!
- Learning: AWS, CORS and auth are always tough!
- OSS practices: Plentiful commits, issues, branches, PRs!
- Approved tech: Many projects integrated into one!
In short:
Sometimes a pointless project is one of the best hacks!
—MLH Hackathon Rules