How to make a Movie Trailer App with ReactJs and TheMovieDB API

hello everyone and welcome to my new youtube video my name is dom and i'm a web developer from germany in this video we will be building a movie trailer app for that we're going to use react as well as we'll be fetching data from a movie database api in this app you will be able to search for movies display data and also to play trailers so i hope you like this video and if you will please make sure to hit the subscribe button ok so let's start by creating a react app therefore we are going to use the create react app command let's name this movie trailer app okay this will install our react app and yeah this will take a while so let me skip the part for you so we can jump right into the project okay so here we have our react app and yeah let's open up the app.js file and let's remove here the stuff we won't be needing anymore and yeah let's begin say here hello youtube all right logo we won't be needing as well anymore as well as this stuff here so all right so now we can start so the first thing we gonna do now is to fetch the movie data so for that we will be using the movie db api and for that we need to create an account at the moviedb.org and under settings and api you will be getting an api key this one we are going to save in an in a env file okay and let's call it react app so this we have to say react app in the beginning and then followed by the name so let's call it movie api key as the string in here okay so let's start our development server okay and open up the dev tool now we want to fetch the data as soon as we start our app so let's import the use effect hook okay since we are going to call our fetch batch function inside of it so let me do it like this and let's also create our fetch touch movies function which needs to be async all right and okay so now we need one more thing which is axios which will handle our http request so let's edit with the on and once this is installed we can import it right here wait a second okay let's say import axios from axios okay now we can say const let's call it data data we are getting from the response all right and here we can say await right because it's async and let's call axios get to get the data and here inside we have to pass the the api url which we are getting from the documentation as well so here we can see it is going to be this part all right let's save it in a cons called api url so then we can as it here but we are going to need some more value variables for that so let's use template strings all right and edit as a variable so what we are going to fetch at first is like 10 or 20 most popular movies right now so for that let's check the documentation under discover so this will be the the part where we fetch the data from so let's add it to our yeah to our fetch url and then of course we need to pass our api key so this will look like this let's add a params object and inside of it there will be the attribute called api key with our api key which we are getting from the env file right okay so this is how it look like and for now let's just console log the data objects so we can see if it is working in our app let's reload the app and yeah patch fetch movies is assigned a value but never used so of course we have to call the function inside use effect book okay and now we're fetching data so this is already working now let's see which part of this response we actually going to need so it's yeah data object and here under results we get 20 movies okay so now let's save them in our local state for that let's import the use state hook and create accounts for that say let's call it movies and set movies function for that will be state and initially we set it to an empty array okay now here inside we can remove the console.log and yeah let's first destructure this data object so then we are already yeah inside of the data object and we can even go one step further and say results in here so i think this should be that burger they said burgers was the last um yeah we built burger map in our last in my last video so here we have to say said movies still in this burger thing okay so now we can add movies to the results object now now we have the data okay so we are going to display the data now so for that let's maybe create a container and inside of it let's call a function called random movies we could map over the movies inside of this div but i think it's just more readable to create a function for that so let's say random movies this doesn't need to be async and okay so we are going to return so we can already use the curly braces and here we can say movies dot map and then move for each movie we we will be returning um yeah let's create a new component from that which will be called movie card okay so in our source directory create a new component called components and also a new file called movie art dot js here we are going to create a functional component called moviecard and now import this component here movie card from dot components movie card all right and now we want to pass the movie data to the movie card and we also have to set a key since we are rendering since we are mapping over movies we always already have to pass key so this is easy we can all just pass the movie id in here and for the movie we just say movie and now nothing will happen because we have to yeah render the movie data in here so let's destructure the props object and here we can say let's just say movie dot title all right save it and now we get 20 movie titles rendered in here so let's add some more css styling so this whole thing here should look a little bit better so first thing let's remove all the stuff from here all right now here we have a container so let's add some stylings for that let's say max with pixels right and say margin left auto well let's margin right enter the stuff and say put this inside of an h5 tag let's give this a class name called movie card and we also want to to display the movie cover so for that um yeah let's let's lock the object first so i don't know anymore what what's the name for that so here we go so we have backdrop path and we also have a poster path okay so i'm not sure what we're going to need let's try the poster path so and as we can see here we only get the image name and the extension so what we will be needing is the image path from the movie db and let's see if we can find it here let's just go to the movie db image path okay so so we have to use these this part let's copy the part here and let's say const image of yeah that's this now since we don't know if each movie has it has a cover we have to check it first so let's say movie did i say poster poster path so only if this is available available let's return the image tag here inside we say use template strings and say variable image path okay and we dot post path and if it's not available we just say null okay let's check if this is working perfect perfect so okay now every movie has a cover which is perfect let's now add some styling so we want to display like four three column grid yeah let's display this in a four or five of three or four columns right so let's go ahead to our css and say yeah we can say display grid with the grid with a gap of one let's say 15 pixels and [Music] it template columns let's say something like that okay so we have now three columns and now we have that the image width so here let's give it a name movie cover okay and also we can say here movie title right so for the cover we say the width should be 100 percent and now we get a beautiful three columns layout okay this already looks [Music] let's let's try the four column this is better i think this looks better okay now we have the movies we have the covers the next thing we should add is maybe the search so we can search for any movie and yeah let's try it out let's go back to our app.js and let's first add yeah maybe a header where we can put also the the app name let's call this here movie trailer app all right and also a form let's create a form here with an input field of type text and also type button button type submit a search okay now that's just starting in a second let's first add the search function so on submit we will be calling the search movies function let's add it to the form so on submit say search movies now first thing we need to do is of course to prevent default yeah for the event so let's call this at first and now let's add a new state which will be keeping the search key which we are going to pass yeah to type inside of this input field so let's create a new cons like this one let's call it search e and the function will be named set search key let's set it initially to an empty string okay and now we want to set the search key on each yeah on each change of these this input field so let's call the on change event in here has the event called our date function and here we set it to event.target.value all right we can quickly check if it is working as we can just yeah output it here like this and let's see if it is working so when we start typing here our variable is yeah outputted here so this is working perfectly now we can remove this from here and inside of the search movie function we will be calling this fetch movies yeah function but yeah we can we can do it do this and we need to adjust this function so we can yeah so yeah we we will be needing to we need to add the search key and only if the search key is set we will we will be searching for for yeah for the search key and otherwise we will just call this discover movie api so yeah let's go ahead and add the search key in here all right and now we can we gonna do this so let me cut this off like this and let's create a yeah a variable called type yeah cons type and here we gonna say so yeah sorry so cons type and here we say if a search key is set we set it to [Music] search and otherwise to discover movie i'm not sure about that search key but we will see it in a second so and then we need to pass it the variable here of type so in the use effect we won't be passing any parameters to the fetch movie function so then we will be taking this discover movie string and in our search movies function we will be passing the search key so then we will be doing the search okay but we also need to pass a query so we are adding search key as the query so let's check out if this is still working so once we open up our app we are getting like 20 movies we we already got okay and now when we start searching like for the avengers and hit the search button we should get like the the yeah the avengers movies but we are getting an error because says so you requested could not be found okay so let me check the documentation search here we are saying search company search movies okay okay and query is it query nameless query so we won't need this as well for the search as well for the search so let's edit right here okay let's double check the app yes this console log which i could remove oh we are calling it inside the movie part okay so now when we start searching we are getting the movies which we are looking for so search is now working perfectly let's search for another movie again let's say i don't know avatar okay so there will be more avatars movies avatar movies by james cameron which is interesting but anyways so now we have our search and now we want to get to the part where we are going to to um yeah render the trailer in the header so before we start doing that let's add some css again and let's add the background color for our old app so i have here two colors which i want to use okay just dark one for the text color we say simply just say white and here for the container let's say i have here so yeah maybe let's let's add some padding pixels i don't know if you even can see this but yeah it looks better for me now let's yeah maybe add some styling to the header do we already have the class added here now so let's say enter here and let's say display flex okay let me just yeah let's add let's add another div so we can the content i don't know i'm really bad at yeah um naming of classes so let's here let's i think we will need this in here and here we can say yeah let's set also maybe we can just add this to another class which we can call center x center i don't know really bad at naming yes classes or selectors okay and then we can add this class here as well as here all right now when they have the same width yeah okay now here we have the problem that for movies which don't have a cover uh yeah we need yeah we need yeah kind of placeholder so let's simply add this in here in the movie card component let's say if we don't have a poster let's add an div saying no image found and let's give it a class movie placeholder and add it to our css file in here i don't know just let's just say dude what do we have here like a height of 238.39 pixels let's give it a background color maybe white is that oh we have a we have a height of 359 okay and the color then needs to be black so let's say color just set it to this one and we can of course send it say display flex justify content line items sender okay now let's now build this hero uh hero placeholder or what do you want to call it i don't know so first thing let's add a div for that okay let's call it simply hero and so in this hero we will be outputting initially the data for the first movie we which we get in in the request and later we want to add some click events we can choose the movies which we want to see the actual trailer so let's add the new state variable let's call it select the movie and also set selected movie and let's set it to an empty object initially and here in our fetch movies uh yeah function we are gonna set the selected movie to whatever is the first object of our results object right and then and go ahead already and inside of our hero let's change this to a span in here so we can use the h1 in here and here we can say select the movie dot title and now we should see here our movie title already rendered so this is working perfect so as i already see let's add another div called hero content and let's add our max center yeah container and so i assume that each movie will have a title i don't know if there is a movie without a title but for like the description or the here it is called overview or like the the poster which we will display in the background we don't know if it is set so we have to check it first yeah so we can say selected movie dot overview if it is set we just return it select movie dot overview and if not we just say now let's check if this is working so perfectly here the overview is returned maybe we can add this tags inside of here so they won't be rendered as well they don't happen overview object so we have the title we have the text what else we want to display here we are going to need a play trailer button so let's already add a button play trainer play trailer and let's give it a class called row button let's just say button um give this class name hero title and i don't know if we are going to need it but let's say hero over right so now let's add the the background image the covers and the poster so for that let me check uh let's cancel out the the select move in here okay lock that once again so now we are going to use the back drop path okay so here are we gonna use this i think i will do it in line style here simply say background image and let's use template strings in here and let's say like the movie dot backdrop path and we are going to need this as well so let's let's just copy that image path which will be then a little bit different than the other one we used inside of the movie card so it's not w500 we are going to need that's the problem what are we going to need image languages let me quick search for that say let's say image sizes boogie yeah and i already touched for that i guess so here we have the backdrop size so let me just take the biggest one original maybe let's let's see let's see how big or let's take the original one okay so we have the image path and let's add simply original to that and something went wrong what's the problem of course we have to say url this and brackets as well okay so now we already see a part of it but we are placing it into wrong position actually i'm passing it in wrong position let's add it to the hero here and let's add the minimum height with a hero same mean height of 500 600 pixels okay so this already looks good let's now just adjust the back the background position let's say bender top center or center top yeah maybe the original one is too big so let's let's fetch this one let's see if this look looking better yeah very much better but here we get repeating itself so let's maybe we can say yeah let's yeah background size and say cover okay maybe the original one will be better no it's not making too much differences so okay now we have our information displayed let's just yeah add some more css to that let's just place this at the bottom of the hero okay so [Music] view hero content are we gonna achieve that let's give this hero a display flex and a align items legs and i guess so yeah this cool cooler let's maybe make the title a bit bigger give it a font size of 72 pixels and let's remove the margins okay let's keep it like that let's add some styling to this button let's say copy that color let's say button background color color white let's remove the border and the outlines no let's don't remove the water let's say one pixel solid white and of course this has to be named color okay and let's get to settings so now one more little thing let's let's add here some spacing some more spacings let's say i think bottom 100 pixels just too much 50 60. okie dokie so this already looks good so let's let's stop this css thing and let's focus now on changing the movie data so we need an on click event on this uh movie cards which then will change the state right and after that we will be adding the trailer function so for that let's we will be needing this set selected movie function just a second so we have here our movies we pass a prop called select movie which then will be set selected movie right here we can then call it on click like this let's say let's pass the movie object to that now yeah now it's working this doesn't look too good but yeah should be okay so let me add some styling later now um what we are going to do now is to add the the movie trailer component so we could use the video tag the html video tag but there is also a react component called an npm module called react youtube player which i am going to use you can edit simply by yeah by yarn this okay it's very simple to use just have to pass and video id and there are a lot of yeah functions you can call like an on play or an unready function so that's why we are going to use it okay so let let me import it here they import youtube from react youtube okay and edited them here in our hero we'll be adding it so i need to lock again the movie object should stop removing it all the time okay so this is the component it's already here now we need to pass the right okay i forgot one thing so when we uh fetch a list of movies we don't get the whole movie data we are getting parts for each movie yeah so as we have seen already what we need to do is to append the video data to a movie so here in the documentation under add to response we see that this place yeah so we can here add a pen to response is videos we can't append it to the to the list requests so we have to to create another fetch request for a single movie so yeah let's go ahead and do this oh yeah fetch movies and now let's create a function called fetch movie okay needs to be async you won't be needing any queries we can simply say const data and await axials get and here we will be passing our [Music] api url m and we need to use template strings since we will be need and we will be passing the id here so we need some parameters or one exactly which is called id we will be passing it here and of course we need the api key so let's edit simply like that okay and now we need to add this so when we click on the movie we won't be calling the set selected movie directly we will be calling another function which i will create here let's say const select movie right which is getting an id you think a second so we click on a movie we are fetching the movie right do we really need this i think we can do it like this so select movie let's return the data let's say then okay we are returning movie data here from the patch movie function here we can say const movie is whatever we get from the fetch movie and then we can set selected movie to our movie and now we have to switch functions in here all right so [Music] here inside of our movie card we already named it select movie so it's perfect let me just uh log here the movie just to get sure it's working perfectly all right so when we click now yeah so we are getting a promise and also the fetch is not working so why requested resource could not be found we have the api url the id select movie yeah right we are getting here the whole movie so we need to say here movie dot id all right so now we have to rename this of course let's say and just data right that for now okay a lot of stuff is happening now we can check if this works something is working but not our apis so the wreak source you requested could not be found what is the resource we called so what what happened now check that api key is here but we are calling yeah of course of course of course of course so we also need to say movie all right since we are trying to fetch a movie and now yeah this should work this looks better no it doesn't no it doesn't no it doesn't we have too much of the console logs annealed so let me remove this one and let's see here movie data okay so we can recognize it better we're still getting a of course so we need we we are getting this uh as a promise yeah and we of course have to say here async and await the fetch right because we are returning from an async function we need to resolve uh the object all right so therefore we have to say await and now finally let's reload the page and let's click on the movie we're getting movie data and now if we are lucky we [Music] okay i told you what we need to do but then i forgot what you need what we need to do so we were talking about appending videos to the response so let's copy this part and so now let's copy just this part and let's pass it here and we can say videos so now we are appending to the response the videos so now finally we should be able to get the videos here so now for the whole movie object we also get the videos inside this result array okay and what we are looking for here is the one with the name official trailer so therefore we need to yeah to what do we need okie dokie so now here we have the youtube trailer but to avoid running into some errors that's here check first okay um you're saying we asking do we have videos if so then render the trailer okay let's create a function called render trailer here so like this and then we need to look up the right trailer okay so let's say cons trailer is like the movie dot videos so we already are sure we have videos and here inside of the results object say find let's find the video where the name matches official trailer and then we can say return the youtube component and pass video id which is called key in here here we getting an error sure because we have to set the else off so let's check if this is working this looks looks good good good good but we don't want to display uh the trailer as as soon as we click on this movie so let's add one more thing called a trailer okay and set play trailer function of course let's set it initially to false right and we want to change it when we click on the play button so let's add a on click event for that and we can say set play trailer to true and we also need to add play trailer here so either it is playing or we have so no when play trailer is set to true and the selected movie object has an attribute called videos we call this function okay so let's see if this works as uh exact expected okay we don't see the component and when we click on play trailer we get a trailer great now [Music] yeah so what we are missing is the initial trailer so when we open up the app we can't play the trailer because we need to add the video data as well for yeah for for the first movie object so we need in our fetch movie movies function we need to add um this function here select movie so called select movie and pass first movie we are getting here then we won't be needing this anymore missing a weight because a sync let's say a weight select movie and do it like this let's check if it is working and so when we now click on play trailer it also works for the first uh movie okay now my favorite part let's add css to that so we want to have this youtube player like full width just like the hero size we need to add some more options here to this youtube component we have to set a container container class and let's name it youtube container okay so we can add some css to that and we will be passing some options okay this up object will contain the width which we set to 100 percent and also the height which is set to 100 percent okay and now we can add css to the container and we will be position this absolutely therefore we need to add a relative position to the hero and here we can set the alignments to zero we get full width of the container all right let's see if this is working okay and we already can see here we have full width video object okay let's reload the page this works fine let's okay as we can see now we can't close our our trailer so let's add a close button for that shouldn't be too too complicated so we can now let's just edit just here so let's add a button let's add a button which is saying close on click we're going to say set player player trailer i misspelled this so let me i will fix this in a second but let's say set play trailer to pause once we click on the close button rename this to set a trailer let's hear and as well as here okay let's give this button also the class of button and also the bus button class off let's also give this button a class called button close because now when we click play trailer yeah we have to to position it above trailers let's say position absolute let's give it a set index of 10 maybe and also let's say bottom 30 pixels and left 30 pixels so we can position it on the left bottom of our trailer here we go let's add one more thing so display this button only if the play trailer says yes otherwise just return all so now we have our trailer app okay one more last thing i guess so when we switch the movie let's just remove this trailer object here so on click in set play trailer it was select movie and let's say set play trailer to false okay so now when we watch a trailer then we switch movie the youtube component disappears so one more thing we can add is like when we actually click on play trailer we want this movie to start so therefore we can add inside of this youtube component where we have the options um one more option called player bars okay here inside we can say autoplay to one i guess it's one or true i think it's one and also what i don't like are the controls so let's say controls zero okay and now when we click play trader the movie directly starts and we don't have this ugly control c again and now when we click close yeah the component disappears and we are done so now we can search for movies like the new matrix is coming soon wow isn't it awesome let's watch the trailer boom okay great to see that so we are getting an error and the problem is we don't have a trailer key okay so cannot read properties of undefined reading key that means we don't have a trailer at this point so um probably the problem is that we can't find a movie called official trailer so yeah of course so we have to fetch uh we have to fetch that so how can we fix that let's say cons key counts key is do we have a trailer then set trailer key otherwise we keep it simple and just say whatever you have at the first position then we just need to change that video id here and then we hopefully have a fully functionally full functionally trailer app okay so once again let's search for matrix and let's play the trailer okay invalid prop video type object yeah okay i hope this was the last mistake for now or for today so once again we can play the trailer we can search for matrix and we can play whatever this is what actually looks like a trailer so now we even can play the matrix players with us all right with a hell of a ride but we are finally down alright guys that's it so if you are still watching i assume you like this video if you did please make sure to hit the like button and also to subscribe so we can see each other again in the next video so bye bye

Channel: Dom the dev

Views: 36,365

Keywords: ReactJS, API, TheMovieDB, How to make a Movie Trailer App, How to make a ReactJS App, How to make a TheMovieDB App, Movie App, Movie Trailer App, ReactJS Movie App, ReactJS API Project, react hooks, react tutorial, reactjs tutorial, React Movie app, React trailer app, react movie api, movie api, react movie trailers, fetch api, react axios, use api, react useeffect, react usestate, react fetch movies, movie api react, movie app, react movie app, movie app react, trailers

Id: oqJY1L0gnto

Length: 66min 35sec (3995 seconds)

Published: Sun Dec 12 2021