More than just a map

What it does

MLH Fellow Map is an everchanging map containing all the MLH Fellows, Staff and Mentors. But its not just a map - we also allow anyone to gain their own personal blog page, to edit however they please!

Our goal with the MLH Fellow Map was to showcase the diversity of the Fellowship while also allowing anyone within the fellowship to learn more about their workmates in a fun and interactive fashion. Fellow map consolidates information that is publicly shared by each fellow, and organizes it nicely on an interactive map.

Fellow map allows you to filter fellows by their pod numbers. Furthermore, fellow map creates a portfolio page for each fellow. Fellows can edit this portfolio to include any information they desire!

How we built it

We used Gatsby as the static site generator for this project. As Gatsby comes with code splitting, this allows the application to load incredibly fast 🐇

We also completely refactored the project to use Typescript. This allows the code to be more easy to maintain by future fellows, who may want to reuse the code for their own Fellow Map or possibly, their own organization. Typescript turned into an almost necessity with the added complexity we added onto the project, helping to keep us on track!

We used React on the frontend and GraphQL for querying the data. We fetched public information about each fellow from GitHub API.

The content of the portfolio is written in MDX. MDX allows custom React components on top of markdown support. This enables the Fellow to fully customize his/her own portfolio page and really make it their own.

One great thing about the Fellowmap is that it can be re-morphed into basically any github organization with teams, with only minimal changes to text such as renaming 'pod' to 'team'. This is thanks to the scale-first approach we took as we built fellowmap, harnessing the full power of Gatsby and making it faster than ever, despite hosting 100s of fellows on one page.

Challenges we ran into

Remaking Fellowmap - a simple map with just a few 100 lines of code - to support such complexities such as querying GitHub and performing geocoding wasn't easy! Let's go through some issues that made us want to rip our hair out:

  • Show the profile of particular user according to route if directly opened the url. For example: This was really needed to improve speed, otherwise we would be loading 100s of fellow's pages to store for no reason! Gatsby has a complex line between whats server rendered and whats client rendered, we had to grow to understand this line with absolute precision to pull this off.
  • Cluster the profiles to stop getting overlapped when the amp is zoomed out.
  • Get the data from the GitHub api for all the MLH fellows to show on the map without duplication. There are a lot of outliers within the Github Dataset. Finding a way to process it and prep it - especially on a map - wasn't easy, but we pulled it off with OpenCage and some typing help from Typescript.
  • Show the user github stats on the profile in a meaningful way. We really wanted to show more stats, but we didn't have enough time to display more than the user's graph. Maybe in the future we could display stats for each fellow in their portfolio page.
  • Decided the list of data to show in the public profile. Keep it in mind the privacy one would like to keep on its profile. We made sure to devise a way for users to use mdx to either express themselves more or hide themselves entirely.

Accomplishments that we're proud of

  • Making use of data fetched from GitHub in a meaningful way (e.g. converting GitHub location into placement onto map). We didn't think it was possible, but we pulled it off thanks to geocoding! 🌏
  • Showing the proper stats of the user with keeping privacy into consideration.
  • Cool portfolio for each fellow to show there accomplishment in MLH Fellowship to the world
  • Our project is not only for the fellows, but also for our mentors
  • Keeping the code simple and maintainable so that it can be extended in the future for many fellowships to come, or a completely new organization entirely!

What we learned

  • Team collaboration
  • Gatsby library with a full host of plugins
  • Advanced Typescript
  • Advanced Leaflet mapping
  • GraphQL queries
  • Github advanced workflow and actions with Netlify - users can demo their addition instantly after a PR!
  • Fast paced development and team-led delegation

What's next for MLH Fellowmap v2

We plan to create a Github bot to assist with Continuous Integration. The Github bot will merge PRs if the user edits the profile matching his github profile, making the map more lively and interactive than ever.

We also hope to add more information to every fellow's page such as stats and which projects they've been contributing to.

We also hope to theme mentor's and MLH Staff icons to help these heros stand out from the crowd!

Improvements from v1

View v1

  1. The website is much faster with optimized image loading and lazy loading of fellow pages.
  2. Every fellow is shown - gone are the days of making a PR to add yourself to the map
  3. Powerful filtering lets you find the people you're looking for, from fellows to staff to mentors, instantly
  4. Not happy with your default generated page from github? Completely remake your page and change any aspect, from your image to your location with the power of MDX. Fellowmap will cleverly fill in the fields you left out from github.
  5. Express yourself with the full power of MDX (Markdown + JSX) with your own personal page for others to find easily. You can also easily share a link to your page with anyone you please.

Built With

Share this project: