• Project site
• Demo instance
• Code

#coding #sports #myheats

I took advantage of the CSS flexbox layout to improve the design on mobile devices. The main idea was to reduce the table size to a minimum on small screen sizes. The individual cells of the table are shown as small boxes, with labels to indicate the content type.

On larger displays, for instance, a big screen at the finish line of a sport event/run, the table is displayed in a traditional fashion.

Here some more screenshots of the admin section with the new design.

The live-updating leaderboard:

The scoring section where judges can enter the scores. In this section, I found it important to indicate the loading status whenever the score is changed and to make the input field big enough for usage on small smartphone screens:

Friends told me that similar software has a feature to “lock” the scores once the scoring is done. Currently, there exists no such feature in MyHeats, but that's a good idea for my next hacking sess.

The section where event admins can create heats and manage the startlists for each run:

The administration of the athletes:

Athletes are not required to have a lastname. In this way, the leaderboard can equally well be used to score entire teams.

And last but not least, if you are reading until down here and you are interested in the technical implementation and the arrangement of the data in the database, here the database schema:

Interested in test-driving the scoring backend for judges and event admins? Drop me a line (see footer).

• 🚀 Demo instance: https://myheats.in0rdr.ch
• 🧬 Code: https://code.in0rdr.ch/myheats

Plan to work on some features the next few days: * Add/remove athletes (bulk) * Improve UI

#coding #sports #myheats

For more background on the app, the idea and the problem(s) it could solve have a look at the original post Live heats, Scoring and Leaderboard for Sport Events (March 11, 2023).

edit 2023-04-04: Bug fixed in v0.2, thanks @JonnyBurger and @PatrickH!

oh.. and, I might need your 🥺 help with a little 🐛 bug I encounter.

⁉️ Anyone knows where this flickering comes from? Reproduce as follows:

1. Add one heats to display
2. Remove the heat again
3. Wait for the screen to update. Can you see that flickering?

How can I fix that? I'm pretty new in that JavaScript business. If you know the fix, please shoot me a mail, ping me (see footer).

The bug should be in Leaderboard.js somewhere.. Thanks for any hints!

#coding #sports #myheats

I detected the following deficiencies which could be improved with a more digital approach (digital/mobile from the start):

• Mistakes can occur while copying ratings and numbers from paper into Excel
• Sorting each Excel list (for every competition and run) manually is error prone, especially, with multiple competitions going on simultaneously (slopestyle ski or snowboard, formation skiing, men, women, several runs, etc.)
• The results need to be printed on paper and published on the website (PDF)
• Formatting and printing these sheets (for each competition) takes quite some time and the result is not always consistent (in terms of formatting)
• There are no live results. This is also not convenient for the athletes that want to know right after the run how they scored and how they rank in the competition. Ideally, the athletes get to know their scores right after they cross the finish line.
• OneDrive syncing did not always work reliably (depending on the end users devices) and mailing the sheets was a pain

I was looking into some existing solutions for systems to process the data, such as liveheats. However, since most of these systems are finished products and there is no open source code available that I know of, I decided to quickly draft my own version of a live leaderboard for these kind of sport competitions.

🚀 Demo instance: https://myheats.p0c.ch

🧬 Code: https://code.in0rdr.ch/myheats

Right now, there is only the leaderboard which automatically updates as soon as new data arrives in Supabase. During the process of creating this first draft, I became a huge fan of Supabase because it works really well. It is the open source Firebase alternative with Postgres database in the backend. I can highly recommend it for your next project, because it is extremely easy to get started with.

For the purpose of the leaderboard, I was especially interested in the realtime aspects of Supabase. This allows me to update the table as soon as new data is entered in the backend (by the judges of the comptition).

I'm planning to update the code with some more features soonish, among others:

• Authenticaiton for the experts that perform the ranking and rating
• A very simple user-interface or view for the experts to edit the score for a single athlete of a heat or run
• Better import/export functionality for start list and rankings

Stay tuned. If you have some input or tips feel free to drop me a line (see footer).