The Demo Is Live: From Concept to Working Product on the Landing Page

It Works

Nine episodes in, and the telemetry overlay is running live on the SportsSync landing page. Real cycling video, real GPS data, real-time speed, heart rate, cadence, and power — all synchronized and updating smoothly as the video plays.

This is exactly what I had in mind when the project started: a cyclist's video with professional telemetry data overlaid, the kind of production quality that Safa Brian's team achieves with Final Cut Pro and hours of manual work. Except this runs in a browser, automatically, from a YouTube link and a GPX file.

Making the Component Reusable

The biggest technical achievement of this session wasn't visual — it was architectural. The telemetry player was previously embedded deep inside a five-step wizard, tangled with navigation logic and state management. Extracting it into a standalone, reusable component took significant refactoring.

The component now accepts clean props: a YouTube video ID, a GPX data source (URL to the file), a synchronization point (video timestamp mapped to GPS track index), a start time, and display options. Two instances can coexist on the same page — one showing a pre-configured demo with my cycling footage, and another where visitors can try their own data.

The GPX file lives on GitHub. Lovable wouldn't accept GPX uploads through its interface, so I uploaded the file directly to the GitHub repository and referenced it by URL. A workaround, but it works — the component fetches and processes the GPX on every page load. Not optimal (it should be pre-processed), but acceptable for a demo.

Mobile Adaptation

The overlay needed to work on phones, and the first attempt was terrible. A 16:9 video on a portrait phone screen is tiny — all the telemetry text becomes unreadable.

The solution: in portrait mode, the video extends beyond the screen edges horizontally, cropping the sides but filling the vertical space. The visible area is centered, so you see the road ahead and the key telemetry data. It's the same approach Instagram uses for landscape video in Stories — prioritize height over width.

The gauges required separate mobile positioning. What works in landscape (speed at bottom corners, heart rate on the left) doesn't work in portrait (everything overlaps). Lovable handled this surprisingly well once I explained the constraint — it repositioned the elements for portrait orientation with appropriate sizing.

The Loading Experience Problem

There's a 2-3 second delay when the page loads where the user sees a grey spinner with "Loading player." Then the video appears as a static frame, the overlays render, and autoplay begins. For a returning visitor who knows what's coming, this is fine. For a first-time visitor, three seconds of nothing might lose them.

The fix I'm considering: a static screenshot of the overlay as a placeholder image that displays instantly while the video loads behind it. The transition from static image to live video would be nearly invisible. Haven't implemented it yet, but it's on the list.

AI-Powered Highlight Detection

An experiment that worked better than expected: I uploaded a GPX file to Claude and asked it to identify the three most interesting moments in the ride.

Claude analyzed the data and found genuine highlights — a section with sustained high power output, a fast descent, and a segment with interesting elevation changes. The time ranges were narrow (limited by the GPX file size fitting within the context window), but the concept was validated.

This becomes a product feature. When a user uploads their ride data, the system can automatically suggest the most compelling 30-second clips for sharing. Instead of scrubbing through a two-hour ride to find the exciting parts, the AI identifies them: "Here's where you were climbing at 300 watts," "Here's your fastest descent at 67 km/h," "Here's the sprint finish." Like Opus Clip does for podcast highlights, but for cycling telemetry.

The "Try It Yourself" Section

Below the auto-playing demo, I started building an interactive section where visitors can input their own YouTube link and upload their own GPX file. The vision: two boxes side by side — paste a YouTube URL on the left, drag a GPX file on the right. Once both are loaded, synchronize and see your own telemetry overlay.

This is partially working. The upload zones render, the GPX processing works, but the video loading from user-provided URLs has reliability issues, and the synchronization UI needs the slider controls and fine-tuning buttons. It'll be completed outside of camera and published when ready.

Google Analytics Integration

A quick win: I asked Lovable to add Google Analytics, and it added the GA4 script to the page head in one prompt. The only manual step was creating the GA4 property in Google's console and pasting the measurement ID.

Now I can see how many people visit the landing page, where they come from, how long they stay, and whether they scroll to the waitlist form. This data is essential before starting user research — it tells me if the landing page itself is attracting any organic interest.

Cost and Tool Reflections

Lovable changed their pricing during this project. The €20/month plan I started with and the €50/month plan I upgraded to no longer exist. It's now free or €80/month. For the landing page work, Lovable was worth every cent — the conversational development style let me iterate on design and functionality without writing code directly.

But I'm hitting its limits on complex interactive features. The wizard refactoring, the real-time synchronization bugs, the mobile adaptation edge cases — these required multiple prompts, frequent rollbacks, and a level of debugging that feels more like pair programming with a junior developer than AI-assisted magic.

For the next phase (building the actual product backend), I'm moving to VS Code with Cline. Direct API access to the language model, full control over the codebase, and the ability to debug properly with real developer tools.

What Happens Next: Users Before Code

The landing page is done enough. It communicates the product, shows a working demo, captures email addresses, and tracks visitors. Continuing to polish it is procrastination disguised as productivity.

The next step is talking to real people. Two cyclists I know personally:

Edu Talavera — my cycling coach. Has a YouTube channel, trains athletes, understands the cycling content creation space. I need 15 minutes of his time to show the demo and ask: would you use this? What's missing? What would make you pay for it?

Marc (El Sello Ciclista) — a cycling content creator and semi-pro cyclist. Produces high-quality cycling videos. Same questions, different perspective — he's closer to the content creation side than the training side.

Before those conversations, I'll ask Claude to help me prepare a user research script. How to structure 15 minutes efficiently. What questions to ask. What to listen for. How to distinguish politeness ("this is cool!") from genuine interest ("when can I use this?").

The commitment I'm making: no more backend development until these conversations happen. If both cyclists say "meh," the product needs to change. If they say "yes, but differently," the product needs to adapt. Building a server-side video rendering pipeline before validating the concept with real users would be the most expensive mistake I could make.

Series Recap: Nine Episodes In

Episode	What happened	Key decision
1	Validated the idea with Claude	GPS overlay as a cloud service
2	Claude as VC, user, and PM	Refined the value proposition
3	Brand identity + domain	€35 logo, sportssync.io
4	Landing page with slider	Before/after > any copy
5	Supabase waitlist	Kill unnecessary sections
6	Client-side MVP attempt	Lovable's 80/20 limit
7	GPS sync debugging	Temporal gaps in GPX data
8	Overlay polish	Professional-quality gauges
9	Live demo on landing	Users before more code

Total investment: ~€180 (Claude subscription, Lovable plans, Fiverr designer, domain). Total time: ~15 hours on camera, roughly the same off camera. Result: a live landing page with a working telemetry overlay demo, a waitlist with real signups, and a clear next step.

The building phase pauses here. The selling phase begins.