Nuxt JS Crash Course

hello everybody welcome back to the channel and welcome to one of the most comprehensive nux courses on youtube in this crash course we will be covering nux from zero to 100 so you can start watching this crash course as a complete beginner and you will be an expert in no time we're going to cover almost every single aspect of nux in great great detail and we're going to do that all while building a real application so actually let's just get right into it let's talk about the application and the problem that it solves so over here let's talk about the problem first so let's say we have a a homeowner so this is an individual and this is his home and let's say he's doing some sort of task outside that resulted in a very small fire so it resulted in a very small fire that he could probably put out by like just stomping on it but this homeowner he wants to do the responsible thing so he goes inside of his home he looks for a fire extinguisher and he can't find a fire extinguisher so what he does is okay well i can't find a fire extinguisher to put out this fire again he can just literally just stomp on it to get rid of the fire but again he wants to be responsible so what he does is he goes on either his his laptop or his phone in this case his phone and he goes on to our application and essentially what this application does is it allows us to rent fire extinguishers from neighboring individuals so what he does is he finds basically a fire extinguisher that's nearby and he's like okay awesome this is this is really cool so i'm going to rent it from this individual so what ends up happening is he goes to an individual over here that he rented the fire extinguisher from and he gets this fire extinguisher he gets this fire extinguisher and then he goes back to his home over here so he goes back to his home and then he is able to put out the fire because he has the fire extinguisher so this is the application that we are going to build and i actually already built it out over here essentially it is an airbnb for fire extinguishers so this is the application that we are going to build you can see here it's kind of a cool application you can click on a fire extinguisher that you want let's say you're interested in say this fire extinguisher you can look at it you can look at the details you can look at some of the reviews that we have over here you can rent it so you can rent it and then let's say i want to order this fire extinguisher so you can you can do that and then you can go to my items over here to see all the fire extinguishers that you rented so this is a great application and it encompasses almost every single part of nux so over here we got basically multiple pages we have dynamic pages if you go back right over here so you can see here uh we have pages with with kind of the dynamic kind of urls over here so here's we have 13 we have eight we also talk about how to kind of manage state with ux in this application we also talk about how to fetch data all this right here is fetched from a random api so if i were to refresh this you can see here this changes we also talk about how we can incorporate uh kind of view packages so this calendar right here is a view package that we can actually incorporate into our application and we are also going to cover a little bit about actually testing this application to make sure that if it's it's okay so this is the application that we will be building and again it will encompass pretty much everything that you really need to know about nux and so i i really went through a lot of detail and a lot of effort you know putting this application together and putting this crash course together and so i hope i hope kind of when you follow along you really get a great depth of understanding of nux now if you want to see the application as a whole feel free to go to my github page at harblade7 and then the nux crash course right over here and so over here you can kind of see the application at hole and uh most of the time i will be kind of referring back to this um this this repo over here for you to copy some styles associated with the components because sometimes i'm not gonna i don't want to dwell too much on the styles so for instance maybe i'm like hey just copy these styles over here and just put them into your application so that is the app i hope you guys are super excited as you can imagine this is a very very useful probably a multi-trillion dollar company to say the least so um so this is a really useful kind of application and i will see you guys in the next section before we start diving deep into creating our next application and coding in nux i think it is worthwhile to talk a little bit about what nux is and what it provides so i'm over here on the official next.js homepage and it says right in the title that nux is an intuitive view framework which is a little bit interesting because if you know vue and i do expect you to know a little bit of you if you're taking this crash course vue is already a framework that is built on top of javascript so it seems that nux is a framework that is built on top of another framework and that's exactly what it is and thus it's known as a higher level framework so it's a framework that is built on top of the vue.js framework so what it does is it provides us with the additional functionalities and a different additional utilities for developing that off the top view doesn't provide us with so to kind of illustrate this let's look at a quick diagram over here not this diagram this one right here so over here let's say we want to build a front end web application so we can build it in one of three ways we can either build it with plain old vanilla javascript or we can use a front-end framework like view react or angular or we can use a higher level framework like nux for vue or next for uh react now let's say you decide to go the javascript route well over here you're gonna be reinventing the wheel a lot and plus you're not gonna get a lot of the great configuration that you would get with a a front-end framework like view nux react triangular so essentially over here let's say we want to accomplish a task when we click a button we want to show an alert that says celebration time come on well the first thing that we would have to do is in javascript we would have to get that button so we would do something like document.getelementbyid and we would get uh you know whatever button has this id we would also have to add this id to the html and then we would add an event listener so you know on a click then we do some sort of alert celebration time come on so this seems like a lot of work to be quite honest and maybe it doesn't seem to you but with a bigger application especially with really advanced features this seems like a little bit too much work with the view all we have to do is within the html itself we just add this at click okay at click i want to do an alert called celebration time come on so this is a lot easier a lot actually better to visualize and so we can see you know which button really is is kind of corresponding to which event a lot easier than kind of this over here and now with nux it just so happens that accomplishing the same thing is by doing the same thing over here so it seems like okay well there's no benefit with something with view and nux well actually that's not true let's actually look at a another feature routing so let's say basically we want to do we have a website so i'm just going to call this lathe lathe.com and we have a website right and this website has multiple pages so we can do something like lathe and then dot com slash about and this would take us to a different page and this is routing over here and if you want to configure this with plain old javascript just look at the amount of code that we have to write again this is something that's pretty much an old website so it's kind of reinventing the wheel if we don't use a front-end framework and just kind of do this with plain old javascript just look at how much code that we have to write now let's say we decide to use view which is a front-end framework well you can see here that this is all the code that we have to write for kind of navigation so this is a lot simpler than what we had to do before with plain old javascript so now let's look at something like nux well this is what we have to do right here there's literally no code all you have to do is create a file with a specific name and so you can see here how nux can be a lot easier than you know to do certain things then view and obviously uh just vanilla javascript so nux provides us with additional functionalities that you don't get off the top with vue and so what are these functionalities i'll talk about these three quickly first and then i'll dive deep into this one so you know what does view do well it provides us with easy routing and you know we'll talk about this when with when we actually start coding our application out you'll actually see this more visually it provides us with an easy way to kind of manage our state so it does this with vue x very very easy very simple and also provides us with a good folder structure and best practice so nux is very stringent on the the folders and the folder names and things of that nature and that and that way actually we don't have to when we dive when we go from a nux application to a next application we already understand the folder structures whereas with vue you have kind of more flexibility and you know it might be good in some cases but most cases you know it might lead to bad practices or you know when going from one view application to another view application may be a little bit difficult because uh the the folder structures are a little bit different so so essentially this is this is really good kind of kind of because it kind of holds your hand and tells you hey this is how we want things done and this is how we see that all the folders should be at at the point at the moment in time so let's talk about the last thing over here the last benefit that nux provides well the last benefit that next provides is it allows us to create a universal web application and essentially what a universal web application is is an application that is both client-side rendered and server-side rendered and if this doesn't make any sense to you let me kind of dive deep into how vue renders our application in the uh in the browser so this is how view does it not how nux does it so vue uses client-side rendering by default to render our application to the browser so essentially what happens is let's say you go to your browser and you go to a particular website over here fireng.com so what what happens is okay you go to this website your browser says okay well we need some html for this particular domain so it makes a request to your web server saying hey i need to render some html for this specific website and so the server is like okay well fine that this is all fine and dandy here is an html file and then here is some javascript now if you look at the html file it's basically empty it's kind of boilerplate html and then all we have over here is a div in the body with an id of app so what your browser does is it renders this html and then you give it obviously the javascript and then your browser starts parsing through the javascript and in the javascript we're going to have the instructions that create the html elements in this particular page over here and so once you start parsing through the javascript you you kind of begin to render the html elements inside this ht html page over here and so this is known as client-side rendering because you're only giving the the the browser the bare bone html and then you're giving them the javascript and then with the javascript the browser the client is responsible for parsing the javascript and generating and rendering the appropriate html tags so this has its pros and benefits so let's kind of talk about some of the pros well one of the pros is that it gives it a more effect kind of a mobile app feel and the reason for this is is kind of transitioning from oops transitioning let's go back over here transitioning from kind of page to page and transitioning from ui element to ui element is really kind of smooth because we only have a single page and any transition all we have to do is just kind of manipulate the the html elements within our uh body over here so we're not really rendering new pages we're just manipulating the html elements within this single page so it gives the effect of course of kind of changing pages but really all it is is just a single page application so it gives it kind of that that clean kind of clean mobile app feel also another benefit is it reduces the load on the server so of course we have to make requests and we only really have to make an initial request on the on the uh kind of uh on the initial load just to get basically the javascript and the html now if a user decides to go to a different page well we don't have to make another request for another html uh another html file over here because we already have everything we have the javascript the javascript will just start manipulating the html so it reduces the load on the servers one quick benefit and it also allows for the caching of the static files so these files over here can also be cached so for next time they can load a lot faster and we don't even have to make that request to our server so what are some cons well it's worse for seo and let's talk about why over here so so the server is sending this kind of bare bone html and then our browser is rendering this empty html tag and the the amount and then obviously it gets it it gets the javascript and it has to parse the javascript to kind of render the html the appropriate html into this kind of single web page over here but this problem with this is this takes some time to do and web crawlers are not going to kind of wait for javascript to do this for us we're not going to wait us to render our html tags from javascript what they're going to do is they're going to crawl this website over here and they're going to see only this you're going to see this kind of empty html tags now some most web crawlers can kind of interpret javascript but they interpret html a lot better so it's always better to have kind of a full-on html website with with regards to web crawlers so web crawlers are going to kind of kind of crawl this over here and you're going to see this bare bone html tag or html document and obviously that's a lot worse for seo and so that's one thing it's worse for seo there's a high dependence to javascript so again we're depending really on javascript so let's say our browser doesn't even support script tags for some reason well we're kind of we can't really render our application and the last thing that we're going to talk about the last con is slow initial render so initially this is pretty slow to render because again uh there's there's we have to parse the javascript before we actually get any real html tags in our application and especially with let's say larger javascript files larger more complicated websites this can be pretty slow but then navigating through it we're only changing and manipulating the already existing html tags that might be that probably will be a lot faster so let's talk about so this was client-side rendering let's talk about another approach this is server-side rendering so in server-side rendering what happens is you go to a domain and then the browser requests some html and then what the server does is like okay well fine here's some html for the landing page and then you render this html and then it also then gives you the javascript now the html is going to be the full on html that is appropriate for that landing page so it's going to contain all the elements all the information all the data and so what the what happens is you render that html and then you get the javascript and then essentially your html or your website becomes functional so this is this you can imagine is pretty good for for seo now let's say you go to a different web page however then the kind of the process repeats then your browser is like okay well i need some html and then it gives the html to the browser and then obviously it gives the javascript so as you can imagine this has some pros and benefits it's obviously a pro is it's faster for seo or it's actually better for seo rather why is that better because we're getting all the html elements and all the information right off the gate we're getting our html right off the gate and now also it also provides with faster loading times so again we don't have to parse through the javascript to to kind of render our html we get our html right away so we get faster initial load sorry that's what i meant to faster initial load now what are some cons of this well one con is that it increases the load on the server so for every single time we go to a different web page we have to make a request to our server and so this this actually increases the load for our server and with big applications maybe a more production scale application this can be very uh costly uh and so so this this might not be as ideal and then over here we also increase latency and overall slow page rendering so yes the initial load might be faster because we get our html right away but you know continuously navigating through our site that might be a little bit slower overall because we always have to make a request to our server and then our server has to send back the application or the application html files whereas again with client-side rendering we're only just manipulating the html within the existing file that we sent back so overall it might be a little bit slower so what does nux do to kind of kind of circumvent this well it combines the client-side rendering with the server-side rendering to create a universal web application so we kind of get the best of both worlds and what nux does is it pre-renders the html on the server for the initial load and then afterwards it acts as a um a single page application and so this is great for seo and it's also great for kind of producing a fast a fast website so i hope that kind of makes sense there's obviously a lot more benefits than nux provides in these four and we're gonna see them throughout the crash course but these are kind of the four that i wanted to uh point out right over here so i hope this kind of crack this little uh this little crash course on what nux was was worthwhile in the next video and the next future videos we're actually going to be coding our next application so i'll see you then that we have a great understanding of what nux is let's actually create our first nox application and to do this we need to have node installed so if you don't have node installed already on your machine just go to this url over here and just click this button right here and just go through the installation process it's a relatively easily and you can check if you have node installed by going to your terminal so you can go to finder on on mac or you can just go to your command line on windows and just go over here and just simply wait for it to load once it does you can just do something like simply node dash v and you get the version of node now if you install node npm should be automatically installed as well and so you should see a version for npm so now we're going to use this terminal right over here to create our nux application so you can navigate to whatever directory that you want so i'm going to navigate to my youtube directory this is where i store all my my youtube tutorials so that's in my desktop so let's go in there and then youtube youtube and then i believe i have if i do ls i could see all my folders in here i have a nux uh folder let's do ls okay and then okay awesome so this is then i'm gonna go to my nux app and this is where i'm going to create my application so you can you can either do this in your desktop or whatever folder that you want this is kind of unnecessary but i just wanted to uh navigate to my my folder where i want to create my next application so to create a nux application we are going to do npx and this is available to you because you installed node and we're simply going to write mpx space create nux app so create dash nux dash app dash and so this is going to create our next application and then we have to specify a name for our next application i'm simply going to call it client because this is obviously a front-end application typically when you have an application you're working with a server any and you're working on creating a server and the front-end so typically a common convention is having the name client and then the name server so i'm just going to call this client and then i'm going to press enter and so we're going to get in a few seconds we should see a pop-up i hope this doesn't take too too long there we go so it is installing our application and so i don't have to kind of bore you guys because this might take a while i'm going to pause the video and i'll be right back once kind of this this installation process is done now that some of the installation is done nux is kind of prompting us with a bunch of questions that it needs to know so the first question is asking us is hey what is the project name and we already specified this in the create nux app command and we said that this was client we could change it if we want to but as you can see here by default if we just press enter it stays as client so we can just do an enter there and we can say client now we can also choose what programming language we want so we can either use typescript or javascript i highly recommend typescript for more production scale applications but for this i don't want to focus on typescript i'm just going to focus on javascript for this tutorial so i will say javascript for package manager you can either use a yarn or mpm if you have yarn feel free to uh pick yarn uh just for the sake of simplicity i'm going to pick mpm because i asked you guys to install node and everyone that installs node should have the npm package manager and then for ui frameworks we are not going to use any of these um a lot of these are good especially beautify maybe i'll have a course on that tailwind is great and essentially what this does is it allows us to kind of allows us to uh it kind of configures this for us so we don't have to kind of configure it for ourselves a bootstrap view might be a little bit interesting maybe i can use this for this course let's let's pick bootstrap view but for the most part i'm just going to be providing you with a bunch of css styling because this i don't want to focus on on kind of the the ui design of the course i really just want to um i just really just want to focus on the next part so i'll just be providing you with any css but let's let's use bootstrap view first first things like navigate nav bars and things of that nature so we'll we'll do that and then in terms of the nux module we're going to use axios to fetch pieces of data for linting we are going to use let's use eslint for testing we're going to use jest so this is a popular javascript testing framework and then for rendering mode we can either do single page application which is client-side rendering or universal and we talked about kind of the whole benefit of nux is that it can provide us with universal page rendering so we're just going to do that and then we can either do we can either host our application server side or we can host it statically i recommend server side if we have a um if we kind of have a more complex application that really interacts with a database uh static if we have more kind of like uh just a kind of bare bone html that we kind of want to show similarly in in for every single user we're going to use server for this case and then for development tools we are going to use uh json.config and then for continuous integration we are not going to do any github actions uh this is this this is kind of far beyond the scope of this application so we're going to do no continuous integration and then for version control we're going to use git of course and then that should be it so now we are just installing everything and again i will be right back once everything is done and dusted so it seems as though our application has ran successfully you can see here we have successfully created our project and we call this project client and so over here we have kind of the commands to actually getting started so let's actually quickly look at our directory and we can do this with a quick ls and we can see here that we have our client directory created so let's actually move into the client directory so we can do the cd client and i'm going to do a code dot to open up the uh the code in vs code that is the text editor of my choice i highly recommend it but if you don't use it that's that's fine as long as you're using a text editor now code dot was configured with vs code so it's something that might not work for you if it doesn't work for you just just open up vs code or whatever text editor that you use it just open up the client folder now if i were to do code dot you can see here that now i have my nux application and you can see here there's a lot of things going on there's a lot of folders a lot of uh different files and we're going to talk about these kind of the structure a little bit later but now for now let's actually just run our application so again we have cd client and then we can do npm run dev so we could do npm run dev and to kind of engage a little bit more you can actually look at the package.json to kind of look at all of the scripts and dependencies that we have installed you can see here that these are some of the dependencies that we've installed we installed just remember uh bootstrap as well and over here these are the scripts that we're running so with in development we are running dev which executes this command nux and behind the scenes nux does something and and later on we're going to be kind of playing around with all of these other ones so let's actually quickly go back over here are you interested in participating absolutely not i am not interested in participating so now you can see here that our application is is running and it says it's listening on port 3000 so if i were to copy this and then just go to port 3000 i hope i'm not running any other port on port 3000 so let's and as you can see here we get our next application so this is our nux application so congratulations we have created our first apple actually application and we are running it locally in development in the next lectures we're obviously going to start changing this up and creating our real application okay so let's start coding out our application and in this section we are going to be talking about nux components so to kind of describe it let's look at our end goal so obviously this is kind of our big application let's just look at the landing page let's just build that out for now and you can see here this is the landing page as a whole and then within this landing page we have multiple different components for instance this this page is made up of the navbar component and it's also made up of this component over here the hero component it's also made up of different cards so we got a card section over here we also got a card section over here and we have another card section right over here so it seems like this landing page is made up of multiple different components so how could we kind of code this out well there's a few approaches that we can take let's take a look at one approach and this is probably not the best approach to take especially if you're dealing with if you're working with a a front-end framework application so over here we have the page so this right here is the page itself so this is basically the whole thing over here and then within it basically within this page we can just write out the code for the hero so over here i don't know i just i missed the navbar but what we could do is we can basically write out the code for the hero into basically the page file and then over here we can also write out the code for kind of the large card display so we can show this and then we can also write out the code for the second large card display and similarly we can write out the code for the two small card displays so this is probably not the best approach and you probably know why this isn't the best approach well it's because we are very much repeating ourselves a lot for instance we're writing out the code over here and then we're writing out the code over here and you can see if you go back to this section over here these kind of these these two structures these two components are very very similar to one another in fact they're exactly the same but we just have different pieces of data different piece of the data similarly over here uh this component this kind of whole component over here and this whole component over here is very it's it's identical just with different pieces of data so for the titles different the pictures are different but ultimately they're really constructed the same and they behave the same way so this is probably not an ideal approach because essentially we're duplicating code all over the place and plus we're putting all our code into kind of one file and this can get very messy very quickly so i kind of say hey let's probably do this approach so instead what we'll do is we'll say okay well we'll put our code we'll put basically each component so for instance the fire extinguisher or the hero rather uh the this basically large card display and then this this kind of small card display into separate files so we'll put them into separate files and we'll put the code for them into that file and then in the page wherever we need it we would just basically refer we will refer to that file so essentially we will just basically take that file over here with all the code for the hero and just kind of refer hey we want it on the landing page and similarly over here we can basically get the code for the large card display and essentially say okay i want to display two of those in the landing page as well and then we can say okay similarly with the small card display we want to display two of those in the landing page and the landing page itself would be would essentially communicate the kind of different pieces of information that it wants to display so for instance right over here we can the landing page will say okay well for the first card component i want to display basically a title of this a snippet of this and these three cards over here but for the second one we want to display this this and that and this works perfectly because again these components behave the exact same way they're just displaying different pieces of information so the landing page is going to be responsible with passing down the appropriate pieces of information to whatever the component is and then the component will just display that information the way that it should and that way we can get a lot of reusable code now let's talk about another thing so it seems here okay we want this whole thing to be a component well within this component it seems like we have a lot of cards over here that behave exactly and look exactly the same way they look very similar and that's exactly true this right here can also be a component this right here can also be a component and this right here can also be a component and therefore we could end up and we we will end up with something like this so essentially we have the page and it has all these components over here and then within let's say the large card display we are going to have three different uh essentially large card components and the large card display component will essentially provide the information for what should be displayed in each individual component that basically lives within it and similarly for the small card display and so essentially we are going to be dealing with a lot of components and this allows for reusable code clean code and a lot of code abstraction which is really really great so again we have the page itself over here this itself is going to be component a component then within it we're going to have basically a a component of multiple cards and if we actually go back to our code over here you can see in nux nux actually provides us with ecomponent directory and in here we can place all of the components that we need and that we want to create and so over here you can see here that nux has this logo.view component and i'm actually on it right now and so what's interesting if we go to pages and we'll we'll discuss all these folders in great detail for now we're just going to focus on components if you go to pages and this is the index.view this is essentially what is being displayed over here you can see here that we have our template over here this is just basic view and you can see right here we are showcasing that logo component which is really interesting and so that's why we basically see this logo over here so this is a component now if i were to just comment this out you can see that that component is now in a second well if i refresh not going to be displayed and this is very very very powerful because we can do something like this if we want to so we can do something like logo logo logo let's say we want for some odd reason we want to display five logos we can do something like this and there we go we have five different logo components now probably to just even to even kind of have better code we can have something where we can just kind of iterate through we can do something like v4 we can just say i don't know logo in five for instance and we can then say so we can say something like let's provide it with a key this is just basic view stuff so i kind of expect you guys to know this and we can just basically do something like this so now if we iterate through that we get the exact same thing so you can imagine how powerful this can be if we have an array of data we can essentially iterate through that array and generate a component using that data and that's exactly what we will do so that was kind of just a kind of a conceptual overview let's actually go about creating the components uh for our actual application in the next section okay so let's begin with creating this hero component over here so far we have something like this which is obviously not ideal so let's go back to our code over here and i'm inside the index.view in the pages directory and we'll talk about the pages directory a little bit later but for now all you have to know is that this index.view corresponds to this landing page right over here and so the first thing i want to do is i just want to clean it all out so let's just get rid of all of these all this kind of boilerplate this just typical view or nux boilerplate and right now we should have nothing so what we want to do essentially is we want to display this component right over here inside of the landing page so how are we going to do this well again we can kind of code this out over here but again we're not going to want to do that so let's actually go to our components directory let's also delete this component this logo component because we don't need that anymore so let's just remove that to the trash let's also remove this readme to the trash this kind of explains what this directory is for essentially it's saying hey this is where you store all your vue.js components we know that already so we can just remove that and what we want to do is we want to create our first component and i'm just going to call this component over here the hero hero dot view so we can do that now to generate my uh kind of my uh view component i actually have an extension let's see what it is i think it's this one over here so we got the view js snippets very popular extension essentially if you install it what you can do now is you can just do something like view base and you can get a kind of a complete view component again i'm not going to kind of go over this because i'm assuming you know vue if you're taking this next course this is pretty kind of pretty basic view right over here and i also what i did was i also got rid of the lang sas this will break because we do not have node sas installed which is okay so this is this is kind of an extension that i recommend uh again all you have to do is the base and then if you don't have node sas installed just get rid of this another popular extension that i use is is this one right over here and what this does is it just provides us with a little bit of syntax highlighting which just makes the coding experience a lot better so so let's let's save this over here and let's actually start creating this component okay so what we're going to do is we are going to go over here and we're just going to give this a class and we're not going to worry about the styling too too much mainly because this is a knucks course and we are also using bootstrap so we can essentially give these things bootstrap classes again if if you're not too familiar with bootstrap that's that is okay just give the classes associated here so the actual website can look good so i'm going to give this a class of hero and i'm also going to give this a class of container which is a bootstrap class and essentially this is just going to kind of put our application within a container which is great and we're also going to put an h1 over here and this h1 is gonna have a class of uh header and in here we're gonna have basically our uh our our text over here you know find your fire extinguisher so we can have that right over here and then we can also have our snippet so we can do something like uh p dot snippet this is emmet over here so if we want to just create a p tag with a class of snippet this is kind of a quick shortcut so we can do p dot whatever our class name is and then press tab and we generate the appropriate html and then we can say well we want this right over here and so we can save that oops so save that and then we can also we can have our button and so the button is going to have a class of button which is something that we are going to kind of style ourselves and btn this is how we can get multiple classes we can just append dots over it so now we got button btn and we can say something like start looking so start looking now i highly suggest to go to my uh kind of uh my next repo over here go to components i have all my components go to hero and then just copy copy these styles over here that i did already these styles are going to correspond to these particular elements right over here and so we can save that in there and what's nice is because we have this scoped over here these styles will only apply to essentially the elements within this component so if we have another let's say element with snippet it's not going to apply to it because we have the scoped because this is only within this component so there we go we created our hero component now what we want to do is we want to essentially display that into our index uh desktop view file which is basically in our pages directory this is kind of the landing page over here so if we go back to our application we still kind of have nothing so how do we basically get this hero.view within this index dot view file over here if i say something like hello or hero or whatever we can see here that we have ultimately we get something like this over here so obviously we don't want that and let's actually get rid of these let's get rid of these styles too i forgot to do that in the last section so let's get rid of these styles so we don't have any default styles as well so we should get some something like hero right over here um but what we want to do is we want to get basically whatever uh basically essentially what we want to do is we want to get this code right over in here and how do we go about doing that well that's it's very very easy all we have to do is look at the name of the component so we look at the name of the component and kind of treat it as a self-wrapping html element so we can just say this and then that's it so if we actually go about saving this now we go to our application and we refresh we can see that we have this over here now the styling is a little bit off for some reason and the reason for that is because we are missing our wonderful image so let's uh quickly go over here uh the image is going to be again in my github page so we can go to assets we can go to svg we got the fire extinguisher.svg let's just copy that name real quick copy that down oops and then and then okay so let me kind of introduce a new kind of folder in this folder we can actually read the readme so it says here this is a directory that contains uncompiled assets such as less sas or javascript and also images so we can actually store our images in the assets uh folder now this this doesn't really do anything special but it's kind of best practice to store all your images and all your svgs and some of your javascript in the assets folder so what i'm going to do is i'm going to create that fire extinguisher.svg and i'm just going to go to go over here press oops i wonder if i can see the code of this i believe we can do something like this okay there we go so we can just copy kind of copy this whole thing and then just paste it in here okay and so now what we'll do is we'll go back to our hero and then we will uh essentially what we'll do is we'll actually display we'll put all this in a container of its own so this is going to contain all the text so we'll just say text container and we'll paste that in there and then we are also going to have our image and we're going to give this a class of image and in here we're going to kind of dynamically uh generate this or we're just going to provide the the file path to this svg over here so we can do that by saying okay in the root directory so we can kind of correspond that with this so we can say okay go to the root directory which is right over here the very top and we want you to look at the assets so the assets and then inside the assets we want the queue to look at the svg folder which i haven't created actually so let's let's create that so let's do s sorry that was a folder so let's create the svg folder and let's put our fire extinguisher right in there uh and then and then what we'll say is okay well inside the svg folder we want the fire extinguisher dot svg okay and we can give this a alt a fire extinguisher maybe like a logo or whatever it doesn't doesn't really matter so we can actually save this now and if we go back to our application there we go we have our first component and this is terrific this is terrific now this seems a little bit magical because like we're not importing this component from anywhere we're just literally just just defining the name of it now if i were to change the name it would have no idea what the component is and it would just kind of fail and flop but if i go back over here it seems like it works perfectly fine so if you refresh it seems it seems to work again if i if i kind of rename this to like hello and i were to refresh you can see that the component is gone completely gone so so the name of the component is very important the name of the component it has to be associated exactly the same as what we called it over here so we can say hero now this seems a little bit magical because uh we're not importing anything we're not doing anything well nux by default actually auto imports which is actually terrific so if you go to our uh package uh sorry not our package.json if you go to our nux config what we can see here is this this kind of line over here we can say auto import components and reset that to true now if we set this to false essentially this this wouldn't work over here we wouldn't get our components now because we we messed around with the enox dot config it kind of has this little weird delay but see we don't get anything now if we set this back to true what nox is going to do by default is essentially watch for the file names and if we have any sort of component that doesn't really match a like a regular html element what we can do is it'll just look at the component directory over here see if there's a matching file name and that is the component that it will auto import and this is so so helpful it's better than just kind of auto it's just manually importing it it seems it's it's it makes the development process a lot easier so if i were to refresh this we get our component so this is awesome this is great this was a a very big step now let's actually go about creating this component and this component is a little bit more uh more nuanced and a little bit more difficult because it is well for one a component that's gonna have we're gonna have to pass in the information within it so it seems like that and it's gonna be a component that houses other components so we'll see how we'll do this uh in the next section we're creating this component over here the large card display component so let's actually go about doing that right now let's get rid of all these directories right here just to clean things up and so when we want to create a component we're always going to deal with the component directory so we're going to call this component over here large card display large card display dot view and then we are going to do a quick v base to get our basic view template we're going to get rid of sas lang or lang sas rather and now over here we're going to create this component now this component contains a header over here some sort of snippet and then other card components so for now let's actually just deal with these kind of informations we'll we'll deal with the cards a little bit later so let's give this a class of container and then let's also create give this an h4 this is going to be the header itself so let's just copy this for now now what we're doing here is we're hard coding this information is which which is not what we want to do ultimately but we'll change this a little bit later once we kind of get this component rolling so let's give it a class of a header and then we'll also give this a a a paragraph which of snippet this is gonna have a class of snippet and we're also going to just kind of hard code this in right over here now i'll show you obviously why this is not ideal this is not what we want over here and then we'll also create another div where we'll have all our cards and we'll give this a class of card container and we won't insert any cards in there as of yet let's just quickly insert any styles that we have for that i created manually for this so we can just quickly copy this right over here and then we can just paste that in oops not into the script tag but rather in the style tag and we can tabulate this a little bit better and now we have this component right over here so if i want to showcase that in our landing page we would go to our index.view and then we would give that component with the exact same name so we can just say the uh large uh large not lard large card display and if we were to render this we would go over here we can actually see that now this is of course not ideal because we are hard coding the data in here which is which is not what we want to do because if we hardcode the data in there let's say we want to basically display another large card table or large card display which is exactly like this but just with different pieces of information by hard-coding that kind of data in there we're really limiting ourselves so we're really limiting ourselves with what we can do so instead what we want to do is we want basically this landing page right over here to just kind of pass down the information that we want displayed to these components now how does the landing page get that information now typically the landing page will get that information from some sort of external api and we're going to be talking about how we can fetch data from an external api a little bit later in the course but for now what we're going to do is we're just simply going to just fetch the data from somewhere in our application so again usually what what happens is it fetches the data from like some external api and it renders that data essentially to the landing page by essentially just kind of piecing every piece of information and giving it to a particular prop now instead again what we're going to do in our section we're just going to hard code some some information some data into our assets directory right over here so what we can do is we can go back to my uh nux crash course and let's go to uh assets and over here i have a data.js file and this is just a bunch of information about the large card section now this this is very probably very similar to the type of information that you will get from an external api so if you're creating your own server the information can look exactly like this kind of like in a json format again this is a nux crash course it's not i don't want to create a whole server for this okay so what i'm going to do is i'm just going to put it into its own little uh file over here so over here i have some some kind of information about the large car car display and then also some information about the small car display for now all i want to do is i'll just copy this over here and i'll go to assets and i'll create a data.js file and i'll just paste that information in there so you can see here this is an array of two objects right now so we have an object that contains all of the information regarding a single large card display component so it has the title it has the snippet and it has its associated cards and all the information associated with these cards so this whole thing can can essentially be passed down to a large card display component and then within that large card display component we can start passing down this information for each card component but we'll get to that a little bit later so again this is probably not how it would be in a real production application this this will be fetched from some external api which we will look into a little bit later how to fetch data but i don't want to create a server for this application so we'll just store it right over here in the data.js file so let's go back to our nux dot view file right over here and let's just import that data in so right in the script tag what we'll do is we'll say we want to import and we'll say we'll import from uh this is going to be from at assets so we're doing at so this is kind of another way of saying that hey this is in the root directory so go to the root directory and then from the root directory i want you to look at the assets folder and then at assets and then data dot js and then from there we want to get the large card sections because this is what i call the right over here i'm exporting large call card sections and again we have the id title snippet and all the card information so now we have that data so what we could do is we can just put it into our own uh data right over here so this is just basic view so we can just create data and then we can do return so essentially what we're doing is we're just putting it into our own view state and then i will just say uh large card info and we're gonna associate the large card info state with all the data that is the large card sections so now what we can do is uh we can essentially pass this information as props so we can basically iterate through this array so remember we have two objects over here and then for each object we can pass this information into the component into basically one individual component and then it can use that information to render whatever data that we want so that's exactly what we'll do right over here so essentially now you can do something like this so we can just say large large card display and then we'll do a v4 this is just basic view this is just how we kind of iterate through multiple an array and render multiple elements in view so we can do v4 and then we can say okay well card info in large card info this is our state now it's yelling at us because we need a key and we're going to dynamically generate this key with card info dot id now remember each each kind of object has its id and this is going to be a unique identifier and then for the state itself oops i put a comma in there and then for the state itself we're going to say that this is we're going to call this cards section so this is a card section and we're going to dynamically insert the card info so now each each each large card display is going to contain this this prop so what we're going to do now because we have essentially two objects in our array we're going to generate two large card displays and then for each large card display what we are going to do is going to pass in whatever the associated object is so for the first object we're going to pass in for the first component we're going to pass in this object over here which is going to contain this information so it's going to render this information and then for the second component it's going to render this information because that's the information that we pass in so if i were to save this and go back well nothing really changes we still get two components which is interesting because because even though we kind of sort of defined one over here because we have two elements in our array we rendered two of these but obviously nothing changes because what we did was we hard coded the data in here so instead what we want to do is we want to essentially get the information that we passed in from props and render that kind of dynamically in here and so how do we do that well we go to our large card display component in the export we define what our prop is so our prop in this case we do that by defining props again this is just basic view so when array of all the props that are being passed in uh the prop that we passed into our component is cards section so card section so remember that's that's the prop that we passed into this view component and so now what we can say is we can instead of kind of uh hard coding this we can just say well cards section dot title and so over here remember we have a title right over here and similarly we can do card section dot it okay so now if we go back over here you can see that now we have dynamic code which is really really cool so now what we're doing is we're kind of missing the the important piece you want to showcase the cards now this is going to be another piece another component right over here so let's actually create that component again let's go to our components directory and then let's create a large card dot view that's what we'll call it and then we're going to do a simple v base get rid of this sas lang and now we're going to create this component again let's quickly go to my github page so we can just quickly get these styles i don't want to worry about the styles all too much so let's just copy those styles in awesome and so now let's just kind of uh quickly construct this component so we're going to give this a class of card and uh we are we're going to give this an image and essentially this image is also going to contain a class called image and then we are also going to give this a header so the header is basically this right over here and then this header we're going to call it well header and then for our snippet we'll we'll create a p tag that is a snippet so that is that right there so now what we need to do is essentially uh for for each card display remember for each card display we have another array of all the cards associated with it so now what we have to do is we have to iterate through this card cards array in our large card display and then for each element within that array we are going to render a large card and pass in the appropriate information as a prop so that's exactly what we are going to do right now so right over here in our cards container we are going to create the large card so this is going to be large card and then we are going to just do a quick v4 and so we we're gonna say okay well for each card in the cards uh section dot cards so remember we have uh this right over here this is the cards array so we want to iterate through that and then we of course always have to give it a key so we'll just say card dot id and then we'll also pass in the prop and we're going to call the prop just card and it's going to be a card so now we're iterating through essentially each card right over here and we're passing in for each component we're passing in this information so for component one we're passing in this for component two we're passing in this and for component 3 we're passing in this awesome and so over here let's just define what our props are so we can do that with props and we can say that our props is called card not cards rather cool so we can save this and now what we can do is we can dynamically uh render our data so let's go about doing that right now let's just do the easy ones first so we'll say uh card dot title similarly over here let's do card dot snippet and then over here we're going to kind of dynamically render this we're not going to hard code this in so we just put a colon right over here and we can just put an alt of e standing for fire extinguisher that's probably not best practice but uh it's not a course about um uh what is this called again uh accessibility so it's this is good for accessibility but i'm not gonna focus on that because it's a nux crash course and so over here we're going to say well we want to require in a particular image now the images so all these images right over here i don't want you guys to kind of just go look for a bunch of images so what i actually suggest you doing is actually cloning my repo all together and then when you go to assets i have a bunch of fire extinguisher images so i i've scoured the web i found a bunch of free ones these free ones do have watermarks so uh some of them don't but some of them do but i've scoured the web so you can just clone it and then just take this image uh directory and just place it into your own application okay so it shouldn't be so i don't want you guys to kind of scour the web for this so just just just clone my repo so you can do that fairly easily by just going to the root directory and just cloning it right over here and if that if that's too much maybe i'll figure out a way to just have you guys download the images directly maybe i'll have a link in the description uh but if i don't then again just just just i clone the repo and get the images so so okay so over here what we want to do is we want to require in the images so let's just put the template literals so we'll say okay we'll go to the root directory go to the assets folder go to the images folder and then over here well whatever the prop that was passed in so we have basically card dot image and we can also kind of safeguard we can say okay well if if card.image doesn't exist we'll just do uh just just pass in um a file name that we know we have which is uh fireextinguisher1.jpg so what is this doing over here well essentially it's saying okay well the source is going to be in the root directory the images and then whatever the file name that was passed in as a prop so over here we have a bunch of uh kind of image information that is associated with the file names over here of actual images so we can save this now and if we go back to our application you can see here that we get this right over here which is really handy so this is this is really really cool so now we what we did was we created um we created a component that also has other components and we passed down props and you can actually see how reusable this is so we can actually reuse this in other pages this is the complete website if you go to products you can see here we actually end up reusing a lot of these components as well so we can actually reuse them in different pages just pass in whatever information that we need so that is that in the next section we are going to be doing this this is a very very similar process so i highly suggest that you guys actually kind of tackle this on your own so just try to tackle this on your own you can copy the styles but try to do it on your own um and then in the next section i'm just going to quickly quickly do it okay i'll see you guys there okay so let's go about building this component over here and let's also build the navbar component and that should kind of conclude all the components in the landing page now this uh kind of component over here is going to be very similar if not identical to this just the html and styling might be a little bit different but kind of this we're going to be taking the same approach this whole thing is going to be a component and within it we're going to have multiple card components now the nav bar is going to be just another kind of stationary component like we have over here with the hero so let's go about creating this and we're going to do this relatively quickly so let's go over here and so the first thing we're going to do is we are going to create a small card display so let's actually go to our component page over here component directory we're going to call this small card display dot view and then we're going to have our regular view template let's get rid of this and essentially what we're going to do is this this is going to be kind of the small card over here so we're just going to give this a class of container this is just a bootstrap uh bootstrap class allows us to kind of contain everything kind of in the middle right here of our application uh let's also have a h3 with a class of header and we'll dynamically pass in the data and also we'll have similarly for what we had before just a card container now also let's go about creating our card now so we'll we'll do this as well so let's go over here and now let us create we're going to call this small card so small card dot view and so let's go about doing that let's save this let's do another v bass real quick i'm gonna try to do this as quick as possible because this is very similar to what we've done before so i don't want to dwell too too much on it essentially this is going to be a very simple card we're not going to have any text or anything so really all we're going to have is just an image so an image tag and this image tag we're going to give it a class of image so let's quickly go to my github and just grab the css styles for each component so let's go to the small card display just grab the styles so we don't have to kind of code them out ourselves we'll go over here and we'll put that in there and similarly for the small uh for the small card we'll we'll just grab the styles and we will put in here okay cool so uh let me just double check small card absolutely that's correct okay so now what is the next step well okay so now what we want to do is essentially we want to render this small card display in our kind of landing page and what we have to do then is we have to basically get the data from the database which we don't have at the moment and iterate through that and for each kind of element we're going to render a small card display now again if you go to my github page and then you go to the assets and then the data you can see here that right below the large card section we have the small card section and this contains fewer data or i guess fewer pieces of information per element kind of in that graphql standpoint you have to know that but uh we're just touching what we need in here so we have basically we have the title when we have an image and we have an id which is basically what we need we just need this title we need an image and a unique identifier for each element all right so let us uh just paste that in here so we're going to paste that in there and we're going to do pretty much the same thing so we're gonna go to our uh directory right over here and this aria was called let me double check this was called small card sections and so what we're gonna do now is we're just basically going to copy that right in there and then we're going to put it into our state basically the state of our component we're going to call this basically the same thing small card sections and then we can also have over here small card sections now in this case the uh the key and the value are exactly the same so we actually don't have to provide the value if we just leave it as the key itself it kind of interprets it as the key and the value being exactly the same awesome all right so let's uh auto import the small card so we'll do small card display so we're gonna auto import that in and we're just gonna do kind of a v4 let's actually copy this because it's going to be very very similar so let's do v4 we're going to iterate through every single element in this array right over here which is in our data and we're going to basically call this card info and similarly we're going to have card section card info we're going to just leave that the same we're just going to iterate through a different array so now if we actually paste this and we go back uh we don't see particularly any changes and that's because there's literally nothing here but if i were to put like a text here i can say something like hi we should see high twice which is exactly what we see and the reason why we see high twice is because we have two elements in this array so we got this one element over here that contains a lot of elements within it and then we have this other element over here so now basically what we want to do is we want to essentially pass well we want to pass well we already did pass the data and we just want to render it appropriately in our small card display so we can say here that well we have props in here and this this prop i believe it was called the card section which is what we did for the last one and then we can say okay well in the header i want this to be cards section dot title so we can save that and we should be able to see the titles cool all right so now let's do the same thing but let's render the images this time so we already created our small image small card component so now what we are going to do is just um auto import it and now and then we're going to do just a quick v4 so remember in our data we have a for each element we have another basically uh kind of uh property over here that contains a bunch of card information so we can iterate through that so for we can say for each card in card sections dot card and then we can say the key is card dot and we can also say that we want to pass this information as a prop so we want to pass the card itself as a prop and then over here we can say okay well we accept this prop this is this is the props that we have we have a card prop and then we can essentially uh kind of dynamically render that over here so in a very similar fashion to what we had in our large card actually let's just completely copy it because it's going to be very very similar if if not completely identical actually it's going to be completely identical and we can just have f e right over here just as an alt fire extinguisher again probably not a great alt for accessibility but this is an accessibility course uh cool so this completely fails for some odd reason let's see why so it says cannot read property card of undefined and if we go back to the small section it seems as though cannot read property card of undefined card section what do we pass into our index.view okay so it seems as though i call this card sections but we passed it in as card section so if we go to uh you can see here in our props we're accepting cards section okay that's that's fine but over here it's card section so this is this isn't this is what what is breaking things so if i were to just change that uh everything should be fine and dandy so if i were to refresh we still don't get our cards for some reason okay so let's see why that is okay well we got our card section card card i wonder why this is failing it's a little interesting actually i will be right back once i figure out what fails okay so i figured out what the issue was it's actually card section dot cards not dot card as you can see over here and that's why nothing was rendering so if we go over here let's just change this to cards and if we actually save this we should get our images now our images are a little bit old jumbled up and kind of ugly not how we want them and that's because we didn't use this class over here so we can just put that over here at the kind of root element we can just say card container and awesome okay so it seems like we're pretty much done all is left is the nav bar so let's quickly build that out right now it's not gonna take very long at all so we're just gonna do nav we're gonna call this nav dot view and then we're going to do a quick view base we're going to get rid of this save that out and essentially for this i'm not going to kind of build this nav bar component from scratch i'm going to use bootstrap so again bootstrap is a ui library uh i kind of didn't sort of explain this when we uh set up our application we set it up with bootstrap and so essentially uh nux on its own installed the bootstrap package and bootstrap view as well and it kind of configured that already in our nux config so we did the did we could have done this manually but it did it for us right over here you can see that it configured bootstrap for us so we get all the functionalities of bootstrap because we did that uh kind of right from the get-go so let's actually go here and what i'll quickly do is i'll just uh let's just use this kind of nav bar over here let's just copy this and then let's go over here let's just paste that in there and let's just quickly tabulate it a little bit and so and then if we go to let's just get rid of all these it's getting a little messy let's get rid of all these components let's just go back to our landing page and right in our landing page let's put the nav component auto import the nav component and so if we go over here we should see this nav it's kind of silly the way that it looks we actually have to uh put it outside of the container so what we can do is we can just add another div put the nav in there and we can have that dev be at the very end later on we'll we'll find actually a better place to add the nav for now we'll just write add it right on the page that we need it on so let's do that let's just do that for tabulation purposes and there we go cool so now it's outside of the container so let's just do uh kind of a little bit of work on this nap just to make it look kind of like what we had over here so uh there's quite a bit on this nav that we don't need for instance we don't need this form we can completely get rid of that so let's get rid of this this form right here um let's get rid of this ui element matter of fact you know what it might be actually better to just straight up copy my nav component um in my github let's do that instead so let's go to components nav let's get basically some of this and let's get let's paste that in there and essentially we'll just we'll just copy this right over here and just copy in that this is just basically the uh the nav bar that we have uh i have these nux links we'll just quickly change those to anchor tags uh we'll talk about those a little bit later and we'll change this to href so anywhere where we have a nux link we'll just change that to an anchor tag it's kind of a little bit of a spoiler um but yeah we'll talk about that a little bit later so let us and we'll change it to to an href and we'll change this to also to an href cool so if we go over here back to our application we have basically our landing page created so we learned quite a bit about components but now in the next step we're going to be talking about how we can create different pages so right now as you can see we have our landing page but now we want to also create multiple pages for instance we have a product page that uses basically a lot of the same components and then we have e my item page and also when we click on a particular product so let's say we click on this product it actually takes us to the product slash whatever that product's ideas and we get basically this over here so we have to figure out how we can create these pages so let's create these pages and the components associated with them as well in the very next section all right my wonderful friends so far we have created our landing page but this is one of many pages that is within the final version of our application as you can see here we have our landing page but we also have a products page we also have a my items page and then we also have basically individual pages that we can go to you know product slash whatever that page id is so we have multiple pages that we have to create for our application right now all we have is one and all we really know is that is it is associated with this index.view file and so in this section we are going to actually explore how we can create multiple pages in our nux application all right so how do we do this well let's actually get rid of this and we'll leave this over here let's just minimize all these just to really simplify everything now with nux we if we want to create pages we are dealing with this directory right over here this pages directory this is very important its name is very important nux is specifically looking for a directory with this name and then it will look at all of the corresponding view files within this directory let's actually read the readme it says here this directory contains all of the application views and routes the framework reads all the view files inside the directory and creates the router for your application which is a little bit interesting so essentially what's happening here is in the next stop or the index.view in our directory it's essentially what it's doing is it's reading it and somehow it's figuring out that this should be our landing page let's actually just kind of quickly explore something so we want to create a products page right over here correct so what if what we did was we went over here and we created another view file and this view file is called products.view and we created a v base over here let's get rid of the sas let's say this is a products page and let's actually see what happens in our application if we go to slash products now we get this right over here so essentially what's happening is well inside of our pages directory whatever view file we put in essentially corresponds to a particular route in our application now index.view corresponds to just the root directory but then over here whatever the file name is is going to be what the path is going to be now if i were to put some sort of gibberish over here well we don't have that so we get this kind of error page hey this this page couldn't be found but if i got this gibberish and i actually created a view file with this gibberish and did a quick v base i am this this gibberish that we will delete later and if i were to refresh you can see here now this page is actually a functional page so that is awesome so let's get rid of this and you can actually see how much easier this is this is extremely extremely easy to create um to create pages and routes all you have to do is literally just create a file and that is the power of this higher level framework whereas in view we'd have to do a little bit of code and a little bit of configuration with this all we have to do is create a file with a specific name in a specific directory and nux handles the arrest so it's it's it's super super easy so let's create all of the pages that we need so over here we have the home page which is represented by the index.view we also have the products which we have created and now we need the my items page so let's actually create that as you can imagine well to create that we go to our pages directory we say myitems.view and just do a quick vbase get rid of the sas lang and we can just say my items page so now if we actually go to this directory the my items directory you can see we get this cool that's awesome all right so let's let's go back now there was kind of one uh different level okay so we have basically all these pages but what about this over here where it's uh oh sorry this on on our actual application that actually works what if we clicked on a product now it's slash products slash the product id how do we do this well this is a kind of a little trickier but it's still extremely extremely easy in nux so essentially if we want to kind of append something on onto basically an existing url we can't use a file what we have to do actually is get rid of this file so we can delete this file and we have to use a folder instead so now what we have to do is we have to say well we want to create a folder and we still call this folder folder products and this product is going to this folder products is going to correspond to essentially this right here this part over here now inside of the products uh folder we have to create a index uh dot view so essentially this is going to be kind of the default once we go to the slash products and this is basically kind of where we were before so we can get rid of this and we can say hi i am products and then we can go over here we can say slash products and we get that so this is basically where we were before essentially the index.view inside of a folder is basically going to be treated as kind of the product style view in the pages directory so why do we have to put this in a in a folder well inside this products folder we can add additional folders with non-index dot view names so we can say something like id dot view and then uh over here we can do a v base and we can get rid of the sas lang of course like like usual you can say hello i am route slash products slash id so now if i go over here you can see that we have slash id so this is actually another page now if i were to add basically a one something that is not or two something that is not slash id it breaks because this this is basically saying that uh the route is exactly slash products slash id now if you wanted something more dynamic so something like one or two or three or four which is basically what we want because we're going to pull this id to figure out what kind of information that we need to render all we have to do is rename this from id to underscore id and basically what this says is okay well this can literally be whatever it can be whatever it doesn't matter what it is it can be anything so we can add this we can put two or four we can put id so whatever this is it is okay with it and essentially by calling it id we can call it whatever that we want but essentially we can extract this particular param right here uh as an id so it might be a little confusing but when i show you it won't be that confusing but essentially the underscore id what it allows us to do is just add whatever parameter that we want so this is kind of how we can do this kind of routing now uh this is absolutely great this is kind of what we want so let's actually go to the products page and let's just quickly create uh what we had over here and this is going to be very very easy because i mean we already created the components for these so we already have the data in a um in our data.js file so let's go to the products.index.view and we're just going to wrap this whole thing in a container okay and we are going to auto import the large card display and we're just going to also import the pieces of information that we need from our data or data.js so this is going to be from the root directory inside the root directory we want assets and then from there we want to go to our data.js and we want what the large card sections which is just an array and also the small card sections so let's just quickly do this this is going to be extremely fast and we're going to actually this can kind of illustrate the power of components so we can just do v4 and we can do card info in large card info and what i'm going to do is i'm going to slice it because i only want basically we have two and all i want is essentially uh the first one so what slice does is it it kind of slices the array from starting from this index ending to this index but not including this one over here so it starts from here and ends basically at the one before this particular index so essentially all we're gonna get in this case is zero uh so we can say okay well the key in this case is gonna be our card info dot id and then the cards section is going to be card info awesome so let's do the very same thing but with the small card component so we'll just copy that and we'll just say small card display and i believe this is exactly the same all we'll have to do is just change this to small card display we'll remove the slice that is okay and everything else should be fine and lastly let's wrap this in a div and let's just add our nav bar so let's uh add the nav components so you can see here that like this these components are are reused throughout our application so this is this is very very very useful a kind of uh uh way of doing things so now you can see how fast we actually created our products we're done actually let's go back over here it says cannot read slice of undefined of course it would fail so large card info i wonder why this is failing oh i mean of course it's going to fail because we didn't put it in our state so we'll just do data and then we'll do return and then we'll just say quickly large card info large card sections and then lastly small card sections and then small card sections just put it into our state and now all we have to do is just quickly refresh and we have pretty much created our uh products essentially products page now we're missing uh the small card display for some odd reason so let's just quickly see why that is and that's because we should call this right here so if you refresh we should see it so we created we just created our products page okay awesome so this is this is terrific like this is this is great um this will work on a little bit later the uh my items but we're pretty much done now okay this is a little bit interesting over here now what we want to do is we want to uh what we want to do is we want to kind of like navigate through them so so far what we've been doing is to change kind of directories we've either been manually doing it or we've been using the nav bar which uses anchor tags so the problem with using anchor tags as you can see is it refreshes our application each time we do we kind of click on an anchor tag which is not ideal we don't want to do that so instead what we want to do is we want to use something else that is not specific to kind of show you what i mean here look how much more smooth it is when i navigate from kind of one uh url to another look how smooth that is that is very very smooth very quick very smooth uh i can quickly kind of navigate through things whereas with our application where we use anchor tags you can see how like not smooth it is it's it's just refreshing our page every single time and it's it's kind of uh kind of uh it's not the best transition and you can kind of see the refresh over here like keep keep in mind the tabs right there whereas over here we don't have any of these tabs like they they just refresh accordingly so how do we do this well right now with our navbar so with our nav bar let's just go why is this open this node modules so inside our navbar we are using anchor tags so instead of anchor tags what we can use to get that kind of smooth transition is nux link which is kind of something that is inherent with nux so we don't have to worry about importing it it's it's just within our nox application so we can say nux link and instead of href we say two and then we specify the path that we want to go to similarly over here in this href we can uh uh we can get rid of this a tag this anchor tag right here change that to nuxlink and we can say well we want it to go to products lastly we can say that we want this to be nux link this to be nux link and we can say that we want this to go to my items and so now you can see that we get a very smooth transition so you can see how smooth that is and now we're not even reloading our page uh in this case i'm going to press back because we don't have a nav bar over here but you can see kind of how smooth that is now what we also want to do is we want to basically make these guys clickable right now they're not clickable obviously in our application we want them to be clickable and we want to kind of input whatever the id is into that url so let's actually add a nux link into those card components so to do that all we really have to do is go to uh our cards let's go to the small card right over here and we basically just change this to a nux link from a div to a nux link so let's do a nux link and now the two path is going to be a little bit different in this case so the two path we're probably going to dynamically kind of put that in and so let's do template literals so essentially the the two path is going to be to the products essentially to the products page and then we we dynamically want to basically put the id depending on what the card id is and now actually so if we go to if you go to our app if we click on any one of these you can see here we go right there which is awesome okay cool let's do the same thing with our large cards so let's go to large cards the card itself will just add a next link instead of the div and we'll say 2 we want to dynamically generate this so we'll do template literals and we'll say two products and then whatever the card id is so card dot id and then of course we have to close off close it off right over here and now we can save that and we kind of get this weird uh styling that we can fix right now let's actually quickly fix that right now so let's just say the header um we can say let's say uh the the header um at hover essentially we want the color to kind of remain black and we want the text decoration to be none so because we don't want any of these kind of uh highlighting over here so it seems like okay but let's also change the color of the header to black right over here so now when we hover over it if we refresh this it seems like we're still getting the text decoration anyways that's that's fine we'll we'll just leave it like that for now it's okay but essentially now what we can do is we can actually click on it and we get to this page right over here okay cool so this is awesome uh that is basically routing in a nutshell uh kind of in the next section what we're gonna do is we're gonna start working on generating this page right over here and to do this we are going to somehow have to extract this id and essentially figure out we have to figure out um what item is associated with id so we can kind of display that information so in the next section we're gonna actually talk about how we can do that this is gonna be a very kind of quick section and we're gonna talk about a way where we can actually store all our data globally which is probably a much better way of doing things and we're going to really do that through view x so in the next few sections we're going to be talking about vox okay guys in this section we are going to start building essentially these pages over here so this is how they look like right now we were able to kind of construct this page with this url but they don't look like what they're supposed to look like so right now they're supposed to kind of look something a little bit like this so when you click on a fire extinguisher you kind of get the picture and all the information associated with a particular fire extinguisher now this is a little bit interesting because when we click on a particular fire extinguisher we only want the data associated with the fire extinguisher with this id so we actually have to find a very clever way of accomplishing this with our current structure and we can actually do this with view x very very easily so before we actually go about kind of coding this application now let's talk a little bit about essentially what vue x can provide to us so over here i kind of have this diagram right here and each kind of layer is a component so each color is a component we have here a component and here component and as you can see here we kind of have nested components within components so like this root component has two of these blue components right over here and two of these blue components have two of these kind of a yellowy components right and then each of the yellowy components have three red components now let's say that our root component our orange component has some piece of state has some important information so if you actually go back to our application right now uh let's say let's go to a page because you can think of a page as a component as well uh so yeah so you can see here we have basically a piece of information so this is state so you can think of this this right here as some piece of data so this is kind of located right here in the root component but we realized that hey this piece of information is actually very important for these components as well so these components as well so how do we kind of get this data to these components well i mean kind of the way that we've been doing it thus far this has the data stored within it so this this data is stored within the component itself so it's accessible with that component now if if another component wants it well we have to pass it down as a prop so you can you can probably say okay well why don't we just pass this data right over here uh to this red component well i mean it's a little bit more complicated than that because the orange component isn't actually rendering the red component if we actually go back to one of our sections over here let's actually pull up a let's pull up our index dot uh let's pull up our index dot view in our in our pages directory let's pull up the large card display and then we pull up the card display over here we have basically and it's also pull up our um in our assets file let's just pull up our data so we can actually see what it looks like so again we have essentially this this kind of array of objects and within the object itself we have basically kind of this right over here now let's say what we wanted to do what we wanted to accomplish was we want to get this piece of data to our large card component well we can't pass it directly into the large card components because the large card component isn't being rendered on the index.view so it really has no access to it so if we want to pass this data down to the large card component we have to pass it down to first the large card display component and then the large card display component can then pass that down to the large card component right over here and so this is kind of the situation that we would have right here so if we want to pass down this information to one of these red components well we would first have to pass it to let's see if we can kind of diagram this a little bit better we would first have to pass it let's i can try to think of uh okay let's get let's oops see daisy let's get uh a an arrow this is not going as planned okay so we would first i hope this okay there we go it was fighting me for with me for a second so we would first have to pass it to the blue component and then the blue component itself would then have to pass it to the yellow component and then the yellow component would then pass it to the red component so you can see here this can get a little bit messy we would have to pass the component from component to component now this isn't as bad it's still pretty messy but what if we had let's get rid of these arrows what do we if we had like another component right here so that like within it we had another component let's make this color gray and and within that component we also had another component let's actually use the same one another component uh right over here and we'll make this purple and let's say basically this component needed that information so we would have to actually pass all this props down just so that this component can get this information and this is very tedious this isn't really a great solution so what is a great solution well what if we did this instead what if we had we stored all of our important information that a lot of components and a lot of nested components are going to access in kind of a centralized store you can kind of think of this as a bank and whatever component wants uh whenever basically a component needs that piece of state and that piece of information from that store we can easily give it access to it because each component will have easy access to the store so for instance if basically the red components need that information instead of passing it down as props all the way to it essentially they can just get easy access from it they have just unlimited quick access to it right away and that is the power of view x and this is kind of the approach that we are going to take with this application with this kind of page right over here essentially we're going to store all of the uh essentially product information in a centralized store and when we go to a particular page what we are going to do is we are going to get the appropriate data from that centralized store so we don't have to kind of rely on props or anything of that nature so i hope that kind of makes a little bit of sense sorry i was kind of fighting with the uh the arrows a little bit uh but i hope that this diagram kind of makes a little bit more sense in the next section we are going to actually use uh the uh the uh ux encode and you can actually see it we're gonna obviously build out this page in the meanwhile so let's go about creating that centralized store with ux that every component can have very very easy access to now to do this we will have to be messing around with this directory right over here the store directory so let's actually click on it and let's click on the corresponding readme over here the readme says that this directory contains your ux store file so essentially this is where we're going to contain all the files directed to that centralized store view x option is implemented in the nux framework so the the vux store option is already a part of the nux framework it's nothing that we have to really configure ourselves but by default it is deactivated so how do we activate it well let's read this line over here creating a file in this directory automatically activates the option in the framework so by creating a file in here we're able to kind of activate vux store in our ux or in our nox application so let's actually go about doing that right now so what we're going to do is we're going to create a special file and this file is going to be called index.js and in here we are going to have essentially the the kind of state the centralized state that we want all components in our application to have very very easy access to well to do this we have to define a function called state so we have to say const state and this is going to be a function over here i have an arrow function and it is going to return an object and this object is going to contain all the pieces of information all the kind of decentralized states in kind of key value pairs that we would want in our components so for instance i can just say something like data one and then we can say i am centralized data centralized data and we can say something like you know let's do data2 and data3 so let's do data2 and data3 i am lathe a bad programmer and then i am let's do d23 i am felix a cool cat that's my cat by the way very cool maybe i'll get him on camera a little bit so let's say this is kind of this is our centralized state and we want to be able to essentially access these pieces of information in any of our components well just by doing this we're able to do that well actually not really just by doing this but we also have to export this so if once we export this piece of state right over here all of our components has access to these pieces of information so let's actually just pick out a random component let's pick out our hero component because that's the first one and let's try to get these pieces of information again usually when we want to pass down information we do it with props in this case we're not going to do it with props we're actually going to try to get it from the centralized store right over here and so how do we go about doing that well we have to use a kind of a utility kind of uh we need a little bit of help to do that well we need to import essentially something from the ux package so this is from ux and what is it that we need to import well we need to import something called map state so what is this weird map state well essentially what this map state does is it maps whatever state we want from this file into this component and let's actually kind of let me show you how this works so let's create a computed so we're going to create a computed and inside this computed what we are going to do is we're going to destructure out all of the state that we want uh from this centralized state right over here and so how do we define the state that we want well we would just pass into this function an array and each element is going to be basically the kind of key key right over here so let's say we want uh data 1 and data 3 we don't really care for data 2. so what we would say is well we want to kind of destructure or we want to map data 1 and data 3 from the view x store into this component so now if i save this and let's go back right over uh let's go back to just our regular directory so we'll just go over here so let's actually this is the component that we kind of got that state from so let's actually just change the snippet just for fun we'll we'll change it back a little bit later but let's just change the snippet to whatever that info is so we'll we'll just say over here data one so if we go back you can see here i am centralized data and then let's say we want data three uh so oops we go over here we say i am felix a cool cat now if we say we want data2 that wouldn't work because we didn't map data2 into this component right over here so this is extremely easy and extremely useful so let's actually uh get rid of this i hope that kind of made sense uh let's get rid of that and let's actually do it in a practical example actually let's undo all that and now we can get rid of these things just so we can get our snippet back okay cool all right so let's do this in a practical example right over here so what we want to do essentially is uh once we click on a a um a uh um a page right over here so let's click say we click on this page we want to basically get this id from the url and then get all of the products that are located in our centralized state and find the one with the id of seven and that's the information that we are going to render onto this particular page and so how are we going to do that well we're going to do that by creating we're going to do that by getting rid of this over here and essentially what we're going to do is we are going to have all the products inside this centralized state so we can say products and the products is going to be an array now all the products are going to be located on in my github page so if you go right over here to store index we can just go right from products there's a little bit of info that we'll use a little bit later there but right from products to scroll all the way down just copy all this data right over here now this is again probably not what we would do in a real application we would probably fetch this data from an external api but for now this will do cool so now we can actually access this information wherever we need so if we go to our um where is this the page and then the uh the id we can essentially do the same thing so we can do something like import map state map state from vox and then we can have our computed over here so our computed and then what we can do within our computed is we can map the basically the structure all of the objects within this map state and we can say that we want the products which is literally the only item that we have in our state at the moment and so what we can do now is okay well we have access to this let's actually kind of display it right now it's just going to be a kind of a big jumbled object so if we go over here and we refresh we see all this data but now what we can do actually is actually iterate through every single one and then find the one with the id of 17. so if i do just a quick ctrl f find 17 well okay we can uh let's see if we can find right here we found it so we will just iterate through it and until we find essentially this this kind of object right over here and this is the data that we will use in our application now i'm going to argue that the approach of fetching all of the data into our page and then filtering out the one that we need is probably not the best one let's actually take a look at a little bit of a diagram right over here so essentially right here we have our store and let's say our store just like we have it over here we have an array of objects and over here we have kind of product one product two product three product for product five and essentially what we're doing now is we're getting all of this data and we are sending it to our page and then our page is going to be responsible for filtering out the data that it needs and so essentially you can see how right here how this is probably not the best approach because like the the each of our pages is getting a bulk load of unnecessary data and it has to be the one to kind of filter out and say hey well i want this right over here maybe maybe i could argue that this right here is a better approach maybe the page can send the centralized store uh kind of a piece of information known as the payload in this case the payload is going to be the id of whatever the product it wants back so you can imagine for whatever uh for this page we can send it 17 but maybe for page like 14 we can send it 14. so this can be kind of a payload that we send it to and then the centralized store can essentially uh uh get use this payload to find the corresponding piece of information in the estate and it'll send the state back right to the product right over here so instead of getting everything back we only get basically what we need and we don't get a lot of this other extra stuff and we can do that actually with getters so so let's actually talk about that right over here so let's let's actually create a getter so essentially what a getter is is is just a kind of a way to get really what we want fine-tune information from our state for instance well instead of getting all of this date we can use a getter essentially to kind of filter out what we need and get us the kind of product that we want so let's say we want the the product of 8 the getter can kind of filter through everything that we want and we can just we would write this function and it will get us basically this object over here we can also use a getter to kind of append different things to the object so let's say we want to also kind of manipulate this in some way we won't be doing it in this section because we don't have to but we can manipulate our data in any way and it will send it to the state and so let's actually create a getter so how do we create it in uh in view x well we would create it in a very similar way that we created our state so right at the bottom here we would essentially create a getter now we have to export this getter of course and we have to call this getter because we can have multiple getters we're going to call it getters and this is going to be just an object so it's not going to be kind of a function or anything like that it's just going to be an object now inside the getter we can define a bunch of methods and so let's define a method that allows us to get products by id and so essentially the the kind of the parameter that we're going to pass into this method is going to be the state itself so we're going to basically pass in this whole thing right over here which is essentially kind of an object that has all of these states so we're going to pass that state in and it is going to be of course a function and then this function is going to return another function and in this function we are going to have the payload so this is basically the payload that we are going to provide now in this case the payload is id so we can call it an id and we can uh we can essentially do that and we this is basically our getter right over here now this looks a little bit funky so let me quickly try to explain this so this is ee method so this right here is a a method over here and this method returns a a function now this function what it can do is return basically kind of the information that we want and so it's i know it's a little bit funky like with this kind of double arrow just remember that this is a method that returns a function and this function returns whatever piece of data that we want so ultimately you can just literally think of this as a method that returns what we want now again here is the state so the the state is something that we never really have to pass in it's automatically passed in by vue x and it's basically whatever is in here whatever is in right over here that's going to be passed in by vue x right into this getter now over here this is also called a payload this is what we are going to provide so essentially when we call this getter from any particular component we are going to provide this payload right over here and in this case the payload is going to be an id so once we pass that in we can actually use this over here so we can say okay well state dot products so remember this is the state that contains everything right over here and within the state we have this property called products so we can say something like state.products and we can say dot find and this basically finds one object that matches a particular criteria so we can say product uh and then we can say product dot product id so essentially here what we're doing is we're iterating through every single one and we're returning the object and the element that meets kind of this uh that meets uh so sorry we're gonna return uh product i dot id is equal to the product that we pass in so essentially we're iterating through every single element in our array and we're returning the one object that meets this description right over here so where the uh the element that we're iterating over its id is equal to the id that we provide and because and the ids are all unique we're only going to get one and even if we have multiple for some reason the find is only going to get the first one so that is the getter right over here so how do we actually use the getter so let's actually go about doing that right now so let's go into our underscore id view page and let's actually use the getter to kind of fetch whatever data that we need into this page right here so to do this we could use a map getter but i am going to argue that there is a better approach of doing this so let's actually just create a computed and essentially this computed is going to contain a method called product and essentially this this this product is going to contain all of the information associated with that product in that page so how do we do this well what we can do is we can return and then we can return this dot dollar sign store so essentially what we're doing here is we're saying okay well you we want to go into the store component and we don't have to actually use a map map getter to do this we can just go into the store component with this dot dollar sign store or sorry not the store component but the store itself with this dollar sign store and then we can say that hey we want the getters now which getter do i want well i want the get product by id getter now we have to remember pass in the payload so we have to pass in whatever the kind of the id is now how do we get this id well we get this id from the url right over here now how do we do that that might be a little bit tricky as well let's quickly comment this out and let's quickly talk about oops what happened over here oh let's let's let's undo this let's comment this out let's quickly talk about how we can actually do this well we can do this essentially with the router object so let's let's go over here and then let's say we we want to get that id well we would use the dollar sign router object now within the dollar sign router object there is a kind of value called params and this also has a bunch of objects within it now the object that is going to be contained within it essentially whatever value is going to be contained within it is uh this right over here the id so because we called the the file underscore id whatever this param is over here is going to be associated with id so this id is going to be associated with this particular param over here so if that doesn't make sense essentially what all we have to do is say that hey in this file i want the param id now again we say id because we named the underscore id if we named this underscore hotdog we would say params.hotdog but we called it id so all we have to do is save that and you can see that that doesn't work for some reason so i wonder why that is actually so oh so sorry it's not router it's route so if we refresh this we can see here that we have 14. if i were to change this to a random number we get that number right over here if i were to change this to a bunch of alphabets we get that alphabet right over here so we can actually use this to our advantage we can actually uh kind of take this right here and just pass it in to our computed component now because we're dealing with it in the computed component we actually have to use the this keyword so this dot uh dollar sign route.params.id so now let's get rid of all this and let's just uh display so let's just quickly display uh the product itself so we're gonna display product from our computed and so when we go over here uh this seems like it's not working again so get product by id i wonder why this is not working um so this dot dollar sign store dot getters dot get products by id it says this the dollar size is not a function so let's actually go over here what do we call it we called it get product oh we called it get product id we want to say get product by id so now if we refresh this it is a function so this this works completely fine which is awesome and uh let's just refresh again let's let's change the number for some reason 15 seems like it's not really doing whatever it is that we want it to do so let's see so okay and and that's so the reason why it's not doing this is because right over here we have the number uh 24 but essentially if we're passing in the param uh it is going to be the string number so over here let's say we want the number of let's say 24 we're essentially saying that hey find something where 24 is equal to the string 24 and because we're doing triple equality this is never going to work so let's actually just do a double equality and let's save this and this should solve our problem awesome so we see instead of getting everything back we only get back uh the data that we need so we can do 19 we only get back the data that we need so let's actually very very quickly kind of construct this uh component this this page right over here and when i when i say quickly i'm literally just going to copy paste a bunch of html because i don't want to waste time writing that html essentially all i'm going to do right now is just create another div and i'm going to just go to my github repo go to my github repo and then go to the um pages directory and then i'm gonna go to products underscore id i'm just gonna basically copy um everything right over here so i'm going to copy this all down i'll quickly explain it but it's just it's just a bunch of html that i don't want to dwell on also this html contains quite a bit of components that we haven't used yet so let's just get rid of that for now let's get rid of this for now and we're also going to get rid of well actually we won't get rid of this so what i did here was okay well what if we provided a kind of an id that doesn't really exist so so if we provided maybe just some some some random large number and this is not contained in our application so far this would break so what i did was okay i said okay v if if the product exists and is actually defined because if if if there is no product if we look for a product with this id it's going to return undefined so we can say well if it's not undefined then what we're going to do is we're going to return all this if it's not however if it's undefined then we're going to create a basically we're going to return something else over here i have a component that i created beforehand that we'll get to a little bit later but we can just say something like page not found for now so this is just a little bit of just a little bit of kind of guarding and just for a better user experience over here so we can uh we can save this quickly this is just basically a bunch of kind of boilerplates i'm basically using the product uh information that we're getting back from the getter that we have over here we can we could we should have or i should have definitely extracted these into their own separate components but just for the sake of time i just put it into this one file so let's actually go back to my uh um so let's go back over here let's just get these styles as well so let's get all these styles and then let's go over here and so you're not really missing anything by me copying pasting this again we did the getter and now i'm using the getter to kind of pre-populate all this html i just didn't want to write the html from scratch if you're interested feel free to look at it but now if we go to our application we refresh there we go we have kind of kind of an application there we can also add our nav bar so we can say nav and we can refresh this and there we have a navbar so now we can actually go to whatever page and we can see that we get our uh kind of a cool dynamic page which is which is really really awesome now if you go to just a random number you get something like this hey page not found before we continue building out our application i kind of want to look at a certain flaw that we have right now in our code base and to kind of see this flaw let's look at all of our pages so over here we have the index.view page we also have the products page and then we also have the products page that is associated with one specific product and if we look at all these pages over here and over here of course you also have the my items page which we haven't touched but if you look at all these pages we see here that we have the nav component in the landing page we also have the nav component in the products page and we also have the nav component in the you know the product page if you will now we don't have it in the my items page that's partially because we haven't built it but also you know if we go to the production version we don't have that in this section we don't have a navbar uh but you can imagine that you know what 90 99 or 98 of our pages will probably have that navbar component so we can be able to kind of navigate thoroughly throughout pages so you know kind of adding this component to each page is very repetitive and it is not dry you we are very much repeating ourselves all the time well nux actually has a way of kind of circumventing this of not repeating ourselves and we are going to kind of do this by looking at the layouts page right over here now the layouts page comes with a kind of a default file known as the default.view and let's actually take a look at what's inside it so it seems to be a very standard view file it seems like we have you know our template our strings we don't have any script tags but what's interesting is we have this weird component nux so i wonder what this next component does let's actually kind of comment this out and then let's look at our application now it's completely gone so now if you go over here it's completely gone whatever page we go to our application is completely gone now let's say i were to say hello in here you'll see okay hello but then of course our application is completely gone now let's uncomment this out right over here and let's see what happens so we can see here we get our landing page back which is great but we also get this hello if i go to products i still have that hello if you go to my items i still have that hello if i go to a particular product uh the styling is a little off here which is pretty strange uh i wonder if that's true with this as well okay i guess this hello is kind of messing up the styling of this nav bar but it's still over here like it it still exists so it seems as though the nux is essentially our application as a whole anything that we kind of put in the components and our pages is basically this nux component our whole application but over here we can also add other elements or other kind of pieces of writing or other components that probably are going to persist on top of our whole application so it might be it might be i say a good idea to actually put the nav component in here instead so therefore every single page is going to have this nav component and obviously basically any other uh page or components associated with our application over here so if we refresh this we see here we have basically kind of double the components we have this really strange styling going on but you can see here we have double the components so now what we can do is we can just literally remove all of these so if we just decide to remove them all not on the default but we can remove this let's save that remove this and let's save that and then let's go i believe here we still have the nav we can remove this nav and so now we don't even have to add the nav anymore and it will already be there in our essentially in every single page without kind of adding it because what the default.viewpage is is kind of rendering uh what a each page should look like so each page should have a navbar we're saying and then each page should have this nux which again is whatever kind of corresponding code we have in our pages and our components so this is great this allows us to keep our application very very dry and you can see here it works exactly the way that we had it before one problem though if you go to my items we have the nav bar and in the production version we don't have the nav bar we have this kind of go back link now you know it might actually be a good idea to keep this nav bar but let's say the designers want it this way for some reason so we have to kind of figure out a way to say well okay well i want all of this for essentially 90 99 of my components but i don't want the the nav for maybe like a few components such as or a few pages such as the uh the my items page right over here well for for um for that we can actually kind of define a different layout so what we can say is okay well this is one layout this is going to be the default layout and all the pages are going to have this layout but i'm going to create another layout over here and i could specify a particular page with this layout so i'm going to say okay well i want a no nav layout and so what i'm going to do for the no nav layout is just copy all this paste it in here and we're just going to get rid of the navigation and instead of the nav bar what we're gonna add is uh basically a nux link so we want a nux link so let's let's add that in there and this next link is just going to say go back so this this is this is a basically a page that's going to follow kind of this layout right over here and uh of course we have to provide e2 for nux links so we can say two and then slash okay so how do we tell nux that we want the page to follow this layout instead of the default layout that all pages already follow well we can do that by going to the page that we want it to follow the layout and in the export default we say layout and then we say what layout we want it to follow so in our case we want it to follow the the no nav layout so essentially what we have to do now is just go back over here and we can say layout no nav and if we save this uh and we save that and it seems like we have we added some sort of errors here i wonder what this kind of quote is doing there so layout and then no nav and then if you go back to our application you can see here that that is exactly what we get and that's awesome so if we actually go back over here we can get essentially all the other layouts but then over here we have uh kind of the other layout that we want now let's actually go to this layout and let's just wrap everything in a container so let's do class container just so it can be kind of uh in the center it's probably what we want and maybe we can also give this container uh a little bit of styling as well so let's just say container we'll give it some padding we'll say padding of five rem and then zero so it kind of looks a little bit like this so now it pretty much looks identical to what we have over here okay awesome so this is terrific and you can probably see that the layouts folder can really be helpful for kind of keeping our code as dry as possible now let's talk about another feature that the layouts folder can provide to us so let's actually go back to our application over here and i was kind of playing around with this a little bit before but essentially if we go to a url that doesn't exist i have this kind of sad fire extinguisher and it says right here that the page is not found so right now if we do that in our application if we do something like this you can get this kind of ugly default nux hey page is not found so how do we basically kind of reroute all of these page not found to basically what we want right over here just just uh uh just a nice beautiful page not found with the with a sad fire extinguisher so how do we reroute all the pages that are not found to kind of this over here well we would do that with a layout so we will reroute all of the kind of pages that air out to a particular layout so over here all we have to do is say error dot view and then we can essentially say vbase and then we can just define what we want inside this layout and now by saying error.view this is a very specific name uh basically what this error.view is is if any page errors out it's going to basically kind of render this layout over here in the error.view so this is a very important name now in basically the error page we want to kind of display our nav and then we want to display some message saying you know page not found and so let's also put this quickly in a container and if we go back over here to our application we can refresh it and we get this weird look right over here um actually we don't need the nav because the nav is still going to be actually provided in our default so we don't need to nav but we can uh essentially just provide kind of the error message that we want right over here so uh let's actually create this this very very simple component and i'm actually not gonna create it i'm just gonna go to my repo and just quickly copy it you can feel free to do the same at this particular url this is going to be the page not found component so i'm going to go here and i'm just going to say page not found dot view i'm just gonna paste this code right in there and then i am going to auto import this component so i'm just gonna do page not found save that and then we can go to our application refresh there we go we have our silly um kind of silly uh uh page not found uh what we can also do is just provide a little bit of padding just just to make it look a little bit better so you can say container um we'll just say padding of you know four rams up and down zero rams left and right just so it can be a little bit more to the center this is this is good enough for me one last quick thing when we let's say decide to click on um let's say a url like a random url that doesn't correspond to a page we get this over here to kind of fix that all we really have to do is go to that id page and over here we're saying okay well v if we're going to render this v naught v else well let's actually render the component itself so we're going to say the page not found component so now when we go to our component we get that as well all right cool so you can actually see how important layouts are so i hope this kind of a quick lecture on those uh made sense and and just showed you how com kind of powerful they can be okay so the next step of our application is to build the reviews component right below the long description for a specific product so it should look ultimately something like this so we have our long description and then we have a bunch of customer reviews now so far when we've been dealing with data we've been creating that data and either storing it in some javascript file in our client directory or storing it in vue x now ultimately this is probably not the approach that a real kind of production scale application would take that data most likely is going to be stored in some sort of external database and we can kind of communicate with our database through some api so our api will be able to communicate to the database get the data and then send it to our client this is most likely what would happen in kind of a more dynamic production scale website so we probably don't want to store our data uh in vuex or in or in some javascript file we want to have it in some sort of external database and access it through an external api and this is essentially what we're going to be doing with this section right over here we're not going to store this data in a view x or some javascript file we're going to fetch this data from an api now we're not going to create the api we're actually going to use this api right over here random user dot me slash api and we're asking for five users but this really simulates what essentially our data could look like if we had our own api and our own database so basically we would just fetch kind of this data and we would render that data into our client now in this section we're going to talk about how we can fetch data in nux so there's actually two approaches of fetching data in nux so if we go to basically nux dot org and we go to their data fetching section right over here it says there are there's two hooks that we can use so we can use the fetch hook and we can use the async hook so which hook do we want to use well in this section we're going to be using the fetch hook and the reason why we're going to be using the fetch hook is because the fetch hook allows us to fetch data from any component it can be placed in any component so essentially we can kind of place our fetch hook in any component over here we can go to the hero large card whatever component that we want we can also do the same thing in the pages now it also provides us to kind of render a loading state so basically before our data is uh fetched we can kind of have some loading state and then once our related data arrives we can show that data and this is actually only possible with the fetch hook and the reason for this is because the fetch hook essentially uh what it does is it kind of resolves the promise on the either on the server side before the initial page is rendered or on the client sometime after the component is mounted and that's why we're able to kind of accomplish this with the fetch hook now the async hook it kind of has quite a bit of limitations in my opinion so the async hook can only fetch data on the page level we can't fetch data on components so for instance if you want to fetch data and maybe just have it appear in a component we would actually have to fetch it on whatever page is actually rendering or mounting that component and then we would pass that data as props so so we can't fetch data from uh on a component level also essentially with async the the um the promise that is returned is resolved during route transition and because of this we can't provide any kind of loading placeholder so this kind of provides a little bit of an awkward user experience in my opinion and this is why we're going to be kind of mainly dealing with the fetch hook and the fetch hook is is very very easy as you can see here this is really all the code that we need to kind of implement that so let's actually go about doing that right now so let's let's let's uh let's uh um start coding it out let's start using the fetch hook so i'm going to create a component and this component i'm going to call um let's see let's call it reviews so we're going to call this reviews so reviews.view and let's do a quick v base and now let's just uh just give this a little bit of styling over here so let's say uh we're gonna have an h3 here we're gonna call this customer uh customer reviews so we have that and then we are going to essentially have kind of kind of a container where we can display all our customer reviews but now what we want to do is we want to fetch basically the data from um from that external api this one right over here so what are these steps that we have to take well these are the steps so essentially we have to have state we have to have basically a piece of state in our application and we and and over here we have basically they have an example of they're trying to fetch a bunch of data regarding mountains so so they have a piece of state that is mountains and that's just an empty array and then over here they have an async fetch and then they're setting basically that mountain state to whatever is fetched by whatever api that they're using so they have this this.mountains is equal to async fetch whatever api that they're using and then they're resolving the uh the promise so honestly we can just kind of copy this right here so let's let's go about doing that so let's copy this and we'll just paste that right in there and we'll just change some of the the wording so we're going to change uh we're going to change this to be called reviewers because these are reviewers that we're fetching and we'll just say well we want to change this dot reviewers and let's also change the api that we're using so let's go over here and let's just copy this api and we can just paste that in there and we're done i mean we're pretty much done so now what we can do actually is let's just render that right now onto the screen all that data onto the screen so if we can save that and we go to our client and we refresh refresh this of course it's not going to work because we're not we're not putting this component anywhere so let's let's go to our underscore id page so let's go over here and let's just place our let's place our reviews i believe i am going to put it right over here let me just double check uh yep right there so i'm just gonna place this reviews component right in here okay cool so now if i uh if i go back over here we can refresh this page and there we go we got our data which is awesome okay cool so let's actually kind of use this data now now before before we kind of move on um let's talk a little bit about uh how we can figure out hey whether we have our data or not so we can actually kind of figure out kind of the status of our data by looking at this property over here known as fetch state so this allows us as you can imagine uh it kind of indicates the the state that our uh kind of fetch is in so let's comment this out and let's quickly look at this so you can see here okay pending is false which means okay uh we have retrieved our data and actually let me let me comment this one right back in maybe have a few line breaks just so we can uh see this a little bit better let's put an h1 and we'll say the data so if if you quickly looked at it if you if i quickly refresh p pay attention so pay attention to this right over here and then pay attention to when we receive our data so if i quickly refresh okay that wasn't that wasn't great let's actually move on to a different one so i want you to quickly take a quick look uh let's refresh this isn't the way that i wanted it to kind of appear essentially what i'm what i'm trying to say is if we are still pending if we are still pending and we haven't received our data essentially pending will be true and if you kind of go back a little bit uh there was actually an example where where this occurred but for now it's just showing object object which is a little bit awkward but if we are pending um if we are pending then this will be true however if we actually received our data then this will be false so we can actually kind of use this a little bit to our advantage we can say something like this then so we can say well okay so v if um and we're gonna say fetch state dot pending so let's say if we're not pending well we want to render this right over here and then however in where we can say v else if we are pending we can say something like loading now i'm not going to put a loading icon but that could probably be ideal some kind of like spinner right over here so so let's actually just quickly uh get rid of this and let's get rid of that and let's see maybe if we can actually see that loading state a little bit so if i refresh uh if i refresh it seems like it's not it's not budging let's see here let's go to a quick one if you saw very quickly that loading state was there so it may be in a poor internet connection if i kind of throttle this connection which i don't want to do we will be able to see it but you can see here we get that loading state and then we get our data so that's kind of the advantage of using kind of fetch state and the whole fetch hook so i hope that kind of makes sense uh let's actually quickly create these components right over here and what i mean quickly i'm just literally gonna copy um copy what i have over here so this is just a simple uh view component i call this review card again don't want to dwell on the component sections so let's just say review card dot view and i'm just gonna paste that in there and essentially this this review card is expecting a prop called review and uh basically what we're gonna do is we're gonna iterate through all the reviews that we got which is five of them and we're going to kind of send back the send each object each review object to this particular prop so let's go over here and let's go about doing that right now so we are going to right over here we're gonna do review card and then we're gonna do v4 and then for each reviewer reviewer so for each reviewer or sorry in a reviewer in reviewers dot result so the reason why we have uh we're calling it dot result is because we get basically one complete object and then uh this object has essentially one key that has one value which is a huge array so we're gonna do uh reviewers.result and we're gonna iterate through this whole array and then we are going to go back we're gonna provide it with a key so we're going to provide it with a key and if we go basically we can say reviewer.login.uuid that will be our key and then also we're gonna have to provide the review props and that will be the reviewer cool all right so this seems okay i'm not sure why it's yelling at me um [Music] i wonder why that's yelling at me it seems unhappy so be mining directive to be used with definition of v4 directive okay i'll i'll be right back once i figure out what's going on here of course what was going on here is that i misspelled reviewer so let's copy that and let's put that in there and also realize that it should be results and not results so if we go back to kind of our api it says results with an s so results now the reason why it's reviewer.login.uuid is because uh that's just the way that the data is structured so the data is structured let's just take one for now just to simplify things uh so the the way the data is structured is we got [Music] um let's find out where login is so login so you can see here it's it's it's going to be whatever the user is dot login dot it's user id so that's just the way that the data is structured that's why it's reviewer.login.uuid so now if we save this and we go back to our application there we go we have our reviews so we figured out how to fetch data using nux and and and this is great and this is very important especially if you want to build kind of a full stack application where we have our own server and our own database and we need to fetch data from this the approach is going to be exactly the same whether it's a third-party api or our own api we're going to use the fetch or async hook okay so let's complete this page by creating that rent me button that triggers this model now when we press it over here it triggers a modal and it has this kind of really cool calendar that we actually are getting from some sort of external view library so in this section we're mainly going to be kind of focusing on how we can use external view libraries and incorporate them into our nux application so let's let's go about doing that but before we do it let's just create this modal right away so to create this modal we can actually very easily go to bootstrap and just look at some of the different modals that they have so they have a bunch of different modals if you go to bootstrap view.org docs components modal you can see the different models that they have so i don't want to obviously create a model from scratch we're using bootstrap might as well utilize it so i'm going to actually utilize this model over here so i'm just going to copy this right over here the whole kind of code and uh let's go over here and create a modal and we're gonna call this the rent model because this is gonna allow us to rent uh fire extinguishers so we can just paste that in there and then in our um in our uh in our page so over uh over here in our product page we can actually display that modal so we're gonna display it right over here we're gonna auto import it right in so we're gonna do rant modal and we're going to save that and now it's going to look a little funky uh in our app so if we refresh this you can see here we get these two uh kind of buttons right over here obviously that's not what we want but if we click on it you can see here we actually do get a modal so let's just quickly uh just modify the modal to our liking so let's let's see what we have to do here so let's actually just remove one of these buttons and we're just gonna say we're gonna call this rent like we had it before we're gonna leave everything else as is um in here in the b modal section we're gonna do a little bit of modifications let's uh let's get rid of literally everything in here to be quite frank and what we'll do is inside inside here we'll have a container called the calendar container so this is going to contain everything and then inside here we're going to have just some text so a text container and in there we can have a paragraph with uh we can do a lower room of 40. this is going to generate like 40 random words um so let's see if that's too long i'm not 100 sure so let's go back over here and then uh uh over here we'll eventually add our calendar but we're gonna have to figure out how to do that a little bit later and the very next step would be to do incorporate another button so another b button so let's actually copy this right over here so we're going to need another b button and this b button is going to be right here and this button is going to have a variant of danger so let's do variant we're going to call this outline danger and essentially this is just gonna be our order button awesome okay cool uh so so we can actually get rid of this at click for now we don't need that we'll we'll work on that a little bit later but if we look at our page we can see here that it kind of works in a similar light to what we had before of course the styling is not there so let's just quickly go to my github and just grab the styling so styling for the rent model let's just copy all this and let's just paste the styling doesn't seem like we have a style tag so let's add a style tag let's remove the laying we don't need that and we'll just paste all the styling in there and i feel like it should be a okay at the moment there we go cool so it looks somewhat similar all we have to do now is just basically add that calendar so how do we add a calendar well if we want to use some sort of external view library to put into our next application there's a series of processes that we have to use so this right here this type of calendar is not provided uh by default with vue right you know javascript and html they do provide a kind of a calendar but not not something like this right this is an external library that is and it's a view package so we have to take actually a few steps to kind of incorporate this package into our next application and so i'm over here at the v calendar um kind of webpage and this is the mpm package that contains the code that allows us to create this really cool calendar and there's just kind of a set of instructions that we have to do so the first set of instructions as well we have to install this calendar package in our application so let's go about doing that i'm in my integrated terminal and i'm just going to install this really quickly so let's give that a quick install it seems as though it is installing so let's just wait really quick because i want to show you the change that should happen in the package.json actually i'll i'll leave out the package.json for a second and just wait and wait and wait and wait and wait and wait and wait there we go there we go and there we go we have our uh uh our package over here now how do we use this package in a nuts application well we actually have to incorporate this package in the plugins so essentially we have to plug in this library this view package into our nux application so this is where we are going to start using the plugin directory right over here so if we read this we can say this directory contains javascript plugins that we want to run before mounting the root js application so essentially we can add as many plugins as we want in here and we want to basically add a view calendar plugin so we can essentially add a file and we can just say view and then calendar.js and then inside here inside here we can go back to the documentation we can see here that they have basically a bunch of code that we we would put inside our plugin so we can just paste that code inside of our plugin let's just get rid of the comments really quick let's get rid of all those comments [Music] let's get rid of that comma and let's get rid of these comments so now we have this plug-in so this plug-in right now is inside of our kind of plug-ins directory but there is still another step that we have to take we actually have to tell nux to use this plugin by putting it in our nux config so over here if you scroll to our next config we can see here that we have a plugins section and we as you can see this plugin section is an array so we can import as much plug-ins as we want into uh this next config plug-ins array and so we are going to put a um a plug-in in here and it's going to take an object and so we're going to say source for the first property and this is going to be essentially what plugin that we want to use so this is going to kind of path to the plugin that we want to use and we want to use the view calendar plugin so we can say well go to the root directory and then go to the plugins folder in the root directory and we want you to use the view view calendar dot js so view calendar dot js now the view calendar.js is something that's going to be is a package that's really used on the client side it's something that's just rendered on the client side there are other packages that are used on the server side now because this is used on the client side we actually have to define that it's used on the client side and we do this with mode client now if it was used on the server side we would say mode server but this is used on the client side so we say mode client and that is pretty much it so we are pretty much done all we really have to do now is just use the package so let's let's uh uh refresh this just to see everything seems okay okay so now let's go to our um let's go to our uh rent so we're gonna go to our where is it our rent modal component our modal and we're going to just use this package so let's just read the documentation as to how we can use this package so once we plugged it into our application all we have to do is uh basically uh just incorporate this right over here this kind of component right over here so let's quickly copy this and then we're gonna go to our rent rent component and we'll we'll just paste it right in there and we can actually add a bunch of props i'm not sure where the documentation over here we can read kind of uh the different props that we can add into uh this this uh thing just to make it look a little bit nicer so i'm gonna i'm gonna add some of these props actually i'm gonna save this and i'm just gonna paste these props right in there so essentially here we're saying okay well value null we want the color to be red is dark and we want it also to be arranged instead of simply just clicking on one we want to have kind of a range of of many so instead of red i like the color indigo so i'm going to use indigo now if i save this i go back to my app and let's just do a quick refresh you can see here that we get our modal now obviously the styling is is is not correct but this is working so this is this is terrific uh so we now know how to use view packages in our application so before we finish this off let's quickly kind of fix up the styling so let's go to our rent modal and let's see what exactly is going on with this thing over here um seems like display we're displaying flex which makes sense seems as though that this should be working let's quickly see if this doesn't interest you then uh feel free to just leave it's okay um also uh uh we're gonna actually use something called a vc date picker which is just another another kind of component within this library it's gonna behave exactly the same way and there we go there we go and this just allows us to kind of pick the ranges so um i'm going to just cut the video for now until i figure out why the styling isn't working the way it is i don't want to drag it too long so i figured out what was going wrong with regarding the styling i just basically misspelled the class name i put an e in here instead of an a i always mess up calendar it should have a a d a r not a d e r so you can just change that up if you were following along and if you save that then the styling basically should should uh or sorry the styling should look a little bit better right over here so essentially the the next step of our application is we want to kind of finally build out the my items page so over here my items kind of just shows all of our rentals so let's say if i go here and i want to basically add a rental i can just basically kind of define the time or the dates that i want this uh fire extinguisher from and just press order and then if i go to my items i actually see this right over here in my items and what we're going to do is we're actually going to store all our items in a state in view x but this is a little bit interesting because when we add when we add a new item so when we add a new item what we want to do is we want to update that state in the ux and actually so we can actually showcase the appropriate items in our component so this is where we're going to introduce something known as mutations and mutations are going to allow us to mutate our state so let's talk about how we can do that in our application because in our application right now we can't even i mean we can click order nothing really happens and obviously when we go over here nothing really appears so let's kind of go about doing that and let's actually just start off with creating uh the state that includes an array of all the products that uh we are renting so this is very easy we've done this before so we'll just go to uh our we'll just go to our uh store right over here and we're gonna say my rentals and this is going to be an array and it's going to basically contain all of the items that we are going to rent for instance if we wanted if we rented this it would just appear like so if you rented uh five as well um it would appear like that so let's actually get rid of five for now and let's just kind of fetch the state and so we can showcase it in our my items page right over here okay so so to fetch data well all we have to do is basically import map state from view x we've done this before and then the next step is we want to kind of map that state so all we have to say is computed and then we can just destructure out state and we map the state that we want into this component in this case we only want the my rentals and if i were to uh put my rentals right over here and just save it and just quickly refresh the page and then go to my items i can see all of my rentals so i'm able to fetch this data so let's actually iterate through this array and create these kind of cool uh my rental card components so to do this let's just quickly go to my github page go to the myitem.view i just have a quick component over here that i can just copy um into basically one of my components so i'm going to create a my item dot view component i'm just going to paste that in and then this this of course accepts a prop this prop is going to be called item so now we can just do a quick um just a quick v4 so we can say my item maybe you can say v4 we can say item in um my rentals they can give it a key of item dot id and then we can also give it a prop of item of item so now if we render this we should get our cool component okay cool so this is awesome now what we want to do is we want to basically make this button functional so when we press order we actually want to append whatever essentially object with this appropriate id into our my items array so for instance let's say we want to add this particular item and we press order what we have to do is remember the id here is 22. what we have to do is we have to kind of iterate through all of these items find the object with um find the object with a an id of 22 and add it into the my items section so now when we go to our my items section we should also see this over here obviously we're not going to be doing this by hand so we're going to use something known as a mutation that is able to kind of mutate the state for us so let's go about creating that right now so to create a mutation all we have to do is const or export const mutations and this similarly to a getter is going to be an object and this object we can have a bunch of methods in it so i'm going to call this method add item and this is going to contain state and so essentially this is going to be basically all of this over here and we don't have to define this nux is going to automatically put this into this method when we call it but then we can have another parameter which we can provide to our um our mutation method and in this case work is going to be the id all right so over here we have the id and the basically the the kind of next step is to write the functionality in this method that allows us to mutate our um that allows us to mutate our uh uh our state so let's go about doing that right now let's actually get rid of this colon just so we can make it a real method that was just a syntax error that i had so the first step is well we have to find the item with the id that we passed in so if we pass in a um basically 22 we have to find this object right over here we can basically copy this because all we're doing here is we're iterating through the state products and we're finding the item of the id that we passed in so you can say something like let item equal to this and then we have to basically push that item into this over here and this is very easy all we simply do is we say okay well state dot my rentals dot push and then item and that's all we have to do this is very very easy so let's actually kind of put this in use and so let's go to our um my rental models so where is that i'm trying to find that here it is here's the my rental model and now uh let's actually kind of put this in good use so what we want to do is we can kind of uh get our mutation with the map mutation method so we'll say map mutation from vux and then what we would do is we would spread whatever mutations that we want from our ux onto the component inside of the methods object so we would say right over here we would map the mutations and then in an array we map whatever mutations that we want in this case we only really have one so we will map the add item mutation so we can just paste that in there all right so so now what we want to do is when we click the order button we want to basically call this function with the id of the product that we're trying to order so let's let's actually go about doing that right now so let's say um just make this a little bit nicer a little cleaner so we'll say act click and we'll call an arrow function so we'll execute this function when we click this and this this arrow function is going to execute the add item and then in here we have to provide the product id so we just have to provide the product id remember the state is going to be provided by nux automatically and then the id is going to be provided by us and now you might be thinking well state comes first so should we do something like this well no just just pass in the id as the as the first parameter and nux is just going to automatically know that okay well this is going to be the state it's going to pass that in as a first parameter and then whatever parameter that we pass in will be the second kind of the payload now how do we get the product id well uh we can just pass that in as a prop so i wonder let's see which um which component is rendering this i believe it is the reviews component or sorry not the reviews components the if you go to underscore id it's rendering that right over here so we can just say uh we'll just pass the whole product as a whole so we'll say product product so we'll pass that in as a prop and over here we'll accept it as a prop so we'll say props and then array of product and essentially right in here we're going to say product dot id so if we save this and we go back let's refresh our page let's go right over here something is going on okay and that's because i have map mutation when it's actually map mutations that's why it was failing so let's actually fix that for a bit so we'll do map mutations we'll save that and then refresh and that should be fine so now when i click on this and i click on order well nothing appears to happen but if you go to my items this appears right over here so let's add another item let's go over here let's click on order and then we can see that this item was added as well which is terrific okay so um let's just fix the kind of the last thing that we have to do let's just once we click order it might be a better user experience just to get rid of the modal as a whole so let's just quickly go to our our rental page right over here let's go to our button and essentially right below this button let's call let's call this method right over here the hide modal method so let's go there let's call it we'll save it and now let's go to my items we got these these three items let's go to this one right over here let's order it it disappears and we can actually see it in our order so yeah so that is um that is uh map mutations in a nutshell and that's pretty much the application i mean we we completely cloned it i mean it is pretty much the same the last thing is i'm going to do a little bit of a chat on testing this application i'm not going to go too intensive on it it's just going to be a little bit of a chat and that should wrap up this whole thing so honestly if you got this far congratulations i'm sure you learned so much about nux um i i i put a lot of effort into this so i i would hope you know you would consider subscribing and liking this video but uh we're not done we're going to talk a little bit about testing at the very end and then we'll wrap it up that we have covered a lot of the concepts associated with nux i think we should probably look into testing our application now what do i mean by testing well we should probably write tests to ensure that our website behaves the way that we intended to for instance we should write a test that hey the header appears with this text over here find your fire extinguisher or we have a button right here that says start looking also you know our cards are being rendered we should write tests to ensure that hey and when i click on a card we should write tests that ensure that we change our route over here and it takes us to a brand new page we should also write tests that these things are appearing these things are appearing and these things are appearing similarly we should write a test that when i click this a modal appears and then you know with with text and some calendars and when i decide to order this this will appear on my my items all these things should be tested and you might be thinking why should i write these tests if i can kind of just manually look at it and see that it's working it might just be like a lot of additional work well for small projects sure testing might not be [Music] small projects like this testing might not be the the kind of the the uh the benefits of testing might not be as obvious but once you start building bigger and larger applications you might start writing features that seem to work and actually do end up working by just manually looking at it but they might unintentionally break other parts of your application and without tests you won't be able to catch those errors so for example you might you know create some other card display over here that works perfectly fine but it ends up breaking maybe this card display and without tests we won't be able to figure that out and so that's why we need to kind of maintain the integrity of our website with tests so i'm going to talk a little bit about tests in this section i think tests really warrant their own video i don't want to attach it to this video over here so essentially what i'm going to do is i'm going to create a new video where i am just thoroughly testing this application so if you if you followed along and you're still interested in testing or if you're just interested in testing just go ahead and just clone my repo and we will then thoroughly test this application so that pretty much kind of sums it up for me i hope you enjoyed the the crash course i i had a great time creating it and i will see you in the next one

Channel: Laith Harb

Views: 73,513

Keywords:

Id: Wdmi4k7sFzU

Length: 191min 28sec (11488 seconds)

Published: Mon Jan 25 2021