karlhadwen / netflix

Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Netflix Using React

Building Netflix from Scratch Using React (Custom Hooks, Context, Portals), Firebase, Compound & Styled Components (10 Hour Tutorial Here: https://www.youtube.com/watch?v=x_EEwGe-a9o)

This application (a Netflix clone) was built using React (Custom Hooks, Context), Firebase & Styled Components. I have built the following pages within this application: sign in, sign up, browse & lastly the homepage. There are four different pages, some using protected routes with auth listeners. Firebase firestore handles all the data and that data is retrieved using a custom hook; authentication is used on all pages, which is handled by Firebase as well.

I used compound components (just a design pattern) to build my components, and there's over 10 examples as to how these are used. The styling is all handled via styled components. Using compound components made my actual dumb components really easy to test.

Subscribe to my YouTube channel here: http://bit.ly/CognitiveSurge where I build projects like this! And don't forget, you can contribute to this project (highly encouraged!).

netflix's Issues

firebase.auth().currentUser returning null

.

Display name is not updating

./src/app.js Attempted import error: 'JumbotronContainer' is not exported from './components'.

Thanks for greate tutorial,
I follow your video till the 1h8m and have got the error. can you help me out?

Problem in installing

I have cloned the repo and have done

1. npm install
2. npm start

It flashes only white screen, am I missing something?

Can you please explain me how do I start the project? like which command, yarn start is not working

Problem in install

Hi sir, it is great app but i can't install it in my local machine
when i run npm install it show me npm WARN deprecated is there is help with this problem please ?

Can not compile because of wrong firebase import

Change the import to "./lib/firebase.prod" in index.js.

Sc

shows "Cannot enable firestore for this project" while creating the cloud database in firebase

Attempted import error: 'Signin' is not exported from './pages'.

import React from 'react';
import { BrowserRouter as Router,Route } from 'react-router-dom';
import {Home, Browse,Signin,Signup} from './pages';
import * as ROUTES from './constants/routes';

export default function App() {
return (

<Route exact path ={ROUTES.HOME}>

);
}

It shows following error:

Failed to compile.

./src/app.js
Attempted import error: 'Signin' is not exported from './pages'.

Hola

does not show the json text data like title and subtitles from jumbo.json

There isn't the /images dir in src

There is no /images directory in src so images of movies and series are not displayed, please send me a link or update your repo
Thank you !

Netflix

Add Email Verification and Password Reset to signup

Hi Karl,

This is not really an issue but was wondering if you can update the sign-up page with email verification and password reset. I am trying to implement it using .sendEmailVerification(), and while it does send an email to verify, I couldn't get the next step of checking the verification before proceeding. I'll keep prodding but I'm new to this so was thinking you could make that update. Thanks!

Abenezer

only flashes white screen

- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/accordion/index.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/profiles/index.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/feature/index.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/jumbotron/index.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/footer/index.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/opt-form/index.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/player/index.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/loading/index.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/card/index.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/form/index.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/header/index.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/profiles/styles/profiles.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/feature/styles/feature.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/jumbotron/styles/jumbotron.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/accordion/styles/accordion.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/opt-form/styles/opt-form.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/player/styles/player.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/loading/styles/loading.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/footer/styles/footer.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/card/styles/card.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/form/styles/form.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

./src/components/header/styles/header.js
Failed to load parser 'babel-eslint' declared in 'BaseConfig » /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js': Cannot find module 'babel-eslint'
Require stack:
- /Users/student/Downloads/netflix-master/node_modules/eslint-config-react-app/index.js

Search for the keyw```
this is the output of my console. All i get is a flash of the netflix then a white screen. Please help!

Can't test link

When i try to test the components with link inside of them, i got an error that says: "[Error: ForwardRef(Link)(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.]"

How to change the video for each movie

I used the netflix clone that karlhadwen created but I don't know how to put a different video for each film because it's always the bunny.mp4 that is play, thank.

Search not working

Hi Sir,

The search (which uses fuse.js) is not working and I'm getting this error:

webpackHotDevClient.js:138 ./src/hooks/use-auth-listener.js
Line 21:6: React Hook useEffect has a missing dependency: 'firebase'. Either include it or remove the dependency array react-hooks/exhaustive-deps
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
webpackHotDevClient.js:138 ./src/hooks/use-content.js
Line 24:6: React Hook useEffect has missing dependencies: 'firebase' and 'target'. Either include them or remove the dependency array react-hooks/exhaustive-deps
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
webpackHotDevClient.js:138 ./src/components/player/index.js
Line 36:11: 'showPlayer' is assigned a value but never used no-unused-vars
printWarnings @ webpackHotDevClient.js:138
handleWarnings @ webpackHotDevClient.js:143
push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210
webpackHotDevClient.js:138 ./src/containers/browse.js
Line 39:6: React Hook useEffect has missing dependencies: 'category', 'slideRows', and 'slides'. Either include them or remove the dependency array. If 'setSlideRows' needs the current value of 'slides', you can also switch to useReducer instead of useState and read 'slides' in the reducer react-hooks/exhaustive-deps

Let me know if there's a quick fix for that! And great work on the website!

Firebase 404 Errors, Redirects Not Working

When working in my localhost dev environment, my redirects are all functional (for example, if a user is not logged in and tries to reach /browse, they are redirected to /signin). However, when deployed to Firebase, if I try the same example I receive a Page Not Found error:

I attempted updating my firebase.json file and adding the following:

"rewrites": [ { "source": "**", "destination": "/index.html" } ],

But I am still getting errors when deployed.

Thanks for checking this out!

Kwei regate

Kwai118030210 1000$ bônus

New

Loader will not work until the below changes made to netflix/src/components/loading/styles /loading.js

At Line No 22, needs the change

Currently === :after {

Should be === &:after {

i Ned conte Netflix pleazzzz