A comprehensive review and testimonial system for Whop communities, similar to Judge.me. This app allows community members to submit, view, and manage product/service reviews with photos, videos, and detailed analytics.
- ⭐ Submit reviews with 1-5 star ratings
- 📸 Upload photos (up to 5 per review)
- 🎥 Upload videos (optional)
- 👍 Mark reviews as helpful/not helpful
- 🔍 Filter reviews by rating
- 📊 Sort reviews by date, rating, or helpfulness
- ✅ View verified purchase badges
- 🛡️ Review moderation (approve/reject/pending)
- 📈 Detailed analytics dashboard
- ⚙️ Customizable settings:
- Auto-approve reviews
- Require verified purchases
- Enable/disable photos and videos
- Set minimum rating
- Email notifications
- Custom thank you messages
- Review incentives (coupon codes)
- 🎯 Featured reviews
- 💬 Respond to reviews
- 📊 Rating distribution charts
- 📉 Review status breakdown
- Node.js 18+ and npm/pnpm
- A Whop account and API key
- A PostgreSQL database (Supabase recommended)
- Clone this repository or create a new Next.js project:
npx create-next-app@latest whop-reviews-app
cd whop-reviews-app- Install dependencies:
npm install
# or
pnpm install- Set up your database:
Create a Supabase account at https://supabase.com and create a new project.
- Configure environment variables:
Copy .env.local.example to .env.local and fill in your values:
# Whop API Key (Get from https://whop.com/apps)
WHOP_API_KEY=your_whop_api_key_here
# Database URLs (From Supabase)
DATABASE_URL="postgresql://user:password@host:port/database"
DIRECT_URL="postgresql://user:password@host:port/database"- Initialize Prisma:
npm run prisma:generate
npm run prisma:db:push- Run the development server:
npm run devOpen http://localhost:3000 to see your app.
whop-reviews-app/
├── app/
│ ├── api/
│ │ ├── reviews/[experienceId]/
│ │ │ ├── route.ts # GET and POST reviews
│ │ │ └── [reviewId]/
│ │ │ ├── moderate/route.ts # Approve/reject reviews
│ │ │ └── helpful/route.ts # Mark as helpful
│ │ ├── settings/[experienceId]/route.ts # Settings management
│ │ └── upload-image/route.ts # Image upload handler
│ ├── experiences/[experienceId]/
│ │ └── page.tsx # Main reviews page
│ ├── globals.css # Global styles
│ └── layout.tsx # Root layout
├── components/
│ ├── ui/
│ │ ├── button.tsx # Button component
│ │ └── tabs.tsx # Tabs component
│ ├── review-form.tsx # Review submission form
│ ├── reviews-list.tsx # Reviews display
│ ├── stats-overview.tsx # Analytics stats
│ └── settings-panel.tsx # Admin settings
├── lib/
│ ├── db.ts # Prisma client
│ ├── whop-sdk.ts # Whop SDK initialization
│ └── utils.ts # Utility functions
├── prisma/
│ └── schema.prisma # Database schema
├── .env.local.example # Environment variables template
├── next.config.js # Next.js configuration
├── package.json # Dependencies
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration
- User information and ratings
- Text content with optional title
- Images and videos arrays
- Verification status
- Helpful/not helpful counters
- Admin moderation status
- Store owner responses
- Moderation settings
- Content options (photos/videos)
- Notification preferences
- Review incentives
- Custom messaging
- Display preferences
- Daily statistics
- Rating distribution
- Content type counts (photos/videos)
- Go to https://whop.com/apps and create a new app
- Set the base URL to your deployment URL
- Copy your API key to
.env.local - Install the app to your Whop community
The app uses Prisma with PostgreSQL. Supabase is recommended for easy setup:
- Create a Supabase project
- Copy the connection strings from Settings > Database
- Paste into
.env.local - Run migrations with
npm run prisma:db:push
The app uses Tailwind CSS. Customize colors and themes in:
tailwind.config.js- Tailwind configurationapp/globals.css- Global CSS variables
Enable/disable features by modifying:
- Review settings in the admin panel
- Database schema in
prisma/schema.prisma - Component logic in
components/
- Push your code to GitHub
- Import the project in Vercel
- Add environment variables
- Deploy!
# Add this to package.json scripts for Vercel
"postinstall": "prisma generate"After deployment:
- Go to your Whop app settings
- Update the "Base URL" to your Vercel URL
- Test the app in your Whop community
GET /api/reviews/[experienceId]- Fetch all reviewsPOST /api/reviews/[experienceId]- Submit a new reviewPATCH /api/reviews/[experienceId]/[reviewId]/moderate- Moderate review (admin only)POST /api/reviews/[experienceId]/[reviewId]/helpful- Mark review as helpful
PUT /api/settings/[experienceId]- Update review settings (admin only)
POST /api/upload-image- Upload and optimize review images
Authentication is handled automatically by Whop SDK:
- User tokens verified via
whopSdk.verifyUserToken() - Access levels checked via
whopSdk.access.checkIfUserHasAccessToExperience() - Admin-only routes protected by access level checks
✅ Implemented:
- Star ratings (1-5)
- Text reviews with optional titles
- Photo and video uploads
- Review moderation
- Analytics dashboard
- Helpful/not helpful voting
- Admin responses
- Featured reviews
- Auto-approval settings
- Review incentives
- Custom messaging
- Email notifications
- Verified purchase badges
🔄 Can be Extended:
- Email review requests
- Social media sharing
- Rich snippets for SEO
- Multi-language support
- Advanced filtering
- Review imports/exports
- Bulk operations
This is an open-source Whop app. Feel free to:
- Report bugs
- Suggest features
- Submit pull requests
- Fork and customize for your needs
MIT License - feel free to use this code for your own Whop apps!
Need help?
- Join the Whop Developers Community
- Check the Whop Documentation
- Open an issue on GitHub
Built with:
- Next.js 15
- Whop SDK
- Prisma
- Tailwind CSS
- Radix UI
- Sharp - Image optimization
Inspired by Judge.me