This is a clone of Netflix website built using React.JS as a Front-end & Firebase as Back-end. It's not a replica, and it doesn't have all the features of Netflix website. it's a similar version of Netflix with my own design touch, showing my abilities in React.JS to build something advanced like Netflix. It contains the ui of the home page, and if clicked on certain movies the trailer starts playing from YouTube (a random video).
Take a look at the live version here : https://netflix-clone-1ace8.web.app/
The Browse Page consists of 5 main sections:
- Header, which includes:
Categories Links: It shows the movies of a specific category when you click on it, for example, if you click on the films link it will be active and the browse page will show only the films. And if you click on the series link it will be active and the browse page will show only the series.
Featured Movie Title & Description: It shows the title and description of the featured movie.
-
Movies Slides: It's a slides shows the movies based on their genre. The genres and all movie information had been retrieved from the Firebase database.
-
Movie Card: It's an image represent the movie, when you hover over it became bigger and it will show its card feature if you click on it.
-
Video Player: it's a video player that plays trailer available on youtube , appears in the middle of the screen when you click on any play button, and you have to click on the play icon in the video player after it show up because it doesn't have an autoplay option currently. And when the video player show up the whole screen became an overlay, and only the video appears in the middle, and when you scroll up and down the video player moves with you. The video player should show the video of this movie which you clicked on it, but for this project purpose, it shows only any random video as a sample for some movies.
You can close the video player anytime by clicking anywhere else on the screen.
I have built this project using the following tools & techniques:
React.JS
React Router.
React Forms.
React Hooks.
useState.
useContext.
useEffect.
useHistory.
useState.
Compound Components.
JSX.
CSS Modules.
Firebase.
VSCode.
Give a ⭐ if you like the project