Netflix Clone Details
Movie Categories
Netflix provides movies with different categories which has same component display property. So one single Row component created to display a single category. Then we can apply the re-usability of react component since the display property for all categories is similar.
The Movie Database (TMDB)
All movie detials for this clone project are fetched from the movie database's (TMDB). So to integrate with TMDB we need to create an account on it and got an API key so we can get access to TMDB.
Playing The Trailer
To fetch the movie's trailer, movie-trailer module is used. This module help us by getting the movie trailer video url from Youtube using the movie's title or name which we got from the movie database api.
Rows Component
By Fetching movies from the movie database and set the result to a state value which will be an array, we can map through the array result and render each movies poster image.
Movies list/row section
So once we have a single row component we can call it on App.jsx file for each movie category by passing corrsponding props values.
Movie Trailer view
To play the trailer, react-youtube module is used. It will take the movie trailer url which we got using the movie-trailer module and fetch the trailer video from Youtube.
Home/banner section
The Netflix banner displays netflix originals movie posters continously, every page refresh a new movie poster is displayed. When we fetch movie data from the movie database for netflix originals we got multiple movies. So by putting them as a state. so we select a random movie poster on every page refresh.
