oh i am with the starter, not good?
starter if fine if you manage to make it work
i will look for that URL, but i still cant play the moralis video, i know i still in the academy but i need some tips to make the video playing, i dont find nothing obvious on the code, someone available to help??
Hey guys, i am having trouble putting the movies in the clone. Whenever the put the link to the movie in the movie array, and then run my code and go to the clone, the player is just a black screen. Does anyone know how to fix this.
After adding the TabList div, it appears behind the black banner. Iâve did not edit the setting in css files. What am i missing.
hey @shivanprasad, @smugglerbear, hope you guys are ok.
Please share your code in the following way so we can help you review it 
READ BEFORE POSTING - How to post code in the forum
Carlos Z
1 Like
```
import React, { useEffect } from 'react';
import { Link } from 'react-router-dom';
import "./Home.css";
import { Logo } from '../images/Netflix';
import { ConnectButton, Icon, TabList, Tab,
Button, Modal, useNotification } from "web3uikit";
import { movies } from '../helpers/library';
import { useState } from 'react';
import { useMoralis } from 'react-moralis';
const Home = () => {
const [visible, setVisible] = useState(false);
const [selectedMovie, setSelectedMovie] = useState();
const [myMovies, setMyMovies] = useState();
const { isAuthenticated, Moralis, account } = useMoralis();
useEffect(() =>{
async function fetchMyList() {
await Moralis.start({ serverUrl:"https://pouejifruwph.usemoralis.com:2053/server", appId:"lAOfLgm314Xc7r9Tzag9LkvPNYczCA4fVUk7w1aX",}
);
//if getting errors add this.//
try {
const theList = await Moralis.Cloud.run("getMyList", {address: account});
const filterdA = movies.filter(function (e) {
return theList.indexOf(e.Name) > -1;
});
setMyMovies(filterdA);
}
catch (error) {
console.error(error)
}
}
fetchMyList();
}, [account])
const dispatch = useNotification();
const handleNewNotification = () => {
dispatch({
type:"error",
message:"Connect Wallet Kindly",
title:"Not Authenticated",
position: "topL",
});
};
const handleAddNotification = () => {
dispatch({
type:"succes",
message:"Movie Added to List",
title:"Succes",
position: "topL"
});
};
return (
<>
<div className="logo">
<Logo />
</div>
<div className="connect">
<Icon fill="#ffffff" size={24} svg="bell" />
<ConnectButton />
</div>
<div className="topBanner">
<TabList defaultActiveKey={1} tabStyle="bar">
<Tab tabKey={1} tabName={"Movies"}>
<div className="scene">
<img src={movies[0].Scene} className="sceneImg"></img>
<img className="sceneLogo" src={movies[0].Logo}></img>
<p className="sceneDesc">{movies[0].Description}</p>
<div className="playButton">
<Button
icon="chevronRightX2"
text="Play"
theme="secondary"
type="button"
/>
<Button
icon="plus"
text="Add to My List"
theme="translucent"
type="button"
onClick= {() => {
console.log(myMovies)
}}
/>
</div>
</div>
<div className="title"> Movies </div>
<div className="thumbs">
{movies &&
movies.map((e) => {
return(
<img
src={e.Thumbnail}
className="thumbnail"
onClick={() =>{
setSelectedMovie(e);
setVisible(true);
}}
>
</img>
)
})
}
</div>
</Tab>
<Tab tabKey={2} tabName={'Series'} isDisabled={true}></Tab>
<Tab tabKey={3} tabName={'MyList'}>
<div className="ownListContent">
<div className="title">Your Library</div>
{myMovies && isAuthenticated ? (
<>
<div className="ownThumbs">
{
myMovies.map((e) => {
return (
<img
src={e.Thumbnail}
className="thumbnail"
onClick={() => {
setSelectedMovie(e);
setVisible(true);
}}
></img>
);
})}
</div>
</>
) : (
<div className="ownThumbs">
You need to Authenicate TO View Your Own list
</div>
)}
</div>
</Tab>
</TabList>
{selectedMovie && (
<div className='modal'>
<Modal
onCloseButtonPressed={() => setVisible(false)}
isVisible={visible}
hasFooter={false}
width='1000px'
>
<div className="modalContent">
<img src={selectedMovie.Scene} className="modalImg"></img>
<img src={selectedMovie.Logo} className="modalLogo"></img>
<div className="modalPlayButton">
{isAuthenticated ? (
<>
<Link to="/Player" state={selectedMovie.movie}>
<Button
icon="chevronRightX2"
text= "Play"
theme= "secondary"
type= "button"
/>
</Link>
<Button
icon="plus"
text= "Add to My List"
theme= "translucent"
type= "button"
onClick={async () => {
await Moralis.Cloud.run("updateMyList", {
adrss: account,
newFav: selectedMovie.Name,
});
handleAddNotification();
}}
/>
</>
) : (
<>
<Button
icon="chevronRightX2"
text= "Play"
theme= "secondary"
type= "button"
onClick={handleNewNotification}
/>
<Button
icon="plus"
text= "Add to My List"
theme= "translucent"
type= "button"
onClick={handleNewNotification}
/>
</>
)}
</div>
<div className='movieInfo'>
<div className='movieDesc'>
<div className='movieDetails'>
<span>{selectedMovie.Year}</span>
<span>{selectedMovie.Duration}</span>
</div>
{selectedMovie.Description}
</div>
<div className="detailedMovieInfo">
Genre:
<span className='deets'>{selectedMovie.Genre}</span>
<br />
Actors:
<span className='deets'>{selectedMovie.Actors}</span>
</div>
</div>
</div>
</Modal>
</div>
) }
</div>
</>
)
}
export default Home;**`strong text`**
Hola Carlos, could you check why i cant make the videos play? thanks
We all are here to help each other and make this project successful!
1 Like
What console error are you receiving? i copy/paste your home.js code and the list of movies is not showed to me. From my console error, there is an error because you are starting moralis again inside the fetchMyList function, where it shuould be started at the main index.js at the MoralisProvider.
ReactDOM.render(
<React.StrictMode>
<MoralisProvider appId="APPID_KEY" serverUrl="SERVER_URL">
<NotificationProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</NotificationProvider>
</MoralisProvider>
</React.StrictMode>,
document.getElementById('root')
);
I might also need to see the structure of the entire project to understand why.
Maybe you can share the github repo of your project so i can download it directly?
Carlos Z
1 Like
You da real MVP!
I was trying to fix issues with after adding the useEffect code for so long⌠You helped out a lot dude, thanks 
2 Likes
man thank you, your answer just made me realise i am missing other parts, i will take my time though, back to the bench, later!)
1 Like
Hi, Iâm having some issues getting started.
When I enter âyarn startâ in the terminal on VSC, I receive the message belowâŚ
yarn start
yarn : The term 'yarn' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ yarn start
+ ~~~~
+ CategoryInfo : ObjectNotFound: (yarn:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
I get a similar error message when trying to type âgit clone [insert url]â (I imported the actual file to get past this part).
Any suggestions how how to fix my Visual Studio Code?
need to install yarn
run the below command to install yarn globally.
npm install -g yarn
and for git
npm install -g git
Hi there, Iâm unable to view the uploaded secret video at the end. Everything else seems to work except for this.
The error I get isâŚ
Please wait⌠We are checking your browser⌠moralis.mypinata.cloud
This web property is not accessible via this address.
AlsoâŚ
when I run yarn build, and host the build file on my server, itâs missing all of the tabs, and the modals are frozen when I open them.
Please svg can it change to your own name difference from Netflix. Please help me with svg write up
Are you still having issues?
cannot seem to access the cloud
my code:
import React from âreactâ;
import { Link } from âreact-router-domâ;
import { useEffect } from âreactâ;
import â./Home.cssâ;
import { Logo } from ââŚ/images/Netflixâ;
import { ConnectButton, Icon, TabList, Tab, Button, Modal, useNotification } from âweb3uikitâ;
import { movies } from ââŚ/helpers/libraryâ;
import { useState } from âreactâ;
import { useMoralis } from âreact-moralisâ;
const Home = () => {
const { isAuthenticated, Moralis, account } = useMoralis();
const [visible, setVisible] = useState(false);
const [selectedFilm, setSelectedFilm] = useState();
const [myMovies, setMyMovies] = useState();
const dispatch = useNotification();
useEffect(() => {
async function fetchMyList() {
try {
const theList = await Moralis.Cloud.run("getMyList", { addrs: account });
const filterdA = movies.filter(function (e) {
return theList.indexOf(e.Name) > -1;
});
setMyMovies(filterdA);
} catch (error) {
console.error(error)
}
}
fetchMyList();
}, [account]);
const handleNewNotification = () => {
dispatch({
type: âerrorâ,
message: âPlease Connect Your Walletâ,
title: âNot Authenticatedâ,
position: âbottomRâ
})
}
my cloud function script is withing the code, how does it connect?