Building the Netflix Clone with React

Aaleen Mirza

5 min readDec 28, 2022

Prerequisites

Novice knowledge of Html, Css, Js and React.

What are we building?

Final product (v1) : https://aaleen110.github.io/netflix-clone/

UI/UX like Netflix.
Getting live data from Movies DB.
Screen navigation using React Router.
Responsive design for mobiles with @media queries.
Add to my list feature, using local storage. (v2)
Search titles, genres etc. (v2)
Fully reusable components.
Deployment on Github Pages.

Getting Started

Create a new react project with the following command
npx create-react-app netflix-clone cd netflix-clone npm start

You will see the template react page running on localhost:3000. Once your project is up and running, create files and folders as per the below project structure, I have cleaned some unnecessary boilerplate files for this project.

The project structure is simple and self explanatory, you can view or download the complete code anytime from https://github.com/Aaleen110/netflix-clone.
We will be majorly building two screens in this project, namely mainPage and manageProfile. The two screens can be found under src/screens. The following is the diagrammatic illustration of what we are gonna be building.

Our Screens

manageProfile

This will be our first landing page of our application, where user can see a title, 5 profiles and a button. There will be one reusable component to show profile image and a text title. The data for profiles is a hardcoded array inside src/utils/commonJson. The only action to be performed on this screen is the user selecting a profile, once a profile is selected the information is stored in local storage and user is navigated to mainPage.

2. mainPage

The Main page will call TMDB api to get the list of movies and different genres. The resulting data will be passed to a reusable component namely TilesRow. Our reusable component takes in three parameters, genre name, array of movies to be displayed in carousel fashion and a special prop called topRow to differentiate the first row of movies with other. The Main Page will also have a cover movie, a search box to search movies or genres, a nice hover effect just like Netflix using pure css, top nav bar and a My List section. We will also try to copy most of the user effects as possible.

Populating movies using TMDB API

Visit https://www.themoviedb.org/ to read about TMDB apis. You will first need to register and login to use their services (It’s easy and free!).
Once logged in you will need to generate an API key to consume the apis. Go to https://www.themoviedb.org/settings/api and copy the API Key (v3 auth). You now need to paste this key in our services/requests.js file and replace the API_KEY the with your key.
You can hit the EXAMPLE API Request in Postman or any other tool you like to check the working of API.
You can find detailed API logs for the apis we will be consuming for fetching trending, popular, action, top rated etc movie genres from https://developers.themoviedb.org/3.
I have simplified this process for you by digging into the documentation (believe me it was quite hectic) and creating an object with all the requests. You can refer to services/requests.js.

Navigating through screens

To navigate between the two screens we will be using react-router. You may visit the page and read about it in details. You do not need to worry about the complexities of the library now, just have an overview, do not get yourself confused.. We will implement only the basic router to navigate from one screen to another in this project.
Go to your projects root folder in terminal and hit

npm i -D react-router-dom

Once you have successfully installed react-router-dom in your project, its time to wrap our app around HashRouter from react-router, In order to do that, go to your main App.js file and edit its content.
Next is triggering navigation on click event, for which we will be using useNavigate hook from react-router-dom. Its implementation is quite simple, you may refer to ManageProfile screen.

//importing useNavigate hook
import { useNavigate } from "react-router-dom";

//declaring it in functional component
const navigate = useNavigate();

//trigger route change event
navigate(routes.browse)

Making UI mobile friendly

We will be using media queries to handle how beautiful our app looks even in mobile screens. Media queries are CSS 3 feature provides ways to customise how your app looks in different screen dimensions. If you see the following style in css, the style written inside media block will override styles to screens with width lesser than 640px (mobile devices). while the general container style will be applied to the rest.


.container{
      flex-wrap: wrap;
      width: 100%;
    }

@media(max-width: 640px){
//some css styles
 .container{
      flex-wrap: wrap;
      width: 50%;
    }
 .title{
      font-size:16px;
      font-weight:bold;
    }
}

Pushing and deploying on GitHub Pages.

Once your app is published to github pages, you will be able to host it for free. Getting this done is may sound cubersome but believe me it is quite simple. In mere 3 steps your project will be live and ready to share with the world. You can read in details about deploying a react app on github pages here.

Step 1: You will need to add your local project to your github remote repository

$ git remote add origin https://github.com/{username}/{repo-name}.git

Step 2: Install gh-pages npm package as dev dependency

$ npm install gh-pages --save-dev

Step 3: Define home page property to package.json file and update 2 lines in scripts

{
  "name": "netflix-clone",
  "version": "0.1.0",
+ "homepage": "https://gitname.github.io/react-gh-pages",
  "private": true,

...
...
"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

Step 4: Deploy!

$ npm run deploy

Final Note

You can see live demo of the project anytime at https://aaleen110.github.io/netflix-clone/
Also you can download the code from my following git repository (You may star the repo if you liked it)
https://github.com/Aaleen110/netflix-clone

The idea of the project is to encourage developers to built complex UI with simple and easy to understand code. If it looks complex, then it doesn’t necessarily have to be complex to write.
I have tried my level best to keep the code as simple as possible so that even a newbie in React should understand what is cooking and be able to built a Netflix clone and highlight it in their portfolio :)
Toodles!