Comp
Leader
board

A leaderboard for fitness competitions.

Using an AI-first workflow to ship a real-time competition leaderboard for a gym community — from brief to live in one month.

Role
Product designer & developer
Tools
Figma, Bolt.new, Supabase, ChatGPT
Timeline
1 month
Outcome
A mobile-friendly leaderboard that can support hundreds of scores.
Athletes in the gym
01 —

The
Problem

We needed a way to keep score for our in-house competition.

The Context

I coach at a gym called Academy Of Lions. Every year many of us compete in the CrossFit Open — a worldwide fitness competition that requires a paid entry fee.

Many of our members don’t want to pay the fee to sign up — but still want to have fun and compete against each other.

The Solution

We needed an internal “Shadow Leaderboard” — a free, low-stakes platform where every member could log scores, see their friends’ results, and feel part of the event, regardless of their budget or skill level.

Leaderboard main viewSign inSubmit scoreNavigation menu
02 —

The
Approach

I used an AI-first workflow to meet a tight timeline.

The “AI-First” Workflow

I skipped the research, discovery, and initial design phases entirely and moved straight to code using Bolt.new.

The bulk of the design work was done through iterations. AI-designed work only looks good if you don’t look too closely — I acted as the Product Director, guiding the AI to handle most of the UI while I focused on the logic and the database structure.

Going Full Stack With Supabase

A leaderboard is useless without data. I integrated Supabase to manage the backend. Despite having no prior SQL experience, I used LLMs to help me architect the schema:

  • Users (Athletes) linked to Workouts
  • Row-Level Security — ensuring users can only edit their own scores
  • Real-time updates for the live leaderboard view
03 —

Testing

I gathered 10 athletes and observed them inputting scores in real-time.

The Heuristic Fail
Users didn’t know how to get back to the main page. I assumed the logo was a good enough “Home” button.
The Fix: I implemented a standard hamburger menu with explicit navigation labels.
The Content Design Fail
When a user tried to overwrite a score, the app threw a generic error: “Failed to submit.”
The Fix: I rewrote the error handling logic to provide specific guidance: “You already have a score. Please delete your previous entry to submit a new one.”
Error messaging before and after
The Responsive Fail
On smaller iPhone screens, the keyboard overlapped the “Save” button in the profile editor.
The Fix: I manually adjusted the CSS breakpoints and padding — a detail the AI overlooked.
The Builder Privilege Fail
I had built the scoring system to automatically place me in first place no matter what I scored. My ungrateful users did not like this.
The Fix: I corrected the scoring logic to be fair to everyone. It was up to me to beat them the old-fashioned way.
Leaderboard main view
Sign in screen
Submit score screen
Navigation menu expanded
Athlete profile screen
Leaderboard main view
Sign in screen
Submit score screen
Navigation menu expanded
Athlete profile screen
04 —

Conclusion

The app successfully hosted our competition data, allowing members to engage without the financial barrier.

The Takeaway

This project challenged my view of the “Design Process.” In the past, this would have been a much longer undertaking. With AI tools and a “Maker” mindset, it took a fraction of the time.

It proved that Product Thinking > Pixel Pushing. The value wasn’t in the UI (which is standard); the value was in identifying the user need, managing the data structure, and shipping a working solution.

Next Steps

The CrossFit Open is coming up again. We are making a bigger push this year to get people to participate through the leaderboard.

Next Project →