Lessons from Lovable

Bottom-fixed on mobile, top on desktop, with a clear active-state indicator.

No sign-up, no passwords. On first visit a player picks their name from the current Event's player list — removes all account-management overhead for a closed-group, occasional-use app.

The highest-frequency use case — checking today's or live scores — is the first thing you see on open.

The chosen name is cached in local storage, keyed to the current Event's ID. If the admin switches which Event is live, the app detects the mismatch and re-prompts — preventing someone being silently logged in as the wrong player.

Group Stage, Round of 32, Round of 16, Quarter-Finals, Semi-Finals, Final — replacing an earlier calendar-week structure. Tournament stage is a more meaningful way to browse 104 matches than date.

Accessible from the settings menu, for when someone hands their phone to a friend to place a bet. Ultimately more valuable than expected since one of the popular mobile networks has no signal at Mondello Park.

A second-level filter inside the stage pills (R1/R2/R3 within Group Stage; QF/SF/F within Finals) so the list never has to show every match in a stage at once.

Irrelevant to most players. Replaced an earlier, confusing set of 'Switch' buttons and role-based navigation with one consistent cog icon in the header of every major screen.

The two fixtures feeding a shared next-round slot are visually grouped in one container. Required custom backend infrastructure — a bracket_slots table and slot-resolution logic — since the source API has no concept of bracket position.

Both teams shown with emoji flags, the sweepstake owner's name attached to each team, score or kick-off time, and a status indicator — everything needed to read a fixture at a glance.

Any completed or live fixture opens its full analysis in a modal directly from the list, rather than a separate navigation step.

Initially a segmented control, ultimately the Races/Leaderboard switcher uses a simple tab pattern — green bottom border + green text for active, muted grey for inactive. Lighter, less 'buttony'. Admin navigation uses the same pattern for Races/Players.

Scrolls straight to today's/most recent matches so nobody has to manually scroll a 104-match list. Hides itself once that boundary is already in view, and stops the neighbouring button expanding into the gap.

Every race shows one of: Betting Open, Betting Closed, Results Pending, Complete.

Opens a live standings modal without leaving the fixtures view — keeps context intact instead of forcing a tab switch.

Races close the instant their scheduled time passes, combining the race's time with the Event's actual date. An early version ignored the Event date, meaning triggers could fire on the wrong day.

Strikethrough, muted/desaturated colour, and reduced opacity applied the moment a team is out, so tournament progress is communicated visually without reading every result.

Regulation score shown first with the penalty score in parentheses, so a shootout reads clearly as 'still a draw, decided on penalties' rather than looking like a straight win.

Lets a player see at a glance which of their own bets are riding on a given race — identified as a UX gap, not something Lovable surfaced unprompted.

Full-width, unmissable 'Add your bet' button.

Swipe between groups, or jump straight to one via a horizontal pill selector — supports both sequential browsing and direct lookup.

Add Bet/Player/Race/Event opens from the top of the screen rather than a centred modal — chosen specifically to stop the mobile keyboard covering the form, a bug hit with the original pattern.

Top two in every group always marked as qualifying; third place conditionally highlighted only if it sits among the tournament-wide best eight third-placed teams — genuine cross-group comparison logic.

Every car already backed appears as a tappable pill. A numeric input below lets a player bet on a car with no pill yet. Pill and manual entry are mutually exclusive.

Reworked mid-project from a split view into a single chronological list with bonus points pinned to the top, so a player sees their headline achievements before scrolling into individual match contributions.

Tapping a pill for a car you've already backed surfaces 'You've already bet on this car' — a small guardrail against duplicate bets.

Dirtiest Team and Heaviest Defeat rankings, reachable directly from their rule descriptions on the Rules tab and through the main leaderboard.

All 48 teams ranked by a weighted card score (yellow = 1pt, red = 2pts), with rank, flag, team, owning participant, card badges, and total — current leader visually highlighted.

Betting doesn't check entered car numbers against a real car list. A deliberate simplicity trade-off, covered by the disclaimer — not an oversight.

The four live-tracked bonus categories show their current leader directly on the Rules tab, with no separate view needed.

A plain-language walkthrough with a worked example. Values and maths pulled dynamically from the Event's actual configured weights — so the explainer never goes stale if weights are changed.

Each participant's accordion header shows how many of their eight teams are still alive, so status is visible without expanding every section.

After results, race detail switches to show confirmed finishing positions, the weighted calculation, and confirmed payout per person.

Shows exactly how points were distributed to each affected sweepstake player as a result of that specific match, itemised by rule.

Tells each player how much to send or expect back — 'Withdraw €X' in green or 'Add €X' in red — with a brief explanation of the Revolut group mechanic.

Yellow and red card stepper inputs per team, saving to Supabase immediately — built because discipline data is paywalled across every free-tier API investigated. 'Bookings saved' confirmation animates in from the bottom, matching where the floating pills sit on other tabs — a small detail kept consistent across the whole app.

Explicit Spent/Won/Net figures plus race-by-race history.

A pulsing green dot on live matches is the only motion in an otherwise static UI — added to stop the interface feeling flat, while respecting prefers-reduced-motion.

All match times converted to Irish time — removes mental timezone conversion for the actual users of the app.

Used throughout instead of image assets — renders correctly across iOS and modern browsers with no extra loading time or licensing considerations.

Once an Event is wrapped, a toggle on each player row lets Admins mark who's actually paid up via Revolut and a small indicator on each leaderboard card. Secondary to Withdraw/Add figure.

The polling Edge Function was overwriting manually entered card data on every sync because it wrote every column instead of only the ones it owned. Fixed with an explicit column list.

Admin reached via the settings menu rather than a login wall — security through obscurity, judged right for a small known group. PIN discussed and shelved: risk of locking out the Master Admin on race day judged worse than the risk of a friend snooping.

Since the API has no bracket slot field, grouping knockout fixtures required a bracket_slots table and SQL functions to trace each fixture back to its parent matches.

Clean and safe (no risk of wiping real data mid-test), and reusable for future events.

Deleting an Event triggers a plainly-worded warning about permanent data loss, with a destructive red button against a Cancel — sized to match how much data one delete actually removes.

The 1st/2nd/3rd weighting is editable per Event, with a confirmation modal that adds a warning if bets already exist — and triggers a full recalculation of all historical payouts on confirm.

When entering 1st/2nd/3rd, admin only sees car numbers actually backed in that race — cutting out invalid entries by construction rather than by validation after the fact.

Rather than a separate tool, the Simulator is a secondary link inside the Add Event drawer — extends the same form with additional fields so it never competes with the primary 'just add an event' path.

Given race count, time window, player count, cars per race, and average bets per player, the Simulator generates a fully populated Event in Supabase with realistic variation.