Connecting Supabase to a Waitlist Form and Killing My Darlings

The Landing Page Needs Surgery, Not Makeup

I started this session with a checklist of things wrong with the landing page. After four episodes of building, the page had accumulated features and sections that looked impressive but didn't serve the core goal: explain what SportsSync does and capture email addresses from interested people.

The pricing section? Premature — I can't commit to prices before the MVP exists. The "features" grid with icons? Generic filler that doesn't show the product. The community section? A promise I can't deliver on yet. All of it had to go.

Killing sections you built yourself is harder than it should be. I genuinely loved the pricing table and the feature grid. They made the page feel "complete." But a landing page for a pre-MVP product needs exactly three things: show the value, explain the concept, and capture interest. Everything else is noise.

What the Community Taught Me

The comments from episode 4 were genuinely useful. One viewer suggested using real CSS overlays on cycling photos instead of static Photoshop mockups — essentially building a mini version of the product directly on the landing page. The idea is brilliant and something I want to do in the "How It Works" section eventually, but I deliberately separated it from the landing page work. Building even a client-side demo of the overlay system is MVP work, not marketing work.

Another viewer pointed out that the before/after slider, while effective, lacks the adrenaline of seeing the data change in real time. Static numbers on a photo communicate the concept, but a video with changing speed, heart rate, and altitude would be far more compelling. They're right — and this circles back to the same constraint: I need the MVP working to produce that content.

The Photoshop Overlay Mockups

I spent time creating better overlay mockups in Photoshop, drawing inspiration from Safa Brian's cycling videos. The overlay design includes speed (KMH and MPH), heart rate, cadence, power output, an altitude profile along the bottom, and a small route map showing progress through the ride.

Two mockups went into the testimonial section: a triathlon scene and a mountain descent. Finding the right stock photos was surprisingly difficult — I needed rear-view cycling shots that looked dynamic without being obviously staged. Most stock cycling photos are either lateral shots or clearly posed.

The images went from 5.2MB (PNG) to under 800KB (JPG at quality 6) with no visible quality loss. This matters because the landing page was loading slowly due to the heavy hero images. A simple format change and quality adjustment cut load time dramatically.

Connecting Supabase: The Five-Minute Database

This was the highlight of the session and the most valuable thing for anyone watching. Connecting a real database to the waitlist form took approximately five minutes.

The setup:

1. Created a Supabase account (free tier — more than enough for a waitlist)
2. Created a new project called "sportssync"
3. Connected Supabase to Lovable through the integration panel
4. Lovable automatically detected the waitlist form and created the database table
5. Configured Row Level Security so anyone can insert (submit the form) but only admins can read the entries

The first test had a hiccup — the table wasn't created automatically on the first try. I had to run the SQL migration manually in Supabase's SQL editor. But once that was done, form submissions started appearing in the database immediately.

The form captures three fields: email (required), name (required), and an optional comments field where people can tell us why they're interested. The sport selector I had originally was replaced with the open comments field — we're focused on cycling for now, so a dropdown of sports was premature.

What struck me was the cost-to-value ratio. Supabase's free tier handles this effortlessly. We're storing strings — name, email, comment. Even at a thousand signups, the storage cost is negligible. And having real email addresses from real people who expressed interest is infinitely more valuable than any analytics dashboard.

Sections Removed

By the end of the session, the landing page lost:

The features grid — generic icons with descriptions that could apply to any app. Replaced by nothing. The before/after slider and the "How It Works" section communicate the product better than any feature list.

The pricing section — three tiers with made-up numbers. I loved it aesthetically, but committing to pricing before the product exists is dishonest. It'll come back when there's something to price.

Redundant social media icons — we don't have Twitter, Instagram, or YouTube accounts for SportsSync yet. Links to nowhere are worse than no links.

CSS overlay widgets on the hero — leftover from an earlier iteration that competed with the before/after slider for attention.

Sections Kept (With Fixes)

The hero with before/after slider — still the most effective element. Swapped the background cycling photo for a more dynamic one with a visible cyclist (third-person perspective conveys more action than first-person GoPro view).

How It Works — simplified to three steps. Still needs the interactive demo I mentioned earlier, but the static version communicates the flow.

Community/Testimonials — now has actual cycling and triathlon photos with overlay mockups, instead of generic stock images.

Waitlist form — now connected to Supabase. Real data, real leads.

The Lovable Credit Problem

A practical note: I burned through my €20/month Lovable credits in three weeks. The conversational back-and-forth of "adjust this, change that, no go back" consumes credits fast. I upgraded to the €50/month plan to finish the landing page.

This isn't a permanent cost — once the landing page is done and I move to building the MVP with Cursor/Claude Code, Lovable's role diminishes. But it's worth knowing: AI-assisted development tools charge per interaction, and design iteration is interaction-heavy.

What's Left

The landing page is now at a point where I can start sharing it with people. It's not perfect — the section backgrounds need color adjustments, the footer links need cleanup, and the hero image ratio still fights me on certain viewport sizes.

But it communicates the idea, it captures interest, and it's live. That's enough to start the next phase: showing it to real cyclists and getting feedback before building the MVP.

Cost Update

Running total: €113 — Logo + brand identity €35, domain €28, Lovable upgrade €50, Supabase free.