🔴 Let's build Netflix 2.0 with REACT.JS! (Stripe Checkout & Webhooks, Redux, Firestore, Google Auth)

Join me as I build the NETFLIX 2.0 CLONE with REACT.JS. You'll learn how to do the following in this build:

👉 How to build a login and Log Out Authentication Flow with Google!
👉 How to build a Beautiful Home Screen with all the movies looking just like Netflix!
👉 How to build a Subscription page where you can see your active monthly subscription and any recurring subscriptions!
👉 How to build a complete Stripe Payments Checkout Flow for paid monthly Netflix Subscriptions!
👉 How to use the Firebase extension for synchronising Stripe Recurring Payments with Users
👉 How to finally deploy the final build using Firebase Hosting!

+ SO MUCH MORE!

🔴 LOOKING FOR THE CODE? 🛠️

👇🏻FOLLOW ME HERE:

💰 WANT TO SUPPORT THE CHANNEL?

🕐 TIMESTAMPS:
00:00 Introduction
00:50 Build Tech Stack
01:47 Build Showcase
04:46 Setting Up Firebase (1/2)
09:08 Setting Up Firebase Authentication (1/2)
11:40 Initialising the Build
12:11 Creating the HomeScreen Component
14:54 Building the Nav Component
31:50 Building the Banner Component (1/2)
49:51 Implementing TMDB API
1:02:11 Building the Banner Component (2/2)
1:07:19 Building the Row Component
1:28:42 Deploying the Frontend Build using Firebase
1:33:25 Setting Up Firebase (2/2)
1:35:19 Implementing React Router
1:40:54 Building the LoginScreen Component
2:03:00 Building the SignupScreen Component
2:!6:02 Setting Up Firebase Authentication (2/2)
2:29:23 Explaining and Implementing Redux
2:34:28 Implementing Login & Logout Functionality
2:40:54 Building the ProfileScreen Component
2:57:15 Setting Up Cloud Firestore
3:01:36 Setting Up Stripe (1/2)
3:05:48 Explaining Cloud Firestore Implementation
3:10:03 Implementing Stripe Webhooks
3:13:50 Adding Products in Stripe
3:16:32 Setting Up Stripe (2/2)
3:31:23 Building the PlanScreen Component (1/3)
3:54:12 Stripe Checkout Team Donation!
3:55:00 Building the PlanScreen Component (2/3)
3:57:29 Testing the Stripe Checkout & Subscription Flow
4:08:47 Building the PlanScreen Component (3/3)
4:19:57 Deploying the Final Build using Firebase
4:20:40 Outro

Let’s get it PAPAFAM 🔥.

DISCLAIMER: This Video is made for informational and educational purposes only. We do not own or affiliate with Netflix and its subsidiaries in any form. Copyright Disclaimer Under section 107 of the Copyright Act 1976, allowance is made for “fair use” of this video for educational purposes.

#reactjs #beginner #netflix

[FilipeBurgonovo-dy]

You are a living legend bro. I've just completed the build... No words to thank you for all this awesome content and energy.

[cameronsickler]

1:38:20 Issue: Fixing React Router

This is what your App.js will need to look like in order to stay current w/ REACT changes since this tutorial released :)

import React from 'react';
import './App.css';
import HomeScreen from './HomeScreen';
import { BrowserRouter, Routes, Route } from "react-router-dom";

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

<BrowserRouter>
<Routes>
<Route path="/" element={<HomeScreen />} />
</Routes>
</BrowserRouter>

</div>
);
}

export default App;

[waqarafghannaseer]

Alot of the stuff taught here is what i have seen in real world projects as a junior programmer. By far the best tutorial

[avi]

completed the project overall good project
updates:
1- instead of useHistory which is disbanded useNavigate is useful
2- firebase now has all functions of auth as separate functions(read docs)
3-lastly delete all file and folders except counterSlice and some minor tweaks here and there.😁

[tilakkumar]

Please try to share those Large Codes you just copy-paste. Example API Requests and CSS.

[MissBoom]

Another fantastic build! Thank you Sonny 🔥

[leagueoflegendswildriftnep]

This man, a genius indeed, good to have you here!

[Moh_ha]

Awesome the only one who shares the next level stuff on youtube! many thanks 🎉

[anishmandal]

no one has build an recommendation system till now hope to see in this section 🔥

[oluonafeso]

So... I tried going back to the todo_list app tutorial with clever programmer from 2020 to which i watched every stream back then but haven't been able to code since then coz of school and stuff. Now I'm trying to build the app and I've run into the most problems i ever encountered in my life, particularly with firestore and getting my app to work generally. i really hope this helps me. keep up the good work man.

[harshigupta]

Was looking for something like this for soo long!! Thank you so much, made my day <3

[msp]

It was excellent tutorial keep going like this

[alejandrovolonte]

i've been looking for a tutorial to make a netflix clone, and yours is the best. Thanks!. Cheers from Argentina

[HumanTouchArt]

react router is not working ... just change it to <div className="app">
<Router>
<Routes>
<Route exact path='/' element={<HomeScreen />} />
</Routes>
</Router>
</div>

[whyfoo]

LESSS GOOO THANK U FOR THIS SONNY !!!!

[manpreetsinghrana]

Thank you, Sonny. Just finished this project. Awesome content dude!!!

[patrickkioko]

oya oya .... we killing it again... react master is dropping new stuff. stay tuned

[bendevweb]

An amazing project with a amazing teacher 🤯💥👏

[tomasburian]

Great job on this, but as far as UI goes, it'd be great to actually have a working framework that lets us search the movies and play them. Any video coming up on that?

[marksoc_sxc]

Can't it be a 5 day challenge Sonny Sir?? Its been a long time since we had one🥺🥺