Build & Deploy a Movie App With NuxtJS | NuxtJS Crash Course (2021)

all right what's going on everyone in this video we're going to be building a movie application using nux js which is a framework built on top of vue.js now in front of us here i have the completed and deployed version of the application which we're going to be building so at the end of this video once we have completed this application i will show you how to go ahead and deploy it to heroku all right now before we go ahead and get into this application i first want to run you through it here so at the very top here we have our hero section which has our subtitle our actual title here and then this call to action now when i click on this call to action button what it's going to do it's going to scroll this down here let me go ahead and actually do a refresh here it seemed like i didn't want to go ahead and do it here let's try this again and if i click on this it should scroll us down to the movie section here okay now to go ahead and get the actual movie information that we're going to use to populate our application we're going to be using a api called the movie database api which later on within this video i will show you how to go ahead and set up an account and request an api key so that you can follow along with this tutorial now initially when we load in our application here we're going to be requesting 20 of the latest streaming movies that are available either on a streaming platform or in theaters okay so if i scroll down here we should have 20 movies initially now the information which we're going to be requesting is quite simple we're going to be getting the actual cover photo here we're going to be grabbing the title of the movie the release date and here in the top left hand corner we have the rating of the movie which for this one right here the suicide squad is 8.1 now you may notice when i hover over here we have this pop-up box or this box up here from the bottom which is actually going to contain a brief overview of the movie itself now like i mentioned we're going to be getting the latest 20 movies but if we also want to search for a specific movie we can also do that so let's say i want to look up the uh series of harry let's see here potter i can hit enter here it's going to return us all the harry potter movies okay so you can also do this as well in addition to getting the latest streaming movies now say we no longer want to search for harry potter i have this button here which appears after we make a search query we can go and clear this and it's going to return us back to the initial 20 of the latest streaming movies here now we can also get a little bit more information on our movie here by clicking this button below the release date here of get more info okay so we click on that and it's going to take us to this page right here which once again has a cover photo we have the title we have the tagline the release date the duration of the movie the revenue that it made and once again the overview here okay and once we no longer want to look at this we have a button here at the very top left hand corner we can click on back and it's going to take us back to the latest movies that we're initially going to be pulling here so that's we're going to be building so let's go ahead and get started now really quick before we jump into the video here if you want to support the channel and the free content that i am making here on youtube you now have the ability to join my channel so you're gonna see this button here called join on the actual channel home page now when you click on this it's going to populate a model here which is going to allow you to join my channel for 2.99 a month now not only are you supporting me and the free content that i'm making here on youtube but you're also going to get loyalty badges next to your name whenever you leave a comment on one of my videos now in addition to this you're also going to get credited inside of my video outro and video descriptions now for anybody new to next i want to do a quick overview of the framework and provide you a few reasons why you may use nuxt over traditional view now if you already have experience and are familiar with nux feel free to go ahead and skip this chapter of the video now next js is a framework built on top of you which offers server side rendering ssr or static site generation ssg now you may wonder this is the biggest question why would you use nuxgs overview now the first reason is universal apps which i mentioned here in the summary which is ssr or ssg so server side rendering static site generation now if you're underway unaware by default traditional view is client-side rendered now you could go ahead and set up your traditional view app to be server side rendered or statically uh generated but that requires some setting up and out of the box with nux you're gonna have that ability now the next thing here is simple page routing now within nux to go ahead and create a route it's very easy so when you actually create your next application it's going to come with a folder called pages and inside of here you can go ahead and create your uh your file so say for example we want to have a about path now with the nux all we have to do is actually create the file of about.view and it's going to automatically create that page route where inside of view what we have to do is we have to create that file so about.view then we need to head over to the router folder and go into our index.js we have to import that file then we have to go ahead and create the route ourselves so you can see that they make page routing very very simple compared to the traditional uh view framework itself now the next thing here is easy control of metadata and seo optimization title and metadata so out of the box nukjs comes with a plugin called view meta which is going to allow us to edit and assign metadata to our pages very easy and since we're going to be able to server side render our site it's going to improve the seo optimization on google so this is a big reason why a lot of people i feel use uh next js is because of the seo optimization which is a big thing when you know google is crawling your site or application now the last thing here is data fetching now nux has a custom fetch hook which offers a lot of good options when fetching data and we'll go ahead and get into those here within this video and also page transitions it makes it very simple to go ahead and set up those transitions okay so to easily create our next application here we're going to be using npx and the command of create next app here followed by the project name now in order to use npx you need to make sure that you have node.js installed on your system here so if you don't know if you have node installed all you need to do is open up your terminal or command prompt and then type in the command of node hyphen v here and if you get returned a version that means you have node on your system and you'll be able to follow along with this tutorial without any problems now if you don't get a version return here then come over to this website right here of nodejs.org and download and install the latest version of node now assuming that you have node.js install on your system we can begin to generate our next application now for this video i'm going to be using vs code and currently within vs code i have opened a empty folder here of nux movie app so let's go ahead and start off by opening up our terminal here and then i'm going to head back over to the documentation and i'm going to copy this command right here of create next app now what this is going to do if you're familiar with view or probably react it's going to ask you some questions regarding the application or the next app that we're going to be creating okay so i have this copied so let's head back over to our terminal and let's paste this in now we want to go ahead and actually give this a project name here so i'm going to remove this uh default right here of project name and we'll call this movie app i think you actually can't do any dashes so let's say movie app like that okay so this should go ahead and prompt us some options here so by default the uh project name we'll just go ahead and leave that as movie app we'll hit enter here now for the programming language we're going to go ahead and stick with javascript and for the package manager we're going to go ahead and select npm and then here is the option where you can actually select a ui framework they have a whole bunch here tailwind i believe bootstrap is in here as well but for this project to keep it simple i'm gonna go ahead and select none okay now for the next js modules we have a few options here i'm going to go ahead and select just axios here for uh for our fetching of data we'll be using that to go ahead and reach out to our movie uh database api so i'll go ahead and hit enter here to continue on now for the linting tools we have a few options we have es linton prettier that i'm going to go ahead and select here by going over and hitting space and then you have a few other options such as blind stage files styling and commit commit lib and i'm not going to go ahead and select those and then for testing framework we're not going to get into that within this video so i'm going to go ahead and select none and then for rendering mode here so as i mentioned the main benefit of using nooks is the ability out of the box to have server side rendering or static site generation setup for you but you also have the option to use a single page app as you do in traditional view but for this video we're going to go ahead and select universal here now for deployment target what we're going to go ahead and do is we're going to say server for node.js hosting okay now for development tools you have a few options here so we're not going to be using any of these so i'm going to go ahead and just hit enter past this and then for continuous integration we're going to go ahead and select none and then for version control system we'll go ahead and do get and then from here it's going to go ahead and install all the packages required to go ahead and set up our next application all right so some time has passed and as you can see we have successfully created our project of movie app now to get started what we want to do here is we first want to cd into our movie app folder here alright and then to spin up our local development server to see our actual project and all the changes we're going to make we want to run the command of npm run dev here and this is going to load up our application on our local host here so you can see this is all going to run and once this has finished building we should see a url down here to go ahead and listen or watch our application so you can see right now it's on localhost port 64695 so if i go ahead and command and click this it should open up in our browser and we're gonna have this default template very similar to how the view cli works when you create a traditional view application all right so currently we have this template right here which we don't want so let's go ahead and do a little bit of cleanup to give us a fresh slate to build our movie application in okay let's begin here by expanding our movie app folder here to display all the folders and files that were generated when we went and created our next application here now prior to doing any cleanup here let's go ahead and run through the file structure here as it is a little bit different than the traditional view file structure that you get when using the vue cli now to begin let's start here with the package.json now the one thing i do want to cover here within this is just the nux version which at the time of recording this video i am using nux 2.15.7 okay and then most of the other stuff within here is very similar to your traditional view we have all of our scripts which are a little bit different compared to the normal view scripts you get when using the view cli and then we have our dev dependencies here which you went ahead and selected when we were creating our next application here and then we have our nooks config here which we'll go ahead and get into a little bit here we have some of the default page headers we have some global css options here our plugins modules and some other things along the way all right but nothing really too important here and anything that we do need to go ahead and cover i will go ahead and explain a little bit later on now moving up here the rest of these files aren't really too important now in this video we're not going to be using the uh the store or vuex but when you create your next application if we go ahead and select the store folder and go to the readme the directory already contains the view x store files all you need to go ahead and do is just create the file in this directory and you'll be all set but we're not going to go ahead and do that within this video but i did want to go ahead and point that out and then we have our static folder right here which right now this has our favicon or a fav icon now the next folder here is pretty important this is the pages so this is where we're going to create all of our routes so currently we have one route within our application right now and it's our home view or the you know the default view that's the slash okay now if we wanted to for example create a additional page it's actually really easy like i mentioned earlier on in the overview of nooks itself so let's say you wanted to create a about about route so we'll have our file called about.view now the name is important here because it's going to correlate with the actual name of the route which is very similar to your traditional html or if you come from a php background that as well so if i go ahead and say about w here it's going to generate this view so we go ahead and do a view template here and we say h1 and we say about page like this and if we go back over to our application here and we go to slash about here we should now see we have our h1 here of about page so as you can see it's really easy to create routes within nux itself here okay so we're not going to be using this uh this file so i'm just going to go ahead and delete it for now and that's pretty much the pages folder so really important and we'll be using this a few times within our application here and then we have our node modules here which we're not going to go ahead and get into we have our components right here which are the default components that are generated when we create a nooks application and then we have our nux folder here now the one thing i do want to point out here which a lot of these files don't really need to be talked about but the one thing i do want to mention here is this layouts folder here so very similar within view how you have your app dot view we have a default that view within this nux folder here now we can't do anything within this itself if we want to extend and add anything to our layout here we need to go ahead and create a actual layouts folder here within our movie app folder itself and we'll go ahead and get into that a little bit later on but that is the general file structure here for our next application so moving along here let's go ahead and do some cleanup on the files that were generated for us that we're not going to be utilizing within our app here so first off we have our components folder right here which has the nux logo.view file and also the tutorial.view file so we're not going to be using these within our application so we can go ahead and remove these so we'll go ahead and delete this right here and we'll go ahead and also delete our tutorial component here okay now inside of our pages folder here if we go to index.view we were using this component right here of tutorial which we're not going to be using anymore now what i want to do is i want to go ahead and remove this and i'm going to put an empty dividend here and i'm going to give the class of home here and that's going to go ahead and do it for our cleanup so now if we head back over to our application here we should have a fresh clean slate to begin working on our movies application so one thing i like to have in most projects that i'm working on is sas it's just a personal preference i prefer it over traditional css and you know your opinion may differ but unfortunately out of the box nookshas does not come with the ability to add that to our project when we're creating it if we want to add it we have to do it manually but as you can see right here all we need to do to add it to our project is run this line right here now in addition to this what i also want to do which is why we're going to be installing sas is i want to create a global style sheet that's going to have our global styles and you know we're going to be using scss or sas in there so it makes sense to go ahead and install this prior to going ahead and doing that so here on this specific page for the documentation it shows us how we can install sas and how we can also assign a global style sheet to our nux project so let's go ahead and begin to implement that so first off let's go ahead and install sas so what i'm going to do here is i'm going to copy this line right here and we're going to head over to our application and we're going to open up our terminal here and we're going to go ahead and cd into our movie let's see movie app here and we're going to copy and paste this line of code and we're going to go ahead and install those two or three dependencies okay so some time has passed here if we go ahead and close out our terminal here we head over to our package.json we should see now that we have fibers installed here we have sas and then we have sas loaders so now we can utilize sas within our next application here now the next thing i want to go ahead and do is i want to incorporate a global style sheet within our next application so as you can see right here what we need to do is we need to create a new folder and then we need to create our style sheet within that folder and then we need to come into our next config right here and we need to go ahead and import that file into our css array right here okay so let's go ahead and do that so inside of our movie app folder here i'm going to create a new folder and we'll call this assets see like that and then inside of here we're going to have a new file and we'll call this default sc ss like that now to save some time here i'm going to go ahead and copy and paste in these global styles as this video isn't really about styling i want to go ahead and save some time and focus more on the core concepts concepts of nux so i'm going to go and copy and paste these in here and i'll go over them really quick so let me go ahead and go back to the top and then we'll minimize some things here to make it easier to read okay now starting up at the top here we have our google font we're going to be using the font family of carla and then we have below that the reset here so we have margin zero padding zero box sizing border box font family carla back up san serif and we have scroll behavior set to smooth now here we have some app transitions which we're going to be talking about this a little bit later on so i don't want to go ahead and get into this too much so i'll go ahead and leave that out and then below this we have our app right here which is going to have a background color of this kind of a charcoal gray and we're going to give it a min height of 100 vh then we have our button styling here which is some traditional styling display block you know background color padding all that good stuff so some pretty simple css here or yeah css and then we have our button light for the button light class and then our container here max with 1440 push everything into the center with the margin zero and then we have our loading class right here which is going to be for our loading spinner okay so i did cover loading animations in a previous video so if you guys are confused on how this works i'll go ahead and leave a link down below in the description to the video i did on animations and exactly how this works so we have our keyframes right here uh we have a going to transform 360 degrees which is a full circle and then we have the animation right here we're calling this keyframe and we're gonna we're having that run infinitely so it keeps going in a circle entirely okay so hopefully that makes sense now in order to use these styles what we need to do is we need to go over to our nux config right here and we need to go down to the css portion which is actually right in front of us here and we need to go ahead and do some quotes here and we need to say at and we'll say slash assets here and then we need to go ahead and target our defaults dot scss here now i'm not sure if this is going to take by default we may need to go ahead and do a restart on our development server let's go ahead and check because what we can do is go back to our browser here and go to the movie app and if we do a refresh you shouldn't see anything so we are getting an error here so let me see exactly what this is okay so i did a reset on the development server here and that seemed to go ahead and clear the air we were getting so whenever you make changes to your nuxconfig.js you need to perform a server reset order for those changes to take effect so if i go ahead and close out our terminal here we head back over to our application and i go to inspect here and look at the body here you'll see now that that default reset we had here within our defaults.scss is now being applied to our next application here now one thing i do want to mention for any of the styling that i do copy and paste in within this video you can head over to the link down below in the description which will be a link to the github repository and you should be able to find all of the styling which you can copy and paste into your app if you are following along with me so within view you're probably familiar with a file called app.view it's a file which you'd import components that you want to be applied to every single page within your application all right now within nux they don't have a file called app.view however the concept is still very similar to how it works inside of traditional view now here on the nux documentation we have the docs for the actual layouts here now layouts are very similar to how app.view works in traditional view okay now if you recall earlier on in this video we went ahead and did some digging around in the file structure here so if we go back to our application here if we go into our dot nux right here and to the layouts we have this default.view which looks a little different than the traditional app.view within view itself but it works very similar so we have our template right here and this nut uh this nux tag acts as like the router view inside of traditional view okay now like i mentioned before if you want to do any extending on this cb wants to go ahead and add a div around this and maybe add a header or something like that we can't do it inside of this actual file right here we have to go ahead and extend it okay so if we go back to the documentation here you can see that it says you can extend the main layout by adding a layouts folder and inside of there providing or creating a file called default default.view now this will be used in all pages that don't have a specified layout now the really cool part of nux is that you can actually have custom layouts and we're not going to go ahead and get into it within this video but it's actually a really cool feature if you want to go ahead and have different layouts for different pages they make it very easy for you to do all you'd have to do is go inside of your script tag here and inside of the export default here you'd have this layout value right here and you need to specify the layout that you want to go ahead and have for that particular page but we're not going to go ahead and cover that within this video itself but that is a very cool feature that they did go ahead and implement into this framework here okay so let's go ahead and extend our default layout here within our nux application so let's go ahead and minimize these folders and inside of our movie app folder itself let's go ahead and make a folder called layouts here okay now inside of here we're going to go ahead and create a new file called default.view all right and all we're going to do is i'm going to copy this template tag right here and we're going to go ahead and paste it in here now what i want to do for now we're not going to do anything yet in here besides add a div so we're going to go ahead and say div and we'll give this the class of app here and let's go ahead and move this tag into this app class here now if you recall inside of our assets here we have this default.css and if we scroll back up here we have this class of app so what we did here is we gave this a background color of this you know charcoal gray and a min height of 100 vh so since inside of this right here this has a class of app we should now be able to go over to our application and we should now see that the entire screen should be 100 vh and it should have that charcoal gray color so let's go ahead and head over back to our project here and you can see oh well once again we added that so we're going to need to do a reset on our server so let me go ahead and do that really quick okay so just went ahead and restarted our server here so let's go ahead and close our terminal up and if we head over to our actual devon environment here now you will see that we have this dark charcoal gray background if i go ahead and inspect it you should see that the classes here on the app have applied the styles inside of our default.css so now if we were to example go back over to our uh div with a class of appear inside of our default layout and we wanted to add a header to every page which we probably wouldn't by saying this is testing the layout here and we go ahead and save that we head back over to our view here you can see now we have the text of this is testing the layout but we don't want to keep that within our application so let's go ahead and remove that here okay so here inside of our completed application i want to talk about the file routing for our movie app here so we're going to have two different routes one which you're seeing right now which is going to be our home route and then when we click on a specific movie we're going to get taken to a different route to go ahead and get more information on that specific movie so if i go ahead and click on get more info here you can see that the route is going to be slash movies and then we have the movie id here so this right here is going to change depending on whatever movie we go ahead and select so if i go ahead and click back here and we select a different movie such as free guy you can see that this id is different from the previous movie that we just went ahead and selected so let's go ahead and begin to implement the same file routing structure into our nux application here okay so let's navigate over to our pages folder here and extend this now this is where we're going to be creating our file routing or our file structure whatever you want to go ahead and call it so right now we have a file in here called index.view which is going to serve as our home route now the second route that we need to create is going to be slash movies and then slash the actual movie id so we don't know the movie id of all the movies that were possibly going to get so this is going to require a route param now inside of traditional view how you would go ahead and do this is you would go ahead and import your component inside of your router file then you'd go ahead and create your route and then specify your path and on the end of that path you would say you know it's a slash movies and then you'd say slash colon and then you specify the param such as in our case movie id now inside of nux it's actually a little bit more simpler than that route within traditional view now all we're going to do is we're going to go ahead and create a new folder so the route we want is let's see here movies so we're going to specify our folder of movies here and then i want to create a new file and what we need to do is an underscore here to specify a param and then we need to define that param so we're going to call this movie id and then dot view so this may not make a lot of sense to you but i do want to show you that this is exactly how you create a actual param on a route so if you want to actually see this visually we can go into our next folder here and we can go down to a router.js right here and you can see inside of our routes right here we have our array and then we have our route right here of movies slash colon movie id for our parameter okay so then you can see right below that we have our other one for our home which is our index okay so that is going to be our simple file structure here for our movie application all right so let's begin by creating our first component here which is going to be for our hero section so inside of our components folder right here let's go ahead and create a new file and we're going to call this hero dot view now for this section we are going to be using a background image which currently right now i have inside of a assets folder or the assets folder we created our default scss file and i have another folder that i created and it has the movie hero.jpg image now if you want to follow along with me i have this on the github repository so if we scroll over here you can navigate to the start of the repo here go to assets images moviehero.jpg and you can download this image and then just drag and drop it into your assets folder okay so moving back over to our component here let's go ahead and start by creating our view boilerplate here so i'm going to type in view we're going to do tab that's going to generate our template our script tag here and our style tag so first thing i want to go ahead and do here is replace the style tag with the lang of scss and also make this scoped and then let's go ahead and head to our template tag here to begin with our markup now what i want to do here is create a div with the class of hero now inside of here we're going to have our background image so let's go ahead and navigate to that so we're going to go out one folder here because currently we are in our components folder we want to go to the assets here so we're going to say dot and we'll say assets and then we'll say actually we got to go to images and then we'll do movie hero not gyro hero.jpg like that okay now below this we're going to have our text content so we're going to do what we call a text container so we're going to have a div with a class of text container now inside of this we're going to have another div with a class of text okay and then we're going to have our span here which is going to have the class of mini heading okay and we're going to have to say now streaming and then below this we're going to have our h1 now inside of here we're going to have a span here because we want to do some additional styling to a certain portion of our heading here so inside of the span i'm going to say now because we're going to make this a little bit of a thicker font type and then we're going to say streaming like that and then lastly what we're going to have here is our call to action button so we're going to do a anchor tag and for the href we're going to have a div within our index.view that's going to have an id of let's see here movie why did i do that still so we'll say movie dash grid okay so i'll go ahead and make this later but what it's going to do is when we click on this it's going to take us to that id that correlates with this right here okay and then what i want to do is i want to apply a class of button here which if you recall we have inside of our default.scss right here we have button and then we have button light so that's where i'm getting these styles from okay now inside of here for the actual content we're going to say view movies here okay and that's going to go ahead and do it for our markup so let's go ahead down to our export default here let's just give this component a name and we'll say hero here now to save some time because i don't want to focus too much on the styling for this uh this application and this little crash course i'm going to go ahead and copy and paste in the styling so what i'm going to do is head back over to the github repository here we're going to navigate to the fl uh main folder here or the main files we're gonna go to components we're gonna go to hero and we're gonna scroll down here and you can see we have this style so i'm gonna go ahead and copy all this styling in here and i'll go over briefly and show you exactly what we're doing so let's go ahead and grab all this and then we'll head back over to our application here and let's go ahead and paste this in so very easy what we're doing here we're giving the hero a fixed height and then we're adjusting it on a media query here so default it's 400 when we get to min with the 750 we're going to change it to 500. now what we have here on the after selector is we're doing a background overlay and we can go ahead and make this without any additional html by using after and then having this content right here and setting it to an empty string and then positioning an absolute and giving a height and width of 100 and then we're giving it a background color here of black with a 60 opacity okay and then we have our uh image styling right here which is width and height and then the object fit cover which will go ahead and make it fit and look a lot better without getting all scrunched up okay and then for our text container here we're positioning this absolute bringing it to the top width and height 100 display flex and then we're going to go ahead and push everything to the center here and then we have our actual text class here which we have uh the width of 100 percent max with the 1400 which is actually the same with as our container here if i go down uh so that way it's it's going to be equal with our container of all of our content that's why we kind of have this container and then this text right here and then we're going to center that or push it to the center with margin 0 auto and then we have some simple styling here for our mini heading just the font weight font size color and then you know a little bit of a media query here to change the size on bigger and smaller screens same thing for uh for h1 here just some you know base styles color font size font weight nothing too complex and i didn't want to go ahead and have to write all this out and waste time within this video okay so that's going to do it for our hero component here now what we want to do is we want to use this hero component inside of our index.view so what we can do is come back over to our index w component here now i do want to reference the documentation to show you exactly how important a component works inside of nux compared to traditional view it's actually really cool so if we go back over to the documentation here i pulled up the components documentation here so as you can see starting from version 2.13 i believe we're on 2.15 right now nux is going to auto import your components when used in your templates so you can see here to activate this feature we need to set components to true inside of our nux config so if we go back over to our project here and we go down to our next config by default when we created our next application this was already set to true so to import our component here it's as easy as literally coming inside of here and then saying our open bracket hero and our slash and our closing brackets so now if we head over to our application here and we go over to the movie app and we do a refresh here you should see now we have our hero component loaded into our home view okay so at this point within the video we're ready to begin working with our movie database api in order to work with this we need to request an api key now to request an api you need to create an account here on the moviedb.org it's really easy takes less than two minutes then all you have to do is confirm your account and then log in now once your login what you need to do is go up to where you have this icon right here click on it and then expand it and click on settings here now once you do this you're going to have this navigation menu here on the left and where we want to go ahead and click on is this api right here and then they have an option right here to request an api key so to generate a new api key we're going to go ahead and click here and then we're going to select that we are a developer and we're going to come all the way down here and accept the terms of you so i'll go ahead and click accept here and then what you need to do is you need to fill out this little application here by saying the application name which you're going to say you know a movie application and then for the application url all you could do is put in like a local host here or whatever the url you're going to be using it doesn't really necessarily matter you just gotta fill in a application url here and then give a brief summary and then your actual information here okay so once you do that you should go ahead and retrieve an api key within two to three minutes after submitting uh this form and then once you do that you will be ready to go ahead and work with the movie database api and continue on with this tutorial now assuming that you have your api key let's continue on here so first off what i want to do is make an api call to the movie database api to retrieve our data that we're going to be using to populate our home page here now i should mention that we are going to be using the options api for this tutorial now when nux releases the full support of the composition api i will do another video covering that but for now we're going to be using the options api okay so let's go ahead and first off create some data here so go ahead and open this up and we'll return this now what i want to do is create a array here and we'll just go ahead and set this to an empty array so we're going to have our movies array which is where we're going to store all of our movie data that we get returned from our api now next up what i want to go ahead and do is actually create our methods here so let's go ahead and create this okay and we are going to be using axios which we did install when we created our next application here so all i need to do is say import let's see here axios from and then we'll say axios like that because we're going to be using that within our function here so let's go ahead and create our function here so this is going to be called get movies okay and we are going to be using async and a weight here so we need to do is define a sync here before the function okay and then we'll go ahead and open up our function here so let's go ahead and start by creating a const here of data and we're going to set this equal to axios and we want to go ahead and get now the url that we want to go ahead and retrieve so let's go ahead over to our browser here so here is the documentation for the movie database api so the end point that we want to hit is going to be slash movie slash now plain so here are some options that we have to go ahead and attach to our api call such as the api key the language page and region so what we're going to be doing is we're going to pass in the language of en for english and we're also only going to be getting the first page which will have 20 results okay so what i'm going to do is i'm going to copy and paste in my api call from the finish project here and you can also find this if we go to the repository here we can go to the pages here into index and if we scroll down here you should be able to find that within the function right here so here you go now obviously this isn't the best way to go ahead and make an api call especially when using an api key but for this crash course and this application it's not going to be going to production so it's okay but normally you'd want to go ahead and hide your api api key and make this call on the back end but i usually always mention that when i do any videos that have an api key exposed on the front end here okay so here is the url we want to go ahead and call so let's go back over to our project here and let's go ahead and paste this in here okay and we actually don't need to do that we'll just do quotes here so you can see here we have our api so we're doing slash movie slash now playing we have our api key which is mine which i will be changing so don't try to use this one uh use your own and then we have our language and then we have us page one okay now what we want to do is we're gonna have another uh variable here called result and then we want to set this equal to a weight and say data here okay now next up what we want to do is let's just go ahead and log this out to the console here so we're going to say council dot log and we're going to say result here so if we head over to our application here let's go ahead and scroll back and if we go to movie app here and we go to look at our console we aren't going to see anything okay so if i go ahead and refresh this you can see that we don't have anything and ignore these errors are not really relevant okay it's just telling us from the es lint we shouldn't have any counsel log statements now you can see we don't have our info logged out to the console that is because we never went ahead and initiated or called our function to go ahead and get the movies now in traditional view what we would do is we would call this function inside of the created lifecycle hook now within nux it works a little bit differently we make that call within a custom hook within nux which is called fetch so here on the documentation for the fetch hook i did want to reference a few things that i think are really helpful features that come along with using the fetch hook here so first off this is a hook called during the server side rendering after the component instance is created and on the client when navigating okay so pretty uh pretty generic stuff there now the first helpful thing is that it exposes this fetch state here at the component level with the following properties so the first one is pending which we actually will use within this video which is going to return a boolean value which will allow us to display something while we are fetching the data if it's taking a little longer than normal so say maybe you're fetching something and someone has a poor internet connection instead of displaying nothing we'll display a little loading spinner if you'll let the user know that we're trying to get the data now a few other properties here that we're not going to use is air and time stamp but along with time stamp there is something useful which isn't really related the time stamp but i see it right here is called keep alive which you actually can store the fetches if you've already fetched that data before it won't go ahead and fetch them again if that makes sense and there's some things you can do to go ahead and customize that we're not going to go ahead and get into that but i will touch upon this keep alive property that we can go ahead and put on our next instance all right now there is a lot to data fetching in here and you can see if i scroll down this is what the hook looks like so we have a sync fetch and then we can go ahead and call our code within uh this right here okay and there is a lot to it we have some options down here which you really won't touch upon too much we have fetch on server fetch delay and some other things like that there is like i said a lot to this but we'll just be scratching the surface but the documentation here on nux is really good and if you want to go ahead and look into this a little bit more i highly recommend doing so as there is a lot of cool features that come along with data fetching here within nux so let's go ahead and implement the fetch hook into our application so right under our data let's do a line break here and create our fetch hook so we're going to say async here and we'll say fetch and then we'll open this up right here okay so now all we want to go ahead and do is call our function right here of get movie so we're going to say await this dot gets movies like that and that should go ahead and retrieve our data and since we're logging out to the console this result we should now see that result within our console so let's go ahead and head back over to our application here and let's go ahead and take a peek and you can see here that we are now getting something but if i do refresh it you'll see that it's going to look really odd because it's within this nux ssr so it doesn't really make it easy to read obviously and that's the one thing i don't like about this when logging things out to the console but as you can see we are able to now get our information and if i go ahead and maybe say results.data you'll probably be able to see the data within this so if i go and refresh it again you can see here that now it's actually okay we don't want that it's going to retrieve all the data so you can see here pages one and we have all our results here which is in an array and we have all the movie information that we're getting here okay so what we want to do now is we don't want to obviously log us out to the council we want to store all of the information for each movie inside of this movie's array here so what we're going to want to do is if you recall we can kind of see this not really that good we have this results array right here so you want to go ahead and iterate through this results array and push each one of these movie objects to our local movies array okay so to do this what we're going to do is we'll remove this console.log here and we'll say result.data.results [Music] and we're going to say 4 each here and then for each we'll go ahead and have a parameter movie here we'll go ahead and run our callback and then all we want to do is reference this dot movies and then we're going to push that movie here mo movie into uh so what we're going to do here is we're going to push each movie into our movies array alright so now after this if we do counsel dot log this dot movies we should see now we have all of our movies inside of our movies array so let's go ahead and look over here and if i do a refresh it's probably still going to be in that really ugly uh format here but we have all of our movies now inside of our movies array which we're going to be using to populate our home view here okay so let's begin to populate our home view here so first off what i want to do to keep things organized is add a comma right here and we'll just say hero now below this i'll add another comment and this is going to be for movies here now the structure is going to look like this we're going to have a div with a class of container here and also movies okay now what we want to do here is we're going to have a div and we're going to pass it the id here of movie grid now if you recall from our hero component right here we gave our anchor tag this id of movie grid so what's going to happen when a user clicks on that anchor tag it's going to take him down to this section right here within this movie grid div okay so hopefully that makes sense now what we want to do is we're also going to give this the class of movie grid and inside of here we're going to have a div with a class of movie now what we want to do is we want to create this div right here for each movie that we have inside of our movies right here so to do that we're going to use what they call a v4 loop on this div right here okay so we're going to say v4 and we're going to go ahead and wrap this and say movie and then do index here and then we're going to say in our movies array here now with view when you use a v4 loop you have to assign each one a unique key so we're going to go ahead and bind key here to our index now we could go ahead and use the movie id for this but i always tend to go ahead and default to using just the index here just my personal preference but all you have to do for this key is have a unique value for each one and this is you know usually the way i go ahead and uh do that all right so for the markup here first off what we want to do is we're going to have a div with the class of let's see here movie image here and we're going to have our image now this api returns the image not in a full url format so what i mean by that is if we head over to the browser here i have pulled up the configuration so you can see right here to build an image url you need three pieces of data you need the base url the size and the file path so we're going to go ahead and manually go ahead and insert this and then we'll dynamically go ahead and insert the file path here okay so i'm gonna go and copy this right here head back over and we're gonna do a bind here on our src value and what we're gonna do inside of here is we're going to do some interpolation so we're going to use some backticks and we're going to paste this in right here now what we want to do is there is a value inside of this object or our movie that we want to go ahead and assign it's going to be like the file path so it's called a poster path okay so we'll do our interpolation here so we'll do our money sign and our brackets and we're going to say move because that is the value we gave it here in our v4 loop so we're going to say movie and we're gonna say dot poster underscore path here okay now if you're wondering where we're getting these values from because it's not so easy to see within our actual application when we were council dot logging it out to the council what we can do is we can go down to the movies here and we were on the get now plane and you can see all of the results here so we have poster path we have adult and it kind of tells you what the response should be okay so this is where i'm getting all of these values from so if you're confused just go ahead and reference this documentation i'm going to take it kind of quick here because it doesn't really i guess matter in a sense of you know what exactly each one of these things do that's what we're going to be populating our application with all right so if you want to add anything to it feel free to go ahead and add some stuff to it you have all this information that we were getting returned right here okay so the next thing we want to do after our image is going to be our movie review here so what we're going to do is outside of the or sorry actually inside of this movie image we're going to go ahead and do a p a paragraph tag here with a class of review now the reason why we're doing this inside of the movie image div here is because we want to position these absolute to this image right here so if we go back over to our application once more our finished application you'll see that the review is this right here and then we'll have one more thing called the overview and these are going to be positioned inside of the image here okay so that's why we're writing these inside of this movie image div okay so we'll go ahead and actually not right there what we'll do here is we're going to go ahead and do some brackets here to go ahead and populate the data here and we're going to say movie dot vote underscore average and then i'll copy and paste this down here and then we'll say over view here okay and then we'll change this right here to movie overview like that okay and that's going to be it for our movie image div here so i'm going to close this up to save some space now the next thing we're going to have here is another div called info now inside here we're going to have a paragraph tag it's going to have the class of title and let's go ahead and see so what we're going to do here is the titles could be quite lengthy and we could have some issues with the actual uh titles running off the page or causing them to go to the next line causing some weird things from a ui perspective so what we're gonna do here is we're going to do uh first off we'll go ahead and open this up right here so we're gonna say movie dot title but we're also going to slice this so we only want it to be 25 uh characters or length long okay so we can say slice like this and we're gonna start with zero for the first uh character and go 25. now the issue with doing just this is if we wanted to say 0 25 and dot dot dot what happens if the title is less than 25 characters then we're going to have an issue where we have the full title and then dot dot dot that just wouldn't make sense so what we're gonna do is we're gonna have a span tag here let's go ahead and do this so we'll say span here and we only want to show the dot dot dot if movie dot title dot length l e n g t h here is greater than 25 right here then we will append this span right here okay so that's what we're going to do for the title all right now the next thing you want to do here is going to be the release date which i'm going to copy and paste in because it does uh take a little bit more time to write all this out and i'll go ahead and explain what we're doing here so let me go ahead and copy and paste this in here from the others finished project so what we're doing here is we have a paragraph tag of release here and then we have the texture of release but we need to convert the release date to a local actual date uh currently it's not in that format when we get a return from the api so to do that what we're doing is we're taking uh the value here and we're putting it into a new date and then we're running the method of two local string with the value here of en us and then we have some properties on here so we want the month long the day numeric and the year numeric okay now the last thing that i want to do is we're going to add our button to go to the actual uh the more information on the uh the the movie here okay so right below release here now within view three we would use something called a router link now within knuck they have their own custom tag we use which is called next link like this okay and this has an opening and a closing tag all right and it works very similar to the router so first off i want to classify this or i want to style it up as a button so we're going to go ahead and add the class a button and then button light here okay now it also accepts the two param here okay now what we're going to be doing is if we take a look we gave uh this right here the name of movie id dot view so if we go into the router here inside of our nux and we go down here you'll see that this has the name of movies.movie id now for me i always like to use the name when i'm going to a route uh instead of using the path it's just my personal preference you could go ahead and define the route but i always choose to use uh the actual path name okay so inside of here what we're going to say is we're going to have the name and then we want to go to movies dash movie id and we also want to send along the parameter because as you recall each one of these um these uh this this route is going to have that unique id of the movie so we'll go ahead and define params here okay and we gave the param if you recall the param value of movie id so we'll go ahead and say here movie id is going to equal movie dot cmo v ie dot id here okay and then what we want to pass inside of here is simply get more info like that okay so currently right now we have no styling which we'll add here in a minute but if we head over to our application we should see now that we're going to have a few of these uh all i should say all 20 of these populated here within our application so now when i click on get more info we should be taken to the movies route and then that movie id so let's go ahead and check this out here so if i do that you can see we're taken to the route of slash movies and then that movie id so one small mistake that i do want to correct here is within our image when i added the data into our url here i actually removed some of the url causing our image not to load so what i've done here is i've copied and pasted in the portion that i removed and if we save this and head back over to our application we should now see the image for each one of our movies here alright now to address the styling for our movies grid here like i mentioned before the main focus of this video is not to go ahead and do styling it's to go ahead and show you guys nux js so what i'm going to do is i'm going to head back over to the github repository and i'm going to copy and paste in the styling here for our movies and our movies grid classes okay so i have this already pre-selected here so if you are looking for this it is in the uh pages folder under index.view okay so if we head back over to our project here what we're going to do is we're going to open up our style tags because we don't have them here within this project just yet and we're going to copy and paste in this styling here so now if we head back over to our application we should see hopefully everything is styled up correctly and it isn't so we must have done something wrong here so movies movies grid did i name that movie grid instead of movies that's probably what i did yep so we're gonna actually change this class to movies grid to keep things consistent here okay so with that saved we should be able to head over now and see that everything is styled up correctly and there we go so everything appears to be working correctly if you scroll down here yeah okay so i'll go over the css like i normally do when i paste it in here it's nothing too complicated but let's start here or start off at the top so we have our movies class here which we just have a padding around everything 32 pixels top and bottom 16 pixels left and right and then for our movies grid here you can assume by the name of the class we're going to be using the grid here which we are we have a column gap of 32 pixels and a row gap of 64 pixels now by default on mobile we're going to have a one column grid here and then when we get up to 500 we're going to go to two columns 750 this should actually probably be three so i'll change it to three columns here and then when we get up to 1100 pixels we're gonna go to four now for the movie class itself this is nothing really too complex so we're just positioning relative display flex here flex direction column now the one thing i do want to highlight is actually this right here so when we hover over you can see we have this nice little overview box populate from the bottom now how we're doing this is if i come down here to the uh styling for the overview you can see i want to highlight this right here we have the translate y at a hundred percent which will take this off the page by 100 meaning nothing will be showing and then i have this transition right here of three seconds ease in out all and then what we're doing here is when we hover over the movie image itself we're gonna target the overview and we're gonna target the transform and translate y and we're gonna put that to zero so it goes back to its original position giving it that uh appearance and that you know that function you're seeing when we hover over it okay and then for image here nothing crazy just display block with 100 height 100 percent and then for the review which is going to be that thing in the top left hand corner right here how we're doing that is positioning in absolute top and left zero display flex giving it a width and height and you know aligning everything to the center here so pretty simple and basic stuff here not doing anything overly complicated and then we have the border radius to give it that kind of squared uh you know look and then this kind of roundness here on the bottom right so we're doing that with this border radius right here and that's pretty much it and then for the info just margin top auto and then some basic margin top color and font sizes here for the title the release and our button okay so that's going to go ahead and do it here for our movies grid now to wrap up our home page here we wanted to implement the ability to search for a movie now before we go ahead and do that i do want to address one or two quick issues here inside of our heroes so we have a format an error here we don't have any spaces between now and streaming and streaming i spelt that wrong so let's go ahead and update that here really quickly so inside of our hero component here let's go ahead and change this to streaming and then we'll go ahead and copy and paste this there spell that right and then to get the space between now and streaming let's just go ahead and add a space after the span here and that should go ahead and fix our issue here now for our search bar where we're going to put this is right above the first row of movies here so let's go ahead and work on the markup and styling for our search bar here okay so inside of our index.view here in between our hero and our movies i'm going to create a comment here for search and then we're going to create a new div with a class of container and also search here okay then we're going to have our input with the type of text and then we're going to have a placeholder here of search okay and then what we want to do is you want to hook up a data value to this input to capture the user's search term okay so to do that we need to come down to data inside of our return and then under our movies here we're going to go ahead and create a new data value called search input and set this equal to an empty string and then what we can do here to capture this is we can do a v model here on the input and we want to go ahead and say dot lazy and i'll explain why we're doing this a little bit it doesn't really make a difference now but what it's going to do is instead of updating on each keystroke it's going to update when the user enters and leaves the actual input itself okay so then we'll hook this up to search input now what we want to do is we're going to create a button right below this to go ahead and clear our search input okay so we'll go ahead and say clear search like that and then we'll go apply a few classes or a class to this of button and then we only want to show this button if there is actually content or characters within the input itself so let's go ahead and do a v show here and we only want to show this if the search input here does not equal an empty string okay and then that is going to do it for our markup here so we haven't added any styling that we head back over to our application we should now be left with this right here so for the styling as we've done with everything in this application we're going to head over to the github repository and we're going to copy this very minimal styling for our search input here okay and we'll head back over here and right above our movies class we'll go ahead and add our search here so all we're doing is explain that the class of searches flex giving it some padding 32 and 16 32 on top and bottom 16 left and right and for the input we're saying max with 350 pixels but take up 100 of the space if it is perhaps lower uh which it you know probably won't be then we're giving it some padding of 12 pixels on the top and bottom six on the left and right font size 14 border none and on focus you want to get rid of that nasty outline now on the button itself because we have the button and the uh the search input side by side by default we have a border radius on the button so you do want to go ahead and remove the top left and bottom left from that button so it looks like one long square okay so with that implemented if we head back over to our movie app here you can see that we now have this much better style of search input so now when i type a term you'll see that we should actually not so there it goes so once we're done so for example now if i go out of here and i leave the input it's going to disappear but now if i type an action here and i hit tab for example then our button is going to show so it's actually not updating on each keystroke it's updating once the user leaves the actual input here okay so hopefully that makes sense now since we had this i'll implement it what we want to do is when the user hits enter on the search input we want to query the movie database api for any movies that match our keyword here okay and then when we click on this clear search button we want to remove the actual uh search value here from our search input so let's go ahead and work on implementing that ability here into our movie application now the function of search for a movie is going to be very identical to the function we have here for getting our movies when we initially load in to the page here now to begin what i want to do is i want to create a new piece of data up here that's going to be called searched movies which is going to be equal to an empty array very similar to our movies area right here then what i want to do is come right below our get movies function right here and we're going to go ahead and create a new function so we'll say async here because we're going to be using async and await and we'll call this searched movies and we'll go ahead and open this up here so first off what we want to do is we're going to create a variable here to store our axios call so we're going to say const data equals axios dot get and then the api call or the route we're going to call is a little bit different from what we have right here so if we head back over to the movie database api i have pulled up the documentation to search for a movie so you can see right here this is the end point here for searching so it's slash search slash movie and then you have these query strings right here so you have your api key you have your language you have your page and then something new here is actually going to be a query which is going to be a string which is going to be the text that the user typed in the search input now to go ahead and get this uh full api url call let's head over to the github repository here and we can go into this uh function right here of search movies and just grab the entire url here okay so let's head back over to our application here now since we are going to be using interpolation we do need to use backticks because we are going to be inserting this search input data into this call right here so let's go ahead and paste that in and there we go so we have slash search slash movie our api key the language enus as the language and we have page one and then we have our query here which is going to be our search input that the user is typing in okay now after this what we want to do is we're going to say const result equals a weight data here and then the return value is going to be identical to what we have here in our get movie so if we can just copy and paste to save some time it's going to be the result here then we have data and then we have results so we have that same results array that we want to iterate through and then what we want to do instead of pushing the um the actual movie to this dot movies we want to push it to this dot searched movies here okay so let's go ahead and paste that now our function is complete here so how are we going to call this well what we want to do is on our input here we're going to say at and i believe we want key let me look here really quick we want at key up here and then we want to specifically look for the enter key here and then instead of calling the actual function here what we're going to do to take advantage of the features that nux has within this fetch hook right here we're going to recall the fetch hook so how you recall the fetch hook inside of your template here is by saying money sign fetch okay now the current problem we have with this method is that it's going to rerun this function right here which we don't want to have happen so we need to do a little bit of editing to our fetch hook here so let's go ahead and do that here now what we want to have happen is we want to run af check here so you want to say if this dot search input equals an empty string then what we want to do is you want to run this function right here okay now the reason why we're doing this is because on the initial voting of the page this hook is going to run and by default we have the set to an empty string so that means when this is an empty string the page has first loaded in so we want to go ahead and get all the movies okay and then we're going to return out of this here okay now we also want to have one other check here and we want to check if the fetch hook is ran and this dot search input doesn't equal an empty string and it actually does have value it does have characters in it then we want to run our new function here of this dot searched movies okay so hopefully that makes sense and the reason why we're using the fetch in here is because we can take advantage of the i believe it was called let me see here the um the fetch state pending and we can go ahead and initiate our loading icon much easier and have access to the fetch state properties if you want to go ahead and customize this application any further okay so that's how we're going to handle there may be better ways to do it but this is the way i chose to do it so we can take advantage of the fetch hook here now we can do some cleanup here within our fetch hook so initially i explicitly defined this if check here to show you what was going to happen if the search input was an empty string or if it was not an empty string so we actually don't need this if right here because if this is true then it's going to return out of the fetch hook therefore we are only really cluttering up our code with this if check right here so we can save two lines of code and get the same result by just doing this now one issue i just realized is we have searched movies here as a function and as a data value so we're actually going to get an error if we do that so what i want to do is we're going to change this to search movies and then we need to change this down here as well now what's going to happen if we actually search for a movie well right now nothing's going to happen we're not going to see anything visually because we haven't set up our markup or our template to go ahead and account for these new movies so first off let's go ahead and make sure everything's working by doing a council.log of this dot searched movies here so if we head back over to our application here and we open up our console we should right now probably have a few errors here so let's go ahead and clear that by doing a refresh here and we'll get some uh get some warnings here but don't go ahead and worry about that it's just some linter errors so let's go ahead and search for harry potter and let's go ahead and enter here and as you can see we're going to get the result here of 20 of our movies which is all working great but we want to display them here where we have our movies present so how do we go ahead and do that well what we need to do is we need to go within our project here and go into the markup so within this container all we're going to need to do is we're going to go ahead and make another uh we're going to copy and paste our movie grid here so what we want to do is we're going to say right here on the first div we want to say v we only want to show this v if so we're going to do a v if you only want to show this if a certain condition is true so we're going to say if search input does not equal an empty string okay and then inside of here what we want to do because at this point what we're saying here is if search input has characters then show this grid right here otherwise you want to show this okay now instead of iterating through our movies here we're going to go ahead and iterate through the data value down here of search to movies instead okay so let's go ahead and paste that in here i think i passed it up okay and that's all we need to go ahead and do okay and then we can go ahead and put a comment here and say searched movies like this to make it look a little more clear and then we can do another one right here and say now streaming like that now before we go ahead and test this we still need to make one more function which is going to be the function to clear our search so let's go ahead and create that function here really quick it's actually quite a easy function and all we're going to say within this function is we'll go right below the search movies here and we'll say clear search and what we're going to say in here is this dot search input is going to equal an empty string and then we're going to say this dot searched movies is equal to an empty array so we want to go ahead and reset the search values here okay so then what we want to do is we want to copy this function right here let's go ahead and just put a space there it's bothering me and then i'll come up to our button here and we'll say at click here and then we want to run that function each time we click this button okay so let's go ahead and test everything out and see if our search query function is working here so let's go ahead and refresh it here do we remove that console.log because we really don't need it in there anymore i don't believe we did let's go ahead and remove that like that there we go and then head back over to our application here let's close our console so fingers crossed if we type in harry potter here we should now see we have the harry potter results here inside of our home view and if i go ahead and clear the search we should have the initial results from the now plain api call now to improve the user experience within our application i want to insert a loading component whenever we are fetching data now at the moment we're on a pretty good connection so you're not really going to see much of a hiccup in actually receiving our data from a user experience perspective but if a user is on a slower connection it may take up to one to three seconds to retrieve that data and in that time we want to show them something saying that we're retrieving that data so for example here if i type in harry potter you'll see we have maybe like a second or maybe not even a second like a half a second where we don't have any results now that could be a lot longer if like i mentioned the internet connection is poorer all right so let's go ahead and work on implementing our loading component here so first off what i want to do is head back over to our project here and we're going to go ahead and create our components so let's go ahead and say new file here in our components folder and we're going to say loading dot view here okay and then we're going to go ahead and get our view boiler plate here and for the markup here it's actually quite simple we're going to have the div with the class of loading and then our span tag now initially when we created our default.scss i went ahead and put the loading styling in here so that was uh we would have easy access to it so what i'm going to do is we're going to copy and paste this loading class here and we're going to stick it with the component now we could keep it with the defaults scss but it just makes sense to have the styling here within the component itself and not outside of it okay so we'll say style that scss scoped here and we'll go ahead and paste that in here and we'll go ahead and save this as well now to use this like we have with our hero component all we need to do is first off just for uh organization we'll just go ahead and put a comment here and say loading and then we'll do loading like that and we should have that component loaded into our application okay now what we need to do here is we only want to show this right here so we're going to say v if the fetch state so we'll go ahead and do money sign fetch state dot pending is true otherwise we'll show this right here okay so now if we take a look at our application we should briefly see our loading component shown within the actual view here so if we do a quick refresh you probably won't see it because there isn't much time between the retrieving of data and you know displaying it so we'll go ahead and actually mimic that here in a second but let's go ahead and try searching up harry potter and see if we see it and we barely see it for a second i don't know if you were able to catch that there but what we can do is on the actual data fetching documentation here there is an option we can pass here called fetch delay which is an integer now what this is going to do is set the minimum executing time in milliseconds to avoid quick flashes like we're seeing and also to you know simulate a little bit of a longer loading time in our case where i want to show you this loading animation so let's go ahead and copy fetch delay here and go back to our application and we can actually just paste this right inside of the actual export default here as an option so we'll say fetch delay and let's go ahead and set this to 1 000 milliseconds here okay so within our movie app here you can see it's actually down there and i believe i am missing a little bit of styling here so yeah what we want to do is copy the loading class here go back to our application so that was on the github repository and let's go ahead and just paste this in here so we're altering the loading a little bit here we want it to align at the flex start if we go to the loading here it's actually aligned to the center here i believe so we want to have it at the very top and then what we're doing here is just giving it a little bit of a padding of on the top of 120 so let's go ahead and see how that looks now all right so let's go ahead and refresh here and we should see uh nothing happened because we already have the data it's working really quickly so if we search in harry potter here we should now see for one second we have our loading animation so you can see how that heavily is going to improve the user experience when the data is fetching now earlier on i did mention we were going to talk about this keep alive directive right here which what it does is saves fetch calls on pages you already visited which is a really cool feature and you can get pretty in depth with this so you can also pass a prop here to keep only 10 max you can use i think some stuff like the time stamp to say if it's been more than 30 seconds go ahead and re-fetch it anyway so you can get pretty in-depth with this which you're not going to get that far into it i just want to go ahead and you know scratch the surface of a little bit and just kind of implement into our application to show you how this can be very beneficial okay now to go ahead and demonstrate before we implement this what i want to do is head back over to our function here of get movies and what i want to do is log out to the console right here we're going to say hi okay so each time this function runs we should see that hi is logged out inside of our console okay so let's go back to our movie app here and it's going to load in here and let's go ahead and inspect this and you should see that when that function ran we see high here which is what we're looking for okay now let me show you what happens if we go to perhaps this route right here which you will get an error because we haven't defined anything within this template yet but if i go back here you can see that it's re-running the function to get the data from the api which in my opinion is not really needed because not much probably would have changed within you know 10 or 15 seconds but you know i guess you can make the case where if a user sat on the page for two hours you may want to go ahead and refresh it which in that case may come into play where you'd want to go ahead and use the time stamp property here on the fetch state than to go ahead and re-run fetch but like i said we're not going to get into it too in depth here we're just going to go ahead and scratch the surface of it now i want to show you what happens if we go ahead and add this this directive keep live on our next tag here okay so what i'm going to do is copy this right here and we're going to go back to our application and we want to go to our layouts here and on our default.view let's go ahead and add the keep a live directive here okay so now you've seen that each time we went from the route of our specific movie back to home it was running that function but now with this added on here since we already made that call on that page it's not going to rerun our function to make that api call which in a sense will go ahead and save you i perhaps money in the long run but for application i just wanted to show you in this crash course show you how this uh directive worked okay so now if we head back over to our movie app here and i refresh it so on refresh you should still see high because it's going to you know reach out to the api and run that function but now if i click on a movie here and go back you're going to see that we're not running that function so that is how the actual caching will work so that way you're not going to continually run functions or api calls for data that you already have now the final route that we need to populate is going to be our individual movie details so here inside of our movie id file let's begin with our view template or boilerplate so let's go ahead and generate that and inside of our template we're going to go ahead and create a div with the classes of container and also single movie okay now since we're going to be relying on data to populate this component let's go ahead and actually treat that data before we do any of our markup now before we do that let's also change this to style.scss scoped here okay now to go ahead and retrieve the data first off let's import axios here so we'll say import axios from axios and inside of our export default we'll go ahead and give this a name and we'll say single movie and then what we also want to do is we need to create some data here so go ahead and create data go ahead and put a comma there we'll return here and then all we want to do is create a data to hold our actual movie in our individual movie so we'll create a data value here of movie and we'll set this equal to null initially okay then what we want to do is we're going to create our method here to go ahead and retrieve our individual movie from the api so we'll go ahead and define our methods here and we're going to create a function with a sync and we'll call this get single movie and then what we want to do is we're going to create our data variable here so we'll say const data equals axios dot get now for this api call it's going to be once again a little different from what you save the urls and be a little bit different from the other two that we have done so if we head over to our browser here you can see i have the endpoint for this one which is going to require the movie id okay so what i'm going to do to save some time is i'm going to copy and paste the uh api uh url from the finished repo or a finished project you can also get it here inside of the github repository so let's head back to our application here and we're going to go and paste this in now uh since we're going to be using some interpolation here we need to go ahead and do some back tick so i made a mistake there so let's go ahead and do that now for the movie id this is actually going to be found inside of the actual url so how we can get that is by defining this dot route dot params dot id which actually that's what i named it in the initial project inside of this project i believe the param id was movie id but let me go ahead and double check here really quick yeah so it's movie id so we do need to update that and i'll go ahead and update inside of update that inside of the repo as well so that'll go ahead and populate the api call with the movie id and give us the correct movie information back okay then all we need to do is say cons result equals await data here and then what we want to do is we're going to say this dot movie is going to equal result dot data here okay now we don't have a way of calling this function so what we need to do is we're going to be using the fetch hook once again so let's go ahead and define our fetch hook here below data so we'll say async and we'll say fetch like this put our comma then all we want to do is await this dot get single movie like that now once again to show you uh the purpose of you know we're going to be using a loading animation here until we get the information back so we don't have that flicker we're going to add a fetch let's see here fetch delay of 1000 okay now what i also want to do in here is we're going to be actually calling our loading uh component within here so let's go ahead and define that as well so we'll say loading up here and then what we want to do is you want to only have the show so we'll say v if and then we're going to say fetch state dot pending is true otherwise we'll say v else right here that should go ahead and resolve that error so if i were to let's say just go inside of our div here and we say h1 and we go ahead and do let's say this we're going to redo this but i just want to show you that everything's working we'll say this dot movie dot title and i think we can actually just do movie dot title oh you know i'll keep it like that i think we do need to reference this i'm not 100 sure so now if we head back over to our application here and we close our console here and we refresh it now when we head over to let's say an individual movie here we should have let's see cannot read property pending of undefined let me take a look maybe i spelled something wrong here so it appears that i spelt the fetch hook wrong so let's go ahead and spell that right which is why we don't have access to fetch date because we aren't actually defining that hook in here so let's say fetch and do that and now let's go ahead and try this out uh again so let's head back to our initial page here and let's try a new movie we'll do suicide squad so we're going to say the loading animation for a brief second and there we go you're now seeing we are getting the suicide squad so that is all working correctly so let's go ahead and properly uh populate this route with the correct data so to begin let's remove this h1 we had for testing purposes as we aren't going to need it any longer now the first thing i want to have inside of here is a button to go back to our home page here so let's go ahead and create a next link like this and why does it do that and then we'll have our closing at nux link like that and inside of here we'll go ahead and pass it a class to style this up as a button and then also a to attribute here which is going to go navigate to the component with the name of index here okay and then for the button text we'll just have it say back like that now next up we're going to have another div here which is going to have all of the movie info so we'll say div with the class of movie info and inside of here the first thing we're going to have is our movie image so we'll have another div with the class of movie img here now this is going to be the same markup as the one we had within our home view here so i'm going to go ahead and copy this image tag right here to save some time and i'll paste it here inside of this movie image so the same path and we're going to reference the movie dot poster underscore path all right now underneath this div a movie image we're going to have another div that's going to have all of the movie information or the movie content so we're going to say movie and we'll do content here now the first thing we're going to have is the title so we're going to do an h1 here and we'll say title and then we'll pass in the data here of movie dot title all right then underneath this we're going to have several paragraph tags here to display some movie fact information okay so we're gonna have a paragraph tag here and we're gonna give it the class of movie fact and this one's also gonna have the class of tagline here so inside of here we're gonna have a span and it's gonna have the content or the label of tag line and we'll say colon here and then outside of here what we want to do is we're going to have some quotes and then we'll say we only need one there and then we'll have it say movie and then we have the value of tagline here okay then the next one we have is going to be another paragraph tag here with the class of movie fact and this one's going to be for the release date which once again we've already kind of had this format set up inside of our home view so what i'm going to do is we're going to come down here to this uh content inside of the release tag here i'm going to copy and we're going to paste this in the actual movie factor so i'm actually going to put inside of span we'll do released like this and then i'll copy and paste in the additional stuff right below that and we don't need to have that released right there okay so that should all work good now the next thing we have here is going to be the duration of the movie so what we want to do is we're going to say p dot movie fact here and then inside of here we're going to have another span you can see the common format here so we'll say duration and then outside of the span we'll go ahead and have our data here so it's going to be movie and the value of runtime here and then we'll say minutes and that doesn't need to be capitalized okay there we go and then we have two more the next one we have here is going to be the revenue okay so once again for this one to save some time it's going to be one of those things we have to convert to a local stream because the um the data that they give us is not properly formatted here so i'm going to head over to the finished repository and i'm going to grab this right here so let's go ahead and paste that in here and i'll show you what we're doing here so we have another paragraph tag uh with the class of movie fact and then we have our span of revenue and then we're taking the movie revenue data to give us and converting it to a local string enus and we're actually making this into uh currency so you can see styles currency and then the currency value is in us dollars here okay now the last one we have here is going to be for the overview so we'll give this a class of movie fact once more and then we'll have our span here per usual and we'll say over view like that and then we'll go ahead and insert our data here which is going to be movie dot over overview okay and that should go ahead and do it for the markup here now let's head over to the github repository to grab the styling for the individual movie details here and then that should wrap it up for our route so let's swipe over to the github repo here and we are inside of the pages folder we want to go inside of the movies folder here and we are going to select this file of id.view and i know in our project it's movieid.view but i did have some name changes in between the completed version here and the version i'm walking you through so i will update the repository to reflect the correct name here but nonetheless let's scroll down here inside of this file and grab the styling for our single movie it's actually really generic styling i will go over it really quick and we'll go ahead and paste this inside of our file here okay so for the entire single movie container we want the color to be white we're giving it a min height of 100 vh and we are displaying it as flex and we are justifying everything to the center and we have some padding around it of 32 on the top and bottom 16 on the left and right now for our button so that it doesn't take up the full width of the single movie container we are aligning it to the flex start to go ahead and make it only take up the amount of space that it needs based on the text okay now next up we have our movie info here so this is responsive so you can see here by default we're displaying it as flex and we're having in a column and then we're aligning everything to the center and we have a gap of 32 color white and then once we get to a min width of 800 pixels we're having it go to flex direction of row and aligning all the items to the start and then we have our image styling here which is pretty generic we're just limiting the height on the cover photo here and some different media query uh settings so you can see at 800 pixels max height 700 originally and anything below that 500 now for the movie content here just some font size and font weight on the h1 and for all the movie facts here margin top 12 font size of 20 line height 1.5 to give it a little bit more separation and then we have the span uh here with the font weight and text decoration to make the label stand out a little bit more and then for the tagline here just some simple font styling okay so that should go ahead and do it now if we save it we should have a fairly completed movie application here so let's go ahead and test everything out so within our application here let's scroll down and we'll do a refresh really quick and let's click on a movie to make sure everything is working properly so let's click on the first one here of suicide squad and if we do that we're going to get our loading animation and there we go we have our individual movie details here all styled out correctly so we have our back button we have the cover photo we have the title the tagline release duration revenue and overview now feel free to add any amount of information you want to this uh if we head over to the actual api you can see that there is quite a bit of information that you get returned that you could go ahead and populate here inside of this route right here and to show you that this is responsive we can go ahead and shrink this down here and it will go ahead and stack uh there we go and yeah so that is going to be our individual movie details so if i go ahead and put this back and we click on the back button here we should be returned to our home page here now throughout this video you may have noticed when we change pages or go from one page to another the transition between those two pages has been very smooth now if you haven't caught on to let me show you here so i click on the get more info here and we go to this new page you can see how the transition from the previous page to this new page here was very smooth and if we go ahead and click back here it does the same thing now the reason why this is happening is because we have set up some global transitions for our next application here so this may look a little familiar right here to you we actually copied and pasted this styling in our default style sheet when we went ahead and created that earlier on within the video so i'm not going to touch upon this too much but i did want to go ahead and mention this is how we are actually transitioning and making our pages transition very smoothly now if you go through the documentation here you can actually do transitions for each one of your pages you just got to go ahead and set that up within each one of your files here and it shows you how to do that within the documentation here i'm not going to cover this but i just wanted to go ahead and mention it so if we head over to our application you'll see that if we go over to the default.scss we have the same styling right here to go ahead and apply the smooth transitions that you're seeing that are occurring when we go from page to page now our application is completed but before we begin the process of setting it up to be deployed to heroku we're missing one important thing and that is seo optimization with our title and our metadata now to go ahead and set this it's actually very easy so if we head over to documentation they actually have a head method we can use directly inside each one of our pages to go ahead and set the title and all sorts of metadata and it looks like this right here in this example or this code snippet so we have our head method and then we return to the title and then we have a meta array and we have these objects here for each one of our meta objects that we want so we can have a description and then we can add the description of that page we could also have keywords and you know you can do all the stuff to properly seo optimize your application so let's go ahead and begin to set this up in our project so let's begin with our home page here so inside of our export default we need to define our head method here okay and then inside of here we want to go ahead and return and the first thing we want to define is going to be our page title so we'll say title here and the title for our home page is going to say movie app dash latest streaming movie info here okay so now if we head back over to our application and we do a refresh we should now see that the title inside of our tab says movie app latest streaming movie info so that looks a lot better than just having a generic movie app name we gave our project okay now let's go ahead and set up some meta information for this particular page so to do that we want to define our meta here with our array and then inside of here we're going to have an object now the first property we need to set here is hid which is going to be a unique identifier so for this particular meta information or this metadata we're going to be creating here we're going to do a description so we'll say description i spelled that right i think i did okay then the next field here we're going to have is the name of it so we're going to have the same thing here and we're going to say description okay and then the final thing we need here we need to define is the content okay now for this i'm going to go ahead and copy and paste it to save some time here and then there we go there is our first bit of metadata now i also want to create one more to show you we can do more than one so what i'll do is i'll just copy and duplicate this down one more time now instead of description what we're going to do here is we'll say keywords okay and then i'll go ahead and also paste in the keywords that we're using for this particular page now obviously this is not seo optimized i'm just doing this as an example so we have movies stream and streaming okay um not too uh not too uh seo optimized here but it does a trick to show you exactly how this works so if we save this and we head over to our application and we do a refresh once or twice here and if we go to inspect we should now see that metadata we just created inside of our head here so you can see we have the description here so it says get all the latest stream movies in theaters and online so that is good and then we also have the keywords right here so we have the data hid we have the name and we also have the content that we went ahead and defined such as movies stream and streaming so we have the title and metadata set for our home page here but when we go to select this button down here to get some additional information on a particular movie you can see that the title reverts back to movie app here so what i would like to do is i would like to have the title here inside of the tab be set to the name of the movie here so let's go ahead and begin to work on implementing that so here inside of our project what we need to do is come into our file here of movie id dot view and we'll go right below the name here and we'll create our head method okay and what we want to do here is actually use a comment on a period then we'll return here and then all we need to do is we're going to say title is going to be this dot movie dot title now to avoid any errors i did realize that this can't be set to null otherwise this won't work properly so what i'm going to do is i'm going to set this equal to an empty string so if you have this set to null this will not work properly and you will get an error when coming into your route so make sure you update the movie data value here to an empty string all right so now if we head back over to our application here and we go back and we do a refresh here and if we select let's do the jungle cruise here you should see that the title is now going to be jungle cruise and if you go select a different video here it should go ahead and correlate to the title of that particular movie so let's go ahead and do space jam here and you can see that now the title inside of our browser tab here is the title of the actual movie we have selected okay so our application is completed now the final thing that we need to do is deploy to heroku so let's head over to heroku and get started so first off what you need to do is have an account with heroku if you don't pause the video right now and go and create one it's free quick and very easy to do okay now assuming that you have your account what you want to do is you're going to go to the dashboard here and we're going to click on this button of new right here and we're going to go ahead and click on the option of create new app so we need to go ahead and give our app a name now feel free to name this anything you want but for my uh circumstance i'm going to go ahead and say yt movie app like that and then we're going to choose a region so for me it's going to be the united states okay so once we have all this information filled out we're going to go ahead and select create an app here and it's then going to take us to our project dashboard here so when it comes to deployment we have a few different methods we can use here so first off we have the heroku cli and then we have the ability to connect directly up to our github repository which is the way that i'm going to take in this video okay so this will require you to have your work you've been doing pushed up to a github repo now what i use to go ahead and push up my code to github is actually a application for mac called fork but there is a ton of other applications you can use to go ahead and push code up to github but i just want to go ahead and mention this is what i use okay so let's head back to heroku here and let's go ahead and select on the option of github here okay so i already have my account hooked up to github so if you don't have it hooked up you may need to log in and allow github 2 or heroku to access your github account okay so what we want to do is go ahead and search up a repository name so if we head over to github you can see the repository that we want to look for right now is called movie app nuxjs so let's go ahead and just search up movie and we'll say app here and we'll go ahead and hit search here and then you can see we have this repository right here and then all we need to do is connect this okay so you can see now we have connected our github repository to heroku here so how this works here is all we need to do is choose a branch to deploy to heroku and then click on this deploy branch button right here and since we only have one branch within our repository this makes things very easy so what we want to do is to deploy this main branch now before we do that i want to go ahead and go to the documentation for deploying on heroku so the one thing we need to do here is we need to go to the app settings inside of the heroku dashboard and we need to go ahead and do some configuring to these vars here and set the host to 0.0.0 otherwise this won't work okay so what i'm going to do is copy all these zeros right here and then we want to come over to the settings here and we want to reveal config right here and for the key we're going to say host and then for the value we're going to say 0.0.0.0 and we're going to go ahead and add that now with this set all we need to do is go back to deploy here and we're going to go ahead and deploy our branch here and as you can see what's going to happen right below here is going to start the build process for our application to be deployed to heroku so once this is done deploying we should be able to go ahead and go up to the top here and select on open app and fingers crossed see our application deployed on heroku all alright so some time has passed and i switched to the overview tab here within our project and as you can see we have this column right here or this little widget that tells us the latest activity within our project so as you can see the build has succeeded and our application was deployed so now if we click on this button here of open app we should see our deployed application here on heroku okay so that's going to go and wrap up our video here for our movie app with nux js if you guys did enjoy i would highly appreciate you guys leave it a like down below and if you guys are new to the channel be sure to subscribe for more content and i will see you guys in the next one take care [Music] you

Channel: John Komarnicki

Views: 2,488

Rating: 4.9766083 out of 5

Keywords: nuxtjs, nuxt js, nuxt, vue 3, vue, nuxt js tutorial, nuxtjs tutorial, nuxtjs crash course, nuxt js crash course, movies app, movie app, heroku tutorial, deploy app with heroku, vue js, web development 2021

Id: IzLIXyZkKAA

Length: 107min 44sec (6464 seconds)

Published: Thu Aug 26 2021