← All resourcesView all 10
Revenue-ready SaaSPrompt
Stripe-gated SaaS shell
By Battle-tested
Stack: React + Tailwind + Supabase (auth + RLS + `subscriptions` table) + Stripe Checkout + TanStack Query.
Medium45 min
What you'll build
- Stack: React + Tailwind + Supabase (auth + RLS + `subscriptions` table) + Stripe Checkout + TanStack Query
The prompt
Stack: React + Tailwind + Supabase (auth + RLS + `subscriptions` table) + Stripe Checkout + TanStack Query. Build: a starter SaaS where signed-in users with an active Stripe subscription unlock a `/app` area; everyone else sees the marketing page. Must have: email + Google sign-in, a `subscriptions` table updated by a Stripe webhook, RLS that gates `/app` queries by `user_id`, a billing portal link, and a single pricing page with monthly/annual toggle. Don't: store role or plan flags on the profile, check subscription status from `localStorage`, or trust the client to decide what's paid. First screen: marketing landing with hero, three pricing tiers, and "Start free trial" CTA.
How to use this
- 1Copy the prompt
Tap the Copy button on the prompt above. That's all of it.
- 2Paste it into Lovable
Open lovable.dev, start a new project, paste the prompt, hit send.
- 3Open the preview
Wait about a minute for the first build, then look at the preview on the right.
- 4Change one tiny thing
Ask Lovable to swap a color or a word. Watch it update live. That's the magic.
Try these next
Tap any card to copy a follow-up prompt. Paste it into the same Lovable chat.
If you get stuck
Builds can take a minute. Grab water.
If something looks weird, tell Lovable what's wrong in plain words.
You can always undo — nothing breaks forever.
Stack
ReactTailwindSupabase
Companion guide
Before / After — UI moves that separate good from AI-slop
10 side-by-side renders + the exact follow-up to copy in.
01 / 10Open →
Typography hierarchy
If everything is bold, nothing is.
02 / 10Open →
The grey-text trap
14px #999 on white is the AI-slop signature.
03 / 10Open →
Buttons are where products die
Hover over the right side.
04 / 10Open →
Spacing is a feature
Premium products use more white space.
05 / 10Open →
One accent, not five
If you have three accents, you have no accent.
06 / 10Open →
Break the grid
Three identical cards in a row screams template.
07 / 10Open →
Hero atmosphere
Stop using purple-pink-blue gradients.
08 / 10Open →
Testimonials that don't lie
No stars. No stock avatars. No "Sarah Chen, CEO."
09 / 10Open →
Empty states are first impressions
Your user sees this before they see your real UI.
10 / 10Open →
Easing is character
Watch the two boxes below. They're moving the same distance.