Hotstar-Style PWA With Referrals

1. Project Overview
The goal is to build a high-performance PWA that mimics the UI/UX of Hotstar (Netflix/Disney+ style layout) while integrating external live-streaming sources (Zoom and Vimeo) and a 3-level referral ecosystem.
Core Tech Stack Recommendations:
Frontend: React.js or Next.js (for SEO and SSR).
Backend: Node.js (Express) or Python (Django/FastAPI).
Database: PostgreSQL (for relational referral data) and MongoDB (for content metadata).
Caching: Redis (for fast content delivery and session management).
2. Feature Specification: Live Streaming Integration
The app must support real-time playback from two distinct sources.
A. Zoom Integration
Method: Use the Zoom Meeting SDK for Web.
Requirement: Users should be able to join a "Live Session" directly within the PWA without being redirected to the Zoom app.
Functionality: Support for "Webinar Mode" where users are viewers, and "Meeting Mode" for interactive sessions.
B. Vimeo Integration
Method: Vimeo Developer API & Player SDK.
Requirement: Implement Vimeo Live embedding.
Security: Use "Domain Whitelisting" so the stream only plays on your PWA domain, preventing link sharing outside the platform.
3. Feature Specification: 3-Level Referral System
This is a tiered bonus structure where a user earns rewards from their direct recruits and their recruits' recruits.
Logic Structure:
Level 1 (Direct): User A invites User B. A gets $X\%$ bonus.
Level 2 (Indirect): User B invites User C. A gets $Y\%$ bonus.
Level 3 (Extended): User C invites User D. A gets $Z\%$ bonus.
Developer Instructions:
Tracking: Generate a unique Referral Slug for every registered user.
Attribution: Use a "Parent ID" column in the Users table to create a recursive tree structure.
Wallet System: Create a virtual wallet for each user to track "Pending" and "Withdrawable" bonuses.
Automation: Bonuses should trigger automatically upon successful payment of a subscription by a referred user.
4. UI/UX Requirements (Hotstar Style)
Dynamic Sliders: Large hero banners for featured content.
Category Rows: Horizontal scrolling for "Trending," "Movies," and "Live Sports."
Content Gating: A "Paywall" logic that checks user subscription status before allowing access to Zoom/Vimeo streams.
PWA Essentials: * Service Workers for offline caching of the UI.
"Add to Home Screen" (A2HS) prompts.
Push Notifications for live event reminders.
5. Security & Monetization
DRM (Digital Rights Management): Ensure stream URLs are signed and expire to prevent unauthorized access.
Payment Gateway: Integrate Stripe, Razorpay, or PayPal to handle recurring subscriptions.
Auth: Secure login via JWT (JSON Web Tokens) or Firebase Auth, including Social Login (Google/Facebook).
6. Developer Checklist (Milestones)
Setup PWA environment with Manifest.json and Service Workers.
Build Video CMS to manage Vimeo/Zoom links from an admin panel.
Integrate Zoom/Vimeo SDKs into a custom video player component.
Develop Referral Logic and database schema for the 3-level hierarchy.
Final Testing on mobile browsers (Chrome/Safari) to ensure "App-like" feel.