🎬 MovieStreaming Platform

A modern, Netflix-style movie streaming platform built with Next.js 15, featuring dynamic movie catalogs, subscription management, user authentication, and seamless payment processing.

📋 Table of Contents

• Overview
• Features
• Tech Stack
• Architecture
• Project Structure
• Getting Started
• Environment Variables
• Database Setup
• Key Features Explained
• Deployment
• Security

🎯 Overview

MovieStreaming is a full-stack web application that provides users with a seamless movie discovery and streaming experience. The platform integrates with The Movie Database (TMDB) for real-time movie data, Supabase for authentication and database management, and Stripe for secure payment processing.

Core Capabilities

• Movie Discovery: Browse trending, popular, and genre-based movie collections
• User Authentication: Secure OTP-based signup and password login
• Subscription Management: Multiple subscription tiers with Stripe integration
• Personalized Experience: Viewing history and AI-powered recommendations
• Payment Processing: Secure checkout flow with webhook handling

✨ Features

🎥 Movie Features

• Hero Section: Auto-playing movie trailers in a Netflix-style hero banner
• Movie Categories: Browse movies by genre (Action, Comedy, Drama, Horror, Sci-Fi, Thriller)
• Trending & Popular: Real-time trending and popular movie sections
• Movie Details: Comprehensive movie information with trailers, ratings, and descriptions
• TMDB Integration: Automatic fetching of posters, backdrops, and video trailers

👤 User Features

• OTP-Based Signup: Passwordless registration with email verification
• Secure Authentication: Supabase Auth with session management
• Viewing History: Track watched movies and viewing progress
• Personalized Recommendations: AI-powered movie suggestions
• User Profile: Manage subscription and account settings

💳 Subscription Features

• Multiple Plans: Basic, Premium, and other subscription tiers
• Stripe Integration: Secure payment processing
• Webhook Handling: Automatic subscription activation
• Billing Management: Track payment history and subscription status

🛠 Tech Stack

Frontend

• Next.js 15.0.5 - React framework with App Router
• React 19 - UI library
• TypeScript - Type-safe development
• Tailwind CSS - Utility-first CSS framework
• Shadcn UI - High-quality React components
• Lucide React - Icon library

Backend

• Next.js API Routes - Serverless API endpoints
• Supabase - PostgreSQL database + Authentication
• Stripe - Payment processing
• TMDB API - Movie data and metadata

Infrastructure

• Vercel - Hosting and deployment
• Supabase Cloud - Database and auth hosting
• Stripe Dashboard - Payment management

🏗 Architecture

High-Level Architecture

┌─────────────────┐
│   Next.js App   │
│  (Frontend +    │
│   API Routes)   │
└────────┬────────┘
         │
    ┌────┴────┬──────────┬──────────┐
    │         │          │          │
┌───▼───┐ ┌──▼───┐  ┌───▼───┐  ┌───▼───┐
│Supabase│ │Stripe│  │ TMDB  │  │Vercel │
│  Auth  │ │      │  │  API  │  │       │
│   +    │ │      │  │       │  │       │
│   DB   │ │      │  │       │  │       │
└────────┘ └──────┘  └───────┘  └───────┘

Data Flow

1. User Request → Next.js App Router
2. API Route → Processes request (auth, payment, movie data)
3. External Services → Supabase, Stripe, or TMDB
4. Response → JSON data returned to frontend
5. React Components → Render UI with data

📁 Project Structure

MovieStreaming/
├── src/
│   ├── app/                          # Next.js App Router
│   │   ├── api/                      # API Routes
│   │   │   ├── auth/                 # Authentication endpoints
│   │   │   │   ├── route.ts          # Password login
│   │   │   │   ├── send-otp/         # OTP sending
│   │   │   │   ├── verify-otp/       # OTP verification
│   │   │   │   ├── signup/           # User registration
│   │   │   │   └── set-password/     # Password setup
│   │   │   ├── stripe/               # Payment processing
│   │   │   │   ├── create-checkout/  # Stripe checkout session
│   │   │   │   └── webhook/          # Payment webhooks
│   │   │   ├── tmdb/                 # Movie data API
│   │   │   │   ├── trending/         # Trending movies
│   │   │   │   ├── popular/          # Popular movies
│   │   │   │   ├── discover/          # Movie discovery
│   │   │   │   └── genres/           # Genre list
│   │   │   └── user/                 # User management
│   │   ├── payment/                  # Payment pages
│   │   │   ├── page.tsx              # Checkout page
│   │   │   ├── success/              # Success page
│   │   │   └── cancel/               # Cancel page
│   │   ├── movies/                   # Movies listing page
│   │   ├── layout.tsx                # Root layout
│   │   ├── page.tsx                  # Home page
│   │   ├── error.tsx                 # Error boundary
│   │   └── not-found.tsx             # 404 page
│   ├── components/                    # React components
│   │   ├── Header.tsx                 # Navigation bar
│   │   ├── Hero.tsx                   # Hero section with trailer
│   │   ├── MovieCategories.tsx        # Genre-based movie lists
│   │   ├── TrendingMovies.tsx          # Trending section
│   │   ├── PopularMovies.tsx           # Popular section
│   │   ├── Recommendations.tsx        # User recommendations
│   │   ├── ViewingHistory.tsx         # Watch history
│   │   ├── Signin.tsx                 # Login form
│   │   ├── Signup.tsx                 # Registration form
│   │   ├── SubscriptionPlans.tsx      # Subscription cards
│   │   └── ui/                        # Shadcn UI components
│   └── lib/                           # Utilities
│       ├── supabase.ts                # Supabase client
│       ├── supabase-client.ts         # Client-side Supabase
│       ├── env.ts                     # Environment validation
│       └── logger.ts                  # Logging utility
├── public/                            # Static assets
├── .env.local                         # Environment variables (not in git)
├── next.config.ts                     # Next.js configuration
├── tailwind.config.ts                 # Tailwind configuration
├── tsconfig.json                      # TypeScript configuration
└── package.json                       # Dependencies

🚀 Getting Started

Prerequisites

• Node.js 18.0.0 or later
• npm or yarn package manager
• Supabase Account (free tier works)
• Stripe Account (for payments)
• TMDB API Key (free at themoviedb.org)

Installation

1. Clone the repository

   git clone <repository-url>
   cd MovieStreaming

2. Install dependencies

   npm install

3. Set up environment variables (see Environment Variables)

4. Set up Supabase database (see Database Setup)

5. Run the development server

   npm run dev

6. Open your browser Navigate to http://localhost:3000

🔐 Environment Variables

Create a .env.local file in the root directory with the following variables:

# Supabase Configuration
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key

# Stripe Configuration
STRIPE_SECRET_KEY=your_stripe_secret_key
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret

# Application Configuration
NEXT_PUBLIC_APP_URL=http://localhost:3000

# TMDB API
TMDB_API_KEY=your_tmdb_api_key

Getting API Keys

1. Supabase:

   • Create account at supabase.com
   • Create a new project
   • Get keys from Project Settings → API

2. Stripe:

   • Create account at stripe.com
   • Get keys from Developers → API keys
   • Set up webhook endpoint for /api/stripe/webhook

3. TMDB:

   • Create account at themoviedb.org
   • Get API key from Settings → API

🗄 Database Setup

Supabase Setup

1. Create Supabase Project

   • Go to supabase.com
   • Create a new project

2. Run Database Schema

   • Open SQL Editor in Supabase Dashboard
   • Run the SQL from supabase-schema.sql or updated-supabase-schema.sql

3. Set up Row Level Security (RLS)

   • Enable RLS on all tables
   • Create policies for user data access

4. Configure Authentication

   • Enable Email provider in Authentication settings
   • Configure email templates for OTP

Database Tables

• subscription: Subscription plans and pricing
• billing: Payment records and subscription history
• viewinghistory: User viewing history and progress
• recommendation: Personalized movie recommendations

🔑 Key Features Explained

Authentication Flow

1. User enters email
   ↓
2. API sends OTP via Supabase Auth
   ↓
3. User receives email with OTP code
   ↓
4. User enters OTP → Verified via Supabase
   ↓
5. New users → Prompted to set password
   ↓
6. Password set → User stored in Supabase Auth
   ↓
7. Session created → Stored in localStorage + Supabase

Payment Flow

1. User selects subscription plan
   ↓
2. Redirects to Stripe Checkout page
   ↓
3. User enters payment details
   ↓
4. Payment processed by Stripe
   ↓
5. Stripe webhook fires → Creates billing record
   ↓
6. User metadata updated with subscription
   ↓
7. Success page confirms subscription activation

Movie Data Flow

1. Frontend requests movies
   ↓
2. Next.js API route processes request
   ↓
3. API fetches from TMDB API
   ↓
4. TMDB returns movie data + posters + trailers
   ↓
5. Data transformed and cached
   ↓
6. Components render movie cards with images

🚢 Deployment

Vercel Deployment

1. Push to GitHub

   git add .
   git commit -m "Ready for deployment"
   git push origin main

2. Connect to Vercel

   • Go to vercel.com
   • Import your GitHub repository
   • Add environment variables in Vercel dashboard

3. Deploy

   • Vercel automatically deploys on push
   • Build logs available in Vercel dashboard

Environment Variables in Vercel

Add all environment variables from .env.local to Vercel:

• Project Settings → Environment Variables
• Add each variable for Production, Preview, and Development

Post-Deployment

1. Update Stripe Webhook URL

   • In Stripe Dashboard → Webhooks
   • Add endpoint: https://your-domain.vercel.app/api/stripe/webhook
   • Copy webhook secret to Vercel environment variables

2. Update App URL

   • Update NEXT_PUBLIC_APP_URL in Vercel with your production URL

🔒 Security

Implemented Security Measures

• ✅ Environment Variable Validation: Validates required env vars at startup
• ✅ Row Level Security (RLS): Database-level access control
• ✅ Stripe Webhook Verification: Signature verification for webhooks
• ✅ TypeScript: Type safety throughout the application
• ✅ Input Validation: API routes validate all inputs
• ✅ Secure Password Handling: Managed by Supabase Auth
• ✅ HTTPS Only: Enforced in production
• ✅ Security Headers: Configured in next.config.ts

Security Best Practices

• Never commit .env.local to version control
• Use service role key only on server-side
• Validate all user inputs
• Use RLS policies for data access
• Keep dependencies updated

📝 Available Scripts

# Development
npm run dev          # Start development server

# Production
npm run build        # Build for production
npm run start        # Start production server

# Code Quality
npm run lint         # Run ESLint

🎨 UI/UX Features

• Dark Theme: Modern dark interface
• Responsive Design: Works on all devices
• Smooth Animations: Tailwind CSS transitions
• Loading States: Skeleton loaders and spinners
• Error Handling: User-friendly error messages
• Accessibility: ARIA labels and keyboard navigation

🔮 Future Enhancements

• Watchlist functionality
• Advanced search with filters
• User ratings and reviews
• Social features (sharing, comments)
• Video streaming integration
• Mobile app (React Native)
• Admin dashboard
• Analytics and reporting

📄 License

This project is licensed under the MIT License.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Support

For support, email [email protected] or open an issue in the repository.

---

Built with ❤️ using Next.js, Supabase, and Stripe