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) or https://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.

whop-dev

Safety Notice

Copy this and send it to your AI assistant to learn