fellowhub

FellowHub is the love child of the MLH Fellowship and GitHub—an all-encompassing platform with multiple features to fire up fellow engagement, make fellows' lives easier and get every fellow a job!

Comment

FellowHub

Project Overview & Inspiration

FellowHub is the love child of the MLH Fellowship and GitHub — an all-encompassing platform with a profusion of features to fire up fellow engagement 😊 and to make fellows' lives easier 😁 and to get every fellow a job! 😮

Why? The Halfway Hackathon marks the midpoint of the MLH Fellowship. It's been an incredibly exciting 7 weeks, but we're now starting to think about careers, portfolios, and making full use of the Fellowship to improve our skills for the real world.

The problem we now have: How do we showcase all the work we've done, continue to connect with our fellow Fellows, and boost our personal & professional portfolios? What about keeping track of the plethora of events in the MLH Fellowship calendar? Or apply to jobs with cover letters!?

How? Our solution is FellowHub: a monster webapp/bot/exchange market/general election. We've:

  • 📈 collected data from all over GitHub and LinkedIn to provide stats and summaries for everyone in the Fellowship.
  • 🎉 created individual portfolios for each and every Fellow to be able to showcase your pull requests throughout the Fellowship
  • ⭐ made an exchange network to find awesome open source projects that our fellow Fellows contribute to or created! Star them and get globally recognized in the Fellowship Discord Server
  • 💬 thrown in a LinkedIn endorsement feature to find your podmates, and show them your love on LinkedIn — we've all been through a lot together, so why not tell the world?
  • 📆 integrated the Fellowship events calendar to be able to search for, browse, and read about upcoming and past events!
  • 💼 curated a gigantic list of tech job boards with jobs geared for devs with our skills
  • 💌 wrote personalised cover letters and emails for you to send to recruiters in your job hunt
  • 🗨 added a mockme command to find a fellow mock interviewer — we can never get enough practice!
  • 💯 created our own Discord general election to find out who's the most beloved Fellow 😉 (with some extremely cool prizes 👀)
  • 🙏🏽 added a weekly Discord shoutout for the most active committer of the week!

Go check it out now at fellowhub.tech 😍!

Who are we?

We are a three-member team from Pod 0.2.1 (Distributed Dodos) of Class 0 of the MLH Fellowship. Team members: Shubham Jain, Kenneth Aladi, and Iván Ovejero.

How we built it

FellowHub has three major parts, with lots and lots of amazing open source tech running behind it:

  1. For the backend, we've used the Github API, AWS Amplify Lambda Functions and API Gateway, and store our Fellow data in an AWS DynamoDB database. The v4 GraphQL GitHub API powers most of our data, making it incredibly easy to fetch all the data we could ever want in just a few queries! We've even expanded our AWS knowledge to use scheduled functions to perform a weekly calculation of the most prolific Fellow!

  2. For the Discord bot, we used Discord.js on a Node.js Heroku dyno, which receives one of our ever-growing list of commands from Fellows in the MLH Discord server, and responds with the data provided by the backend, in the form of a mini-report. Heroku was once again amazing in allowing us to operate 24/7 with fast response times, completely free of charge. We've even added a PostgreSQL database through Heroku to manage our general election!

  3. For the frontend, we used React.js (create-react-app) to create our monster webapp, containing a full-blown picture-based directory of all 100+ Fellows, job directory, personal portfolio, pod listing, events integration, authenticated requests. We've completely revamped the UI, this time inspired by the new GitHub Primer design system. We've also deployed the webapp using Netlify and integrated the CI to deploy automatically on merges to master!

We've got to thanks GitHub for the success of this project, with a team spread across time-zones with a gap of 4 hours, we heavily relied on GitHub Issues and Pull Requests to manage our tasks, organise assignments & priorities, review code, and correspond with our teammates.

Challenges we ran into

We're a team with a variety of skills and expertise in different areas, but Hackathons are about learning and running into challenges (and getting unstuck...). Some of the challenges we faced in this Hackathon:

  1. UI. We ❤ GitHub's fresh new design, and took it as a challenge to recreate the webapp with a new design inspired by Primer. Primer is fairly new, and so we got quite confused at first on how to actually integrate it with React. Our main difficulties came when we realised that the CSS framework is ever-so-slightly different to the React components available. After coming together and delving into the docs (and Stack Overflow) we finally realised this and everything fell into place, and have learnt how to use the Primer system! We're so proud of our webapp's design now!

  2. Prizes. We wanted something different, to get people interacting and excited. We decided to make our own Fellowship General Election, but we needed prizes! We struggled to think of good prizes and needed something worthwhile. We learnt how to reach out to sponsors and pitch our product to get support, and we're grateful to have @Swyx donate their Future Makers Creator Package (valued at USD 250!) as a prize for our election.

  3. Domain management (& a bit of DNS). We used MLH's awesome Domains.com partnership to get our free domain: fellowhub.tech, but to set it up with Netlify as a Custom Domain, we needed to update the nameservers of our new domain! We did this but nothing seemed to work still, but realised we need patience for the DNS to propagate. And then it works on one of our computers but not the other's!?? Ah — there's our own DNS Cache!

  4. Heroku, PostgreSQL, Database Design! We wanted to store our general election data persistently and originally we thought we would need a relational database and some JOINs, which would have been a bit more complex using DynamoDB, so chose to use Heroku. Once we'd committed to using Heroku, we ran into troubles trying to plan the database schema (we even ended up on a Zoom call holding hand-written database designs up to the camera for each other to see), but eventually put our heads together and broke it down into the processes required for the system, and simplified it down to just 2 columns!

Accomplishments that we're proud of

We're extremely proud of our project. The webapp has so many different parts, pages, backend functions and integrations that it required a lot of organisation and planning to get right.

Getting in touch with @Swyx was awesome — we were excited after hearing about his book from his recent talk to the Fellows (that's a link to FellowHub 👀)! We're so grateful for @Swyx for their generous donation! ♥

We're also proud of the way we planned what features to add — naturally, we had a lot of ideas, but prioritising which features we wanted to focus on, and leaving the bonuses to the very end worked out quite well, and we finally got more done than we originally planned!

What we learned

  1. We learnt lots about CSS, UI design, and GitHub's Primer design system. It was a refreshing change to use something other than Bootstrap or Material UI for once! Once we finally got started, GitHub's Primer system was amazing and really user-friendly — the perfect amount of minimalism that we needed!

  2. We learnt how to contact recruiters and developers, and pitch our product to get interest and support from them! Thanks @Swyx!!

  3. We learnt how to use Discord webhooks to provide a one-way messaging system into the MLH Fellowship Discord server, to provide cool functionality like weekly shout-outs and global recognition of support for each other!

  4. We learnt how to use Netlify, and integrate it with GitHub to automatically deploy our site on merges, and generate per-branch deploy previews to enable easier reviewing!

  5. We learnt about using PostgreSQL with Heroku — none of us have ever used persistent storage on Heroku so this was an amazing learning experience!

Judging criteria

  1. Community Building: Learn all about your fellows, vote for them, star their projects and endorse their skills!

  2. Learning New Skills: Win the contest and get the prize pack that will single-handedly make you a senior dev!

  3. Getting Help: Find that specific fellow who knows what you don't, watch as your profiles rack up GitHub stars and LinkedIn endorsements, do mock interviews with a fellow!

  4. Remote Work / Tooling: Get our giant remote job board list, get our premade business-speak templates, get interview practice!

  5. Showcase / Portfolio: Access your own portfolio with more than you ever wanted to know about yourself!

  6. Navigating the Fellowship: Find and filter and click through to the Fellowship events with our Events feature!

What's next for FellowHub?

We're proud of presenting a complete, working, fully integrated system as FellowHub. However, we have so many more ideas which we want to do after the Hackathon to improve it! Some of the extensions we've thought of are:

  • Let Fellows upload their own data to FellowHub — it might be something they only want to share with other Fellows, like profile pictures!
  • Optimize the API requests made in the webapp to ensure we're not requesting unnecessary data and slowing down page loads!
  • It would be awesome to detect and display social media mentions of MLH projects, to encourage discussion and aid promoting more awesome open source projects!
  • We want to stream live contributions of our Fellows to Discord.

Built with

AWS Amplify (DynamoDB, Lambdas, REST API), React.js, Babel.js, Discord.js, Discord Webhooks, Node.js, Heroku CLI, Heroku PostgreSQL create-react-app, Netlify, GitHub Primer Design System

Disclaimer

  • This project is a fork of the original Fellowbook project. There is a clear separation of commits. All commits on this fork have been done solely in this Hackathon.
  • All of the functionality being presented here is the product of our blood, sweat and tears during the Halfway Hackathon this week.
  • The webapp frontend from the first Hackathon was entirely scrapped. The bot commands added during the first Hackathon and subsequent weeks were unmodified. The Amplify backend was modified as explained in the previous section.
  • The discord webhook bot is completely new (#fellowhub channel)
  • The code that has been kept from the last Hackathon includes: the original core discord bot backend, the login system & authorization, the /fellows API endpoint to fetch all fellows.
  • The code that has been kept but updated from the last Hackathon includes: the /fellow API endpoint to now on-the-fly query the GitHub API to get more live data for individual fellows, the /standups API endpoint to fetch more standups at a time
  • Everything else is new, completed during this Hackathon only

If you have any questions about this, please let us know! Thanks!

Try it out

Built With

Share this project:

Updates