IMDB Clone built with NextJS TailwindCss and TMDB API

hello everyone how you guys doing this is Niger Koda and today I have an incredible website here with me it is a IMDb clone it gives you all the latest and trendy movies currently if you look at we have the light mode and we have the dark mode we have trending we have top rated we have a search bar that you can use to search latest movies with their names it is an incredible application we're using API from IMDb we're using um next GS we're using react.js we're using U State we're using params we're using use router it is just on the crazy incredible application so make sure you watch this video and you learned a lot so please make sure you subscribe and like the video it really really helps thank you let's get started all right let's get started now the first thing we want to do is we want to MPX create next app at latest experimental app you want to do this over here I've been trying to walk around with this experimental app that has the source folder rather than the pages folder you know just to try different things out now over here would you like to use type script in this project to say no would you like to use es links say yes say you win CSS yes would you like to use the source directory with this project yes what import allies we use we use the ads now if you don't want to use Source directory you can um it doesn't really stop anything um so that you have to create a separate layout and file but that's what we did for our installation I've already installed man so you go ahead and install yours now what we'll go to this Source directory our favorite icon currently is this so we're going to npm one div all right so we are project starting at localhost 3000 I mean our silver is still getting compiled okay all right so this is our projects now let's get started and I want to come to this field icon now over here we have this icon we create next I want to change this icon so we're going to go over to save icon dot IO then we're going to say we want to turn the text to an icon we're going to use I change the color a bit background color to be this I'm going to download it now let's download it we want to [Music] click this to your icon this is what we want to use on down come over to yeah then take this view icon test over here yes we want it to replace now this is the favorite icon we want in our layout um if I want to change the title over here so I am DB clone they want to change the description using metadata to he said my name all right so let's look at our projects whoa whoa racing uh on 10 string constraints let's go back okay so you can see our fave icon and our page name has changed now I want to get rid of all this so we go to our layouts in our layouts here have the body the children go to page we want to cancel all of this just put this page so now we're going to refresh we can see this here and it's giving us giving us this will clear that later on I'm going to go to our layouts and let's create a new folder under our source directory name that folder components let's create a new file the header let's say RFC we'll say later we'll go back to our layouts over here in the Body Rolls inputs over here okay so our header here and our page here so now I want to come over here into our Global CSS we're going to delete all this so you're not using any of that okay clean page now okay so now we're going to create our header components it will come over search header here and to do this we need to install react icons so let's install react icons first things first so we're going to copy this unbox for terminal and install react icons all right so now we're going to run on server again then it doesn't command okay so now we're going to import some things over in our header jss going to import now that's my inputs first let's just try and code the sites their Peach so we're going to cancel this header yeah I'm going to create two divs and pump this over div here and castling want to see Flex justify between margin at the um horizontal level 52 and then we have the mark switch 6xl then in small we want MX Auto that means if the screen is small size we want MX Auto so you know MX Auto is margin 0 also so after that we want the items to be censored and then the padding up and down is six okay so now we're going to create a new component over here you want to name them menu 18. all right so over here we're going to RFC any item also going to import link on next.js so over here we're going to get some elements in our props let's get title address and we're going to get an icon so over here in our link firstly mx4 large screen I like six on the Hoover we want the text should be Amber but icon casting X2 XL small screen hidden mx4 so we're just um doing styling here nothing nothing complex nothing too serious just a bit of style all right so we're done with this good works our header and over here we're going to it's classy clicks a new item title should be cool address should be homepage then the icon so we're going to import our icons now so we want to import the E I feel on reacts from reacts icons and full circle field foreign so after that we want to also import link from next link so down here our icon is going to be yeah if you can stream all right so in the next one here class scene is going to be Flex item sensor space if I okay we're going to use the link a suit last name okay so we're done with our span here and what we want to add I see edible ipd I always make that mistake spunt last name or text Excel even I mean like so let's look how our page is coming out I want to refresh all right so we can see here on Hoover you can see everything is looking really great you can see the icons that switch when the screen becomes small and the reason this happens is because in our menu items um over here we have when it's a small screen it should be hidden okay no um this over here the title is hidden when it's a small screen it should be inline I guess so that's how our pages will get currently so now we want to install the dark mode dark mode switch into our could we're going to expand this so we're going to install okay [Music] all right so we're going to install next themes into our application to work with dark mode so we're going to come over here sorry and copy this into Ubuntu paste it bye so now that we've done that we're going to create a dark mode components over here I'm going to see dark mode switch Dot jsx all right RFC black mood switch okay so now when we install this once we install this we're going to start on div now this next JS pocket this next things package uses the use context and I'm going to create a global variable anywhere in the website so that we can change our mode from lights to dark so it should be making use of the used context um hook now I am very sure that you know what the news context Hook is if you don't uh just type in the description I will make a video to explain that for our subscribers okay so it uses the use context hooks to create a value in the in the site which helps us to know if the site is on dark mode or light mode now to use next yes since we need to cover Intel page uh enter website with the team provider here but because this team provider is using use context and we aren't allowed to use use context in our server side components jsx we're going to use a different approach rather than this over here so what we're going to do we're going to we're going to create let's create a of file over here I was going to be named providers Plus jsx then say RFC I'm going to leave that there so we're going to go to our layout and in our layouts we're going to wrap our header and children with the provider so now take this okay so once we've wrapped that with our provider we're going to go to our provider and in our provider we're going to import scene provider from next teams now we're going to take this team provider and we're going to create here pass all the children elements now we're going to come here children also from there it's again to password this ingredient into our provider because in our layouts everything is getting passed into our providers and to make that show we're going to use the children so now we're going to wrap all this with our team provider so once we've done that okay so once we've done this now we're going to also enable the system team to choose so if you're using dark mode or light mode in our in your settings there's in your system the team provider will be able to know that I'll change the value so if um your system is currently or your browser is already currently on dark mode I visit the website the what the site will check it will check to see what um mood they are on are you on light or are you on dark if you're on dark mode it will change the site to that mode so that's what you can see is that low so we're going to say enable assistant equals to true this is going to allow the system to the website to read what uh the settings are in the browser or the system to enable it to change it to what the user is currently using so now that we've done that we want to set what we should see when we're on dark mode and when we're on lights mode but when we say div ing no if we're on dark mode we want to see we want to say the background should be green should be great 700 then we want to also say in dark mode the text CP3 got 200 they want to see the text in light smooth this if using live mode should be great 700 and then from transition transition colors then one state the duration of the transition will be 300 milliseconds that's three tenths of a second then the minimum age height screen the minimum height should be this the the height of the screen then we won't select now this select known is simply just stopping people from copying uh what is on websites um you don't have to put it but if you want to just stop people from copying words on your website and you can also use it and when I say copying I mean the text like uh once you've used it now if we come over here we may get an error I hope we don't because we've not done some other settings well it's basically to stop this this selects or you can see me selecting it all right so create context only works and client components we need to add the use Clan director at the top of the file to use it so that's what I was explaining earlier so what we're going to do we don't need this enforce react from react we'll just Transformer we say use clients so we're going to refresh and that Arrow should we wait so you can see right now is already in dark mode um that's because we my system is currently on dark mode I think it is and let me see display okay that move is off here so I think maybe it's my settings in my browser but it's currently just on dark mode so we're going to work on that very soon um so we can see here you can't select anymore see this one you can select that's what this selecting on those so that's just the way those so now we're going to go to a dark mode our dark mode components and we're going to come here first of all we're going to always say use clients so we don't get an error later on they were going to import some icons from react icon so we're going to say Imports MD so it will always import a light uh some buttons so that the user can switch between light mode and dark mode so we just want to import some of those importance it wasn't used from reacts icons first MD to importing BS 0 or this so we're also going to import the Houston next terms okay you're also going to import use effects and also you see it I wonder why are we importing use effect in your state the reason is we want dark mode and light we want this components to only come to only run when the entire app has been mounted if that makes any sense because if it's not mounted and this gets wrong we will encounter errors so I'm going to show you in a second so now that we've done that I want us to crime so I return here let's clean this so here we're going to see current team okay we're just going to say MD light mode class name six Excel please see if there's anything you confused about just message just um reply me in the comments um I have some subscribers that do send me messages on um Instagram I do reply them and try to help them as much as I can so we can only go forward by helping others so we have this here so we're going to close this and we're going to create the PS see class name six pixel change properties so we're going to go to our header because it's in our header we're going to display this so we're going to put space here right here um what's the problem okay I didn't close this okay okay all right so we can see our icons here the dark and the light modes what we want to do is that if while on dark mode we want to show the sunshine so when the person switches move to lightning mode I think we're online would want to show this Moon inside that when the person clicks on it you switch to around dark mode so I'm going to come over here now we're going to use we're going to say we're going to try and get the thing the if it's connected on dark mode or light mode so if I know what to display here so in the used thing like I told you steam uses use context so in the using we can get that value of if it's dark mode or light mode with the with the used thing and hook so we're going to just watch this is 10 because you can also get the system team on the team I want to set scene this allows us to set the thing that allows to set team sorry then we'll say equals to use thing okay the wind speed constant like we talked about earlier I want to know if the entire component is mounted or not before we display this component so basically mount it set mounted we say equals to new States so we installed first at first it is false save constant currency you know hold on we're going to see use effects what we'll see it's mounted to show so this use effects use effectively works when the entire site has been mounted the entire component has been mounted inside has mounted so once that happens and this computer has been fully mounted it will now set the mounted here to be cheap so that once it's true we know we can display this a little code here so we're also going to say constant current stream equals to think equals to if Sim is equals to system to system same else use all the more Scene all right so this current team is simply saying now if the team is equals to system that means if it is on system if we're using the system team it's use the uh distance learning team should put on system else it should be the it should be the team that we have here how do I explain this much bit okay what I'm trying to see here is that if the system theme is activated okay we want to use what the system team has if you see double instead if not if it's not if we don't see any sustained team we want to use our own thing as the current scene so now when we come to our code here we're going to see mounted and this means that we should only show this code when this the page has been fully mounted so now see mounted on windshield currents scene if the quarantine is equals to to dark that means if we have currently dark mode we want to display this light switch here copy record this and put it here but if it is not on dark mode we want to show this so let's check our page so we see the light button we don't see that button now now we need to enable this button so what we need to do we need to come over here we need to say on this light mode we're going to say on click we're going to say get a function which says sets the team so when they click it sets the theme to lights then we're going to copy this I'm going to see here set the team to dock we need to save that what's the answer was matter all right so here all right beautiful so now what happens is that this becomes a button so when we click this we can set theme to light and dark then if we click here again you can set it to like so beautiful beautiful piece okay so we're going to start home we're going to continue with creating an about page you can do that by going to the source directory okay No Nonsense sorry the app directory creating a folder called about and then in this folder we create a new file called page.ksx okay we're going to say RFC changes to about then I'm going to come down here and put in just some um style I'm going to say class name uh we're seeing marks w 6 XL that's a Mac switch margin or two I'm going to say space on the y-axis up and down should be full you can see a padding of four okay and then we're going to create a new tag we're going to say H1 class name is it texts two times extra large front medial I always close this I'm going to say about then under here uh you can create up do your write-up I'm just going to paste my own right up uh this and and call me and this so this is my right up here I'll come to our Movie Database this is so we're going back to our sites refresh our votes and we have our about information here and this is looking a bit though so we're going to come back to our provider yes here text screen here I'm going to close to this and see whites refresh and it's not fully working it's still great uh what we're going to do we're going to try and restart our server and see if that will help Okay so is not as bright as I want it to be uh that I'm going to switch all right if we just leave that for now uh probably little will change we'll change it to something else okay so we've done with ours page now we need to create some navigation bar uh navigation bar up here so we're going to go back to our components we're going to create a new folder I'm going to see an output dot GSX into RFC okay and that is that so I'm going to say div I'm going to say cast name and say Flex justify Center the dark uh bg3 five six hundred RNC BG Amber 100. it means a large screen it texts should be large and pattern you should be here for I'll wait to go back to this above and Prince come here and we need to scroll to this deep I would say dark text s let's see if this will help okay it doesn't help all right so let's just go back to another box well like we did in our last uh what we're doing now the new item we're going to create another part 18. I'm going to come back Wednesday now or 18. plus jsx we didn't say RFC okay then we're inside out by item we're going to try and get whenever we're using calling me now byte I'm going to try our password a title on the perm okay so I'll explain it more once I'm done but we're just going to do it like this they're also going to import a link the link tag from next year's I'm going to come down here we're going to say diff we're going to say link class name I'm going to see margin 4. you can see it will work texts number 600 front semi board okay and a pattern of two okay I also we'll see see that on this web when you see tickets to Jen and give us a dynamic uh this wanted Dynamic um link so let's see June equals to our params that we pass these problems that we pass over here so the link now we're going to use Titan I'm going to save this so we're going to go back to our Alpha I'm going to see now part exit into title trouble going to say perm fetch trended let's copy this and see it's operated I'm going to save fetch top rated okay we're going to save dog we need to come back to open now we've done this so we need to display it in every page so today I will go back to our layout and here we have our header so we need to come down here enough but it should be here well receive that we should see our navbar up here we will not see okay beautiful so our number have appeared um I'll show you something when you click trending you can see this the Gent changes the link changes to gen equals to fetch training it is still the home page it's just that we have added a power up to our link so you can see this if we click top rated it changes to fetch top rated if we click training click changes to effect training now we want to do it in a way that if we are on trending our fetch training is on our link here we want this to be on the line so you don't know is why change it if we could top rated what this to be on the line because we are currently on top rated under the lineage should go so how are we going to do that is very very simple we're going to go to another bar item we're going to import we're going to import the use search params I misspelling the search correctly I think I am okay from next navigation and we need this to be able to use this here this is a clan site so this is nice oversight so what we're going to we're going to charge student to clientize we're going to use Lanes obviously doesn't give us an error so we import the usage perms and then we're going to compare this usage point is going to allow us to have access to this jet here this parameter so I can get this value for ourselves Okay so when we go back we're going to say constant Search terms equals to use search problems so in sequence sensorship equals to search primes dots gets two inch gets the jail okay so once we get the J uh we know the general currently on so we're going to see we're going to compare in our class name we're going to style it differently if well or the coins gen Okay so we've done the MX M4 uh we're getting a little bit of error here I'm trying to figure out why okay maybe it's this a bit of an error okay okay I understand why not only to put the coily braces here right so we've done that now inside here we're going to do a check we're going to check what's the Gen is now we're going to see multiple dollar sign yeah I'm going to see if this is June that means if there's actually something in if there's actually something here if we actually have a perhaps region that's what we want to check so if we do have a various region we want to put this alongside I want to say if the gel if the Gen matches with the params meaning if the Title Here fetched operation matches with the parents we get for this foreign matches with the parent then and only then would we get this uh this class so we'll say underline we're going to see on the line offsets Eights that call Collision fold declaration under 500. granted touch we need to save come back uh so we'll just run this to refresh okay so we can see that top rated on the line trending on the line top rated beautiful beautiful beautiful all right so now that that's done we want to now trying to stop fetching our movies so what we're going to do what you're going to do anyways is you're going to come to tmdp look at the link here the movie db.org you go ahead you create an account I wanted to create an account and then I wanted to go over to your settings in your settings you will see API here this is my API key and when it comes to API you may not get this instantly you may have to you know add do some steps to get your API key so you just go go over those steps and you should be do should be okay okay soon I've gotten this my API key here what I'm going to do I'm going to create a and what they call it again dot NV dot local file I'm going to copy this let's copy and I'm going to close all of this source which create a new file there's going to be dot EnV local and then we'd see API on the scope key equals to is right so now that I've done that we're going to escape we need to come over to my page now this this API key has documentation you can come over to it here and go to documentation you can go through the documentation I highly suggest you shouldn't in case you want to edit this project so you know your own personal liking but we're not going to go over the documentation today we're just going to go straight into our code don't make this video too long okay so now we're going I'm going to edit this page [Music] um this page is over here first of all we're going to get our API key I'm going to constants API underscore okay this should not be in capital letters I'm going to say process dot env.api so key okay so here we're going to make this an async function uh only possible with xjs and we're going to get something called this search times this allows us to get the search params in here these allows us get the search parents here instantly rather than doing another step so we're going to get it as props we're going to search powerups so let's get that we're going to see constant gen equals to search params. gen so if we don't have if if we come to the home page I would have any search products so this is going to return as only five so if this returns as undefined we want to also still be able to do something when say fetch training if we don't have anything in there params here so we're going through inspects what we're going to do I'm going to cancel log this J so we can actually see what's going on pencil okay like this you can refresh and we are not seeing LED it's going back page I don't see anything I'll construct a lot let's go back um why could that be why could that be well not saying anything in our console.log x44 is sync function on search params student Journey let us get rid of this and also get rid of this no I haven't seen anything you know closer I wonder why those those strength comes to look something else let's see if we'll get something okay okay is showing it here okay I forgot myself that this is um server side component it is not a client-side component so it will show what it wants to show here it will not show it here sorry about that slimy singing and vegetables so we can see that this is working like when we clicked top created you can see it's showing here fetch top pretty and also our water machine so we're going to cancel that now that we're getting our constant jet we're going to create a new fetch of we're going to see a constant width that's our response equals to A width fetch okay so now if you went through the documentation you would okay okay you would see this so let's let's copy this let's copy this let's come back here we're going to see fetch okay and removing three here trending you want to change this um all week all week definitely even okay okay okay so here we're going to change this we're going to see dollar sign I'm going to say in chain equals to fetch top rated right we want to use movie slash top screen retail okay else if it doesn't we want to say trending or quick okay so once we've done that we're going to see API key equals to or API key let's see EP DPI key and we also want to add a this from here and language should be English US page one all right so now in so this is a server-side component uh we don't want we don't need this to if if a user comes into the site and this loads if an user comes back to the site like 10 minutes time we don't want this to reload again you know because anytime you client a a individual loads this gets saved to our server side and once it's saved to our server side all other users will come and access that patched data that is on our server now we don't want this to be refreshing all the time because this doesn't change all the time since all of it this is top trading all week this is movies it doesn't it doesn't change every minute it may take me resources every three hours or every day uh Incorporated will change but it's not in the class standard it's not a constant something so what we're going to do we're going to say this is something that is in the next JS docs I advice you can check it out yourself as well orange you see here we're going to say the next we're going to see if it's right we've only need to tell it's how long it should wait before it needs to refresh this information and here I'm going to use one day so if only if a user comes loads this the data it will be cached if another user comes within one day it's not up to one day it will still be using that cash information until one day has passed before it will load this whole thing alone so yes so that's what we're doing here okay so now we've fetch this we're going to see if it doesn't have a response dot okay this is something that will be passed along in this data that has gotten from this API when you get this data it will get an uh what they call those things inside an object in an area property has okay so if there's no properties okay that means there was an error so we went to true new error let's see if field to the fetch beetle so later on I'll show you how this will get handled but for now just put this in your code okay so there we come down against the constant data equals to a week let's do Json constant result equals to digital results sooner we're going to Echo all of this in a result component so we're going to where's my okay so we're going to prompt the components we're going to create a new file when CHP results Dot jsx RFC okay we're just going to leave it results okay so in this results we're going to get a prop the results they are going to concave the range from you can see a class name I'm going to see small create a small read columns two large create columns three Excel paint ers results dot map create results if you wanted to stream over here okay the key props uh for now you're going to have to do with how to keep up so let's go back to our page and in our page we're going to call on everything Thief let's see results okay so this is it this is our top rated these are training gods you can see all looking clean and it's nice nice nice nice okay so now we're going to work on our error page what happens if we are trying to load this data and an error shows up that's why we have this here show new error field fetch data now to work on that error page we're going to create a new file here error .gsx wincy RFC we're going to tell it to use clients okay so now in this error page well we get we can get props as error and reset this error this error is simply just the information we get here this information and then this reset is to retry looting um the main page all over again so once we do this uh with the reset we can now just try put area here and then we can go to our page and then we just delete something to cost an error and refresh okay so you can see there's an error with that and we can see the error loading up here so our error page is working successfully so we're going to start our error a little bit we're going to see we're going to see I'm going to use the use effects so that immediately eludes we're going to consolock the error and then in case the error changes we want this use effect to reload so once we do that once we do that we can go back to our page and create another error again reload okay and you can see our Arrow here our field to fetch data all right so we know that's working working very well so I want to style this a little bit so we're going to go back to our error page in our deep we're going to say class name six Center mt10 margin top 10. now I'm going to say H1 we're going to say something points row and we're going to create a button we're going to continue the class name I'm going to see you on Hover text Albert 600 then we're going to see on click events Handler resets function and try again so this resets here is the user to get here it's just telling me to retry the um the components again try and reload it so see the button here you see it's reloading but it still has error what we're going to do I'm going to go back to our page I'm going to delete This Ss and try we try application error so they'll just refresh the page so everything is good once there's no error will not have any issues with our page now the next we're going to do we're going to do loading um if this page is loading we want some information to show whether that need just being blank so what we're going to want to create a new file here in our app directory I'm going to try to including Dot jsx okay so then we're going to come here I'm going to see we need a spinner a spinner SVG so we're going to call graphing icon we're looking for loading IO just like we got our favorite icon from here we're going to get our loading spinner from here so the page is loading okay so we have different animations here we're going to use this because I like this one I always change the color so edits Justice okay now this is a palette we don't want a palette I think I've made a mistake let me just refresh the page select this again simple business okay program color should be whites transparents on okay so this is okay you want to get SVG animated free download it so now that we've downloaded come here download so it's our spinner here so we're going to so we're going to put this spinner also into our public directory and we're going to rename this has spin up okay so that's good we're going to go back to our loading I'm going to install this a bit class name clicks justify Center launch class name Double H height 96 source equals to spinning out hpg what's wrong with that image okay all right then we're going to put oats loading dots I'm going to save this Chromebox our location reload we're supposed to see it briefly very briefly here okay we're not seeing it so let's try and restart our application [Music] localhost okay okay we're not seeing our let me see if I switch off my data maybe we would see it no I won't see it because of the catch data on the server let's try and restart the server again okay it's I'm very very sure you saw that so it is working we just saw it just now so it's perfect now this would work even without data the reason being um how would I explain this the reason being uh with next yes everything is on the server so when this loads because in our fetch our fetch code here we say it should we validate every one day so this is not going to it's not going to fetch this data is not going to fetch until one day has passed that's how our code works and that's why this is that has going to be even if you don't have detail or not it's just going to be it seemed on the server as catch so that's all with our loading our loading is done now we want to work on our results all this information how can we display it much much better so what we're going to do we're going to work on the card component so we're going to create a new new form called card GSX RC okay no I'm going to pass on green results okay so in our results our results here were sending out the title but we don't want to do this what we want to do once Imports card on the import card I want to give it a key because every if you're mapping react.js you need to give it a key each individual element to keep a unique Key by the way so we're going to say results dot ID they are going to see the results should be passed on as a prop so I'm going to go to our card over here and in our card.jsx we get all that information from here so it's not results it's just results but also going to import um a react icon a thumbs up icon from reacts yeah it's icons display we're also going to import link okay also going to import image okay perfect so now over here we want to display it in a much better fashion so we're just going to put some styling for us here let's say class name and say cross soul pointer uh small p 3 SM over shadow sleet sound 400. okay now we're going to do okay hold on for this let's just leave that out of the way let's just display the image first and foremost the image has a source and the source is okay let me just paste this souls for you guys all right so over here we have the source to be from the IMDb um websites and then divisor dot backdropath audio poster part that's because we can get the image in either this neither this in the area or poster parts and then we need to put this in front because this is the the source of all the images and then this is the part so we'll just add this to the back and against the link of for the image so before we can do this we need to add this to our next um JS config file if not it's not it's going to show us an error like it's already showing us here foreign ERS is missing the required with property sorry about that so what we're going to do we're going to go to our um this thing next config file and then we're going to come to our module exports uh experimenter here I'm going to say images domains I'm going to put that there that's perfect also has already restarted so so that's perfect then we're going to go back to our card our card.js so this should be fine now but we're going to have to give it a width of 500. I'm going to have to give the Heights of 300. so I want to check that out and see as we need to run now so we're going to refresh is taking a bit of time that's because of my network I believe okay so our data is fetching okay so you can see all our images loading is still loading the images are a bit much so they are all loading in very high quality this is beautiful so you want to put some text I want to style this a bit so for the class name here I've already prepared a bit of code so I'm just going to copy and paste that and then we'll go three together so causal points are um in small device there should be a border um transition Shadow duration 200 and then group so nothing much just something to style it a bit okay so we have our width and our Heights we want to also give this some so I'm styling you'll see class name we're going to see in a small device we want you to be rounded at the top and it should be large on a group for opacity should be easy you want transition it will transition for the opacity shingles happen instantly the duration duration to return it milliseconds they want to also give this a bit of styling we want to make sure the mark switch and it's 100 percent and then the height is also download those lists holder should be below uh this is the blue data URL that means when the image is still loading we want to show a spinner and that's been nice right available to us in our public directory and open alts showing image is not available this will show up when the image fails to load okay so let's take a look let's refresh this from scratch so you can see a loading spin up while the image is loaded our network is not strong so this images will load very very slowly here you can see John Wick here we can see this movie here over very nice so we also needs a bit of text so let's work on the text okay so we need a bit of text so we're going to say div last thing we can see padding two when CP class name now we okay let me just paste this first results Dots here oh okay so we have all these uh all this message here right so we don't want the message to be long because sometimes you can see it's very long and then it stretches out everything in that in that row so what we want to do we want to limit the length of this text so we can easily do that using them two wrong kids around kids size is taking your time to load I don't know if it's my network all right so as you can see the text has reduced to just one line now even though it does this one like we want this to be at least two lines on the default this one line so what we're gonna do is we can go and install a line clamp so this line clamp files you know I need the installation so all right all right so we can install Minecraft into our code to allowance to able to go down and solution should be here give me a second and then okay so I finally got the npm installer I was looking for uh we're just going to install this and then we're going to come here and saw a line clamp I was able to find the right top about it but I'm sure you can walk you work perfectly fine I'm sure we're perfectly fine so now that that's installed what we want to do go back to our card components and here is the options kits that we're using here we're going to use the line clamp oh say two lines come back to our code and run our code well waiting for our good to run I want to make sure that you're clicking that subscribe button and also the like button it really helps out thank you and let's focus a bit slow very very slow okay so as you can see it's now two lines instead of just one line so why this is loaded we're going to continue with our code so now that we've made these two lines we want to go to our next obviously I'm going to say class name I'm going to say this one will say to kids this time we just need it to be one lane we're going to do the we're currently doing the title so just make sure there's one line text should be large fonts food now over here we want to see the results those K2 or if that is not available in the array set the results don't need any of it so okay so now that we got that I want this install for pizza one is to be in cup like a bit bigger towards a page so so next level going to go to P tag class name we're going to see flicks items Center inside here we're going to show the release date of the movie Marina is underscore Peaks or Resort studs first uh dates right so thumbs up because five generates one margin left three and the walls won't shoot the amount of woods that this movie has currently cuts because we're showing the thumbs up here soon so should vote counts then we want to also wrap this all up in a div in a SRS div in a link now this will link to the individual movies themself go down sorry so in our link um our link won't see it soon a dynamic page so you have to the dynamic page results dots 80. okay so let's check out our code now and change yourself this looks okay let's look solid we just need our page to load a bit faster I was going to just check our other Pages loaded all right so our page is loading fast enough just like the network is much better so as you can see our title looking nice our line clamp two lines looking nice uh release dates and vote count so our page is looking neat and it's coming up let's check out the night mode of our page beautiful beautiful now our text needs to be a bit wide so we're going to fix that in a bit what's looking clean it's looking clean okay so we know we've been having issue with our dark class um I had to go through the code to see what the issue is because I didn't like this format so it seemed like I made a mistake in the providers um components over here also add attributes to be class remember we made this class in our Tailwind config dark mode class so we're going to refresh now try our dark mode again and you can see it looks much much better than previously now that we're displaying all our results our movie page here our movies here if we click on the movie we can see we navigate over to the slash movie slash the movie ID so we need to display something on this page so what we're going to do we're going to come to our app directory we're going to create a new folder and call it movie now we're using the dynamic a dynamical parallel over here this param can Will continuously change depending on the movie as you can see it's 6'4 here if we go back and select another movie you can see it's 9 3 here so this is a dynamic um parts so what we're going to we're going to come to the movie I'm going to create a new folder with um brackets and call it ID they will create a new page under this ID folder called peach.jx so now that we create this we're going to import some things we're going to import what else just say RFC I'm going to call this our movie page over here we're going to import image from next and next image so another word here now on this page if we say it will be Peach come back our code is very slow okay all right just load it let's click on this so you can see the page comes to like movie page mind my spelling so now we're going to display that movie on this page so to do that we need to get the ID that we put in the params so we can get that with next year's we're just seeing params here and we can see constant movie ID equals to params dot ID using his ID is because we named it ID over here so pumps ID and now we're going to say constant movie we're going to get a width gate movie with our movie ID now this is a this is a function so we're going to create this function up here and we're going to see async function gets movie and with passing the movie ID that we passed in here so I'm going to use this we're going to save constant res because I'm going to fetch I'm going to fetch uh the movie with the movie ID from our API um the movie DB org so we're going to say I will fetch I'm just going to paste this code here so in this code okay so in this code in AR API was saying movie slash movie ID this is what it will use to get this specific movie we're talking about and then our API key so when we get our results we want to return because it will return uh an RV an object for us so once we return it I'll wait okay so it's Json to know that we've got in that we we get it here uh we're showing this async functions okay so we need to make this an easy okay so this is an async function now so this is okay and this is not the correct spelling of movie all right so that's okay so now that we get that we've gotten our our results now we want to display it to the user efficiently to always do we say style this D ustly we're going to see which Full let me see div class name we'd see padding for part in top for medium screen it's a flex Flex gold cool medium device MD looks cool items sensor contents enter Max w 6xl and makes option space like this six okay so we're going to display the image the same way we display the image in our main page if I should let me just copy that from our main page if we go to our results sorry our cut copy this image put it here so Source the same way we did it 500 300 class name I will change this to just round it large and install Heights 100 percent I'm Bill whoa Okay so that's that for our image then we also want to display more things so let's try and refresh this page equals Mother the same results is not defined okay everything results is not defined because instead of results was supposed to use movie uh here it's also shoes moving so let's see how our image is looking try again as you can see we're using the error page that was created here in our main app directory here this area main aperture directly if you want an error page specific for this you have to create an error.jsx inside this folder here alongside this pjxx if not if the default it will use the error page in our main source folder let's try again is to showing us an error and the result is not defined we don't have any results again let's try and refresh the entire page I mean voila we can see our image here looking neat now we need other info alongside this we need some info here so let's let's do that let's do that so create a sunshine space for ourselves will then say div class name part in two we'll see H2 class name text OG MP3 our front bold movie DOT type 2 movie dot name I love you too okay so then we're gonna say P tag it's our pizza class name the text should be large imagine button please put this spawn last name fonts semi bold mr1 in C overview movie those overview okay so after this we're going to create another P tag with a cast name a gym button three against this one last name fonts let me put okay all right so our page is looking okay we can see the title of the movie a little overview and the current rating so let's go back let's see on another movie the Sean shark Redemption see this one okay so everything is looking neat and fast and responsive Avatar the wheel water excellent movie by the way okay so we have our movie page done now we need to work on our search uh we want to be able to search for any movie that will be we we come up with so we're going to go to our layouts in our layout after the nav bar we're going to create a search box this search box um is going to be in our components so we're going to create it here see search box.jsx okay so let's work on our search box effect works we didn't see RC search box here we're going to see is client because we're going to be using client function and clients and functionality like you States and use router and all those good ones so we're going to go back to our layouts come here command space the command space control space yeah import it save it to refresh go back to search box and I'll just put here search purpose okay so the search box should be somewhere all right CT so search box we want to search um bar here to search for all movies about small okay so we're going to go back now uh here we're going to import some things we're going to import new States and we're going to import use router okay now in here we're going to change this div to a phone okay and we're going to create some inputs I'll always gets an inputs um this input is going to be this search that we get I'll just refresh this you can see it's a search box you now style this search box we're going to see class name I'm going to say which should be full h 14. around it what are videos please hold the should be great 500 or slide none and background experience transparent then the flex one so let's save this case I'll increase here now and we also want to create a button beside this we're going to Boston this was nice to see search they were going to say class name and see texts Amber 600. and then in this art form we'll also going to style it with reflex Mark Suites six Excel MX also justify between sensor click Swift so we should see our button now okay so these are box this is our search um beautiful now we want to get try and do and two-way binding with this input with u States so we're going to create a new state we're going to say constant search because what's going to be typed in there is the search set search plus so you use States then we're going to come to our input the value should be a search and on change I want to create a function I'll reset searched I will set search we eat those targets for value all right then the type equals to text and please pull the search keywords all right so uh on change we're going to change the search value so is it two-way binding which used it so now now that that is done um this button now is a submit site so let's change the type to submit and if there's nothing in the search we want this button to be disabled meaning we don't want this button to be clicked if the the user has not typed anything into the search box so we're going to see here disabled if there's nothing in search and then in our class we can Style we can install this to see disabled text three four monsters so if we come back to our code loading loading loading loading loading loading before it loads um it's very very simple okay it has load now so you can see the button is great it's not clicking I'm trying to click it right now it's disabled so once the user types in something then the button will be enabled so you can see now the button is working so now that we have the button working and what we want here we need to create a function to handle the on submit so we're going to come here we'll see and submit always say handle submits okay so we're going to create a function now function I'll do submit and we're going to say e dot prevents I'm very sure you guys know what that is prevent default is it is to stop the page from refreshing when this button is clicked now if there's nothing in the search I want you to return now if there's something in the search I will use router here I'm going to say constant router equals to use router then we'll connect that back here we're going to see router dot push push the user to search stroke in this search valid user passed false so right here if there's nothing to search the function will end and then if there's something in the search the router will take us to this page so if you can see here let's type love and then click enter it said next order was not malted um XBox are not wanted okay okay and look at this router use rotor okay we're using next phase it should be from next navigation let's refresh okay so here I'll link that love again click on search okay so now you can see here a search and we have the params here love this search and what we searched but here's in in 404 I mean this page could not be found so we need to create um that page so we're going to come to our app directory we're going to create a new folder I'll go to say search you're going to create another photo login says search same so we need to put this into brackets so search term for the dynamic page still create another file this in page dot GSX okay here we're going to see RFC okay beautiful beautiful okay now that we're doing that we're going to see here search page I'm going to get our parents okay so now that we've got in your problems and the search will want to search we are going to pass it we're going to use an API call with those perms let's say constant erase equals to A width pitch then I'm just going to copy this code and put it here now in this code we will just using our API we're seeing the movie with the API key that we have and the query this is a query so we're going to query these param the research 10 that we got from our programs we're going to power and say we're going to query it and once it's created give us a list of results and that results we're going to display to the user now in here we have and include adult false meaning no adult content should be passed through this for under 18 and underwritten um users if you don't want that you can just delete this uh I'm just putting the outside to also aware of it so now that we've I waited that this always is giving us issue because this is not an easy function we need to make this an async function okay and we should not have to show that again and we should say if the there is no race dot okay if there's an error issue through error now remember the error page that will be shown is error page from the main um app directory if you want an error page specific for this you have you can just create that arrow.jsx beside here okay and we're going to see here error fetching detail now please come down here will see constants data equals to a width there's Jason okay so now we're going to get our constantial result data dots visual once we get that data all we have to do is come to our div we're going to see if there's results and results lens is equals to zero told the user H1 okay so these like each one and casting text enter pt6 we can tell you is a no results found else now if we have results for we to see um this results our results components we're going to use it I went passing results into it okay so this should be nice and neat uh we're just squaring using the API key to query and it will give us a list of results and then we're passing those results into our results component like we did for our home page and that's just it so if we search it we see Marvel or message yeah let's refresh this page so let's see here we instead more or you can see results of Marvel are coming up so you can see Marvel Marvel so that's that's it for our um IMDb clue the app is looking really really nice really really clean so make sure you click the Subscribe button if you have any issues with your app creation let me know in the comments I'm always free to chat and to message all right see you guys in the next video

Channel: Smart Jeremy

Views: 1,319

Keywords: react, nextjs

Id: NYrBPf-C8gE

Length: 116min 51sec (7011 seconds)

Published: Wed May 10 2023