Create a .env.local file in the root directory with your Whop credentials:
# Whop API Credentials
WHOP_API_KEY=your_whop_api_key
NEXT_PUBLIC_WHOP_APP_ID=your_app_id
NEXT_PUBLIC_WHOP_AGENT_USER_ID=your_agent_user_id
NEXT_PUBLIC_WHOP_COMPANY_ID=your_company_id
# Database Configuration
MONGO_URI=your_mongodb_connection_string
MONGO_DB=reaction_bot_db
# App Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000npm run dev- Open
http://localhost:3000 - You'll see the Admin Setup page
- Enter the admin setup key:
admin-setup-key-2024 - Click "Setup Admin"
- You'll be redirected to the main interface
As an admin, you can create roles like @flips, @green, @yellow:
- Click "Create New Role" button
- Enter role name:
flips - Add description:
For flip traders - Choose a color (e.g., blue)
- Click "Create Role"
- Repeat for
greenandyellowroles
- On each role card, click "Subscribe"
- The button will change to "Subscribed" with a checkmark
- You'll see the role appear in "Your Subscribed Roles" section
- Click "Notify" button on any role card
- Type a message: "Hey @flips! New trading opportunity available!"
- Click "Send Notification"
- You'll see a success message showing how many subscribers were notified
The system is designed to work with external role pings. When someone types @flips in your Whop community:
- The system detects the role mention
- Finds all subscribers to that role
- Sends notifications to all subscribed users
- Users receive instant notifications
- Create roles with custom names, descriptions, and colors
- View all created roles in a responsive grid
- Admin-only access to role creation
- Subscribe/unsubscribe to roles with one click
- Visual feedback showing subscription status
- Track subscriber count for each role
- Send notifications to all role subscribers
- Real-time feedback on notification delivery
- Track notification history
- Admin setup with secure key
- Role-based access control
- User management and permissions
GET /api/auth/verify- User authenticationGET /api/roles- Get all roles (admin only)POST /api/roles- Create new role (admin only)POST /api/subscribe- Subscribe/unsubscribe to rolePOST /api/notify- Send notification to role subscribers (admin only)POST /api/admin/setup- Setup admin privileges
The system creates three MongoDB collections:
- users - User profiles and subscription data
- roles - Role definitions and subscriber lists
- notifications - Notification history and delivery tracking
The system integrates seamlessly with Whop:
- Authentication: Uses Whop SDK for user verification
- User Data: Fetches user profiles from Whop API
- Permissions: Respects Whop's user management system
- Community Integration: Designed to work within Whop communities
- New user joins your Whop community
- User visits the role notification app
- User subscribes to relevant roles (@flips, @green, @yellow)
- Admin sends notifications to these roles
- User receives notifications instantly
- Admin creates new role @premium
- Users subscribe to @premium
- Admin sends exclusive notifications to @premium subscribers
- Only premium subscribers receive the notifications
- Someone types
@flipsin your Whop community chat - The system detects the role mention
- All @flips subscribers receive notifications
- Users can respond or take action based on the notification
- Authentication Error: Check Whop API credentials in .env.local
- Database Connection: Verify MongoDB connection string
- Admin Setup: Use the correct admin setup key
- Role Creation: Ensure role names are unique and valid
Check browser console and server logs for detailed error messages.
- Set up production MongoDB database
- Configure production Whop API credentials
- Deploy to Vercel, Netlify, or your preferred platform
- Update NEXT_PUBLIC_APP_URL to production URL
- Test all functionality in production environment
- Admin setup key should be changed in production
- Use environment variables for all sensitive data
- Implement proper error handling for production
- Consider rate limiting for API endpoints
The system is now ready for testing and can be integrated into your Whop community for role-based notifications!