ASMR | Build Disney+ with React JS (Firebase + Styled Components + Redux)

In this FREE LIVE training, Qazi will show you how to create a full stack, Disney+ CLONE using React, Firebase, Redux, and Styled Components... 👇

This training covers the following:
👉 Building a Disney+ Clone App 💻
👉 How to handle authentication with Firebase 🔑
👉 How to upload images to Firebase Storage and use them on your site! 🖥️
👉 Real-time database with Firebase’s Firestore 🔥

🌟 Course Contents 🌟
⌨️: 00:00 - Disney+ Clone Build Showcase
⌨️: 04:17 - Initialize Project (Create React App)
⌨️: 06:50 - Clean Up Project
⌨️: 08:11 - Global Styling
⌨️: 10:20 - Add Mobile Responsiveness
⌨️: 12:14 - Create Login Component
⌨️: 16:30 - Center Text
⌨️: 23:04 - Add Background Image
⌨️: 27:21 - Add Logos Image
⌨️: 36:10 - Add Signup Button
⌨️: 39:50 - Add Description
⌨️: 43:29 - Add Logos Image
⌨️: 46:16 - Add navBar with Disney Logo
⌨️: 56:27 - Add navMenu Setup
⌨️: 01:00:37 - Add Home navMenu Icon
⌨️: 01:14:51 - Add Remaining navMenus in Header
⌨️: 01:16:37 - Add Login Button
⌨️: 01:21:05 - Setup Firebase
⌨️: 01:25:50 - Add Sign In with Google Popup
⌨️: 01:30:29 - Add Complete Sign In Functionality with Redux
⌨️: 01:58:28 - Finish Login Functionality & Redirect User
⌨️: 02:04:29 - Add Sign Out Functionality
⌨️: 02:16:02 - Add Background on Home Page
⌨️: 02:22:32 - Add React Slick Carousel
⌨️: 02:27:59 - Add Image Slider
⌨️: 02:42:13 - Add Viewers & Images
⌨️: 02:53:44 - Add Video to Viewers
⌨️: 03:01:11 - Add Recommends Component
⌨️: 03:12:46 - Setup Originals, New Disney and Recommends Components
⌨️: 03:15:49 - Create Redux State Slice for Getting Movies
⌨️: 03:19:18 - Add to Firebase & Display Movies
⌨️: 03:34:39 - Stuff ’n’ Things
⌨️: 03:42:11 - Add all Movie Categories
⌨️: 03:47:54 - Add Detail Background Image
⌨️: 03:56:12 - Add Image Title
⌨️: 04:00:14 - Add Play Button
⌨️: 04:08:45 - Add Trailer
⌨️: 04:11:03 - Add the addList Icon Next to Trailer
⌨️: 04:16:19 - Add Subtitle and Description
⌨️: 04:23:24 - Get Detail of Movie from Firebase
⌨️: 04:34:18 - Deploy Disney+ to Firebase

[akashmurugesh]

I really like the way how he builds up the expectation and manages to deliver more than that....Good job CP

[NrityakshaBySakshi]

why the man is whispering :'( ??? how am I supposed to listen and understand without making it feel like horror whispering at midnight...

13:34 - QUICK UPDATE

In react-router-dom v6, "Switch" is replaced by routes "Routes".
That means you need to change the import from ➡

❌ import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

to

✅ import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

And then add the component inside "element" property:

<Route exact path="/" element={<Login />}></Route>

[TheLyonsDen_VR]

For anyone trying to do this tutorial in 2023, useHistory has been placed by useNavigate in 'react-router-dom' so anytime he uses it, it would look like this:

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/home');

so when hes doing the handleAuth for authenticating the login, instead of

history.push('/home')

it would just be

navigate('/home)

[shoaibmirza]

Those of you having problem with the new firebase version just add these imports on top for newer version.

import firebase from "firebase/compat/app";
import "firebase/compat/firestore";
import "firebase/compat/auth";
import "firebase/compat/storage";

[AverageCho]

Literally this morning as I woke up: "I should build a project with Redux and firebase..." Looking forward to building this one, thanks CP!

[marcjoyce]

If anyone is having issues with the videos not autoplaying in latest version of Chrome, you have to add "muted" as an attribute. (e.g. <video autoPlay={true} loop={true} playsInline={true} muted> This is because of Chrome's accessibility 'rules'

[divyanshutripathy]

Man this is treasure for beginners trying to get good projects on their resume.

[bonny-james]

ERROR: firebase module cannot be found
try this:
npm uninstall firebase

npm i firebase@^8.10.0

[abhishekbaghel]

This video actually represents "silent hustle" 😂😂😂. You guys are amazing making me more confident with each video. Thank you, 🙏🙏🙏

[korragnarok]

I cannot believe I can watch something like this for free, wow. Thank you so freaking much for this, incredible.

[allinonedeveloper]

Who are still learning the basics and just coming in to this videos and see what's happening here 😂

[NostalgistGuy]

Mind really blown. kudos man. massive respect. Thanks

[darkalpha]

I wonder how you spoke like that for more than 4 hours?? 😂😂.

[harshthakur]

Whispering irritates me but your content is pretty dope

[podSnippets_]

this is really
i completed the whole thing,
I didn't understand redux completely, but i will search another tutorial for redux, thank you Qazi, you and your team are really generous. thank you again and again

[madIndianHindu]

It took me 1 week to completely watch this video, bcz every time I watch this, his whispers make me sleep.

😴

[faizanahmed]

Just smashed that like button Qazi, waiting for that video

[alvinsaini]

This Projects is so exciting ! that I am seeing this from 10:30pm and now it's 1:45 am the day changes but excitement remains the same

[danielrocha]

Uhhh this will be a great project to extend later😎