A fullstack working clone of netflix built over Google Drive API & Next.js to stream any title in highest possible quality.
This is a fully functional video streaming OTT platform designed to have same the experience as Netflix.
You can choose to click on any title/show/movie to stream in the highest possible quality (likes of 4K, REMUXES, Bluray, HDR 10bit, etc if available) with English Subtitles (if any).
Since the WEB only supports video files which are encoded with x264 codec and firefox only supports .mp4 containers the search is limited to x264 video files so the WEB version has less content than the Android version.
The files are sourced direclty from my Google Drive and sizes range anywhere from 10GB to 80GB.
The main motive for this project is to watch content in highest possible quality on my 4K android TV, as quality is everything to make watching experience a feast to the eyes. Each movie release is different and its quality is defined by the SOURCE (REMUX, Bluray, WEBDL, WEBRip, etc), Bitrate, resolution and the audio quality and various other factors. Below is the order from highest quality to lowest ones.
- REMUXES
- Bluray/Blu-Ray encodes
- BDRip
- WEB-DL
- BRRip
- WEBRip
- HDRip
User Clicks a movie/show
--> Client sends request to server with required details to fetch streamlinks
--> Server makes a search request under the hood to Google Drive to find video files corresponding to the title
--> Server then responds with stream links of that title in various qualities depending on the platform (android/web) sorted by file size in descending order.
--> Client requests for subtitles from the server and then converts the file to VTT (in memory Blob)
--> Client starts playing the media.
This is possible because of the route which streams/serves the video files directly from google drive, it just needs the ID of the file in google drive.
This project is intended to be used for personal use only and will not be made public for obvious legal reasons.
✔️ Real netflix experience.
✔️ Responsive Layout
✔️ Optimized for maximum performance and least api requests possible.
✔️ Search for movies and tv shows
✔️ Movie/TV Shows recommendations
✔️ Stream movies & tv show in highest possible quality.
✔️ Ability to change quality & video source.
✔️ VTT subtitles support from opensubtitles.org (SRT files are converted to VTT on the fly)
✔️ Awesome netflix like trailer video banner
✔️ Ability to sign up and sign in
✔️ Save watch progress and watch list.
✔️ Automatic Trailer Playback
- Next.js 11
- React
- Tailwind CSS
- React Query - For DataFetching
- Zustand - Simple and intuitive global state manager for react
- srt-webvtt - Convert SRT to VTT on the fly
- SwiperJS - Slider
- ReactPlayer - Main Player for Videos
- React-Youtube - Embedding youtube trailers as background
- React-Hook-Form - For easy form validation/handling.
- js-base64 - base64 transcoder
- NodeJS > 14.17.5
- Express - For Simple and Robust APIs
- PostgreSQL - as RDB.
- Prisma - Next-gen ORM for PostgreSQL
- GoogleAPIs - To communicate with Drive API
- Celebrate - For input validation
- typedi - Dependency Injection library and to cache class instances of services.
- Pino - Logging service
- opensubtitles-api - opensubtitles.org api wrapper for nodejs to get subtitles of specific titles.
- Setup Authentication System and Protect routes
- Abstract Logic from Components , Clean and refactor existing code.
- Multiple Profile System for each user.
- Extract AudioTracks from VideoContainer using the experimental AudioTracks API.
- Play next episode automatically.
- Design a tracking system for tv/shows, watch progress or Integrate with trakt.tv
- Resume video from where user last left off.
- Fakeflix - Thanks to FakeFlix as many components like navbar, row slider, rowposter, skeletons have been taken directly from this repo.
- Cloudflare Pages - To allow hosting on their fast global edge network
- Google Drive API reference
- Heroku - For backend deployment
- TMDB API - Th! anks to their free open source api for movies/shows index.
- Fanart API - For HD tv/movie logos
- Media Type and format guide
- Partial Content & Range Requests