A Netflix-like web app to search and stream movies using BitTorrent protocol
- Intro
- Home
- Languages
- User account
- Movies search
- Movie
- Responsive design
- Configuration and additionnal security
Objective of this project is to create a complete streaming website that allow users to search and watch movies using BitTorrent protocol
Team of 3: Raphaël (GitHub), Lucas (GitHub) and I.
- Node JS (Express)
- React JS (w/ Hooks and Contexts APIs)
- Materialize CSS and Material UI Front libraries
- MongoDB w/ Mongoose
- JSON web tokens
- Axios for API requests
- Passport for OAuth
- torrent-stream for streaming
- ffmpeg for video conversion
Hypertube project handles:
- User creation and authentication using tokens and sessions
- OAuthentication via Twitter, Google, Facebook and 42
- User profile with basic information, profile picture, movies seen as well as users following
- User profile edition (password, details, preferences)
- App fully available in 3 languages (French, English and Spanish)
- Movies suggestions by rating (w/ movies seen identified on page)
- Movies search by name, filters (release year, rating, genre)
- Movie pages with details on cast, summary, duration and torrents, quality, sources available
- Movies streaming with multiple qualities available (720p/1080p)
- Movies subtitles available in up to 3 languages (French, English, Spanish)
- Movie format conversion (to webm) while downloading movie for browser support
- Default player functionalities including download and PiP
- Smart movie download checks to avoid downloading same movie again and help with streaming speed
- Movies downloaded deletion after one month
- Email notifications for authentication and password reset (with auth key)
- Change and reset of email/forgot password with ID validation
- Profile, pictures deletion and user DB cleanup
- Responsive design from mobile to desktop/tablet
- User input and upload checks (front/backend)
- Password hashing (Whirlpool)
- HTML/Javascript/SQL injections prevention
Discover more details below.
Hyperflix home
User interface is available in 3 languages:
- English
- French
- Spanish
User can edit its language when logged out and when logged in as well. English is the default language when arriving on the app while being logged out. When user registers, the language he is using will be kept for when he will log in for the first time, there is continuity. Although, once set in its logged in profile, the language will be saved, so when he connects again, he will retrieve his language as well.
I give more details about it further down but as well as being translated, the app also offers subtitbles in French, Spanish and English to users when they are available for the movie played. The movie played is available only in its original language.
User input has been secured on front and back end with immediate feedback for front end input validation. Also password security has been taken seriously with multiple layers of complexity validated on the go, including:
- A lowercase letter
- A uppercase letter
- A number
- A minimum of 8 characters
Password will be hashed (sha512) with a salt for 5 iterations first before being saved in the DB.
Register
Before saving user, several checks will also be runned in the background, including:
- Verifying if user already exists
- Verifying if email is already used
- Verifying (as said earlier) if input is in the right format required
Once user is created, he will be receive an email to verify his account, while account isn't validated, he wont be able to access the app (a message will be displayed to inform him).
User can also choose to register/login with:
- 42 intra
If username/email already exists, account will be merge and user will be able to connect via multiple methods.
If user has forgotten his password, he will be able to reset it using his email or username, a link will be sent to his email address.
The reset of password link will have a unique ID, which will be the latest link sent, others will be made deprecated. This provides security to prevent intruders from resetting someone else password.
User profiles are accessible via the /user/username url, so this means that each user has his own profile link and can share it. Also if user is on his own profile, he will be able to edit it, while if he is on someone else profile, he can follow that user.
User profile
User can edit his profile information after his account creation, he can edit:
- Firstname
- Lastname
- Username
- Email (private, hidden from profile)
- Language
If he edits his username, he will be redirected seamlessly to his new profile url.
User will necessarily have a profile picture, he sets it on registration and can edit after logging in.
Users can retrieve their movies seen on their profile page, they can also what other profiles viewed. Once a movie is view, it will be automatically added to its movies seen list (no refresh needed).
Users can also follow each other in order to retrieve easily profiles that they like or want to store on their profile. This will also be shown in a "Following" category on profiles following others, if following no one, the category won't be shown until someone is followed.
Users can also unfollow users so that these profiles no longer appear in their following section on their profile.
User is able to modify his email and password from the account settings modal, password will be hashed.
User is able to delete his account as well, this will remove him from database and other users no longer will be available to see his profile, nor following him.
Search
Once registered and logged, users will be able to search for movies on the platform. By default, they will get a list of suggestions of movies based on the best ratings. Movies already seen will be marked with an "eye" watched pin.
Search result
User is able to search a movie by entering completely or partly the name of the movie. If movies match his search term, a list will be returned to him ordered by default of the sorting he picked.
User can also refine its search by selecting filters:
- Range of release years
- Range of ratings
- Genre
Movie details
When clicking on a movie, user will access a movie page to get more details about the movie including:
- Movie poster
- Release in theater
- Duration
- Director
- Cast
- Summary
He will also see the list of sources available for that movie with the different qualities (720p/1080p).
Comments
Comments help users get a glimpse of the movie and see what users think about it or about the sources. By clicking on a username from a comment posted, user will access the profile of the user that left the comment.
Movie player
When user picks a source from the selector, the download and stream of the movie will start with the quality and source selected.
The player will progressively get the packages we give it to play so that user can also move the playback of the movie ahead and we will prioritize packages of the movie file from there so that he won't have to wait for the full download of the movie to move into the movie.
We also get the subtitles of the movie when the user starts streaming the movie, we store subtitles in 3 languages (French, English, Spanish) when they are available from opensubtitles API.
User can select them from the player, they will be synchronized with the movie as we display them according to the stream progress.
When the format of the movie isn't supported by default by the browser, we convert the movie to the webm format using ffmpeg library. The playback of the movie is slown down so user has to wait for the download/conversion to catch up.
We also added a delay when the movie source that needs to be converted is selected in order to give the player time to get the beginning with the movie.
We are using default HTML 5 browser which has:
- Support of PiP
- Support of file download
In order to avoid streaming multiple times the same movie, when a movie to be streamed is available on our server, we use this file for streaming instead of downloading it again in order to improve speed and storage.
Also files downloaded on the server will be deleted one month after the last stream to save space and avoid saturating the server.
The platform has been completely designed with Responsive Design in mind with multiple breakpoints to accommodate most common screen sizes (from iPhone 5 range to desktop/tablet resolutions):
- From 320px to 1730px
Responsive examples 1
Responsive examples 2
Here are a few examples of the user experience on mobile:
Responsive user profile
Responsive movie page
Database is running on MongoDB and we use MongoDB Atlas Interface to manage/host it online.
Application is protected against:
- HTML/Javascript injections -> using input checks and sanitizing (mongo-sanitize) input
- Malware upload -> using upload checks
- Password breaches -> using sha512 and salt hashing
- Cross-site request forgery -> using unique IDs with expiration (password reset, email validation)
- Cross-site resource sharing -> using authentication validation, tokens as well as sessions (logged out users limited)