London Marathon Bib Maker
A charity side project that exceeded fundraising goals
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.

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.
