Movies and TV Series Searching App in React JS and Material UI 🔥

hey everyone welcome back to roadside coder so in today's video we're gonna build this awesome app called entertainment hub with react.js and material ui so let's explore this app first so as you can see we have this nav bar to navigate throughout this app first section is for trending where you can find all of the movies and tv series that are currently hot or trending this week now watch what happens when we click any one of these a model pops up containing the details regarding the description of the movie and a carousel which contains the photos and the names of all of the crew and cast for the movie which as you can see is on autoplay mode but stops as soon as we hover on it and here's the best part you can watch its trailer by clicking on this red button it redirects you to the youtube.com now when we scroll down we have this pagination component so that you can explore more and more movies and tv series second section is for movies where you can discover different different movies on the basis of different genres you can either select single genres or we can select multiple genre third section is for discovering tv series which is similar to the movie section here also you can select single genre or multiple genre and check the details about that tv series now the fourth section is for searching any particular movie or tv series we have these two tabs which allow us to do so so let's search let's say spider-man and here you can see the search results are populated with the spider-man movies now as soon as we click on the tv series tab it's going to show the results for the tv series related to the spider-man now let's check how responsive this web app actually is here you go you see how it's adapting to the different different screen size and the model converts to landscape mode and to the portrait mode according to the screen size so yeah let's get started and let's create this app [Music] so let's start by initializing a new project by typing npx create react app and we're going to give this a name which will be entertainment hub so what it's going to do it's going to go to create react app repository and it's going to take all of the things that are required for creating a new react app and it's going to bring all of those things into this folder the entertainment hub so it has initialized successfully so we need to switch to that folder we can type either type cd entertainment hub or we can open that folder from over here so here we go we are inside of this folder now let's start this app first by tapping npm start so here we go our new react app has been successfully created so i'm going to keep this tab open for our reference so let's keep it to this side so what i like to do when starting with a new react project is i like to delete some files that we are not going to use so i'm going to delete setup tests report web vitals logo and app.tests and now it's going to complain because those files were being used somewhere so we need to remove the files from those places so over here over here and inside of the app.js we're going to remove the logo and all of the content inside of this file i mean inside of this div here we go let's save this all right cool so next i would like to install some dependencies that we are going to use in this project for example axios and material ui so let's go to material ui's website so what is a material ui material ui is a component library for react which is going to help us in developing our apps pretty faster so let's copy this or i'm going to type it mpmi material so we're going to use a material ui we are going to use material ui icons let's click on get started and right here paste it over here and we're going to use axios to make our api requests so let's allow these three to get installed okay i forgot to add this add the rate sign over here and press enter okay so all of these three dependencies have installed successfully now let's start working on our header so i'm going to put a span tag over here and let's type header let's save this and see yep it's right here okay so it's in the center because it has these default stylings so i like to remove this styling first great so it's in the corner now so back to our app so this is what we are going to build now the entertainment hub header so i'm gonna type entertainment hub over here great let's save this cool let's add some styling to it first of all i'm going to give it a class name of header and you know what while we're at it we're going to create a new component for our header i'm going to create a new folder over here called components inside of this i'm going to create a new folder for header component great so header dot js let's copy this line of code over here and i'm going to type underscore rafce to generate a boilerplate code for our app or this component sorry so let's paste it over here great looks good and i'm going to create a css file as well to add the stylings header.css and let's import that css file inside of this file so header dot css great so let's start styling this header i'm going to go to css file and type header now i'm not going to go much in depth into css but i'm going to explain you all what i'm doing over here okay so let's understand this style so what i'm doing over here is i'm making the 100 of the screen and the cursor is going to be pointed obviously when we hover it should be pointed cursor and position is going to be fixed as you can see over here the entertainment hub is not moving along with the scroll of the website and display flex and the justify content is center to center this particular heading over here and it's going to be uppercase and the background color will be this and yeah font family this is uh important so i haven't imported the font yet which i'm just going to do now and font size is going to be five viewport with whatever the width of the website is the five viewport width will be the font size and part at the back uh sorry at the bottom of the uh div it's going to have a padding bottom of 15 pixels and some box shadow and color white and z index 100 so that it always stays on the top so let's save this okay we haven't imported it yet inside of our app so let's header yep there we go so it's a mirror cannot it's all blah blah blah blah okay okay i think i should restart my app let's restart the app first there we go here is our header so we need to add some few more styling so it's going to look when you uh when we're on full screen it's going to look good but when we're on mobile screen you can see it has shifted a little bit upwards so i need to provide padding at the top when it's smaller than a certain screen size so i'm going to go over here and add some media queries so max width and let's say if it's smaller than 1000 pixels then we're gonna add some styling to the header first of all which will be padding top of 15 pixels yep and let's say font size will then be 6.4 viewport width yeah great looks fine but we need to change this uh font over here so let's import the font the font that i'm going to use is called art i'm going to go over here and search monster monster at sorry i was pronouncing it wrong so we're going to take this thin hundred select this style and click on this import and copy this copy this and let's go to our index.css and paste it on the top there we go let's go back looks much much better let's close this up so here's our header our header is done so now we're going to build our footer or we can say nav bar over here this particular navbar so how are we going to build this nav bar so now while we're at it let's add some more initial styling for our app like just now we added a font family so just like that let's go to app.css and i'm going to give it a few of the default styling to this app class so first of all um dot app and its minimum height is going to be 100 viewport height that is going to cover all of this space in the screen minimum and the background color is going to be this three nine double four you can experiment with your own values so yeah i would like to use this one wait a minute okay it has to be small a great color of any text inside of it it's going to be white i need the padding at the top to be 130 pixels now you'll know why i'm adding these padding because this had because of this header it's let's let me type anything over here okay i think the header is going to be outside of this div so what i'm going to do now is i'm going to create a react fragment and keep the header out of this div yeah that's fine now if i type anything inside of this app you can see wait i haven't saved this yeah you can see it is having this padding top we're going to make it responsive when it the screen gets smaller because when the screen is full screen you can see it looks fine with the screen size of the header so yeah padding top and a little bit of padding bottom to support the the navbar menu which we are going to build next so 70 pixels so let's make it responsive now so dot app we're going to do we're going to change the padding of the top to 70 pixels yeah now you see looks good okay so now what i like to do is i'm going to start working on this nav bar component so where does this navbar component is coming from it's coming from material ui so let's go to material ui and search okay i'm gonna type navigation bottom navigation here we go so this is what we're going to use so let's see we have different different types of navigations over here bottom navigation with no label and okay there are just two types of navigation so we're going to use this simple one the simple bottom navigation now before using this navigation how do we navigate in a react app we use something called react router dom now if you're not familiar with react router dom you can watch my video here i've explained full react router dom with all of this with all of its properties and everything so you can have a clear idea what react router dom actually is so before adding this i'm going to install react router dom first so npm i react router dom here we go our reactor dom has installed successfully now let's bring this component into our app okay i'm going to go over here and copy hole of this file that's providing us all right here we go so i'm going to create a new component now which is going to be let's say main nav mainnav.js yeah cool oh what's happening over here it's inside of the header now yeah now it's outside okay main nav has been created let's paste our code that we take in from material ui here we go let's understand this code what is this code doing over here so the this has these uh tags of bottom navigation over here which are the icons that are going to be spawned against this point yeah you can say spawn so they are going to be spawned at the bottom of that screen so i guess i'm going to make it display fixed as well because whenever we are scrolling our screen it's not moving from its place now let's edit this file according to our liking first of all let's import this to inside of our app so let's import this over here simple bottom navigation let's save this and check how our app looks now right there so it's having this light mode we need to convert it into a dark mode so let's make uh let's provide some styling first to it so uh the so this is the user styles which is used for material ui's inline styling or in file styling you can say so i can give over here position fixed so i earlier i said i i need to give display of fix no it means i mean position or fixed let's see where did it go okay it must have been hidden inside of in uh behind this so i'm gonna give bottom to zero yep looks good background color to hash a similar color to the one we are having right now 2d 3 1 3 a so it's a bit darker version of what we're having right now and the z index of this one as well is going to be hundred so it always stays on the top now let's change this icons according to what we are going to use so we need a trending icon movies tv series and search let's add this trending icon first i'm going to go to the material ui and search trending so here we go it's showing us material material icons over here i'm going to go to material ui icons and search trending whoops trending there we go this icon is called what's hot icon let's copy this up and paste it over here so let's replace this first one and type what's hot icon there we go you can see it has changed to this what's hot icon and let's type in the label trending also one thing i forgot i need to add the styling to all of these to make them white so let's add the inline styling of color equals white to all of these all right let's duplicate this for the fourth one yep looks good so first one was trending what was the second one movies then tv series and search okay so let's change the text first movies tv series and the last one was search search great let's import this i can i know the name of the icons that i'm going to use so i'm just going to import it over here second one will be the movies icon so sorry movie icon because it's not going to import on its own so we need to do this movie icon from movie second one will be the search icon and the third one will be the tv icon great let's go over here and import all of this okay we have the movie icon we need the tv icon right there and at the last search icon there we go we have our navbar ready over here all right so we have installed our react router dom but let's configure it first to start using it what do we got over here okay it's giving some errors i'm going to remove all of these icons that we are not using anymore let's go to our app.js and i'm going to give this tag a name of browser router which will be imported from react router dom now again if you haven't watched that video yet you can watch that video by clicking up at the i button or the link in the description so browser router is used to wrap up all of the application that is going to be inside of of our router of our react auto dom so we need to wrap our application with browser router now we need to create some navigation or we can create some pages over here so we're going to import something called container from material ui so what container does is which i'm going to show you now let's say movie app over here and i need to keep this container inside of this div just like that now watch what this container does you can see it has provided us this empty spacing over here now as the screen gets smaller it's going to adapt according to the screen size you see it's adapting to the screen size so it is the component of material ui so inside of this container i'm going to remove this now and let's create our routes so i'm going to type switch so that no two routes overlap each other and the first route will be for home page or the trending page and the component will be trending which we haven't created but we'll create it soon second one will be for movies third for series and the fourth for search all right let's define these routes as well okay well for this uh particular route i'm gonna give it a keyword of exact so that because it this route is also inside of all of these routes so that it doesn't overlap so i'm going to give it exact keyword great now let's start working on the the pages so i'm going to close it and give it a new folder called pages all right inside of this pages folder we're going to create uh four components for movies search and series or pages as i should say first one will be for movies second for series third for search and the fourth one will be for trending great so let's build the trending component first or we let's just create all of the basic uh configuration of all of our components and then we can start working one by one so for trending we're going to create a new file called trending dot js and let's add our afce called it trending let me add paste a new component with the name of page title so span and the class name will be page title let's give it um let's say trending so i'm going to give this component style as well let's copy this because we're going to use it on in all of our other components or the pages so movies.js let's generate the code over here and paste it this one is for search same thing so we're done with these two and that's for the series great all of these are done now let's import this over here for trending i'm gonna get trending okay it's not getting imported so i'm going to manually import it from here it's import trending from dot slash pages slash trending just like that similarly for movies okay it's not auto import for vs code is not working i don't know why oops okay i've given it the name tending not trending movies series okay i made a spelling mistake over here great now it's giving us error that these are not defined obviously because we haven't imported them from reactor so i'm going to go over here and press ctrl space and click on this to get it auto imported from react auto dom and for this one as well awesome let's let's try our navbar okay it's not working for some reason okay obviously because we haven't configured our nav bar we have just defined our routes but we if we go over here and let's say movies yep there you go it's working absolutely fine let's go back to our home page or trending page okay now let's head towards our components inside of navbar so how does this nav bar actually work so you can see it has this const value set value of use state over here so what it's doing right now is whenever i'm clicking over let's say on trending so it's defining its value to be zero and when i'm clicking on movies it's defining its value to be one so this is how it works zero one two three so according to that let's say if we selected one so we need to push the slash movies route to the top of our i mean to our url so let's go over here and i'm going to create a use effect which is going to be fired every time this value changes let's import use effect use effect has been imported just like that okay so in the dependency box i'm going to give it the value variable that is being used over here so what i'm going to do i'm going to type i'm going to check if value is equals to 0 oops 0 then what it should do it should push by history dot push trending now where does this history is coming from so history is the part of our nava i mean react router dom so we need to get it from our react router dom so i'm going to type const history equals use history now all of these things were explained in my react router dom video so you can watch that let's click on over here now you can see it has been imported automatically where is it yep there it is use history has been imported so now whenever we press on the trending it's going to take us to the slash route let's create more routes just like that so else if value is equals to 1. history dot push slash movies something's wrong okay obviously okay we are supposed to add history as well as you can see right here it has a missing dependency of history so we need to add history instead of the use effect all right second one will be for the tv series so slash series and the third one or the fourth one i should say is for the search let's save this and let's check this now beautiful it's working absolutely fine all right cool so now we can start working on the individual components or individual pages for our app so let's start working on trending but before going on to that i need to create a folder which is going to keep our config file so right here i'm going to create a new folder with the name of config inside of this i'm going to create a new config file which i'm going to explain what we are going to use for config dot js all right there we go so what these things are is these are the pictures when let's say uh for any of our card there is no picture available from the api so what we're going to do we're going to use this particular link to replace that picture let's click on this link here you go it's it's going to show poster not available so just like for a landscape picture it's going to show this so we have different different pictures over here for different different purposes so i've labeled this over here now you can copy this code from my github by clicking on the link below i've given the link to the whole of the repository you can just take all of these links or you can just google it out and create your own photos like you can use the copyright free photos for your project let's save this and close this up and let's go to our trending page all right now it's time to understand where all of this data is coming from from which api is all of these data coming from so the api that i'm using is called movie db api api this is that api here we go so all of the end points are inside of this api for example if i want let's say trending so here is it here it is the trending so before using this api you you need to get a api key so when you click on get started on introduction it's going to show you all of the step by step process by which you can get your own api key so you need to go to the moviedb.org and create a new account and when you created a new account just go to settings over here settings over here and click on this api button now when you click on this api button what it's going to show is this it's going to show this page where you need to request a new api key i cannot show you my api key because i would highly recommend you to go and get your own api key from over here so if you click on click here you need to register and add a few things and i guess under few hours they're going to provide you your own api key and just copy it up and we're going to paste it inside of the dot env file now you must be asking what dot env file is all about so let's go over here and search what dot env is what is dot env so dot tnv is a shell command it's useless dot dna file name dot uh to git ignore provides get push yes so what dot nv is all about when we create a dot env file we're going to add that files name in this git ignore so that it doesn't get pushed to the github and our api keys value remains as a secret so i'm going to go over here and create a new file called dot env now to use dot env in react it's a little bit different than how it is on node so inside of the react file you need to give a file a variable name starting with react app api key now api key is optional you can add any name for example any name over here and just give the api key your own api key so i'm going to give it my own api key it's going to look like something like this so just provide you to your own api key and save this file so after saving that file let's go back to our trending page and let's start building it so yeah i was explaining the api so let's go to trending page yep trending over here so how do you fetch this trending api so what we need to do is we need to go try it out and just enter your own tmdb key you can i mean it's going to look something like this as i explained you earlier so as you can see it's entering the api key over here and you need to provide some parameters that you want to use let's say if you want to use the trending according to the day you can set the day over here or set the week over here so and when you copy this and paste it over here it's going to display all of the data now it's not going to display anything because this is not the right api key so let's go to our app and fetch the data from over here i'm going to go over here let's put this on the side i'm going to create a new function right here fetch trending you can give it any name doesn't really matter if it's restraining or anything so i'm going to extract this data from the api so let's type await and i'm going to use axios now to fetch the data so axios dot get and i'm going to give the api key right here so as you can see the axios has been auto imported also since we are fetching the api key in this function this function needs to be an async function so asynchronous function and we need to add this await keyword as well so let's give it our api key so i'm going to give it a backtick not the string tags because we're going to use variables inside of this particular link so let's paste it over here i'm going to remove it over here from now for now and yeah here's our api key as you can see this is our api key which was copied from that website that i showed you earlier from this one and over here this is how you use your dot env file by typing dollar sign process dot env react whatever the name of your app of your dot nv variable is so it's going to extract that value from that place to over here let's save this and let's set a new state i'm going to type use state and let's give it the name of content it's going to be an empty array all right so whatever the data that we are receiving from that particular api now you must be thinking why i have added these curly braces over here so this is destructuring i'm destructing whatever that i'm getting from the api so i'm gonna get everything in the form of a data variable so i'm destructing the data variable out of that return of that promise so set content data dot results i haven't imported used it now yes you said i was imported now let's log this first let's log it the data variable and let's see what do we get from the api nothing because we haven't called the function yet so i'm going to create a use effect now use that let's clear this up and call fetch trending function here we go so use effect is not defined obviously so we need to define it okay one thing that i forgot to mention is when you edit your dot nv file you need to restart your react app so i'm going to restart my react app now here it is the app is restarted and here you see we get this console log over here so inside of this data variable we get these results results with 20 uh i mean 20 array items inside of this we get if the movies of adult the path to its image the genres id the id movie type original language blah blah blah blah blah blah blah and everything related to the movie so yeah we're going to set the data dot results to set content okay so let's go inside of our function now and i'm going to create another div for trending which will contain all of our data which we are going to display over here class name of trending so it's going to check if there's anything inside of trending only then it's going to display it since the data inside of it because if it's empty then it's going to give us error so let's check if there's something inside of content wait i'm going to give curly braces since i'm about to write javascript so content so if there's something inside of content and then we'll do the map on the content so we're going to map all of these items inside of that particular array that is content just like that so what do we need to do now we need to create another component for that card variable just card element that you saw but first let's just log and see if all of these uh items are getting mapped so i'm going to type c over here and let's go to inspect whoops down to here inspect instead of the console you can see we have tons and tons of objects all of these 20 objects with all of the data inside of this so we need to take all of this data and send it inside of a particular content and display it over there so i'm going to create a new component right here called single content let's create a new file inside of it called single content dot js and the other file will be for css content dot js oops i mean css let's give it a boiler plate code r a f c e enter and let's say hello cool now we're going to go back to our trending and inside of it we're going to remove the console log and just import single content it's not auto importing so i would need to manually import it import dot slash oops dot slash no dot dot slash dot dot slash to behind and inside components uh single content there we go single content is not defined single content side there yeah here we go so as you can see these all of these hellos are printing 20 times because it's looping through the particular content array 20 times also it's saying that every child should have a key prop so we need to provide it key so let's provide it key equals c dot id so refresh it shouldn't give that error now yes it shouldn't give that error and let's send all of the data from here to the single content so we need to send first of all the id so c dot id second thing that we're going to send is let's just log it over here so that we can see what all the things that we need to send data dot results okay here we go okay so we need to send the id first which we have then we're going to send the poster so poster dot poster underscore path which is right over here oops sorry not posted dot path i mean c dot poster path the other thing will be the title of the movie of course c dot title so what i like to say is for the movies it's going to be c dot title and for the tv series it's going to be c dot name now if you go through this api over here you're going to see for some okay it's not over here but you're going to see that for movies it's c dot title and for the tv series there's no c dot title over here so we need to write c dot name so either of these is true it's going to go with that particular value now we need to add the date of the release for that movie or the tv series so for movies it's c dot first year date date and for the tv series it's c dot release date release underscore date just like that let me check if the spelling is correct yes so media type this is most important one so it's going to judge according to what media type it is either it's a movie or a tv series so c dot media type now we're gonna check what the rating r is for that particular movie or the tv series so we're gonna send it in vote underscore average there we go we have sent all of the data that we need inside of the single content so let's remove this console log now great let's go inside of this single content component let's check if it's working or not so let's receive all of these props over here i'm going to destructure and receive all of the props which are id poster title date media type and vote average so here we go all of these variables so let's start by typing title let's see if it works if it works or not yes it's working absolutely fine you can see all of the names are being popped up over here start designing this page now so first of all uh let's go to our build already built app you can see there's a image the title if it's a movie or a tv series and the date so we're going to need all of these four things so let's go inside this div and type so image src what it's going to be now let me explain why i added this config file now this config file has these two over here sizes the image size is this when whenever we want to display an image we need to append it to this string so this particular link will provide us the image with the size of 300 pixels and this one will provide the image of size 500 pixels so right here we need the smaller one that is 300 pixel size of poster or an image so i'm going to import it right here so image underscore 300 i'm gonna type image underscore 300 as you can see it has imported right here slash what we're going to use we're going to type poster right so dollar sign poster okay i haven't made this uh backtick yep there we go and this is also a variable so it's going to inside of a dollar sign there we go let's check if it works or not here it is all of these trending movies are being displayed right here now what if the particular movie is unavailable as i showed you we have an unavailable variable with this image let's follow this link we're going to display poster not available so or i'm going to type our unavailable okay unavailable is there but we need to check first so poster question mark if poster exists then that one or unavailable yeah it should work okay it's not importing okay got it now it's going to work let's refresh this yes fine so if there's no poster for any uh movie but there is for this in this case so it will show that particular thing uh let's give it the alt tag now all tag will be the name of the movie so i'm going to give it title all right great so our image tag is done now what's next the title and the date and the movie type or the tv series type i mean the content type so let's give it a b tag and i'm going to give it a class name of title to style it later title great the title is here and the type and let's give it another span which is going to contain both of those so media type first so if media type is equals to tv if it's tv then it's going to display tv series otherwise it will display movie let's check yes it's a movie so it's working fine movie movie movie tv series yeah it's working fine so first of all we need this inside of this span tag and the other thing that we're going to use is date so another span tag with the class name of date yeah date or maybe i should give it the class name of subtitle also this span has to also be the class name of subtitle all right so let's bring the date over here so date great that's over here let's style this up now let's style all of these up i forgot to give the class name to the image poster let's start styling it in our single content.css first of all i need to import it right here import single content.css all right let's go to single content i'm gonna paste all of these stylings and explain you one by one all right here we go okay so this div is going to have a class name of media all right here we go you see now let let me explain these styles to you all so display is going to be flex obviously so and that flex direction has to be column so i'm talking about this single particular component over here so display flex uh and the display station is to be column because first the image then the title and then the subtitle so this display has to be column the width has to be exactly 200 pixels over here padding has to be five pixel around this card and margin to separate all of these two between these there's a space so this is the 5 pixel of margin at the top and the bottom i've given it background color and some border radius some position relative and the font family monster ad that we imported earlier nothing fancy stuff so when we hover on it the background color should change to white as you can see and the color should change to black just like that and when the screen size is less than pixels the width should be 46 percent let me show you here you can see when the max width is less than 550 pixels it should be with 46 percent which we're going to know later why i have done this because we're going to display multiple cards side by side so that it doesn't get messy when the screen is smaller so the poster is also going to have some border ideas as you can see over here the title has some generic stylings over here like text line center and font size etcetera etcetera these are nothing fancy subtitles is going to have a display flex so that it's on a single line and flex direction as row so justify content has to be spaced between that's why they are separated at the corners of this div or span tag padding bottom is going to be three pixels as you can see there's some spacing over here and just like that okay i have added padding bottom twice i need to do it like that yeah fine works looks good so here is our card let's close it up and let's go back to our trending page what i'm going to do now i'm going to give it this this trending style i'm going to give it the display of flags so that it gets wraps whenever the screen gets smaller so let's create a new file over here called trending dot css so let's give trending a few stylings which is going to be display of flex why does it not work okay i need to add flex wrap i guess or maybe i haven't imported it yeah that's why it's not working obviously let's import the css file right here import dot slash trending dot css now you'll see here we go you see all of these movies and it's getting overflowed a lot so what i what i'm going to do is i'm going to add a property called frexwrap now if you don't know what flexbox is all about you can watch this video where i've explained flexbox from beginning to end and the justify content is going to be space around great looks awesome now we're going to address why this nav bar looks like this it's because we have added with 500 how did i add okay i forgot to edit it out i need to add 100 percent yes now it's much much better so we have successfully built our trending page now we need to style this heading as well all of these heading in these pages we need to style these headings so what was the class name of these it was where is it it was page title so let's since these uh stylings are common in all of these so i'm going to write it inside of app.css so that it gets applied to all of them so text transform will be uppercase obviously it's going to be a capital uh word and display is going to be flex justify content to be center to be appearing in center of the screen and font family is going to be monster at and font size is going to be to viewport hide whenever it's in the full page as you can see but we're going to add media queries when it's in the smaller page so let's add the media queries also some basic stuff like padding border radius and color over here here we go when the screen size is less than 1000 pixels the page title will we have having the font size of 6.4 viewport width just like that okay one more thing that i want to add this whenever i scroll down and when i click over here it should take me back to the top of the page so for that i need to add a smooth scrolling okay let's add the smooth scrolling later but let's go to our header component and let's add an onclick function over here so on click what's gonna happen on on click window dot scroll to zero comma zero let's test it out if i click over here yes it's taking us to the top so to make it smooth i'm going to give it a global styling of scroll behavior of smooth let's try it now much much better great now that's done so let's implement our pagination now as you might remember when we are at the town of the screen at the bottom of the screen in our app we have this pagination component there we go it changes the page so let's work on that but before that i forgot to add one important thing which is this badge right here as you can see 8.4 7.7 these ratings i need to add the badge over here so i'm going to go to material ui and take this batch component search badge all right just like that so we're going to use this badge in our app let's go to the single component file and i'm going to write over here badge so we're going to give it a few properties so what is going to be the content of batch so badge content will be vote vote average okay badge is not defined because we haven't imported it yet just like that okay here we go it's starting to appear now we need to give it some background color some styling so color will be if vote are more than six then it should have the primary color otherwise it should have the secondary color so if the number is more than six it should have primary value oops more than six question mark primary otherwise secondary let's check here we go it's seven so it's having the blue color or primary color otherwise it's gonna have the red color beautiful so let's now start working on our pagination component i'm going to go to my trending page and right here just below this i'm going to create a custom pagination component so custom pagination we're going to create this component now let's go over here and create a new folder called pagination and give it a new file called custom pagination oops dot js so first of all to use the pagination we need to create a state for it as well use state called page which is going to be by default one so i need to add this in our api key as well so i'm going to type and page equals dollar sign page just like that so custom pagination is not defined obviously because we haven't created it yet so c rfce there we go oops r a f c e let's write pagination over here and let's import it now let's scroll down to see if it's imported yes it has imported successfully over here no no now let's go to material ui and search the pagination here it is there you go we have different different types of paginations over here you can use whatever you like i'm going to use this one the basic pagination let's go back to our react app into the custom pagination component i'm going to have the pagination component imported over here pagination okay i think i need to import it custom manually there we go here is our pagination component so we need to provide it a few properties on change it's going to change a function which is called handle page change this one so whenever we change the page it should scroll back to the top and set the set page to the particular page that we are set which will be sent from over here so i'm going to send set page equals set page because it's going to be responsible for updating our page whenever the page size lets the page value is two so it's going to call the api key again at page two so to allow that to do i'm going to give it the use effect of page dependency so that every time the page changes that this code gets fired off once again all right let's go over here so handle page change so on change it's going to call this and it's going to receive the particular page so e dot target dot text content now don't worry if you are unable to understand how did i am getting this text content over here because all of these details are available in material ui libraries documentation so if you go over here you can see everything is right here you can just have a look at this basic pagination api by clicking it over here or you can understand my tutorial so yeah here we go let's save this let's go back it's having some problem can't resolve blah blah blah so count which which is the number of pages so i'm going to give number of pages so number of pages is going to be the default value which is going to be 10 that is by default there's going to be 10 pages because uh as i know the api mostly the api has like 500 to 600 to 1000 pages so it's going to be default as number of pages what's going on over here can't resolve material ui lab okay i think i need to install material ui lab as well so i forgot this important detail so i'm going to install it now npm i material ui lab so this pagination component resides itself inside of this material ui lab you can go to material ui's documentation and read more about it all right so we have our material ui lab installed successfully and as you can see our app is now working fine so let's add a few styling to this div i'm going to add some inline styles so let me just copy this up and paste it over here so the width is going to be 100 let's check if it's there yeah it's right there page one let's go to page two yes the page is changing it's working absolutely fine so currently we're not able to see the background i mean the numbers because the numbers are black so we need to provide a theme so we're going to provide it a dark theme so how do we do that so the way we do that is by typing const dark theme or any name of your theme and i'm going to create a custom theme for this particular component so create mui theme and you can see it has been automatically imported up here and you can read about creating a theme over into the material ui documentations so type has to be dark all right so now how do we apply this over here we're going to use something called theme provider oops theme provider just like that let's keep it inside of over here and i'm oops i'm going to give it the theme of dark theme so the one that we created up there so let's save this and okay we need to import the team provider whoops what's happening over here uh i think it's important now yeah it has imported let's check wonderful it looks great it's working absolutely fine all right the page is also changing so i would like for it to have a color and i would like to hide this next and back key as well because it doesn't look that much pretty so let's hide hide next button and hide it's completely depends on you if you want to hide it or not okay so i've hidden it and i need to give it a color of primary yes much better now now it's much more noticeable noticeable let's go to five yes it's working absolutely fine okay now so let's move on to our movies page so it's not going to be very hard because we have already done a lot of work by ourselves we have created a pagination component and we have created this single content component as well so just we just need to make a few tweaks and it's going to be done let's go to this movies component and below this i would like to take all of this content and copy it over there but before that i would like to extract the discover movies api so let's go over here and type const fetch movies and it's going to be an async function just like earlier and let's extract it so await axios dot get we need to extract the data from it and i'm going to add the api over here so where do we need to store it we need to store it inside of our data variable data right so let's get this api first so in our api documentation over here and let's go to the discover so instead of this discover we need to get this api slash discover slash movie so in try let's go to try it out and just enter your api key and here's your api key and the language and the region and select whatever thing that you need to select i have my api key already built so i'm going to provide all of these api in the description so you don't have to go over here and search it so i'm going to copy my api key from there and let's go back to our app and paste it inside of the backtick oops yeah just like that so as you can see we have slash discover slash movie and we have my api key over here and just like the trending oops and just like the trending we need to create a page component which is going to be this one so as you can see the page component and this is something new we're going to create a genres component for our movies page and tv series page so i'm going to remove this for now until we create this genres component and let's add a state for page use state for page yeah with default value of one so use state is not defined let's just define the user state here we go okay some problem over here react hooks has a meeting missing dependency okay we don't need this first training fest trending dependency so i'm gonna copy this line over here and let's go to trending and just add this line over here to ignore this error great so we need to call this fetch movies now so use effect inside of our use effect i'm going to copy fetch movies all right also we need to import the use effects ctrl press space and enter so it would have imported yes it has imported now so let's log this and check what the data we're getting over here i guess it's going to be the same data but still let's check it it's just going to be the pure movies data not the tv series data there we go we're getting these objects with all of these movies inside of it so we're going to create two more states for the number of pages and the content just like we did earlier so use state first for content which is going to uh i mean contain all of our content yeah there we go empty array and for uh for the trending page what we did was we just gave it a default value of 10. the page size was only 10 because uh no one has time to just scroll to our 500 pages of the trending but in movies case we're not going to do that we're going to create all of the pages then any n amount of page that it's going to have so we're going to create another state used it i'm just going to explain you what i'm doing over here number of pages there we go so from here we're going to as you know we're going to keep data.result so set content is going to be data dot result and when you go over here i need to show i need to show you something which is yeah inside of this object you can see there's results and this total pages so total pages is 500 so we need to store this somewhere to set number of pages to data dot total oops total pages all right great we have all of those two informations over here so let's just create a basic structure for our app just like the previous forum not our app not i mean page just like the trending one we need to create all of these cards for the movies as well so what i'm going to do i'm going to go to the trending page and let's copy this up let's copy this and custom pagination as well and paste it over here now we need to make a few tweaks over here well let's save this and let's see if it works or not okay single content is not imported custom pagination let's import both of these okay here we go the pagination is working fine but this thing is not working fine let me check why so in place of the media type obviously it's going to be only movies so i'm going to type movie over here and oh it's because we need to type data.results over here yep there you go all of the results are right here so we just don't want only this stuff we want the genres to be on the top of the page also i see the pagination is not working i guess okay the pagination is not working because we haven't provided the page dependency in the use effect now it's going to work all right so we need to send the number of pages as well right so this notice over here it's just 10 pages as soon as i send num of pages here we go it has 500 pages now and we are in the 500th page currently let's go back to the first page so what i would like to do when we change the genres it might come to a point that it doesn't have any number of pages left so i should check over here that if number of pages if it's more than one only then we need to display it so and oops and what do we need to do we need to display this there we go great now the moment of truth we're going to start working on the genres so for so to implement the genres component i'm going to show you what i'm going to use so material ui i'm going to go to material ui okay it's already open there never mind so i'm going to use a component called chip so this is how chip component looks like so you might remember from our original app you can see this is how it looks so this is the exact same component that we are going to use it has this x button also so it's going to be perfect for us if you want you can use this outline chips as well so i'm going to use is the normal chip so let's use this so i'm going to go over here below the page title and let's create a new component called genres let me just send all of this stuff to this real quick all right so what what all the things that we need to send so first of all the type what is the type it's movie the other thing okay okay before that we need to create few of the states okay genre is not defined obviously because we haven't created the component so we need to create few components i mean the states over here so let me explain how this genre is working so the all of these chips that you see over here are a part of an array so when you click on any particular chip over here it's going to send that value it's going to remove it from the main array and it's going to be sending it it to another array called selected genres so it's going to send it to the selected genres and the selected joiners will be rendered before this array is being rendered so let me click on thriller thriller has been removed from here and it has been sent to over there just like that so this is how is this it's working so let's implement it by creating few of the states first will be selected genres selected genres this will be an empty array and in the normal genres which will be an empty array as well all right cool so let's just send all of this data first set genres because we're going to set the genre from over there and set selected genres as well and we're going to send the set selected genres what is left we need to send the page as well why because whenever we change the genres you can notice we need to send the number of pages that are inside of that genre for example if i set animation so it's going to update the pages how many pages are still remaining in the particular genre that is selected so where is it set page equals set page great all right let's now create our genres component inside of our components i'm going to create a new file called genres dot js right so it's appearing over here or not okay i need to import it there we go okay so let's receive all of these things that we sent from that place okay so these were the things that we sent from their selected genres that selected genres normal genre genre thing that we had sent from over there so first of all we need to fetch all of the genres that we're going to use inside of this so we're going to go over here i'm going to create a function called const fetch genres which will be async because we're going to make an api call so oh wait axios dot oops dot get so you can find this link as well in the description the one that i'm about to copy over here i mean paste over here this one so this has the type which means what type is there is it the movie or is it the tv show so it's going to give us the genre according to that and we have our api key as usual and the language is english nothing fancy over there so there we go we need to store it inside of our data variable and let's create a compo i mean state over here called genres or maybe we can use yeah we've already created this state over here so we're going to and we're going to store it inside of our set genre as a state that we're bringing from there so data dot result probably no dot data dot generous okay data genres cool so we have fetched this data successfully let's create a use state for it i mean use effect inside of use effect we're going to call fetch genres so i would like to say one thing whenever we are changing the page we want this genre component to be unmounted so what do we do to get unmount the component amount means that it should cancel the api key call so we need to return just like that if you're coming from react classes background so you might know what mounting and mounting is all about there was a function called component did unmount so that did the same function to replicate it we're going to use set genres to empty this is not very important but it's a good practice to do so i would highly recommend you to do this here we go so we've got it let's just log this and check what do we have inside of that let's check what do we get from this api call there we go we have an array here you go we have this id and the name id and the name of each and every genre just like that okay what's this object i think it's coming from somewhere else let's leave it all right let's start creating our chip component over here okay now it's getting displayed you can see hello over here let me remove this hello i'm going to get this div some style a little bit of padding on top and bottom just like that inside of it i'm going to create a chip component let me save this it's going to probably give an error no it's not giving an error nice so it's going to have so the chip component is going to have a name oops it's going to have a name and it's going to have a key because we're going to map it from the selected genres component or the genres component so let's just map it from the genres component so we're going to map the genres dot map that we just set up there oops it should be in curly braces all right here we go and we're going to loop through the chip component let's save this as you can see there will be what general.map is not a function okay it's working fine as you can see over here a lot of genres has been spawned but there is nothing inside of it so i need to provide something inside of it so for that let's provide the name first so label equals genre dot name genre dot name oh it's giving us this error because whenever the page is reloading it's not populating all of these genres so what i'm going to do now is over here jonas and yeah that should work let's see yes that's working let me reload it yeah that's working fine so as you can see all of these genres has been spawned over here the style of margin two so there's a little bit of spacing between them yes it is what else we do do we need to give it we need to give it that it's going to be clickable all of these are properties of this genre you can just go to material ui's documentation and read about it there we go it's clickable now size will be small and the key i'm going to provided a key because we're mapping through it so genre dot id okay here we go so all of the genres are spawned over here so what i want to do is whenever i click on a particular genre it should go back and to another array called selected genres which is imported by us over here so it should go inside of the selected genres and though that particular array should you know display itself so let's do that real quick what i'm going to do is i'm going to create a function called handle add and handle remove for both of them so just right here const handle add i'm going to send a particular genre to this function what it's going to do it's going to first remove it from this array and then it's going to add it to selected genre array so let's do this then you'll understand eventually so set selected genres okay first let's just add it so just add everything that's inside of this selected genres first and then after that we're going to add the one that is being sent to us so genre just like that and the other thing what we like to do is we have to remove it from the previous array so we're going to use filter function for that so genres dot filter we're going to filter out the one that has been sent to us right here so g dot id it should only return if there's no equality between all of these values if it's not equals to genre dot id yeah that's the way and we're going to set the page as i mentioned earlier we're going to set the page to one so it's back to one let's try it out okay it's not going to work now because i haven't you know mapped through the selected genres till yet so let's do that so i'm going to copy it and just right before it i'm going to paste it and going to replace this genre selected genres all right and i'm going to change the color of this thing this color will be primary let's find out let's click on any one of those okay it's not working for some reason okay we haven't called the function that's why it's not working so we have to provide it a function over here on click so handle add inside of this we're going to send the genre there we go just like that if i click on it as you can see it's working absolutely fine just like that yeah it's getting removed from over here so just like that we're going to create another function called handle remove this is the handle remove function so what's happening over here we are setting the genres first of all we're removing that first we were adding it to over here then we were removing it from over here so in this one we are removing it from over here by doing filter and we're adding it back to the previous array so let's save this and we need to add it over here so inside of it we need to make some changes right here i need to add a button which will be on delete so on delete what is going to happen on date handle remove let's try it out working absolutely fine if i click on x you can see it's getting removed from here and it's getting added to over here you can see fantasy if i remove music it's going to remove from there and add it to over here so this is how it's going to work so our genres component is done so let's get back to over there okay what's happening over here missing dependency no i don't need to add this missing dependency so i am going to use this line and just add it over here yep fine it's working fine all right let's move back to our movies page and i need to add the genres to our api key which will be right here this one there we go but before adding that i would like to show you one logic that we need to add so what happens is we need to add this particular line over here just a sec yeah this line over here so with genres it need to have the code of the genre over here let me remove this so it need to have something like this 234 12 something like that these are all the codes of the genre so we need to convert all this selected genres function all of this action drama documentary crime we need to convert it into these numbers and we need to create a string and just supply it over here so i'm going to give it a name genre for url so we're going to create this genre for url so for that i'm going to create a custom hook so now i'm going to teach you how you can create your own custom hook let's go over here and right click and let's create a new folder called oops called hooks i'm going to create a new file called use genre so you need to uh give the file name as use starting from use and give whatever the name that you want so i'm going to give it use genres this is going to be our custom component so what is what a custom hook is all about it's just a function with some logic that we're going to use again and again so it's going to be imported right here so let me show you how can we call that particular function so let's let's create a function over here called use genres so this is what our function will look like so what it's going to take is it's going to take the selected genres array and it's going to return the array that the string that i showed you earlier how it's going to return it in with by comma separated values so it's going to accept the selected genres and what it's going to do with it if it's going to check if selected genres dot length is less than 1 length is less than 1 is it less than 1 then it's not going to return anything so return this empty string but otherwise what it's going to do cons genre ids equals let's just map everything inside of the selected genre so selected genres has two values one is id and the other is name but we only want the ids so selected genres dot map we're going to extract all of the ids from inside of this so g or any variable so g dot id so it's it has extracted all of these ids inside of it and now i'm going to reduce it to that particular value that we need so return genre ids dot reduce so reduce takes two functions i mean two parameters one is accumulator and the other is the current value so i'll explain what reduce does so what it's going to do over here the accumulator is the main value inside of which it's going to add everything so accumulator first value accumulator currently accumulator has the first value of this array so accumulator plus comma and plus what we're going to add the current value plus the current value so what's what's is going to happen after that let's say our array had one two three four after this it's going to have it like one comma two comma three comma four just like that oops so this is our use genres component let's just export it not component hook i'm just use genres hook default use genres great so let's use that hook over here so i'm going to type const genre for url that i mentioned earlier so use genre let's import it okay it's not getting imported so we need to manually import it so import use genre from two directories up and into the hooks folder from use genre so we're gonna send it the selected genre there we go now it should work absolutely fine let's select some genres okay it's not working it's because we need to add this to our use effect whenever the genre is changing it should update the pages just like that there you go select family you can see 31 and let me just choose another one and let's see if it's yeah now 13 let's choose another one yeah there you go since there are no more pages it's not going to display the pagination component anymore all right cool so our movies page has been completed successfully now let's start with our tv series component which is going to mostly be looking like this only so i'm going to copy this up or let's just do that later i'm going to open the series component now all right cool so let's just copy stuff from over here so i'm going to use this pagination the single content so let's copy it up all right also genres as well i'm going to copy this over here now it's going to give a lot of errors and it's fine i'll correct that so type is going to be tv in this case let's bring all of these things also i'm going to bring this one as well basically everything i'm going to paste it up okay so we're going to use page right content number of pages blah blah blah all of these things are going to be used so discover slash tv we we need to do this okay so use state is not defined let's just define all of those stuff use genre let's define that use effect let's define that as well a single content is genres is not defined let's define that single content let's define that anything else custom pagination let's define that let's save this okay axios is left axios so i haven't done any freaking thing over here i've just changed movies to stevie over here and just over here as well so what's happening over here genres is not defined i just defined it reload yep there you go it's working absolutely fine just like movies it's working fine yeah there you go and these are all you can see uh these are movie uh tv series oops why is it displaying movie over here okay because of this we need to send tv yeah there you go tv series great great that's working now for the last one we need to create the search component or the search page so let's go to search page so search page over here so let's create a few states over here first one as you all know is going to be for pages and for the content so let's just create some basic use states that we're going to use first of all the type which will be movie or the tv series so what i'm going to do now is as you can see in the original app this text component and this button and below that we're going to use this tabs component right so let's just create that first i'm not going to use the title over here so let's remove that and first of all let's just create a text field so text field component is in material ui you can go and check it out you can paste it over here this is the text field component so i'm going to give it a flex of 1 the class name is going to be search box the label is going to be search and variant is going to be filled and on change it's going to update this so let's just remove this for now let's do use state yes here we go you can see now we need to provide a dark theme as you might remember we have provided it to our navigation bar so let's create the dark theme as well while we are at it so i have the values written over here i'm going to copy it and paste over as you can see this is the dark theme so this is the palette what we want to do is this the type is dark that's the dark theme and the primary color will be white so triple f so what did we do earlier we added the theme component theme provider just like that so theme equals dark theme let's see if it works or not okay we haven't imported this create mui theme anything else yeah theme provider that one as well muy theme is not defined okay it's defined right there should work yep there we go so inside of this theme provider i would like to create a div so that i can give it styling more flexibly so the text field and the other thing is going to be a button oops button inside of the button i'm going to have a search icon search i can so i'm going to import it from material ui just just a second but the button variant will be contained and this style will be margin left because we need to create a space between the button and the text component right so margin left oops into use double curly braces margin left will be 10. okay we haven't imported the search icon which i'm going to do just now let's import the search icon from material ui icons slash search button is not defined so i'm going to define that one as well there we go there's the button let's give it uh let's say display flex so style display display is going to be flex yep looks good now and margin from top and bottom will be 15 pixels 15 pixels and the other left and right will be zero yep perfectly in the place let's create these tabs these tabs over here so for tabs i'm going to use a component in material ui called tabs so over here i'm going to write tabs or i guess this just like that value will be tab whenever the tab will be changed it's going to have the value of value will be type okay value will be of type because we have come created this type state over here so if it's going to be the first one just like in this one it's 0 1 2 3 so in this one as well it's going to be 0 and 1 so it's by default it's going to be 0 so i've set it to value equals type indicating color indicate oops indicator color will be primary text color will be primary as well let's create some tabs inside of it i've already created so i'm going to copy this up inside of this so let's see here you go the first tab will be of the label search movies and the other tab will be of search tv series so let's import these first tabs and tab there you go looks awesome but it's not working right now because we need to create i mean we need to set the state whenever it's changing so we're going to create an onchange function over here inside of this we need to have this on change function oops hold on this on change function so whenever it's changing it's going to set the page to 1 and the set the type to whatever the new type of value is so currently the set page is not created so let me just create that use i could say change yeah it's changing perfect let's give it some style of padding bottom to be five won't make much of a difference but yeah it's created now and the below part is going to be much similar to all of these so i'm going to use that particular div that we created earlier which one this one this single content one but before that we need to add some logic so that we can extract the data from this okay i can see some error over here let's copy this and to the movies i guess hold on copy and let's paste it over here i don't want to add the fetch movies okay series as well let's go to series and add this all right cool let's go back to the search and let's start creating some logic right below this one whenever we search something inside of our text field it should change the set search text state so i'm going to create another state now search text is going to be empty by default and i'm going to create a state for our content and the number of pages as usual all right all of these states have been created let's start working on it now i'm going to uncomment it now but it's going to give me error probably oh no it won't give me error so whenever we are changing this whenever we're changing it's going to update the search text all right so then we're going to use that particular text to call our api so const fetch search i'm going to copy the code that i have written over here just like that so constant data and now we're going to make an asynchronous function so that we can use the axios exo.get backtick and let me just get the api real quick okay so this is the api let me explain you so the https and slash search so now first it's going to see what is the type of the search if the type is tv or the type is movie so how are good how are we going to determine if the type is one that is type is true so it's going to be tv otherwise it's going to be movie so if it's one that is this one it's going to be tv otherwise movie alright then we are adding our api key and some other stuff over here and the query this is the most important one it's setting the search text the query to the search text whatever that we are typing over here it's going to set it to that and this is the page nothing fancy over there so this is our api and again you can find this in the description if it's not clear till yet and now we're going to set the content to data dot results and i don't think i have yeah i haven't assigned the data over here const data equals await axios dot get okay and set number of pages to data dot total pages just like the previous ones we need to create the use effect so i'm going to copy and paste it up so the same thing we're scrolling to the top whenever we're changing the page we're scrolling to the top and the fetch search will be called that is this function will be called and whenever the type is changing or whenever the page is changing it's going to be firing off that function again so let's save that so use effect is not defined let me define that there we go all right now we need to create the generic stuff that we did many times now so this stuff right here so i'm going to copy and paste that stuff inside of it that along with the div and the pagination component below this we go i've copied this up so the trending and the pagination okay so i'm getting imported i think i need to bring it in let's bring it in for movies both of these and paste it over here should work now if it's not clear i'm gonna explain to you so this is the single content that we did earlier everything is just same just same to the movies and series page just the difference is over here so it's checking the media type is tv again if it's one then it's going to be tv if it's zero it's going to be movie just like that also if the search text is not empty but the content is empty that is there's something written over here but you can see no movie is found it's going to display no movies found without searching it and the type will be no series found no movie sound except trial so it's the same logic nothing fancy over here you can understand all right now we need to create a click to search button if we click it only then we're going to search it so over here i'm going to create an on click which will be fetch oops this is going to call our fetch search function that we created earlier fetch search all right let's try it out now spider-man let's click it and here we go it's displaying all of the data right here if you switch to tv series it's going to display all of the tv series related to it great all of the basic stuff and the basic boilerplate i mean not the basic stuff but the intermediate stuff is done our website is ready uh i mean even in this state it's looking pretty cool but we need to add the modal component whenever we click on any of these movies or tv series it should display a model with the detailed information so let's create the model so let me introduce you to the material ui model first so there are multiple types of model one is this one the other is react transition group the other is react spring so what i'm going to use is react transition group so let's go inside this code and let's copy whole of this code oops let's copy this code to be used in our project so inside of this i'm going to create another component called content model yeah like that and two new files content model dot js and content model dot css let me check if the spelling is correct yep so we're going to paste all of the code that was just copied from the material ui just like that and i would need to change these default styling provided by this but let's first let me just check how this is working so i'm going to go to the single current so how are we going to implement it so what are we going to do over here is we're going to wrap this single component div or we're going to convert this div into this content model component so what's going to happen then is this itself will become a button so whenever we will click on this it's going to display a particular model so let me just show you how i'm going to do that let me just change the name of tent model yup fine and over here i'm gonna change it to content model yeah great now i'm going to take this class name first of all let me just auto import it yep here we go okay it's going to display just like that so i'm going to take that and give it over here the class named overhead so inside of the button it's going to have that particular styling so i mean how are we going to bring all of this stuff from here to over there so these are all children of this content model tag so i'm going to go over here and receive it as children and going to write over here and type children save it okay it's having some styling issues i'm gonna check what's the problem over here okay we'll correct it later let's just move on with the other things that is whenever we click on this it should display not like this model it should display a darker model so let me just correct few of the stylings over here so all of these are correct and start the paper i need to add a few styling such as width let me just copy and paste it so these are not very important it's just basic structure of the model that we're going to change you can see now the model looks like this just like that over here i'm going to send the media type that is what is the media if you're cleaning on it is it a movie or a tv show so we're gonna send that and the id of that particular you know the content because we we're gonna use this id to fetch all of the other details of that content so we have sent that as well so the content model again and receive it over here just like that just like that yeah okay so now we're going to fetch the data from the api let's create another function over here and again it's going to be an asic function because we're going to you know fetch the data from the api await axios.get so let's add the api over here this api is also be linked in the description so this is the api api at such mobodb.org so we're going to specify what is it then is it the tv or the movie and the id of that particular content and everything is the same so let's say what's this okay axios is not defined now it is yes cool let's just structure this data inside of this so i guess i'm gonna remove this up and let's start whoa first of all i'm going to create a state for the content storing our content just like every time also as you might remember we need this one as well the button so we for that one we also need to call another api to get the video data of the particular id i mean content use state so i'm going to give another video all right these two so let's just while we're at it i'm going to create another function which is going to be called fetch video and the api will be this one this api this is the api slash media type that is tv or it's a movie and slash videos question mark and just give the api key now it's going to fetch the video now let's set the state so set content with the data in this case it's only going to be the data and set video to data dot results it's it's actually pretty deep inside of the data so the results and the first result if it exists then key let me just show you what i'm talking about so log the data we use state is not defined here we go yeah let's go over here to inspect wait a minute there's something wrong find dom node is deprecated in strict mode okay it's deprecated in the stick mode then we're going to remove the strict mode so let's come over here remove this strict mode tag in the index.css now this error should go away yes fine so if i click on that okay nothing's happening because obviously we haven't called that function yet so we're going to go inside of use effect and call both of these functions fetch video and fetch data fetch data first and then fetch video let's see use effect is not defined okay let's define that here we go you can see we just fetched the data part i mean the video part so if you go inside of this and the results has the array so inside the results array you can see there are different different links for the particular thing so we just need any one of those so just we're going to take the key part of this thing so whenever you type youtube.com slash watch question mark i think something like that and then you append this particular id in front of that so it's going to take it to that video i'll show you what i mean let's just start make creating it first so inside of this classes dot classes.paperdiv with the class name of content model which tag first of all as you can see there is first an image then the title subtitle description and carousel and the button so image src will be first of all let's check if there's any poster path over here or not if the poster path exists inside of our content then what it's going to display it's going to display a bigger picture which is going to be image 500 as you might remember it's this one image 500 slash content poster path it's going to display that otherwise it is going to display some placeholder image which is going to be unavailable and available okay anyway i haven't imported that available what's wrong oh it's looks it looks fine okay i think i need to import something okay i think the tag is missing just like that yeah now the unavailable is missing i'm gonna import one more thing which is unavailable landscape i'll tell you why i'm importing that oops let's refresh okay no treat properties poster path have i used wrong spelling oh you got it so before we render this we need to check if there's something inside of the content or not so content and if there's something inside of content only then this will be rendered you can see here we go the image is being rendered over here i think i need to give this a class name of content portrait now why i'm giving it the content portrait because whenever we gonna make the screen bigger it's going to be converted into the landscape mode so when the screen is smaller currently it's in the portrait mode so that's why content underscore portrait all right let's give it an alt tag so content dot name or content dot title according to whatever the piece of content is if it's a tv series or it's a movie now this is going to be the content portrait for another one i'm going to create a content landscape just like this it's going to be absolutely same just a different styling and we're going to use instead of poster path we're going to use backdrop path because that will be the landscape version so let me just hide the portrait mode for now as you can see yeah this is how the backdrop path appears all right now we're going to add the title for the particular movie or the or the tv series so i'm going to create another div over here the class name of content about content model about all right so inside of this let's create a span tag the class name of content title just like that inside of it i'm going to give the title and bring some code in and i'll explain you what i've just done over here what's happening over here is i'm printing the content name or the content title according to the if it's tv or it's the movie and after that inside of this bracket i'm going to display the date of which it was released so inside of this content.first it or content dot release date if the board doesn't exist it's going to display these dashes over here and also from the full date i'm just extracting the ear so substring 0 to 4 is going to extract hole of the ear all right so there's that below that i need to create the tagline so let's bring that in this tag line what's what's the tagline yup the tagline is the about the movie a little snippet about the movie if i click on every any other movie other chase something real yeah just like that now i need to bring the content description let's bring the content description over here here's the content description now it kind of looks it's a lot messy but it's going to be get better so after that we need to create a carousel div but for which i'm going to just left an empty div over here and after that we need to create the button so let's bring the button in this is the button so variant will be contained and the start icon will be the youtube icon which i need to import which i'm gonna import right now and watch over here the href i'm given i'm giving it this link and after this the code that i showed you earlier the video code is going to go after this so this is how you are supposed to do it let me import the button and this youtube icon as well it's right here it should look good now yep look at that all right i guess we are done with everything yeah i guess we are done in the jsx part so let's just style it let's go to content on model i'm going to bring all of the styles then i'm going to explain what's going on over here all right let's see so content model dot landscape what is going to happen nothing fancy over here it's just going to object fit content so that whenever the photo is stretched it gets back in its shape content models underscore portal is going to give this styling with the border radius of 10 pixels nothing fancy over here for the tagline i'm going to give padding bottom little bit of 10 pixels let me just save it so that you can see better wait i think i haven't imported the css yet yep content yeah now let me explain to you so whenever i'm going into portrait mode okay it's not appearing because that's commented out right here i mean yeah you can see in the big screen mode it appears like this and it goes to mobile length of for example like this oops something oh okay i need to hide it so styling has not been yeah now it's better yeah okay now let me just explain so i explained both of these for the tagline i'm giving i've given padding bottom as you can see and the align itself is going to be centered i don't know what's happening over here so i'll check that first print more underscore okay this single underscore yeah now it's fine okay for the content model the whole of the content model the display has to be flexed and the flex direction will be column so that they are aligned from top to bottom justify content is going to be the space between so that as you can see the spaces are between these just like that height is going to be 100 and it's going to be 100 as usual and overflow y is going to be the scroll scroll bar with will be none so we don't want the scroll to be appearing over here so same code over here it's for the scroll bar content model about i've styled this portion of the app in the content mode title i've styled this portion of the app this is for the description oops sorry i mean for the content model about it was for the whole of this section continue model title this one and convert description is going to be this one and again i'm going to remove the scroll bar i mean for the chrome i'm going to remove the scroll bar and for the firefox is going to be thin and here's some responsive stuff the content model is going to be landscape whenever it's in the landscape i mean whenever the screen is in landscape the content world landscape pick is going to be hidden by the display none and the content model portrait pack will be display flex as you can see over here and on and notice this that i've added min width over here not max with because it was when i was creating this page i was creating it in the mobile perspective and so need to create so we need to add min with to be adding the that like if it's bigger than 835 pixels then do these things so this is what's happening over here so again some generic styling to make it responsive you can just check it out over here yeah just like that so here we go i hope it's working watch the tiller yes it is working fine great now what do we need to do we need to create the carousel for this particular component so creating for creating the carousel oops first let's let me check why is this appearing like that okay i get it because i have to set remove the button and add the div over here yes now it's working absolutely fine and let's remove this dip from the top and let's make it an empty react fragment yes working fine that was the problem so this is also a pretty looking app still but you can add more uh features to it by adding a carousel so kerosene will look a lot better so let's go to react alice carousel or whatever it's called so first of all we need to create a component for this let me let's just check it out first as you can see the carousel works just like that and it has some properties we need to get some you know styles and acceptor imported first of all we need to install it by typing this so let's install it and also we need to import the css into our index.css so let's copy that and index.css right here let's import it so that the alice carousel works now for users that they've given this a piece of code so we're going to copy it from here so let let us let's just allow this to get installed first all right here we go the alice carousel has successfully installed now let's go back to over here okay i think we need to restart the app we're going to create another component over here for our carousel dot js oops sorry not this one this is going to be the just folder file will be called.js and another one for css now let's copy this snippet and paste it right here and let's import the alice carousel as well okay inside the content model uh the place where we have left for that yeah over here i'm going to import the carousel we're going to have to manually import it just like over here yes the carousel from dot slash carousel slash carousel oh okay sorry i need to create it inside of the content model yeah now it's going to not break okay it needs to have a defaulting port so we don't want these three buttons and not even this arrows down here if you can see also it there's no items appearing over here because we need to configure that also these are the items where we need to add them so just what we will need to send from that place to over here is media type and id so again just like earlier media type equals media type also the id just like that let's go back to our carousel let's remove them let me just check if i save or not yeah i'm going to receive media type and id over here and i'm going to fetch it again just like earlier so this uh api will also be available in the description so what's happening over here is i'm setting the media type like movie or tv show or and then i'm giving it the id so it can give me the credits of that particular tv show what's that set credits okay i haven't defined set credits use state okay fine looks good to make it responsive you just need to go through all of this documentation you'll know what what's going on over here so i'm going to make it responsive first okay let's make that responsive later first of all we need to add the items instead of this i'm going to copy something okay so this needs to be inside of here i'm going to remove this and instead of this i'm going to bring the item that i'm going to use so whenever the credits so when the credits is already used just a sec so when the credits is populated what's going to happen we're going to map through these credits and each of the carousel items is going to be displayed over here so i'm going to display the image and the name of that particular character so image 300 is not defined let's just define it and no picture as well these both were inside the config cannot read property of undefined okay so all i need to do was add the question mark over here and here we go okay it's not working of course because we haven't called that this function yet so use effect so fetch credits oops yep let's see read canary property map of undefined okay so i think i should add a question mark over here yes it's working now okay now we need to make it responsive and correct this size as well it's just huge so to make it responsive here's the code so if uh the i i mean it's if it's zero pixel i mean it's if it's in the normal state it's going to be displaying three items which means if it's the screen size very small if it's 512 pixels it's going to display the items uh five if it's more than pixels it's going to display items as seven so we need to add it down there so first mouse tracking is added and items equals items so i need to add auto play so that they are playing automatically yep they are working let's add the responsive there we go okay need to correct that as well and should be in finite and it shouldn't display the dots control so disable dots control and disable button controls so why is it so huge let me check yeah it's too huge okay let's give these few stylings this causal item cursor text and cursor image img let me see if the css has been no it hasn't been imported import carousel dot css okay let's go to over here and let's add a few of the styling these two so it's displaying the items as flicks it's going to flex direction column so that this i mean this is the for one particular card so it's going to be display flex and spline so so first the card will be there and then the name will be there and object fit is going to be contained so it doesn't get stretched padding between them is going to be 10 pixels and for just for query cell image this style will be followed border radius is going to be 10 pixels and margin bottom will be uh 5 pixels so there's a space between the name and the picture and the box shadow as you can see is given spotlight some values like 5 pixel is the spread and the black shadow so yeah here it is it's working absolutely fine and let's check if our app is working perfect or not let's open this okay this work is working as well in the normal desktop mode yep working fine let's search something let me search it there we go it's working absolutely fine now if you want to deploy your app just like i have done over here what you need to do is need to go to netlify.com and just create your account in this website after you have created your account and are logged in you can see there is a button called new site from gate so you need to push your website to your github for example i have done right here over here as you see this is my github repository i have pushed all of the code into the github then you need to be over here and click on new site from git as you can see i've already deployed this site over here but i'm going to show you how you can do it so click on new site from git and just click on github and then it's going to ask you to log in in my case it was already logged in so now then you need to select your app for example in my case this is react entertainment hub so after you have selected your app just give your build command over here either it can be yarn build or npm run build and just click on the deploy site and your site will be successfully deployed and you can share the link of this site to your friends and family now if you want to make this app a progressive web app like i have done right here you can see there is an install button right here the progressive web app can allow your app to be installed in your phone so if you want to learn how you can make a progressive web app just watch this video click on the i button above to watch that video and so there's our app and thank you all for watching this video if you like this particular video just give it a huge fat thumbs up press the like button down below and subscribe to the channel and press that notification bell so you don't miss any future videos so thank you all for watching and i'll see you in the next video goodbye

Channel: RoadsideCoder

Views: 30,119

Rating: 4.9373693 out of 5

Keywords: React movie app, movie searching app react, react material ui, material ui react, material ui react tutorial, movie tv series app in react, book my show in react js, movie app clone react js, reactjs projects for beginners, reactjs small projects for beginners, react js project from scratch

Id: vxUfx4aM5d8

Length: 130min 53sec (7853 seconds)

Published: Fri Feb 12 2021