Challenge
There are already several scoreboard options out there. Why make another one?
I can think of plenty of issues with the status quo:
- clunky interface for updating scores
- no support for heats/groups (all showing on the same page)
- slightly delayed “real-time” updates
- inflexible or outdated look & feel
- excessive paywalling of features
Among the smaller scoreboard providers, not being able to show multiple heats/groups on one leaderboard seemed like a dealbreaker.
And the larger-scale service providers seemed like overkill sometimes, with pricing running into upwards of thousands of dollars. Sure, they’re able to offer a lot more support and features like dedicated mobile apps, text/email notifications, event/equipment management, etc.
But for a student club or medium-sized company, there didn’t seem to be a viable option.
Solution
Runnerboard aims to fill this gap by keeping things simple, with a clean interface.
The absolute must-haves? Addressing everything from the list earlier.
And so that’s what I did: publish a working web app that lets you share a leaderboard for any time-based competition. (Plus, it ships with light/dark mode out of the box.)
Here’s a screenshot showing a medium-sized event with 3 different heats. Runners can also belong to a team/tag, which shows up as a small badge next to their name:
Outcome
Feel free to give Runnerboard a try for yourself!
Once you log in and start tinkering with a race, I recommend opening the leaderboard on a separate device so you can see it update instantly once you change a runner’s time, name, heat, or team.
Technical Notes
This was a perfect excuse for me to start learning Vue.js and Nuxt, and I was able to quickly learn the fundamentals using this as my first project.
For example, to practice using composables, I implemented a profanity filter for user inputs. After all, the demo app is public, so let’s keep it clean!
There are a lot of structural basics that I believe can be used in almost any SaaS, including the landing page(s) being included in the same project as the app itself. This way, they can share visual themes and maintain a consistent look & feel.