View Code? Open in Web Editor NEW

Netflix Clone responsive in React , see movies details and interactiv preview trailer

License: GNU Lesser General Public License v3.0

HTML 2.18% CSS 2.29% JavaScript 95.53%

netflix_clone's Introduction

Netflix Clone movies trailer

Demo: (including mobile)

This project is a front end clone of Netflix with interactive mouse event with two declination.

It was created with React.js

It uses The MovieDB Api to get movies list with all details and preview trailer when mouse hover, and movie details in full page.

Movie data was pulled from TMDB and trailer videos from Youtube.

To achieve this i made lazy loading techniques to efficiently render and update UI with hooks and useEffect technical.

Running Project Locally

Clone Project :

git clone https://github.com/ismailazdad/Netflix_clone.git

Go to project directory :

cd Netflix_clone/

Install dependencies:

npm install in the root project

Get API key from here

Change .env file in root project and replace YOUR_API_KEY_HERE by your personnal themoviedb key

Run project:

npm run start

Open http://localhost:3000 to view it in your browser.

All modern browsers (including mobile) with css media query
Route maping for rendering mutliples pages with react router with parameters(dynamic route generation)
Bootstrap modal
GlobalStyle, and style.jsx and styled component
Hooks with UseState and UseEffect to synchronize api call and transition style effect synchronization and propTypes
TMDB Api
Handle environment variable with .env