We wanted a dynamic team page for HackSheffield's website. Having to keep people's info updated is a pain, so putting it through GitHub profiles decentralises it and allows the information to stay up to date in a mutually convenient way. GitHub is an amazing Content Management System, especially using their incredibly useful GraphQL API, so the additional features that this brings to streamline the process of showing your team to the world in a major way.

What it does

It pulls team data from a GitHub organisation and renders a team page with linked icons based on GitHub profile data and extra configuration via a GitHub repo in the organisation. This is convenient since it's always right up to date with what's on GitHub's servers.

How we built it

The Node.js server pulls data from GitHub via their GraphQL API on request, then renders the data to the view with Pug.

Challenges we ran into

Initially, we were using jQuery out of our existing familiarity with it. However, this created problems with looping through the team records for totally unknown reasons, so we decided to use Pug so we could more easily splice in the data.

Accomplishments that we're proud of

  • We've made GitHub Organisations less of a private thing
  • We've made something that our society can use with immediate effect
  • We've integrated GitHub in a major way not just into our workflows, but those of others too

What we learned


  • Learned how to use Pug and Node.js in a more in-depth way
  • Learned how to use GraphQL APIs
  • Learned about a lot of other tools that could well be useful in future, including Expo


  • Learned more in depth about using GitHub as a CMS


  • Learned how to use GraphQL APIs
  • Learned to use Node.js


  • Met some amazing people who've had great experiences
  • Borja and Simon have had an introduction to American culture firsthand

What's next for TeamHub

  • See how it flies on GitHub and see what kind of companies make use of it themselves

Built With

Share this project: