Skip to content

Full-stack movie web app with AI-supported, built using NestJS, Next.js, and Expo

Notifications You must be signed in to change notification settings

lehuygiang28/vphim

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🎬 VePhim: Watch Movies Online, Free and Fast

React Next.js NestJS MongoDB GraphQL Elasticsearch Redis React Native

🌟 Your Personal Movie Library, Anytime, Anywhere 🌟

⚠️ IMPORTANT LEGAL NOTICE: This project is for educational purposes only. Please read the DISCLAIMER.md file before using this software.

πŸ“– What is VePhim?

VePhim is a feature-rich platform where you can watch movies online for free. Think of it as your personal movie library accessible anytime, anywhere with an internet connection. With a clean, modern interface and powerful features, VePhim delivers a premium streaming experience without the premium price tag.

πŸ”„ How does it work?

VePhim acts as an aggregator rather than a host. Instead of storing movies on its own servers, it intelligently indexes and streams content from publicly available sources across the internet. Our specialized crawlers collect comprehensive movie data including:

  • Movie metadata: Titles, descriptions, genres, release dates, directors, actors
  • Media sources: Both m3u8 streaming URLs and embed URLs from various providers
  • Episode information: For TV shows with multiple episodes and seasons
  • Server options: Multiple streaming sources for each piece of content
  • Media details: Quality options, language information, and subtitles when available

This complete data collection approach enables:

  • Massive content library with minimal infrastructure costs
  • Buffer-free streaming with optimized content delivery
  • Always-fresh content that updates automatically through scheduled crawling
  • Reliable playback options with fallbacks between m3u8 and embed sources

✨ What makes VePhim special?

πŸ€– AI-Powered Search

Our Gemini-powered AI understands your preferences and helps you find the perfect movie based on your mood, interests, or specific criteria.

⚑ Lightning-Fast Streaming

Experience smooth, high-quality playback with our advanced streaming technology and optimized content delivery.

πŸ“± Multi-Platform

Enjoy VePhim on your browser or mobile device with our responsive web app and native mobile applications.

πŸ” Smart Discovery

Discover new content through intelligent recommendations based on your viewing history and preferences.

πŸ’Ύ Personal Collections

Create a free account to save favorites, track viewing history, and receive personalized recommendations.

πŸ›‘οΈ Clean Experience

Enjoy a clean, ad-light experience focused on content enjoyment rather than disruptions.

πŸ—οΈ Architecture & Project Structure

VePhim is built as a monorepo using Nx, a powerful build system and development toolkit that enables efficient code sharing and maintenance across multiple applications.

vephim/
β”œβ”€β”€ apps/
β”‚   β”œβ”€β”€ api/         # NestJS backend service
β”‚   β”‚    └── .env    # Backend environment configuration
β”‚   β”œβ”€β”€ fe/          # Main user interface (Next.js)
β”‚   β”‚    └── .env    # Frontend environment configuration
β”‚   β”œβ”€β”€ mnt/         # Admin dashboard interface
β”‚   β”‚    └── .env    # Admin environment configuration
β”‚   └── mobile/      # React Native mobile application
β”œβ”€β”€ containers/      # Docker configurations for infrastructure
β”‚   β”œβ”€β”€ be-with-redis/      # Backend with Redis configuration
β”‚   β”œβ”€β”€ be-redis-pm2/       # Backend with Redis and PM2
β”‚   β”œβ”€β”€ be-redis-es/        # Backend with Redis and Elasticsearch
β”‚   β”œβ”€β”€ elasticsearch/      # Elasticsearch configuration
β”‚   β”œβ”€β”€ kibana/             # Kibana visualization tool
β”‚   β”œβ”€β”€ load-balancer/      # Load balancing configuration
β”‚   β”œβ”€β”€ swag/               # Secure Web Application Gateway
β”‚   └── weserv-images/      # Image optimization service
β”œβ”€β”€ documents/       # Project documentation and diagrams
β”œβ”€β”€ tools/           # Build and development utilities
β”œβ”€β”€ .env             # Root environment variables
└── nx.json          # Nx workspace configuration

πŸ› οΈ Technology Stack

VePhim leverages modern technologies to deliver a seamless user experience:

πŸ”’ Backend Infrastructure

  • NestJS: Enterprise-grade Node.js framework for building scalable server applications
  • MongoDB: NoSQL database for flexible and scalable data storage
  • Redis: In-memory data store for caching and performance optimization
  • Gemini AI: Google's advanced LLM for intelligent search and recommendations
  • Elasticsearch: Distributed search engine for powerful content discovery
  • GraphQL: Modern API technology for efficient data querying and manipulation
  • Data Crawlers: Sophisticated crawlers that index and collect complete movie data from multiple public sources, including metadata, streaming URLs, and embed options

🎨 Frontend Applications

VePhim provides two separate frontend applications for different user roles:

Main User Interface (fe)

  • Next.js: React framework optimized for the end-user streaming experience
  • Ant Design: Premium UI components for a visually appealing user interface
  • Vidstack: Modern, accessible media player for streaming video content
  • Swiper: Touch-enabled slider for browsing movie collections
  • React Hook Form: Performance-focused form validation and handling

Admin Dashboard (mnt)

  • Next.js: Same framework as the main UI but configured for administrative tasks
  • RefineJS: React-based framework for building admin panels
  • Ant Design: Consistent design system across both frontends
  • React Hook Form: Form handling for content management operations

πŸ“± Mobile Experience

  • Expo: Cross-platform mobile app development framework
  • UI Kitten: React Native UI library with customizable components
  • React Native Reanimated: Advanced animations for a fluid mobile experience
  • Expo Video: Native video playback for mobile devices

πŸš€ Getting Started

Local Development Setup

  1. Install dependencies:

    yarn install
  2. Configure environment:

    cp .env.example .env
    # Edit .env with your configuration values
  3. Start infrastructure services:

    docker compose -f docker-compose.infra.yml up -d
  4. Start applications in development mode:

    Backend:

    # Configure backend environment
    cp apps/api/.env.example apps/api/.env
    # Edit apps/api/.env as needed
    
    # Start the API server in development mode
    yarn api
    # Server will run at http://localhost:8000

    Main User Interface:

    # Configure frontend environment
    cp apps/fe/.env.example apps/fe/.env
    # Edit apps/fe/.env as needed
    
    # Start the web application in development mode
    yarn fe
    # Main UI will run at http://localhost:3000

    Admin Dashboard:

    # Configure admin environment
    cp apps/mnt/.env.example apps/mnt/.env
    # Edit apps/mnt/.env as needed
    
    # Start the admin interface in development mode
    yarn mnt
    # Admin dashboard will run at http://localhost:4000

    Mobile Application:

    # Ensure Android emulator is running
    yarn adr

Production Build and Deployment

Building for Production

  1. Build Backend:

    yarn nx build api --configuration=production
    # Output will be in dist/apps/api
  2. Build Main UI:

    yarn nx build fe --skip-nx-cache
    # Output will be in apps/fe/.next with standalone folder for production
  3. Build Admin Dashboard:

    yarn nx build mnt --skip-nx-cache
    # Output will be in apps/mnt/.next with standalone folder for production

Running in Production Mode

  1. Run Backend:

    # After building
    NODE_ENV=production node dist/apps/api/main
  2. Run Main UI:

    # After building
    cd apps/fe/.next/standalone
    NODE_ENV=production node server.js
  3. Run Admin Dashboard:

    # After building
    cd apps/mnt/.next/standalone
    NODE_ENV=production node server.js

Docker Deployment Options

Backend Deployment

  • Option 1: Standalone Backend

    docker compose up -d
  • Option 2: Backend with Redis Bundle

    docker compose -f docker-compose.bundle.yml up -d

Frontend Deployments

For quick deployment with Vercel:

  1. Main User Interface:

    • Connect your repository to Vercel
    • Configure environment variables
    • Use these build settings:
      • Build Command: yarn nx build fe --skip-nx-cache
      • Output Directory: apps/fe/.next
      • Install Command: yarn install --immutable
  2. Admin Dashboard:

    • Create a separate Vercel project for the admin interface
    • Configure environment variables (including authentication)
    • Use these build settings:
      • Build Command: yarn nx build mnt --skip-nx-cache
      • Output Directory: apps/mnt/.next
      • Install Command: yarn install --immutable

Custom Docker Builds

You can also build and run your own Docker images using the provided Dockerfiles:

# Build and run backend
docker build -f apps/api/Dockerfile -t vephim-api .
docker run -p 8000:8000 vephim-api

# Build and run main UI
docker build -f apps/fe/Dockerfile -t vephim-fe .
docker run -p 3000:3000 vephim-fe

# Build and run admin dashboard
docker build -f apps/mnt/Dockerfile -t vephim-mnt .
docker run -p 4000:4000 vephim-mnt

πŸ” Want to Contribute or Learn More?

This README provides an overview of VePhim. For detailed documentation, architecture diagrams, and contribution guidelines, check the documents directory or visit our GitHub repository.

⚠️ Disclaimer

IMPORTANT LEGAL NOTICE

This project is provided STRICTLY FOR EDUCATIONAL AND DEMONSTRATION PURPOSES ONLY.

For the full legal disclaimer, please refer to the DISCLAIMER.md file in this repository.

In summary:

  • VePhim does not host, store, or distribute any movie content
  • All content is sourced from and streamed directly from third-party sources
  • Users are responsible for complying with their local laws and regulations
  • This project is designed to showcase development techniques, not to facilitate copyright infringement

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.

About

Full-stack movie web app with AI-supported, built using NestJS, Next.js, and Expo

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Contributors 3

  •  
  •  
  •  

Languages