Whop App Development
Build apps that run inside the Whop platform - handling authentication, payments, webhooks, and UI all with best practices.
What Makes a Good Whop App (Suggestions)
Guidelines for app success (not requirements, user requests take priority):
| Principle | Description |
|---|---|
| Empower Creators | Give customization so each whop feels unique |
| Drive Discovery | Make the app have some kind of sharing feature or posting potential to allow users to attrach more users |
| Price Sustainably | Make money without gouging creators or customers |
| Keep UX Simple | Core action obvious, minimal clicks |
Details: app-design-principles.md
When to Use
Empty repo / new project:
- "Build me a Whop app" → Start with app-from-scratch.md
- Guides through discovery, setup, and building from nothing
Existing Whop project:
- Jump directly to specific rules in Quick Reference below
- Adding payments → payments-checkout.md
- Adding auth → auth-verify-token.md
- SDK issues → sdk-setup.md
Companion Skills (Install First)
whop-dev focuses on Whop-specific patterns. For complete app development, install these companion skills:
npx skills add https://github.com/anthropics/skills --skill frontend-design && \
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices && \
npx skills add https://github.com/supabase/agent-skills --skill supabase-postgres-best-practices && \
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines| Skill | Delegates To | When |
|---|---|---|
frontend-design | UI creation | Building components, pages, visual design |
vercel-react-best-practices | Performance | React optimization, data fetching, bundles |
supabase-postgres-best-practices | Database | Queries, schema, indexes, RLS |
web-design-guidelines | UX review | Accessibility, design auditing |
IMPORTANT: When starting a new project or build-from-scratch flow, install companion skills FIRST before scaffolding. This enables whop-dev to hand off specialized work to expert skills.
See companion-skills.md for detailed handoff patterns.
How to Use
Starting fresh (empty repo)? → Follow Build From Scratch - guided flow from idea to deployed app.
Existing project? → Jump to Quick Reference for specific features.
Build From Scratch
For empty repos only. Go from idea to deployed Whop app:
| Step | Guide | Description |
|---|---|---|
| 0 | companion-skills.md | FIRST - Install companion skills |
| 1 | app-from-scratch.md | Plan your app type and architecture |
| 2a | app-scaffold-b2b.md | B2B: Dashboard-only apps for admins |
| 2b | app-scaffold-b2c.md | B2C: Experience apps for members |
| 3 | app-database.md | Add Supabase → supabase-postgres-best-practices |
| 4 | app-whop-dashboard.md | Configure in Whop Developer Dashboard |
| 5 | app-deployment.md | Deploy to Vercel |
| 6 | app-store-submission.md | Submit to App Store (optional) |
Quick Reference
Authentication & Security (CRITICAL)
| Rule | Description |
|---|---|
| auth-verify-token.md | MUST verify user tokens server-side |
| auth-access-check.md | MUST check access levels before operations |
| security-checklist.md | Security best practices checklist |
| auth-headers.md | Extract tokens from headers |
| auth-oauth.md | OAuth for external apps |
| input-sanitization.md | XSS prevention |
SDK Setup (CRITICAL)
| Rule | Description |
|---|---|
| sdk-setup.md | Initialize Whop SDK (required) |
| sdk-iframe.md | Client-side iframe SDK |
Design Principles (SUGGESTIONS)
| Rule | Description |
|---|---|
| app-design-principles.md | Founder's suggestions for app success (user requests take priority) |
Payments (HIGH)
| Rule | Description |
|---|---|
| payments-checkout.md | Create checkout flows |
| payments-webhooks.md | Handle payment webhooks |
| payments-transfers.md | Send payouts to users |
| payments-billing.md | Billing portal & saved methods |
App Views (HIGH)
| Rule | Description |
|---|---|
| views-structure.md | Experience, Dashboard, Discover pages |
| views-routing.md | Dynamic routing patterns |
Members & CRM (HIGH)
| Rule | Description |
|---|---|
| api-memberships.md | Memberships & user management |
UI & Design (MEDIUM)
| Rule | Description |
|---|---|
| ui-frosted.md | Frosted UI components |
| ui-dark-mode.md | Dark mode handling |
| ui-tailwind.md | Tailwind CSS setup |
API Patterns (MEDIUM)
| Rule | Description |
|---|---|
| api-structure.md | API route patterns |
| api-parallel.md | Parallel data fetching |
Storage & Files (MEDIUM)
| Rule | Description |
|---|---|
| files-upload.md | Whop native file storage |
Engagement (MEDIUM)
| Rule | Description |
|---|---|
| notifications.md | Push notifications |
| engagement-forums.md | Forum posts & comments |
| engagement-chat.md | Chat messages |
Development (LOW)
| Rule | Description |
|---|---|
| dev-proxy.md | Local development proxy |
| dev-sandbox.md | Sandbox testing |
Companion Skills (ECOSYSTEM)
| Rule | Description |
|---|---|
| companion-skills.md | Install & delegate to specialized skills |
App Views
Whop apps have three entry points:
| View | Route | Purpose |
|---|---|---|
| Experience | /experiences/[experienceId] | Customer-facing UI |
| Dashboard | /dashboard/[companyId] | Admin management |
| Discover | /discover | Public marketing page |
Tech Stack
Required:
@whop/sdk- Server-side API client@whop/react- React hooks and Frosted UI
Recommended:
- Next.js (App Router)
- TypeScript
- Tailwind CSS + Frosted UI
Flexible:
- Database: Supabase recommended, but any works
- UI: Frosted UI, Shadcn, Radix - your choice
Platforms (Advanced)
For marketplaces with connected accounts:
Resources
- Whop Developer Docs
- API Reference
- Frosted UI Storybook
- MCP Server:
https://mcp.whop.com/mcp(Cursor) orhttps://mcp.whop.com/sse(Claude)
Handoff Triggers
Delegate to companion skills when encountering these patterns:
| Pattern | Hand Off To |
|---|---|
| "design", "make it look good", "UI", "component" | → frontend-design |
| "optimize", "performance", "slow", "bundle" | → vercel-react-best-practices |
| "database", "query", "schema", "index", "RLS" | → supabase-postgres-best-practices |
| "review UI", "accessibility", "audit" | → web-design-guidelines |
See companion-skills.md for complete handoff guide.