I just spent under 30 minutes building a complete copy of this app, and I didn't write a single line of code. Whop makes more than $800M yearly, and I rebuilt the entire app using only AI. Today, I'm going to show you exactly what AI tools I used, what prompts I used, and how you can build apps using AI without writing a single line of code.
Here's our game plan:
- Step 1 - Plan the app
- Step 2 - Build the app in Cursor with Next.js
- Step 3 - Connect the backend and authentication using Supabase
- Step 4 - Set up Stripe payments and deploy live with Vercel
By the end, you'll have a working SaaS up and running - with no coding required. Let's jump in!
Step 1 — Plan the app
Before we start building, head to Braindumper.ai. This is a completely free tool I built to help you plan your app.
Type a simple prompt describing what you want to build. For example:
'I want to build a Whop clone — a platform for creators to launch online businesses, create digital products with different pricing models, and sell courses or communities with payment processing.'
Next, choose your platform. I'll pick IDEs, since I'm using Cursor and Windsurf. Then choose whether you're building for mobile or web — I'll go with web.
Hit Generate and Braindumper will create the full context of your app — or the Brain of your app, as I like to call it. This usually takes about 60 seconds.
When it's done, download the file — we'll use it inside Cursor in just a bit.
Tools You'll Need
If you don't already have Windsurf or Cursor, grab them now. Windsurf even has a promo: 250 extra credits with any paid plan, plus 20% off with the code BWAI20.
For domains, I use Spaceship. For design inspiration, we'll come back to Mobbin later.
Step 2 — Build the app in Cursor with Next.js
Okay, for this video I'm using Cursor. I've created a new folder called whop-clone and dragged it into Cursor to open in the Workspace.
Now let's set up the app. Open a terminal and type:
Bashnpx create-next-app@latest
When it asks for a name, I'll call mine whop-clone. Then add these flags:
Bash--typescript --tailwind --eslint --app
These are the optimal settings — TypeScript, Tailwind, linting, and the App Router.
Hit enter, and you'll get a few setup questions. Just follow the defaults: yes, yes, no.
Wait a few seconds, and the app is built.
Look at the sidebar — you'll see the new whop-clone folder. Open it and you'll see the full Next.js template.
Quick note: if the command didn't work, it's because you don't have Node.js installed. Go to nodejs.org, download and install it, then re-run the command. All npx and npm commands require Node.js on your machine.
Set Up Project Structure
Now let's create a docs folder to hold our Braindumper file. Right-click in the sidebar, create a new folder, and name it docs.
If it ends up outside the app, just drag it into the project folder. Close and reopen Cursor, and now it's in the right place.
Next, let's run the app. In the terminal, type:
Bashnpm run dev
You'll see an error — that's because we're in the wrong folder. Right now, we're in the parent whop-clone folder. We need to move into the actual app folder. Type:
Bashcd whop-clone
cd means change directory. A directory is just another word for a folder.
Now type:
Bashls
That stands for list. It shows the files in your current folder. You should see the project files here, which means you're in the right place.
From here, run:
Bashnpm run dev
again, and this time the app runs locally.
Hover over the localhost link, hold Command (or Control on Windows), and click. Your browser opens the default Next.js starter template.
Perfect — our app is live locally. From here, every edit updates in real time.
Let Cursor Build Your App
Now drag your Braindumper file into the docs folder. You can open it to review, but I'll leave it as is.
Finally, press Cmd/Ctrl + I to open Cursor Composer on the right. This is where we'll talk to the AI in plain English.
To start customizing, I'll type:
'I have now set up the Next.js project. Now we need to plan how to build the entire app step by step. Use @context.md as the main structure of building the app.'
Tag the file by typing @context.md and hitting enter. Then hit enter again to run the prompt.
I'm on Cursor Pro, but I've used it so much I had to upgrade to Pro+. Cursor limits usage, which is a bit annoying.
And by the way — I've written this entire tutorial as a step-by-step guide on my blog. Every prompt and command I used in this video is included there so you can just copy-paste if you get stuck. Link's in the description.
Let Cursor Scaffold & Fix First Errors
Cursor now wants to run: print working directory to understand where it is in the codebase. I'll accept and add it to the Allowlist.
Quick note: adding a command to the Allowlist lets the AI run that command automatically next time without asking.
Cursor scans the entire codebase and our context file, then generates a to-do list to build the app from the plan. The steps look good, so I'll type 'continue'.
You'll notice Cursor opened a terminal by itself. It's asking for input — click Open in terminal to bring that session into our workspace. You'll see the terminal name includes 'Cursor,' which tells you it was initiated by Cursor.
It asks: 'Which color would you like as the base color?' I'll choose Grey. Success. Now Cursor continues installing what we need and starts setting up the app layout.
Done — the to-do status shows 5 of 13 tasks completed.
It installed the design system, created the app folder structure, added components like the navbar and sidebar, wired page routes, and generated static UI pages: landing, auth, dashboard, product, and more.
Fix Initial Errors
Let's preview. Cursor already restarted the dev server, so I'll close the previous terminal and click the localhost link.
There's an error. Copy the error from the frontend and, in Cursor's terminal, select the error and press Ctrl+L — that sends it straight to the AI chat. I'll paste the frontend error too and press Enter.
Cursor responds: 'I see the issue — there's an import/export problem in MarketingLayout.' It patches the code and searches the rest of the codebase for similar instances.
Refresh the browser — perfect. Working again.
From just one prompt and our Braindumper context, we have a functioning shell. Here's the landing page:
'Build, Manage & Monetize Digital Products…' It even pulled real Whop.com stats. More details and a CTA — looks solid.
Click Start building today. We're prompted to create an account — the pages are behind authentication, which we haven't set up yet.
Back to Cursor: it says 'Ready for Phase B — Backend & Authentication.' Exactly. We'll wire up Supabase next: database schema (tables), auth, and route protection.
We'll use the Supabase MCP so the AI can talk directly to Supabase. MCP is a standard that lets AI tools and services speak the same language.
Step 3 — Supabase MCP, schema, auth, and debugging
Open Settings → MCP & Integrations (top-right cog). Click Add Custom MCP — that opens mcp.json. We'll paste the Supabase configuration here.
Get Your Supabase Credentials
Now we need a personal access token:
Go to supabase.com, create an account if needed. Click Start your project → New project, name it, add a strong password, and Create new project.
~30 seconds later, the project is ready.
In the URL bar, navigate to: dashboard/account/tokens. Click Generate new token. I'll call it Cursor MCP Whop Clone, choose an expiration, and Generate token. Copy the API key.
Back in Cursor, paste it into Supabase Access Token.
Now grab the project ref ID: it's in your Supabase project URL. Copy that "ref" token and paste it into Project Ref in Cursor.
Head back to Settings → MCP & Integrations. It's green and enabled.
What the Supabase MCP Can Do
The Supabase MCP can: search docs, list tables, extensions, migrations, and more — directly from Cursor. Anytime we change code, MCP can keep Supabase in sync, including running SQL to update tables. (SQL is the query language for relational databases.)
So Cursor now has full Supabase access — meaning: you won't need to switch tabs to manage the DB manually. Wild.
I'll close those pages and type continue.
Configure Database Schema
Cursor notices we updated the MCP configuration. It checks the project URL and flags a typo in the project ref (extra character). It fixes it — and yes, I see what I missed. I'll accept the update.
Cursor warns the Supabase MCP is in read-only mode. No writes. To fix: open mcp.json, copy the config, and — while Cursor keeps working — I'll open claude.ai (use any LLM you like) and paste the config asking for full access (no readOnly).
The fix is simple: remove the readOnly field. Back in Cursor, delete readOnly, save the file.
Cursor continues: installs packages and starts implementing Supabase auth. When it finishes, I click Keep all.
Now I'll prompt:
'I removed read-only from Supabase MCP. Please update what you just did so the database is up to date.'
AI replies: 'Perfect! With write access, I can apply the migration and create the full database schema.' Great.
It generates the schema — an SQL script stored in our codebase — and applies it to Supabase so code and database stay in sync.
Let it run…
Done. We now have:
- Database schema applied with four core tables
- Row-level security, indexes, triggers
- TypeScript types generated
- Authentication implemented, plus helper functions
Set Up Environment Variables
Cursor says the core app is ready to test. Let's verify.
Bashnpm run dev
Open the host — error: 'Your project's URL and key are required to create a Supabase client.'
We need a .env.local file. In the sidebar, New File → .env.local.
Add the Supabase keys (from Supabase dashboard):
BashNEXT_PUBLIC_SUPABASE_URL=YOUR_URL NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_ANON_KEY
Refresh… still not working. I'll paste the error into Cursor and say:
'I just added .env.local with NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY. What's wrong?'
Cursor explains: the env variables weren't loaded.
Tip: anytime you change .env, restart the dev server.
Also, notice Cursor automatically added the Supabase service role key because MCP is connected. That's MCP doing its magic.
Test Authentication
Restart. Now it works.
Click Start building today, fill in details, and Create account. Supabase says: 'Please check your email to verify your account.'
Open email → Supabase Auth → Confirm your email. Verified.
Back in the app: click Sign in, enter credentials, and Remember me.
It's stuck at "Signing in." I'll refresh, try again, and open DevTools → Network (Cmd+Opt+I / Ctrl+Shift+I), then clear the log.
Sign in once more. It says 'Signed in successfully', but I see a 307 status. Clicking it shows the redirect isn't working. So login works, but the post-login redirect is wrong.
I'll mention this in Cursor — using WisprFlow (my speech-to-text tool).
Bonus tip: talking while navigating lets Cursor capture everything I'm seeing and thinking — then it fixes the issues inline.
Cursor patches the redirect: the login page was hardcoded to /dashboard; it should check redirect_to in the query. Simple fix.
In Supabase → Authentication, you'll see the account exists; if Last sign-in has a timestamp, the user verified their email.
Click Start building today again — the Dashboard loads.
Step 4 — Core features, UI parity with Whop, and dark mode polish
On the dashboard, we have Total products, Active users, Total earnings, Conversion rate, Recent activity, and Quick actions (Create product, Manage products, Business settings, View analytics).
Click View all to open Products.
Products shows total products, published products, total sales, total revenue, and the list of products. Click the eye icon to view details — here's an Advanced React course.
There's also the Business page for business info and stats, Profile for public profile and products, and Settings (not set up yet).
Implement Core Features
Back in Cursor, I'll ask: 'Okay, what's next?'
Next step: implement the core features — business creation flow, product creation & management, dashboard with real data, and public product pages.
Cursor recommends starting with business onboarding. I'll say 'Sure. Continue.'
It scans the codebase and notes the database doesn't have an industry field. It adds the column to the business table so we capture user-selected industry during onboarding.
When it's done, jump back to the dashboard:
We can create new products — title, headline, description, and pricing with multiple models. Set a custom URL and preview the product page.
On the products list, click the eye icon; note the URL /p/advanced-react-course — that's the slug the app creates. Every new product gets a public page at its slug. Here's how it looks.
The app works — now let's match Whop's UI.
Copy Whop's Design with Mobbin
Open whop.com — dark mode, clean structure. We'll copy the style (not their features).
Back to Braindumper and choose Mobbin — our design inspiration tool.
(We've partnered with Mobbin — you get 20% off Mobbin Pro; most people only get 10%. Join via the link if you want full libraries. It is a paid tool.)
What is Mobbin? It's a curated library of real app and web UI patterns/screens you can search, filter, and copy for design reference.
Search "Whop." You'll see Whop: Start a business, learn a new skill, and build a network (web app). Click Sections — you can browse every single page of Whop, including flows you'd usually never see. It's overpowered — no guesswork on what screens exist.
I'll copy the exact pages we need for our SaaS dashboard. Click a page → Copy → back to Cursor → paste image. Repeat for a few key screens.
Now prompt Cursor:
'These are screenshots of whop.com. Since we're cloning their app, copy their style and UI. Don't add any new features you see — just the look and structure.'
Press Enter.
Cursor analyzes the images: dark theme, professional aesthetic, clean sidebar nav, modern card layouts, refined color system, improved spacing and hierarchy. It will update our app accordingly.
Let it run… Done.
Preview — this looks very, very good. It basically one-shotted a UI very similar to Whop. Honestly, insane.
Fine-tune Dark Mode
Some tweaks: we want full dark mode across every screen.
I'll screenshot a page, paste into Cursor, and say:
'Looks great. Make all white boxes and buttons dark. Ensure text has proper contrast across the app.'
Check again. Better, but some buttons are still off. I'll screenshot the button and paste it:
'Buttons are white with white text — match the second image's hover style all the time.'
Done — buttons fixed. The UI is now consistent.
Step 5 — Monetization (Stripe) and purchase flow test
Next up: payments.
I'll prompt Cursor: 'Set up Stripe payments so customers can buy products from product pages.'
Cursor plans to:
- install Stripe dependencies (
npm install stripe) - create Stripe config and utilities
- add an API route to create a checkout session
- update product page with Buy button
- create success/cancel pages
- and test the end-to-end flow
Let it finish.
Get Stripe API Keys
It's ready to test and lists next steps:
- create a Stripe account
- get API keys
- add env vars to
.env.local - test with test cards
- configure webhooks for production
- integrate with DB to track purchases
Let's grab the keys. Go to stripe.com, sign in or create an account. In the dashboard, you'll see the Publishable key and Secret key.
Back in Cursor, ask: 'Which keys go in .env.local, and what should I name them?'
It suggests:
BashSTRIPE_SECRET_KEY NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY STRIPE_WEBHOOK_SECRET
We only have two keys here, so I'll screenshot and ask: 'Are these the only two we need for now?'
Answer: the essential keys are Stripe secret and publishable.
Add them to .env.local:
BashNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_... STRIPE_SECRET_KEY=sk_test_...
Test Payment Flow
Refresh the app… still an error. I'll paste the error into Cursor and say we added those two keys.
Cursor restarts the app. Open the link again (Cmd/Ctrl + click).
Home looks good. Click Start selling → Dashboard → Products → open a listing. Error persists — I'll copy it and say: 'Still seeing this — maybe a missing key or a typo?'
Try again: home → Start selling → Products → open listing.
Now the page loads. Click Buy — we're redirected to checkout.stripe.com. I'll enter test details (email, card number, expiry, CVC, name: Kristoffer Content), then Pay.
Green checkmark — payment successful. Stripe integration working.
Step 6 — Ship it: GitHub + Vercel (and env on Vercel)
Let's deploy.
Go to github.com, sign in, click New repository. Name it (I'll keep Whop clone), set to Private, and Create repository.
Copy the repo URL.
Deploy to GitHub
Back in Cursor, close extra terminals/tabs. Open a fresh terminal.
Add remote:
Bashgit remote add origin PASTE_URL
Stage and commit:
Bashgit add . git commit -m "initial commit"
Ensure branch is main:
Bashgit branch -m main
Push:
Bashgit push -u origin main
Refresh GitHub — the entire project is now in the cloud.
Deploy to Vercel
Now go to vercel.com, sign in, click Add New Project, Import Git Repository, select our Whop clone, then Deploy.
We hit an error. Copy it, go back to Cursor, Cmd/Ctrl + L to send to chat, and paste.
Cursor explains Vercel is strict: we need to clean up unused variables/imports. It does the cleanup, then runs:
Bashnpm run build
Build succeeds. Click Keep all.
Commit and push the changes:
Bashgit add . git commit -m "second commit" git push origin main
Add Environment Variables
Back on GitHub, the Vercel deployment is pending. Open it → Deployments — it's building. Last time it failed; let's see…
Now it's ready. Click Visit — we get a 500 error.
Open Logs — error says: 'Your project's URL and key are required to create a Supabase client.' That's because we added env vars locally but not on Vercel.
On Vercel, go to Settings → Environment Variables. Add:
Key: NEXT_PUBLIC_SUPABASE_URL → Value: your Supabase project URL
Key: NEXT_PUBLIC_SUPABASE_ANON_KEY → Value: your Supabase anon key
Save, then Redeploy.
You can see the keys listed. Go back to Deployments, wait for the build, then click Visit.
The site is live... Perfect!
Your Next Steps
In under 30 minutes, with zero coding, we went from idea → to a Whop-style SaaS → to a live site.
Your next step: take this exact workflow and run it on your own idea. Start small. Ship it, then iterate with real user feedback.
Since good prompts are half the battle when building with AI, I put together a free document with 5 Prompts I Use 90% of the Time.
These are the exact prompts I rely on in Cursor and Windsurf to get clean code, fix bugs instantly, and build features fast.
You can grab it for free — link's in the description.
If you want to see me use this exact process to clone another profitable AI app, check out this video, where I rebuild CalAI - the AI-powered photo calorie tracker app making $36M/year - in just 14 minutes.
I can't wait to see what you're going to make - happy building!
![Lovable E-commerce Tutorial: Build a Store in 25 Minutes [Stripe + Printful + AI] - BuildWithAI Tutorial](/_next/image?url=https%3A%2F%2Fimg.youtube.com%2Fvi%2F_-XCmjRkHIY%2Fmaxresdefault.jpg&w=3840&q=85)
