It helps the algorithm and motivates me to add more enterprise features!
OTT Box is a premium streaming platform that brings the cinema experience to your screen. Built with cutting-edge Next.js 16 and powered by TMDB API, it delivers a rich, immersive viewing experience with auto-playing trailers, dynamic content discovery, and a sleek Netflix-inspired interface.
- 🔐 Zero-Click QR Login - Real-time Netflix-style WebSocket auth from mobile to desktop.
- 💌 Premium Emailing - Automated, custom-branded Welcome & Magic Link emails.
- 🛡️ Secure Magic Links - Advanced database checks to prevent ghost account creation.
- 🎬 Shorts/Reels Feed - Shorts/Reels-style vertical video feed for immersive trailer discovery.
- 🛡️ Smart Watchlist - Protected watchlist with authentication and easy management.
- 📱 PWA Support - Installable as a native app on all devices.
- 👆 Touch Interactions - Swipe, scroll, and long-press gestures optimization.
- 🎥 Auto-Playing Trailers - Cinematic hero section with YouTube video backgrounds
- 📱 Fully Responsive - Seamless experience across all devices
- 🎭 Premium UI/UX - Netflix-style design with glassmorphism effects
- 🔍 Smart Search - Real-time content discovery across movies and TV shows
- 🎬 Dynamic Categories - Trending, Top Rated, Series, and Genre-based browsing
- ⚡ Lightning Fast - Server-Side Rendering with Next.js App Router
- 🎨 Rich Animations - Smooth transitions and interactive hover effects
- 📺 Video Player - Integrated streaming capabilities
- 🌐 Multi-Content Support - Movies, TV Series, Seasons, and Episodes
- ⚛️ Next.js 16 - Latest App Router with React Server Components
- 🎨 React 19 - Server Components & Concurrent Features
- 📘 TypeScript - Full type safety throughout the application
- 🗄️ Supabase - Backend as a Service for user management
- 🎬 TMDB API - The Movie Database for content metadata
- 🔐 Authentication - Secure user authentication with Supabase
- 🎨 Vanilla CSS - Custom design system with CSS Modules
- ✨ Glassmorphism - Modern frosted glass UI effects
- 🔹 Lucide React - Beautiful, consistent iconography
- 🎭 Smooth Animations - CSS transitions and transforms
- 📹 Video.js - Professional video player integration
- 🎥 YouTube Embed - Trailer playback in hero section
- 🖼️ Next/Image - Optimized image loading and caching
Our architecture is designed to handle real-time concurrency, secure authentication, and edge-deployed frontend delivery.
This diagram presents the platform at an architectural level, focused on service responsibilities and runtime boundaries:
- Edge-first frontend delivery: Next.js 16 SSR/RSC is deployed on Vercel Edge for low-latency global rendering, static asset optimization, and CDN-assisted distribution.
- Client intelligence at the edge: Desktop browser and PWA/mobile clients maintain local capabilities (service worker, cache, playback state) to reduce round trips and improve UX continuity.
- Real-time trust path: Zero-click QR login bridges desktop and mobile through Supabase Auth + Realtime channels, enabling secure cross-device session initiation.
- Core data domains: User profiles, watchlist state, playback tracking, and search analytics are modeled as first-class backend domains for personalization and observability.
- External provider integration: TMDB powers metadata discovery, YouTube powers trailer/media surfaces, and SMTP/Nodemailer handles transactional communication.
This diagram explains how requests, auth events, and realtime signals move across layers in production:
- Layered topology: Client Edge -> Delivery (Vercel CDN) -> Application (Next.js App Router + API routes) -> Backend (Supabase services).
- Zero-click auth choreography: Desktop generates QR token, mobile scans and authenticates, backend validates and publishes session state, desktop completes login without manual credential entry.
- API surface separation: Dedicated routes for auth, analytics tracking, notifications/email, and search/view logging isolate concerns and simplify scaling.
- Data and event pipelines: Realtime streams handle instant state updates while relational tables persist durable entities like users, watchlist, and search logs.
- Media + metadata routing: Catalog intelligence (TMDB) and trailer delivery (YouTube) are integrated as upstream systems behind the application layer.
- Node.js (v18 or higher)
- NPM or Yarn package manager
- Supabase account (free tier available)
- TMDB API key (free registration)
# 1. Clone the repository
git clone https://github.com/SonuPaikrao/ottbox.git
# 2. Navigate to project directory
cd ott-box
# 3. Install dependencies
npm install
# 4. Setup environment variables
# Create .env.local file and add:
# NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
# NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
# 5. Start development server
npm run dev
# 6. Open in browser
# Visit http://localhost:3000Create a .env.local file in the root directory:
# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url_here
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key_here
### **Authentication Setup (Important)**
To enable Google Sign-In:
1. Go to **Authentication > Providers** in Supabase Dashboard.
2. Enable **Google**.
3. **In Google Cloud Console**:
- Create Credentials > OAuth Client ID.
- **Application Type**: Select **Web application** (NOT Chrome Extension).
- **Name**: "OttBox Web" or similar.
4. Add **Authorized redirect URIs** in Google Cloud:
- `https://wkfynjofytyfpvimlfno.supabase.co/auth/v1/callback`
### **Production & Vercel Setup**
When deploying to Vercel:
1. Go to **Supabase Dashboard > Authentication > URL Configuration**.
2. **Site URL**: Set this to your production URL (e.g., `https://ott-box-weld.vercel.app`).
3. **Redirect URLs**: Add the following:
- `https://ott-box-weld.vercel.app/**`
- `http://localhost:3000/**`
**Note**: You do NOT need to change anything in Google Cloud Console if you are using the Supabase Callback URL correctly. Just ensure Supabase allows your Vercel domain.
- 🎨 Dark Cinema Palette - Deep blacks (#0a0a0a), rich purples, and vibrant accents
- 🌟 Hero Section - Full-screen video background with auto-playing trailers
- 🎭 Micro-Interactions - Hover effects, scale transforms, and smooth transitions
- 📱 Responsive Grid - Adaptive layouts for all screen sizes
- 🔍 Blur Effects - Strategic use of backdrop filters for depth
- 🎨 Display Font - Bold, cinematic headings
- 📝 Body Font - Clean, readable sans-serif
- 🎯 Hierarchy - Clear visual distinction between content types
ottbox/
├── 📁 public/ # Static assets, PWA files, architecture maps
│ ├── 🗺️ System_Architecture_Map.png
│ ├── 🗺️ System_Connectivity_Map.png
│ ├── 🎬 ott-banner.png
│ ├── 📄 manifest.json
│ ├── ⚙️ sw.js / workbox-*.js
│ └── 🎨 icons/, svg/jpg/png assets
├── 📁 src/
│ ├── 📁 app/ # App Router: pages + route handlers
│ │ ├── 🏠 page.tsx # Home
│ │ ├── 📁 api/ # REST endpoints (auth, track, logs, notifications)
│ │ ├── 🎬 movies/, 📺 series/, 🔥 trending/
│ │ ├── 🔍 search/, 🎞️ shorts/, ❤️ watchlist/
│ │ ├── 📖 title/[id]/, ▶️ watch/[id]/
│ │ ├── 🔐 auth/callback/, 📱 qr/
│ │ └── 🎨 layout.tsx, globals.css, loading/error boundaries
│ ├── 📁 components/ # Feature-organized UI modules
│ │ ├── Home/, Navbar/, Player/, Search/
│ │ ├── Title/, Shared/, Shorts/, Skeletons/, Analytics/
│ │ └── NotificationPopup.tsx
│ ├── 📁 context/ # Global state providers
│ │ ├── AuthContext.tsx
│ │ ├── WatchlistContext.tsx
│ │ ├── HistoryContext.tsx
│ │ └── ToastContext.tsx
│ ├── 📁 lib/ # Integrations and utility services
│ │ ├── api.ts, tracker.tsx
│ │ ├── supabase.ts, supabase-browser.ts, supabase-admin.ts
│ │ └── email.ts, email-templates.ts
│ └── 📁 types/ # Project type declarations
├── 📄 package.json # Scripts and dependencies
├── 📄 next.config.ts # Next.js runtime config
├── 📄 tsconfig.json # TypeScript config
├── 📄 vercel.json # Deployment config
├── 📄 eslint.config.mjs # Lint rules
├── 📄 *.sql # Supabase setup/migration scripts
├── 📄 .env # Local environment variables
└── 📄 README.md
- Full-screen video background with YouTube trailers
- Auto-rotation between trending content
- Smooth fade transitions between videos and images
- CTAs for "Play Now" and "More Info"
- Horizontally scrollable movie/series cards
- Categories: Trending Today, Top Rated, TV Series, By Genre
- Lazy loading for optimal performance
- Hover effects with scale and elevation
- Real-time search across all content
- Genre-based filtering
- Advanced discovery with sort options
- Responsive grid layouts
- Custom video player interface
- Episode selection for TV series
- Playback controls and settings
- Fullscreen support
# Install Vercel CLI
npm i -g vercel
# Login to Vercel
vercel login
# Deploy to production
vercel --prodAdd the following environment variables in Vercel Dashboard:
NEXT_PUBLIC_SUPABASE_URLNEXT_PUBLIC_SUPABASE_ANON_KEY
Connect your repository to Vercel for automatic deployments on every push.
- Daily trending movies and TV shows
- Real-time updates from TMDB
- Personalized recommendations
- Highest-rated films across all time
- Curated collections
- Award-winning content
- Popular series with season tracking
- Episode-by-episode viewing
- Binge-worthy collections
- Action & Adventure
- Comedy & Drama
- Sci-Fi & Fantasy
- Horror & Thriller
- Romance & Animation
We welcome contributions! Please follow these steps:
- 🍴 Fork the repository
- 🌿 Create a feature branch (
git checkout -b feature/amazing-feature) - 💾 Commit your changes (
git commit -m 'Add amazing feature') - 📤 Push to the branch (
git push origin feature/amazing-feature) - 🔄 Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- 🎬 TMDB - For providing comprehensive movie and TV data
- 🗄️ Supabase - For backend infrastructure
- ⚛️ Next.js Team - For an amazing framework
- 🎨 Design Inspiration - Netflix, Disney+, and other streaming platforms