cleverprogrammers/cp-disney-plus-clone

Here's the DEMO Disney+ Clone App

Disney Plus Clone Readme

LIVE DEMO

🔴 Watch full tutorial HERE

Description

This is the ReactJS Disney Plus Clone, the perfect project to put on your portfolio by Clever Programmer.

Build it today!

PREREQUISITES:

• Sign up for a Firebase account HERE
• Install Node JS in your computer HERE
• Download all the images and videos HERE

cp-disney-plus-clone's Issues

NavMenu is not showing after login

When I click login nothing appears in NavMenu
This is the code--->


And the result --->

Any one pls help me I am stuck!!
@CleverProgrammer

SignUp button not working

when a user clicks on Get All There button nothing happens, i think it would be good to handle that button click, when i saw the code there was no event handler for component in login.js whereas in the header.js login button is handling click for login

Live demo link not working

Uncaught TypeError: Cannot read properties of undefined (reading 'getState')

Here's my code.

`import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import store from './app/store';
import { StoreContext } from "./app/context";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>



</React.StrictMode>
);`

not working

components

the contents available inside movie categories is not appearing only the heading is coming

the video is not playing in Viewers.js

<video autoPlay={true} loop={true} playsInline={true}>
       <source src="/videos/1608229455-star-wars.mp4" type="video/mp4" />
 </video>

this code adds the video but the video was not playing in crome

the solution to this is that you just have to add muted to the video code just like this

<video autoPlay={true} loop={true} playsInline={true} muted>
        <source src="/videos/1608229455-star-wars.mp4" type="video/mp4" />
</video>

just a little help from my side if someone gets stuck

GIF

reduxjs/toolkit: Uncaught TypeError: Cannot read properties of undefined (reading 'name')

[FIX] Uncaught TypeError: Cannot read properties of undefined (reading 'name')

I got this error when working on the login functionality Uncaught TypeError: Cannot read properties of undefined (reading 'name') .

It was a particularly frustrating error as there is not a lot of documentation on it however there is a lot of unsolved questions about it on stack overflow and GitHub actions.. Going through the YouTube comments I realise a lit of people had the same issue. so I decided to put the solution here.

So this has to do with the userSlice.js file.

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  name: "",
  email: "",
  photo: "",
};

const userSlice = createSlice({
  name: "user",
  initialState,
  reducers: {
    setUserLoginDetails: (state, action) => {
      state.name = action.payload.name;
      state.email = action.payload.email;
      state.photo = action.payload.photo;
    },

    setSignOutState: (state) => {
      state.name = null;
      state.email = null;
      state.photo = null;
    },
  },
});

export const { setUserLoginDetails, setSignOutState } = userSlice.actions;

export const selectUserName = (state) => state.user.name;
export const selectUserEmail = (state) => state.user.email;
export const selectUserPhoto = (state) => state.user.photo;

export default userSlice.reducer;

The issue is with the exports, the exports are

export const selectUserName = (state) => state.user.name;
export const selectUserEmail = (state) => state.user.email;
export const selectUserPhoto = (state) => state.user.photo;

deleting the user part so that they match their declarations to the reducer as shown below now solves the error

export const selectUserName = (state) => state.name;
export const selectUserEmail = (state) => state.email;
export const selectUserPhoto = (state) => state.photo;

problem facing in firebase.js

Compiled with problems:X

ERROR in ./src/firebase.js 3:0-32

Module not found: Error: Package path . is not exported from package C:\Users\acs\Desktop\disney\node_modules\firebase (see exports field in C:\Users\acs\Desktop\disney\node_modules\firebase\package.json)
Did you mean './firebase'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\Users\acs\Desktop\disney\node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

Unable to Login

I have completed the Login Page but when I click on Login I am unable to get the dashboard. In Firebase I am able to see the logged email id but unable to Login in the App. In the video on yt, I have completed till 1:58:00. Help me

https://www.youtube.com/watch?v=R_OERlafbmw

Not working

Can't resolve 'firebase'

Failed to compile.

./src/firebase.js
Module not found: Can't resolve 'firebase' in '/CP/youtube-disney-clone/src'

🔴It is showing Module not found although it is present in src folder.🔴

Image:

Please provide json file with movie data

It's impossible to continue the project without the movie data you're using to populate the firestore db. Please provide the disneyPlusMoviesData.json file you're using in the video somewhere in your github repo. Thanks a lot.

Firebase Error

[2021-11-16T20:50:27.707Z] @firebase/firestore: Firestore (9.4.1): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=permission-denied]: Permission denied on resource project disneyplus-clone-a33d5.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

s

Firebase permission is denied.

No longer can access the firebase db with the shared firebase.js file.

After clicking on login this error came **_firebase__WEBPACK_IMPORTED_MODULE_7__.default.collection is not a function

After clicking on login the below error came
Uncaught runtime errors:
×
ERROR
firebase__WEBPACK_IMPORTED_MODULE_7_.default.collection is not a function
TypeError: firebase__WEBPACK_IMPORTED_MODULE_7_.default.collection is not a function
at http://localhost:3000/static/js/bundle.js:1093:55
at commitHookEffectListMount (http://localhost:3000/static/js/bundle.js:73420:30)
at commitPassiveMountOnFiber (http://localhost:3000/static/js/bundle.js:74913:17)
at commitPassiveMountEffects_complete (http://localhost:3000/static/js/bundle.js:74885:13)
at commitPassiveMountEffects_begin (http://localhost:3000/static/js/bundle.js:74875:11)
at commitPassiveMountEffects (http://localhost:3000/static/js/bundle.js:74865:7)
at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:76748:7)
at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:76701:18)
at performSyncWorkOnRoot (http://localhost:3000/static/js/bundle.js:75918:7)
at flushSyncCallbacks (http://localhost:3000/static/js/bundle.js:63927:26)

[FIX]User can access the "/home" and "/detail/:id" route without logging In

Bug Fix!
This fix won't let the user access the "/home" or "/detail/:id" route without logging In.

Firebase Data

Hi, I have been doing the Disney+ clone from your video but looks like the firebase data is broken/expired. I have checked all members using your firebase token and their portfolio site is broken. It would be great if you could export the data and provide it in JSON so that we can populate our own firestore.