Creating a Netflix Clone : Part 1

In this blog To create Netflix clone we will be using ReactJs along with firebase to host our application . For data we will be using TMDB API . For using TMDB you need to create an account on it so visit TMDB website and create your account . Once Done click on profile icon on top right >>settings >>API , and there you get your api key .

Setup Firebase :

Firebase is the technology we are going to use for hosting our application here . For this too you need to have an account created , if you do not have it already ,create your account here : Firebase website and login . Once done , click on Add Project and create a project there .

That is it , we have our firebase setup now , so lets move to our react application .

Starting with react Application

To start with react application , lets first create our react app . To create a react app , run the below command , this create a new whole application named - netflix-clone for you with full folder structure .

npx create-react-app netflix-clone

requests.js This is the file we are using here to hold all the Urls we are going to use to fetch data from . Inside src folder create a file named , requests.js and add below code in the file .

Here inside the API_KEY you need to mention api key which we have created in TMDB . Here we have just created a dictionary , and added all the fetch urls we need to use in the application .Only use of this file is to not repeat creating and writing urls again and again , and grab it from one place when we want to use .

axios.js Another file which we need here is axios.js , create this also inside src folder . Before writing the code , lets install axios using below command :

npm i axios

After this just add below code in the file :

import axios from "axios";

const instance = axios.create({
    baseURL: "api.themoviedb.org/3",
})

export default instance;

Here we are creating an instance of axios create and will append our urls in front of base url.

Starting with React Components .

Row.js

The First component we are going to create here is the Rows we see in netflix page where all tv shows and movies are displayed. Inside src , create a folder named components . Here we are going to create all the components that are being used in this website .Inside this create a file named "Row.js", Note here we are using first letter to be capital as this is a component .

Add Below code to this file :

import React, { useState, useEffect } from 'react';
import axios from '../axios';
import '../Row.css'

const base_url = "image.tmdb.org/t/p/w500"

function Row({ title, fetchUrl, isLargeRow }) {
    const [movies, setMovies] = useState([]);

    //A snippet of code which runs based on a specific condition
    useEffect(() => {
        //if [] , run once when the row loads and dont run again
        async function fetchData() {
            const request = await axios.get(`${fetchUrl}`)
            setMovies(request.data.results)
        }
        fetchData()
    }, [fetchUrl])

    return (
        <div className="row">
            <h2>{title}</h2>
            <div className="row_posters">
                {movies.map(movie => {
                    return <img key={movie.id} className={`row_poster ${isLargeRow && "row_posterLarge"}`} src={`${base_url}/${isLargeRow ? movie.poster_path : movie.backdrop_path}`} alt={movie.name}></img>
                })}
            </div>
        </div>
    )
}
export default Row

Here we have created a function based component where we are taking three parameters as props , title, fetchUrl , isLargeRow and destructuring it . Here we have created state named movies which is kept as an empty array (Array because we are going to fetch a number of movies data) using hook useState , and a setState method (setMovies) . Another Hook we used here is useEffect ,This hook run everytime the component Loads, so when the component loads this hook lets us fetch all the data on the given URL . Once the data is received movies state is being set as received result , and thus we render that data using a map method .

Also i have added some CSS as below in Row.css file :

.row {
  margin-left: 20px;
  margin-right: 20px;
  color: black;
  /* color: white; */
}

.row_posters {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 20px;
}

.row_posters::-webkit-scrollbar {
  display: none;
}

.row_poster {
  object-fit: contain;
  width: 100%;
  max-height: 100px;
  margin-right: 10px;
  transition: transform 450ms;
}

.row_poster:hover {
  transform: scale(1.08);
  opacity: 1;
}

.row_posterLarge {
  max-height: 200px;
}

.row_posterLarge:hover {
  transform: scale(1.09);
}

After this I added number of Row components inside App.js :

import './App.css';
import Row from './components/Row';
import requests from './requests';

function App() {
  return (
    <div className="App">

      <Row title="NETFLIX ORIGINALS" fetchUrl={requests.fetchNetflixOriginals} isLargeRow />
      <Row title="TRENDING NOW" fetchUrl={requests.fetchTrending} />
      <Row title="TOP RATED" fetchUrl={requests.fetchTopRated} />
      <Row title="ACTIONS MOVIES" fetchUrl={requests.fetchActionMovies} />
      <Row title="COMEDY MOVIES" fetchUrl={requests.fetchComedyMovies} />
      <Row title="HORROR MOVIES" fetchUrl={requests.fetchHorrorMovies} />
      <Row title="ROMANCE MOVIES" fetchUrl={requests.fetchRomanceMovies} />
      <Row title="Documentaries" fetchUrl={requests.fetchDocumentaries} />
    </div>
  );
}

export default App;

This is how our application looks as of now :

Pretty Cool right :)

So we need few more components to be created which we will continue in next blog part . Till Then , happy coding :)