London Marathon Bib Maker

A charity side project that exceeded fundraising goals

View project

Skills

  • UI Design
  • Front-End Development

Tools

  • Figma
  • Next.js
  • Tailwind CSS

Problem

This year, I took part in the London Marathon in aid of the Marsden Cancer Charity. During this time, I joined several London marathon Facebook groups.

In the week leading to the race, London Marathon send all runners their race number and their starting pen (blue, red, green, and yellow - indicated on their bibs). An interesting trend that I noticed was that many members were trying to use their newly discovered race numbers to create profile pictures. Many creating their own using tools like Paint, with mixed results.

Solution

I had the idea to create a quick app to enable runners to create their own. Ultimately, I intended to use this tool as a means to raise a little extra money for the Marsden, while helping out my fellow runners.

In a few hours, I built a simple Next.js application where users could enter their race number, choose their starting line, and optionally include their name. The application then generates a profile picture of their race bib, which they can use for their social media profiles. Once the bib was created the user would be asked to consider a small donation. Thankfully, many accepted.

The Bib Maker

Outcome

The bib generator was well-received by fellow participants. It was exciting to see these profile pictures popping up all over Facebook and Strava. On top of that, it also raised an extra £200 for the Marsden in just 3 days, taking me beyond my fundraising goal.

Bib Maker comments