MovieSphere

Real-time watch parties + AI-powered recommendations — Netflix but social

Comment

Inspiration

The loneliness of modern streaming hit us one night — four friends, four different screens, separate couches, same movie, but zero shared experience. We realized streaming platforms optimized everything except human connection. MovieSphere was born from that: a place where you don't just watch — you watch together. Real-time synced playback, live camera chat, AI that actually knows your taste, and daily trivia that makes every visit feel like an event. Not another streaming service. The first social streaming service.

What it does

MovieSphere is a full-stack social streaming platform that transforms passive watching into an interactive, gamified experience. It combines video streaming, real-time watch parties, AI-powered discovery, daily trivia, gamified credits, and push notifications into one unified app.

📺 Video Streaming Browse thousands of movies and TV shows via the TMDB catalog — Now Playing, Popular, Top Rated, Upcoming, and Trending, all filterable by genre. Watch through multiple embed sources (SuperEmbed, VidLink, API.Player) with a cinema mode that hides distractions, episode/season selectors for TV shows, auto-next episode with countdown, and automatic progress tracking that resumes where you left off.

👥 Watch Parties (LiveKit WebRTC) Create or join a real-time synchronized watch party where everyone's video playback stays in sync. Share your camera and microphone so friends see your reaction live. Chat via text over LiveKit data channels, send emoji reactions that bounce across the screen, and drag camera windows anywhere on screen. Share the room via QR code or one-click invite link — no account needed for guests.

🤖 AI Features (Groq Llama 3.3 70B) Get personalized movie recommendations based on your taste, chat with an AI about any film or show, upload an image for AI analysis, and search using natural language ("movies about dreams"). Daily push notifications feature AI-generated titles and descriptions that feel fresh every time.

🧠 Daily Trivia Quiz Test your movie and TV knowledge with 5 multiple-choice questions generated fresh by AI on every visit — never the same quiz twice. Each question comes with a 10-second countdown timer; answer correctly within the limit to earn +2 credits. Questions span release years, actors, directors, characters, plot details, box office, and awards. Results show a per-question breakdown with credits earned.

⚡ Gamified Credit Economy 100 free credits replenish daily. Streaming a movie costs 2 credits, a TV episode costs 1, and browsing costs 1. Earn credits by playing trivia. When credits run out, a sleek full-screen overlay blocks playback — come back tomorrow or grind trivia for more. The entire credit flow is exempt on home page, OG previews, comments, credits page, notifications, and trivia itself.

📅 Content Calendar Never miss a release. Browse upcoming movies and TV shows in a monthly grid view with poster thumbnails, hover-reveal media type badges, and links straight to detail pages. Navigate between months or jump to today. Data is pulled from TMDB's discover endpoint filtered by exact date range.

📱 Short-Form Reels (YouTube) A TikTok-style vertical video feed powered by YouTube trailers. Swipe up/down or use arrow keys to navigate. Double-tap to like, single-tap to pause, toggle sound, and auto-advance when a video ends. Infinite scroll loads more reels as you approach the end.

📬 Smart Push Notifications Up to 3 daily push notifications featuring trending movie and TV trailers with AI-generated text from Groq. Delivered via VAPID web push through a service worker, triggered by staggered cron jobs. Clicking a notification opens the detail page for that title.

🔐 Authentication & Personalization Sign up with email/password or Google OAuth via Supabase. Automatic token refresh with retry queue prevents session drops. Save favorites with a heart toggle, build a watch later list, continue watching from where you left off, and view your recently watched history. Leave ratings and written reviews on any title.

🎬 Detail Pages Every movie and TV show has a rich detail page with: backdrop and poster art, rating, genre tags, overview, episode browser for TV shows with season posters, full cast and crew with role cards, trailers and behind-the-scenes videos via YouTube, GIFs via GIPHY, soundtrack previews via iTunes with inline audio player, photo gallery with lightbox, personalized recommendations, similar titles, user reviews with star ratings, and a sticky anchor nav for quick jumping between sections.

🔍 Search Two search modes: keyword search for movies, TV shows, and actors with autocomplete suggestions and keyboard navigation; and AI natural language search ("find me thrillers like Inception"). Results include a horizontal actor row with circular profile photos, genre filter pills, and year range filtering.

📤 Social Sharing & OG Previews Every movie and TV show has server-rendered Open Graph meta tags with Twitter Cards and Schema.org JSON-LD (@graph with both media type and Article types for Gmail compatibility). Links shared on WhatsApp, Twitter, Facebook, Telegram, and email show rich previews with poster, title, description, and rating. Real users are redirected to the interactive detail page via JavaScript.

🎵 Extras Browse music soundtracks via iTunes with 30-second audio previews, search GIFs via GIPHY, explore actor profiles with full filmography and biography, and switch between dark and light themes that persist across sessions.

How we built it

MovieSphere was built over several weeks by a single developer using a modern full-stack JavaScript/Python architecture. The entire app is split into two deployable units — a Python FastAPI backend and a React SPA frontend — connected via Supabase for database, authentication, and real-time data.

Backend (Python FastAPI) The API layer is built with FastAPI running as a Vercel serverless function. Every route is organized into its own router file under app/api/ — 31 routers in total serving 55+ endpoints. A custom middleware in main.py intercepts all /MovieSphere/* requests and handles the credit economy: it resolves the user from a JWT (verified locally via PyJWKClient with Supabase JWKS, with a live Supabase fallback), calculates the credit cost, deducts from the user's balance, and returns a 402 response if exhausted. Exempt paths (home page, OG previews, trivia, etc.) pass through without deduction.

All TMDB data is fetched server-side through a centralized app/services/tmdb.py wrapper, which normalizes responses into a consistent format with genre mappings, poster/backdrop URLs, and media type tagging. External integrations each have their own service module: trivia.py (Groq AI question generation via llama-3.3-70b-versatile), trailer_digest.py (YouTube Data API + Groq for push notifications), giphy.py, itunes.py, and youtube.py.

The credit system lives in app/core/credits.py with three operations — get_credits (reads balance and resets to 100 daily if a day has passed), deduct_credits (atomic decrement with logging), and add_credits (increment capped at 100, used by trivia rewards). The Supabase client in database.py is a single shared instance configured from environment variables.

Frontend (React 19 + Vite + Tailwind CSS v4) The frontend is a single-page application with 18 page components, 11 reusable UI components, and 5 custom hooks. Routing uses React Router v7 with a ProtectedRoute wrapper that checks auth state and redirects unauthenticated users to /auth while preserving their intended destination via sessionStorage.

State management is handled through React Context (AuthContext for user session, ThemeContext for dark/light mode) and React Query (@tanstack/react-query) for server data caching with retry logic. The Axios client in api/client.js includes two interceptors: a request interceptor that injects the Bearer token from localStorage, and a response interceptor that handles 401 token refresh with a queue mechanism to prevent concurrent refresh calls, and 402 credits-exhausted via a global custom event.

The sidebar uses a hover-expandable design on desktop (collapsed to 48px, expands to 208px on hover) and a hamburger-triggered overlay on mobile — 11 navigation items with SVG icons, a credits display, theme toggle, user profile section with delete account functionality, and sign-out.

Watch Party (LiveKit Cloud) Real-time watch parties are the most architecturally complex feature. The backend generates a LiveKit JWT token at /MovieSphere/watch-party/token with a 1-hour expiry. The frontend connects via livekit-client (Room, LocalVideoTrack, RemoteParticipant). Local camera/audio is captured via getUserMedia, published as a track to the room, and rendered in a draggable element using srcObject. Remote participants' video tracks are subscribed and rendered similarly. Text chat and emoji reactions use LiveKit's data channel for low-latency messaging. All camera windows are individually draggable with both mouse and touch events using requestAnimationFrame for smooth rendering.

Daily Trivia (Groq AI) The trivia system generates questions on-demand per user visit. The backend calls Groq's llama-3.3-70b-versatile model with a structured prompt that requests 5 multiple-choice questions in JSON format. The response is parsed, validated, and stored in a per-user session table in Supabase. The frontend presents a full quiz flow: start screen with stats → question-by-question with a 10-second animated timer (color-coded from indigo to amber to red) → results screen with per-question breakdown and credits earned. Timer expiry auto-submits as incorrect. Only one

Challenges we ran into

. The Authorization Bermuda Triangle — Trivia endpoints were reading the Bearer token from a query parameter (?Authorization=...) instead of the HTTP header. Every single API call failed with 401. FastAPI's Header() dependency injection fixed it in one line after an entire debugging session.

. OG Preview Rewrite Loop — Vercel rewrites /movie/* and /tv/* to the backend for social previews, but the JavaScript redirect to /watch/* hit the same rewrite rules, creating a loop. We introduced a separate /detail/{type}/{id} SPA route that bypasses the rewrites entirely.

Accomplishments that we're proud of

Single Developer, Full Stack — The entire app — 55+ API endpoints, 18 frontend pages, real-time WebRTC, AI integration, push notifications, and a custom credit economy — built from scratch by one person. Backend in Python/FastAPI, frontend in React, deployed on Vercel with Supabase for data.

What we learned

. JWT verification is a nightmare ecosystem. Every library handles algorithm discovery, key rotation, and error messages differently. PyJWT, jose, PyJWKClient — each has its own quirks. The lesson: always build a verification fallback chain rather than trusting a single library to get it right.

. Third-party iframes are a wall you cannot climb. You cannot control volume, detect playback state, or enforce autoplay on embed sources you don't own. No amount of postMessage hacks or server switching fully solves this. Sometimes the right architectural decision is accepting the constraint and designing around it (multiple fallback sources, user-selectable servers, graceful degradation).

What's next for MovieSphere

Mobile Apps (React Native) — The web app proves the concept, but native apps unlock the full experience: reliable background playback, native push with zero delays, camera access for watch parties without browser prompts, and home screen presence without the PWA caveat. Porting the API layer is trivial — the entire backend is already stateless and mobile-agnostic.

Built With

  • axios
  • fastapi
  • giphy-api
  • groq-ai
  • itunes-search-api
  • livekit-cloud
  • python
  • react-19
  • react-query
  • react-router-v7
  • supabase
  • tailwind-css-v4
  • tmdb-api
  • vapid-web-push
  • vite
  • youtube-data-api-v3
Share this project:

Updates