Waitlist Landing Page with Referrals
Collect early sign-ups before you build: a fast landing page, a private waitlist and "invite friends to move up" referrals.
Overview
Validate an idea before building it. This plan makes a landing page with a waitlist where every sign-up gets a personal invite link; each friend who joins moves them up the list.
The list is private by design: the browser can only call one database function that returns your own code and position, never anyone else’s email.
Built in Lovable with its Supabase integration (Cursor or Claude Code work too). Before you start: a Lovable account and a Supabase project. About 40 minutes.
Build it step by step
Sign in to tick steps off-
1
Write your one-line pitch
Fill in PLAN.md: who it is for, what it does, what early members get. A clear promise matters more than design.
Here is my PLAN.md. Rewrite my product sentence and launch promise into: a headline (max 8 words), a sub-headline (max 20 words), 3 benefit bullets and 4 FAQ items. Keep it plain and specific.
Done when You have a headline, sub-headline, 3 benefits and 4 FAQs you like.
Uses PLAN.md
-
2
Generate the landing page
Start a new Lovable project and paste the copy from step 1.
Build a fast, mobile-first landing page: hero with headline, sub-headline and an email field + "Join the waitlist" button; 3 benefit cards; a short "how it works"; FAQ accordion; footer. Brand colour from PLAN.md. No stock photos. Use only the copy I give you.
Done when The preview shows a complete page that looks good on a phone.
-
3
Create the private waitlist
Connect Supabase in Lovable, then run waitlist-schema.sql in the Supabase SQL Editor. RLS is on with no policies, so nobody can read the list from the browser.
Supabase is connected. The waitlist is only written through the database function join_waitlist(p_email, p_ref), which returns code, queue_position and referrals. Do not create other tables or policies. Show me the client code you will use to call it.
Done when The waitlist table and join_waitlist function exist; the table has RLS enabled.
-
4
Join flow with your place in line
After joining, people see their position and their personal invite link.
On submit: validate the email, read ?ref= from the URL, call rpc("join_waitlist", { p_email, p_ref }). Then replace the form with: "You're #{queue_position}", their invite link ({site}/?ref={code}) with a Copy button, share buttons for WhatsApp, X and LinkedIn, and "Each friend who joins moves you up 5 places." Joining again with the same email shows the same result.Done when Joining shows your position and link; joining twice gives the same result.
-
5
Test referrals
Use two browsers (or a private window) to check the invite logic.
Explain how to test: join as A, open A's invite link in a private window, join as B, then join again as A and confirm A moved up 5 places and shows 1 referral. Also confirm an invalid ?ref= code is ignored without an error.
Done when A moves up after B joins through A's link.
-
6
Stop junk sign-ups
Simple protection without CAPTCHAs.
Add a hidden honeypot field (if filled, pretend success but do not call the function), lowercase and trim emails, disable the button while submitting, and show a friendly error if the request fails. Keep the page fast.
Done when Filling the hidden field does not add a row.
-
7
Publish and share
Publish from Lovable, connect your domain if you have one, then share the link where your audience is.
Prepare for launch: page title and meta description from my headline, an Open Graph image with the headline, a favicon, and a thank-you message in the share text. List the 3 places I should share it first based on PLAN.md.
Done when The page is live and shows a proper preview when shared on WhatsApp or X.
Uses Lovable docs
Files and links
-
-
Lovable docs (opens in a new tab) docs.lovable.dev
What people built
Show yoursNobody has shared a build yet. Yours could be the first.
Show what you built
Built this plan? Sign in to share your demo video, live app and screenshots.