Next JS | Django Rest Framework - Build an ecommerce store with - Part 1

hello and welcome to the next js django drf e-commerce store build this is part one just to give you a little bit overview here what's happening in this project in case you're thinking about investing your time in following these tutorials i don't want to waste your time so i just want to tell you a little bit about what's going to happen over the course of this build so as i've set out this tutorial or this build is all about utilizing next js and django drf so we're also going to be utilizing material ui on the front end and we're going to use these tools to build an e-commerce store this is the flow of the whole project so part one this tutorial we're going to be building the catalog system then in the next tutorial we'll look at the basket system part three accounts so user accounts part four we'll have a look at payment systems and then part five will be order management so these are the five mandatory parts i've set out five tutorials and then after that point part six and so on i'll happily take suggestions and potentially just make improvements on the actual code if you are new to this technology and you're a little bit apprehensive about should i do this tutorial or these tutorials i am going to be taking you through this process step by step now of course i can't explain everything but i'll explain as much as i can to get you or to give you a basic understanding of what is happening with the code and hopefully that will help you or inspire you to expand and explore further so this is a preview of what we're going to be building with next js and django drf in this tutorial so you can see we've got many different sections here so we go ahead and we can go into different sections so we'll set all this up and then go into different uh no sorry this is not the website so one second this is the website we're going to be building um so you can see here we've got the home page and we've got different sections so this is all going to be automatically generated on the page different sections depending on what's defined in the back end in your database and so you can see that i can select different categories so for shoes and so on whatever you want to build and then we can select on individual items and that will take us to the individual item page so this is going to be a catalog of course i've only got a few products here you can expand this i've only added what five products here you can go crazy and develop this or design this in however you like but the the core here is actually developing these items on the page utilizing our django drf system to collect data and return it to next.js so that we can then display prepare the data and display it on our page so this is the basics of our catalog system that we're going to build in this tutorial so there's a lot of setup here once we've done this in the next tutorial we can go ahead and start thinking about a basket so we just build upon this so that users can go into the products and then they can click on the button to add to the basket and of course then the next tutorial we go through the process of creating accounts because you're going to need to be signed up in order to pay in this example and then the following tutorial will then actually go through the process of payments and then after that we can then sort out uh so that the user can for example see the products that they paid for make returns etc so then we need to kind of build that up as well we're going to start off with django setting up django configuring it and then adding our models and then setting up some routes so that we can then pass data across to our next js front end at that point we go back to next js or go to next.js and develop that application our front-end application and then as the project goes by we'll just flick in between django and next.js as we develop further so to get django started you're going to need to install python i'm using windows here so go ahead to the python website download python and that's the first step that you'll need to take so python.org go to downloads go to download python 3.9.2 that's that's pretty much it and then just install it now when you install it just make sure that you select i'll just quickly take threads uh custom installation uh and then press next and that should be an option because i've got it already installed um there should be an option um here okay maybe not oh yeah add python to the environment variables okay so it looks like it's there by default so just go ahead and install and then that's the first thing that you need to do so assuming now python is installed you can go ahead and open up your command prompt start type in cmd and then that brings up the command prompt so i'll just show you what version i have say python dash dash version so you can see i'm running python 3.9.0 so next up we're now going to create a new virtual environment i'll explain what that is in a second install django and then set up visual studio code for django and working with python so i'm assuming you are using visual studio code uh so it's a free download free software so just download it if you don't already have this so let's go to file and we're going to open a new folder so i'm going to create a new folder here on my desktop you can place it wherever you like i'm going to call this next um drf addy next drf so we're going to create a new folder there um oh sorry we're actually going to create a new folder next drf and then go into that folder so this is going to be my project folder so i want two folders here one for next and one for django so we're going to be creating two separate programs if you like so we're not going to be integrating like you may have seen these front end packages within django we're going to make these independently or at least independent from each other so we need to go into the django folder and now we need to create a virtual machine so i'm going to press control and um comma to bring up my terminal you can just drag it from the bottom so now what i need to do is uh p y for python yours might be slightly different you might need to type in the word python use the m flag because i'm going to be suggesting or going to be pointing to software essentially or packages and then vmv that's the virtual environment so what i'm doing here is i'm creating a virtual environment a small package or a small container sorry inside of my computer and what i want to do is i want to build a small container away from my operating system a safe place where i can install softwares and develop so this is a virtual small virtual environment lightweight virtual environment i'm going to call the folder v-e-m-v you can call it whatever you like so this is the name of the actual software v-e-m-v and this is the name of the um the folder so i'll go ahead and do that a new folder up here yours might take a couple of seconds to build uh so we now have all this so what's happened here is that the com vent or yeah the vamp has basically copied python across over to this new folder and some other files which are going to enable us to work in this small virtual environment so what you need to remember to do once you've done this is actually go into the folder slash s tab slash a tab that's going to activate the virtual environment vmv every day so now we're actually working within the virtual environment so you're going to need to make sure that when you're working in this django application you're working within the virtual environment if it doesn't say vemfl it means that you just need to go into it like this for example and activate it so that's if we just traverse these if you go into scripts that's the what i'm trying to do i'm trying to activate it here um that's going to then activate this virtual environment hopefully that makes sense but now what we can do is go ahead and pip install so we're going to pip install so pip is the python package manager pip installed django so we're just going to install django that's basically going to get downloaded from the python python pi py so pi pi pi i call it about pi p i pi um package index so python um package library uh so that's gonna appear then if i go into lib and django you can see it's installed it right there so that's the package that i've downloaded notice that there's loads of other packages here those have been copied over when i created the virtual environment so if this feels too complicated just ignore just set this up and just get going as long as you can start the virtual environment that's all you need to really be able to do at this point so we've installed django now so now we've installed django we can now set up django so let's just start by typing django admin that's the django admin command django abin and now i want to start a project and i'm going to call this project core as per normal then a space and then a dot so that tells django to create the folder here and not to make a folder within a folder so the dot is important there so you can now see i've got this core folder i've got my settings and so on so that's my django core application but i'm also now want to make a new application so this is just basically an application where we can manage the project so what i want to do now is make a application so here now that the manage pi file is here that allows me to interface with django i can now use it so p y manage pi and now i can say start project or so start app and so i can now start an application and i'm going to call this application store there we go so now i have a new application called store and that's basically where i'm going to start building so once i've done that let's just set up the preliminaries here so in core settings just going to remove all this and i could go down to the installed apps and i want to do is uh no what i want to do is add the store here because i'm going to be building some models some tables inside of store i need to register it inside of my core settings that just basically attaches this application to the the project to the django project that we're building so just thinking it like that so we've got the core application which django knows about but it doesn't know about store so what we need to do is just tell django by putting it in the installed apps that store exists so we're just kind of extending the application okay so let's just go ahead and just click on any pi file anything with a dot pi so what we've got down here in the bottom left hand corner tells us what version of python we're using we're currently in the event folder or using event so if i click on that and then click on this here this is a path to the scripts python.exe in my vent in my virtual environment so i click there notice then this new folder appears this is a visual studio code folder so what i'm now going to do is i want to quickly set up my project so that when i save the page it gets formatted so all the python code gets formatted following kind of best practices or the python styling guide the pep8 so what i can do is a pip install here black so that's a piece of software which is or package so it's going to basically scan my code and refactor it to kind of meet the stylistic guidelines of of python so let's install black and let that do that then we're going to pip install i sort so that's going to sort out all my imports at the top here into some sort of logical order which is going to then obviously try to follow the pepe styling guidelines for python so i sort there we go so now what i want to do is just go into my settings and i now want to configure it so that when i press save it then runs black and also runs isort so i'm just going to copy and paste this in you can have a look at the project files for this so this is everything here so you can see basically i'm turning format on save on so when i save it's going to format we've got the python path we've got the argument so basically i'm going to use isort using the profile black from the black package you can see my formatting tool is going to be black i've changed the formatting argument here so the line length is going to be 119 instead of for example 79 so you can change the line length if you don't know what this means don't worry you can look at it later or you can change this but i prefer using 119 just follows the django um pattern and then here this basically allows us to kind of then configure eyesort and black to work excuse me and then down here is just some other extensions i'm going to now just quickly show you and set up so that's all these sets up there if i go into my extensions to just quickly show you what i've got so i've got beautify um for well i don't need that actually in this tutorial um so i've got django here so just type in django into the extensions here uh install django how to get that installed uh and then in addition to that i've got night owl i think this is a night out theme prettier so we're going to be utilizing prettier at some point with next js and then python and then sql lite so we can view our database so those are all the packages that i'm currently using for this project okay so now we've done this setup i think that's pretty much everything that we were going to uh configure so we've got the setup now we've installed django we created a virtual environment and we've got python installed so now we quickly move into building our database so there's a few things here that i need to think about before i build my database my database in general django really all feeds into the database the database is really the the biggest component to potentially think about or the most important component to think about before developing your application so here i've created some specifications or some things i need to think about before building my database so i want to store products so i'm going to need a products table i'm going to need categories now here in an e-commerce store we may have multiple layers so for example we may have shoes there might be multiple types of shoes and there may there might be more different types within those types so there's different layers here so i'm going to need to manage that and the simplest way of managing that is by utilizing mptt which i'll explain more in more detail further along in the tutorial so i also need to think about well i want multiple images per products so i couldn't store multiple images on the same table as the product so i'm going to need to think about making that interaction and then in addition to that different products have different types of data so if i want to sell shoes and t-shirts obviously those details about shoes and t-shirts are going to be different so i'm going to need to think a way of creating some sort of database where i can store all those different parameters attributes about my different products so if you download the code repository for this tutorial you're going to find inside the django folder a folder here called documentation and then the database schema so that will take you to this db diagram.io and that will take you to this website here and you can basically just load up the code on the left hand side then that just then shows you the schematics here of the database so this is just the components for the product and managing the product so i'll just zoom in a little bit here you can see that we've got the product table so product type category description slug regular price price discount price is active great at created at and updated at so that's the main table here and you can see it branches off to the category so we have this foreign key to from the category to the product table um and that's we're going to be utilizing mptt for that so we'll set that up shortly and i'll explain what that is we've then got a separate table here for the images this allows us to set up here a primary key of product a foreign key sorry a product to product so here we have a one to many link so for one product we may have many images so for one product it might be part of or so for one category there might be many products so the moment we've kind of set this up potentially so that there's only a product can only be in one category potentially um so that's the link there then we have this link here so product and product specification value so essentially what we have is for one product there are many different specifications uh so the many values or i suppose i should just call that something differently so for product specification so product attributes so for example here i may have a shoe or pair of shoes those attributes or specifications going to be slightly different than if i was trying to sell a book so the idea here is that this table here holds all those individual specifications or attributes about the product and that's assuming you've got multiple types of products so you can see if we've got this one to many here so one product might have many different specifications so you can see here in the products table we have the main product specifications or attributes that are going to be the same on any single product if it wasn't then we'd move it across here to there now how this table is then populated is by creating these two separate tables here so one we have a product type so we have a product type table so we're going to record all the different types of products we're going to have in our store and those product types are attached to specifications so for example here we might set up a product type of book and then we set up the specifications they're connected so for one book there are many specifications so a book might have a specification or an attribute of the amount of pages or an rsbn number for example so we can set that up individually here and then what we have then that all then connects to the product specification table so on the product specification product specification table we select the specifications that have been set for example about a book and then we can then fill those in for a particular product so the flow here is that we create a product type say book first and then we build the specifications that are attached to that book so there might be 10 or 12 different specifications then we go ahead and make a product so we select product and then we select what type of product it is saying in this case it's book so there has to be an entry here in the product type and that's associated to the specifications so now in my view i have the product name the product type and then all the specifications for that product will then appear then i can fill them in that thing all gets saved into the product specification table so that anytime i want those product specifications i can just grab them from here so hopefully that's clear as to why this has been set up that way that's what we're now going to develop in django so back in our django application let's just close down and close down that so that's a documentation folder right so in the store we'll go to models this is where we're going to build our model so before we do that because we're going to be using images we're just going to pip install pillow so that's going to give us some tools that is going to allow us to manage images within our application so we've installed pillow and then we're also going to install mptt so mptt is going to provide us like it says here a technique for storing hierarchical data in a database now of course we could build our own structure for storing hierarchical data in the database but it wouldn't be as efficient for example in some cases as if we were for example to use these third-party packages here which are designed and developed and tailored for saving hierarchical data now in an e-commerce store we may have multiple hierarchies of data or we may have a quite a large hierarchal structure sorry of data storing different products so it makes sense for us to utilize an application like this which is going to provide us essentially better performance as our structure hierarchical structure grows so all we need to do to get this started is install it so pip install django mptt so go ahead and have a little read of that if you want to learn a little bit more about the actual kind of uh algorithm that's been utilized or the process or the method sorry that's being utilized there so we're going to pip install django mptt and then we're going to just need to go into the core go to settings and then just add this in now notice here that i've got everything set up now remember that save facility i mentioned earlier with black and i thought so if i just type in um for example mptt and press save you can see that the dot the comma has been added i do need to add my single quote so let's just add single quotes and see what happens here press save it gets turned into double quotes so it's just providing black and i saw what we see that we installed earlier it's providing these type of features for us just to tidy up our code so that's mptt now connected to our django project so then let's go ahead and build up our database so we'll start from the top and we need to import in the model so we can extend and create models so here we're using the django rm if you're not familiar with django at all so django oh i am the object relational mapping tool so here what we're doing in django is we're building tables utilizing classes so python classes and these objects are going to be related or mapped across to the database that's going to be built by django so we build classes they get mapped across in the in the back of django in the back end or utilizing the object relational mapping tool in django uh into tables actual kind of tables you would see in a database if you're familiar with sql what's happening is it's taken our classes that we're building formats them into a structure which then enables django to then create sql and insert it into our database right so we're going to need these tools and model tools we're going to use some reverses here so we're going to build some urls potentially um i don't actually think we need it for this project i'm just going to bring this in so we've got them and then the translation toolkit so here potentially we may want to incorporate translations in the future so we're going to bring in the these utilities um to allow us to flag anything that we want translated so here it says import get text lazy as underscore so we're going to essentially flag anything that needs to be translated with underscore to indicate the fact that we're going to need to provide a translation later but we're just going to focus on actually building the tables and that's something that we can add in later now we are using mptt so we're going to need to bring this in so mptt.models import mptt model and the tree foreign key so we're going to need to bring those tools in from mptt allow us to use the mptt package right so we're going to start off with category you can see that it's going to be an npt model so we define that and then we're going to need a name so these are basically the fields that we're going to use the name field um you can see that i'm utilizing the vos name so just explicitly telling django you can see then i'm using the underscore um that's indicating this needs to be translated to help text so these type of things here can be useful if i'm making a back end uh if i'm making a kind of admin panel that needs to be translated into different languages so just kind of some helpful things that might be utilized later uh so i've got then the slug so i want to create a slug which is a url address that i can utilize to access individual items so this is a slug field that's what's going to provide me so a slug field for example is creating a url addressable url string so if i go back to my page here so this would be like a slug right here what you're looking at the top here that you can't actually see so i'll bring us down uh so that would be a slug so obviously all i want to do then the slug here is just create a path now obviously here we can't use spaces at the top here so that's one thing it's just check in the format to make sure there aren't any spaces when i create my slug uh let's go back so we've got the slug filled and then what we have is a parent equals tree foreign key so that's going to allow us to start to build up our connections between our different structures or hierarchical structure we're going to create this parent it's a tree foreign key particularly in this case to itself so that it can build that structure and build that hierarchical structure for our categories okay so it's active equals true so i'm going to put this in here so basically i'm just making this field i'm going to flag whether that category is active or not and that maybe allows me to give me a little bit more control of hiding a category of items potentially in the future and it's just there just in case i need it i can easily take that out so we've got some mppt mptt meta order insertion by name so there's loads of tools here that you can have a look at the mptt in terms of ordering things uh how things should be outputted by default etc so have a look at the documentation there but essentially that is pretty much it just name slug parent so that i can build connections between and hierarchical structures within my category and then is active if i want to use that so we've got the verbose name and the plural name which i was set up manually so categorically category categories and then we've got the translation toolkit in place so these might get translated later so that i can use different languages in my for example admin sections right so i've got an absolute url here in case i want to kind of set that up that's going to allow me to build links to individual products and then i've got the return string name okay so that's the category table sorted by all means just have a look at the code repository this isn't going to change at all now i've got the product type okay so now we're looking at this product type first so that we can build products or product types books shoes etc so this table is only going to have two fields so this should be pretty simple and straightforward so we're gonna have a name field and then is active and we've got some class meta as per normal robust name plural name and then the return string which is going to be name that's pretty much it that's pretty much all that's needed there um so we move on so next thing is the product specification so each product types can have multiple specifications so we're going to need a foreign key here so that's the product type foreign key to the product type table okay so we're building that up on delete equals model restrict so basically i'm just restricting any deletions of a table so if i try to delete something here normally it can delete whatever's in the foreign key table so i put restrict on just for now to prevent anyone kind of deleting anything and then i've got name again just add all the different attributes here parameters um and then the meta and then the string return right so that's that done so that's the product specification table now built product type and name and we've got the foreign key right so now we're going to build the product table so that's going to be slightly bigger so we've got the product type you can see that that's a foreign key to the product type that's frankie to the product type here prodigies moving around it doesn't it's not very helpful that's why i made this so you can see we bought built this foreign key now to product type so we can associate a product to a product type whether it be a book or shoe or whatever and then we've got the category so we're going to connect the product to the category with a foreign key so for one product there might be so for one category there might be many products so for many products there is just one category okay so that's our category foreign key sorted and now we can just go ahead and create the title the description zoom in in case you're kind of copying this out that's a description and then we've got the slug slug field so we can create an addressable kind of unit for this for particular products and i've got the regular price so here the price is going to be a decimal field so i can then specify the max amount of digits inside of there so five so at the moment i can only go up to say 99999 so we've got the decimal places 2 so that specifies i can have like a 900 so at 999.99 is like the maximum amount here so the two decimal points so depending on your currency you may want to kind of change this around slightly and then we've got the discount price so here i'm just specifying the regular price and discount price i might want a different table for creating discounts in general but i'm just kind of generalizing here again yours tables if you're actually building a store you might want to set this up slightly differently with some different tables for discounts etc and then i've got the is active so some products might not be active i don't want to display them if they're not active for example maybe i'm just setting some up to sell later or maybe i've got some sort of range of clothes or whatever that i want to remove seasonal type of things for example okay so then we got the created at to denote when it was created and when it was updated so auto now add that will create once and auto now will update itself every time we update any data in this database table and then we've got the metaclass information all good so ordering verbose name plural name just like we've done before and then the url absolute url so we're just grabbing a url um creating a url for this product and then we got the string return right so then we've got then the product specification table so we've got the presentation value now you can see it's going to have two i know it's not going to have any links at all it's just going to be a straightforward table i think here okay so we've got the foreign key sorry to the product table we've got a foreign key to the specification table apologies uh yeah so we've got the yeah many to one so for one product for one specification there might be many products that have one that single specification and then for one product there might be many specification values okay so then we got the value that we want to include and then we've just got the meta information and then we move on to the product image so we wanted to make sure there was multiple images for each product so that needed a different table we needed to include a different table otherwise we'd have multiple duplications within our product table so we've done that by creating a foreign key to the product table so we've got this foreign key here to the product table and now we've got the image field so this is an image field now remember here we're not actually storing the image in the database we're just storing a link to the image so we're going to create a help text for base name upload to so we're going to define where the images get uploaded to so we'll set that up shortly and then default equals image slash default png so you can set up a default image if you wanted to there's lots of things we could do here with this image of course and then we've got some alternative text so we can set up and save that in the database that's obviously important for accessibility on our page and then we just set out the parameters for that and then it's feature so we may have multiple products so multiple images for the product we need to flag one as is featured so the main image we want to use for that particular product so we've got set here is feature so that anytime we get a product we can just select the uh is feature image that's the image that we generally want to show people and obviously all the other images can be utilized um when we actually view the individual product right so we've got that created at updated at and then our meta as per normal okay and that's pretty much then set now our database for our project of course this is just the models or the fields or the tables even for our catalog obviously we're going to create some more later in the project right so now our table or we built the database tables for our store we now need to just make sure that we can actually utilize other images so just make sure that you've got pillow installed that's pip install pillow if you haven't already followed that earlier and the second now thing that we need to do is we need to set up so that our image can be stored somewhere so let's just go back into our project here so generally what we do is we set up the media folder that's where our images are going to be stored it can be anything you like because we're just going to hook up our project to that folder which you can name something different so in this core here we need to go to the settings and at the bottom of our file here we just need to define this media folder so we tell django where this folder is and to store any media inside of that folder so there's two settings here we've got the media url and the media root so the url is going to be for the url when we want to for example access these images from our page and then the base root here this is for for example django so it can access and save the images in the right place so we defined two parameters here at the base root just to avoid any confusion it was a comment that someone has made thank you very much and notice that we don't now bring in os to create our base directories so django has updated i think 3.1 it updated the base directory settings here which allowed us to access um without having to bring in uh from os and setting up in that way so you may see other tutorials online where they're a little bit i would say outdated but they might be utilizing uh different versions of django which bring in os here so nowadays we don't need to do that we just say base directory and behind the scenes that all sets up nicely for us to actually create the structure to a base directory that's the directory of this project and then slash media which is the media folder we've just created so that's basically just setting up a path to this folder so now we've done that we now need to just because we're working in the development environment we can go across to the urls so in our core urls we can now go ahead and just set up to allow now django to utilize that media folder so we're going to need to bring in two things here um the static and settings so sort out so notice when i press save they get rearranged into alphabetical order or particular order depending on types of imports i'm bringing in and that's i sort application that we installed earlier just sorting everything out for us so that's really handy and now what we can do is we can go ahead and create an if statement here so if settings.debug so we're going to go into settings have a look see if debug is enabled to true so if i go to the top here you can see debug equals true so when i'm in product when i'm in development mode that's on so it provides me any kind of additional information if there's any problems with the application so when i'm ready to go into production i need to turn that off because that potentially is providing valuable information to anyone who's trying to breach my application so what i'm doing here is just checking to make sure it's on so if it is on i'm going to use this url pattern here plus e course essentially i'm just going to basically create a new url pattern to the media url and the media route so i'm basically just developing a url to those media settings that i've just created so django knows the paths to them okay so remember here that these are just settings so media url this is just a variable i'm setting here so i'm utilizing these variables now in a way that django can actually then do something with them and that's what i'm doing here settings dot media url and document root equals and i'm just bringing that variable in you see these are the two variables i'm just basically bringing them in here making the url pattern for it so that django can utilize them so that's what's happening there hopefully that makes or clears that up a little bit all right so i think we're set up there so next thing is we're going to now configure the admin area so we can add some data to our application so as i've just said we're now going to go into the django admin section or we're going to create an a configuration so that we can add some data to our tables through the admin section and here we're going to be utilizing inlines and i'm going to explain what they are hopefully shortly so there's a few things that we need to do here before we do this so let's just go ahead in our application now we've got everything sorted let's go ahead and actually migrate this data so what we're now going to do is we've made all our models so now we're going to actually build our database so to do that in django we type in pi manage pi and then make migrations so we're going to prepare all those models that we've created earlier you can see here we're preparing all those models that we've created uh in a way that's now ready for us to migrate to the database notice that the database has been built we're just going to be utilizing sql lite for the minute because it's nice and simple to utilize so no postgres or anything like that just for now because that requires us to just install other things which you may not be familiar with and there's a lot already going on here so now we're going to do migrate that's now going to apply all those settings all those models to the database and now because i have the uh the sqlite package installed i can right click open the database appears down here so you can now see all the tables that i have inside of my database wonderful and you can see all the database tables i've generated through my store down here so these other tables here just generated through the fact that we want to set what we've defined sorry in our settings excuse me all these other installed apps here so that's why all those other tables are appearing for those other services that you might or may not want to include so that's why those other tables are appearing so that's now set up so now we can go into our store go to the admin so here we're going to register and configure our models so they appear in our admin area so we can then add data to our models or to our database so what we're going to need to do here then is first of all think about what we need to bring into this the admin area so we can actually display our tables inside of the admin area so i guess um yeah let's let's do this this way firstly because you may have never been in you may have never visited you may have never used sorry the django admin area so py manage pi and then let's create a super user so we're going to call this admin email nothing password admin notice you can't see anything when you type in the password that's okay so i created a new username and password admin admin and now let's just start up the project so i'm going to run this server so we're just going to have a look at the admin area first if you've never seen this before so 12701 colon eight thousand slash o slash admin so that's all we need to go into and there we go so let me just uh that's what we're gonna try and build what you see here so let me just uh close that server down because that's just a different service that's running uh so let's go back into our looks like i've got a different server running somewhere see if i can close this down there we go so now we can go into slash admin apologies okay so now we've got the admin area so admin admin so when we go into our admin area you can see there's nothing here yet so we need to register our models here so we can then start to add some data so let's start off by bringing in bringing in the mptt tools that we're going to need to utilize within our admin area so from mptt.admin i'm going to import the mptt model admin tools okay so i'll do that first and then let's just think about all the tables that we're going to bring in now it's pretty much all of them but i've us i've included them here um what's the word i'm thinking of i have made them explicit i've explicitly brought them in to my project like this so category product product image product specification the value in the product type that's pretty much all the tables that we built so we now have access to all of those so let's just go ahead for like a simple registration so admin admin dot site register category that's the table and then mptt model admin so that just ties up and allows us now to see the category table within our admin area so let's go back to the admin area refresh and now have the categories table so notice it's using the plural and that's from the model that we gen the verbose plural name that we generated uh earlier so if we go into our models category here there are both name plural categories so that's where we change that otherwise it would just be categories with an s on the end if we didn't have that so that's why we added that earlier so back here you can see we have categories so let's go ahead and just build some categories um let's just go for a start off with for example men so category name we could do this manually can we category you are safe so this is my slug and then there's no parent is active yes press save done right so now add a new category let's just go for shoes um a safe url i can again i'll set this up um i'll do it manually now but we could have that automatically filled in so that's going to be and the parent is going to be men so this is going to be men's shoes here i'm building up my categories for my application so press save and you can see that's been indented automatically so shoes is part of the men range close range so let's go ahead and now add just have some clothes here so that's gonna be part of men again um so i'll press save there so you can see that then let's just go for shoes different types of shoes so let's add a category here let's call this boots so that's gonna be part of shoes press save and you can see now that's kind of been indented in shoes so this is what mptt is providing us a wonderful way of quickly creating these higher this hierarchical structure of all of our categories here but behind the scenes when we try to utilize this to grab the data from these categories that's where it comes into its own helps the performance of doing that so there we go that's the categories in place so now then let's have a look here so we've got we want to show the product type so we want a screen where we can actually add the product type but what would be really handy is if we can add the product type and the specifications at the same time otherwise we would create a table for product type and then we would need to go and create a new section called product specifications and that just means that they're not in the same page so what we can do here is we can create inlines so we can take this table and this table we can stick them together so that when we add data here we can add data here at the same time that's the whole idea of inline so let's have a look at this in action so what we want to do first is we want to create we want the product specification so let's just go back so we know what we're doing here so we want to get the products we want to address this first because we want to basically show this with the product specifications in the same view so we start off by registering this product specification table as an inline table so i'm just going to paste this in right so there we go so product specification table i'm going to call it product specification inline admin.tabular inline the model is the product specification that's what i brought in earlier so that just hooks it up to the model so that's going to be an inline so what i can now do is i can now create the product type table so i registered the product type table and then i created this class here where i'm i define the inlines as product specification inline and you can see that that's this one here this class here so basically i just basically take this and put it inside of here at the same time registered the product type table and that now will show me the product type fields and the product specification fields so let's go ahead and have a look at that so here we refresh and now i've got product types only so i go into product types add the product types and you can see here i've got the product type and the specifications so let's just um create a product type of shoe i keep everything lowercase shoe uh shoes and then the name so the shoes is going to be size um it's going to be color uk spelling of course and then it's daddy so size and color i can add obviously more if i want to so those are now the specifications for shoe there we go so what i'm going to show you can see i've got those and i can add more of course django provides us a lot here um straight off and i can delete i can add more and so on so those are my specifications now for my shoot so now what i need is a way of creating a product um so that i can select a product type and then also add to the product specification value so there's potentially two in lines that i need to now make for my product so when i show the product to add products i want to also select product type and add to the product specification value table so that's the next task so let's go ahead and first of all let's create two inlines one in line's going to be for the product image because i haven't mentioned that either i need to bring in the image as well because i want to add images apologies so that's going to be my first one and then the second one is just going to be the specification value which is going to be this here so for now i'm not going to actually bring in product type because that's just going to be automatically connected to product and i'm going to be able to select that django's just going to do that for me so i'm just going to bring in the product specification value table and the product image table all right let's just do that first um because the product specification there was going to be populated by the product specification here i was going to access it or have access to that because of the foreign key so let's just go back in so i'm going to create one in line for the product image and one in line for the product specification value table so those are the two tables i mentioned this one here and this one over here so let's go back and now let's build up the the product in line so we're going to register the product we're going to bring in those inlines just like that so register our product table and then the inlines the two in lines that we just created so hopefully that kind of spells that up nicely you kind of see what's happening here i'm able to bring in different tables so i can add more data from multiple tables right so now we've got that let's go back into our admin you can now see i have products so let's go in and add a new product so product type because i've got the foreign key it produces the drop down the category it's going to be shoes or in this case the character is going to be boots so boots is connected to shoes so when i show shoes it should show all the boots if i request that so boots and the title is just going to be boots that'll do as you can see i've got this slug regular price whatever it might be 100 discount price and product visibility now you can also see down here i've got the press product specifications now if you remember for shoes i set out the size and the color so i now have this specification available so i can now say size 10 color blue black whatever and i can also add more if i go back to the specification table i can add more parameters i can include um or i can do it here in actual fact potentially and then i've got the product images so this is the other table so now i can select some images so here i select choose a file i'm just going to go for this for now the default open and then i can select whether it's a feature or not i can select the alternative text so image of shoot there we go so i can add all that in press save there we go so i now have my new product with all that information connected to it now because i've had an image here let's just go back into my project and let's go into media you can now see in images it's created a new folder called images and we now have the default file that we just uploaded so everything is working there as well so now we have all of the data in place so that should work um there's no other test that we should need to do here as long as your server is on there's no errors coming up and you can access the admin and add all the data the data now is in our models so now we can push ahead and not now start to think about drf so we need to configure drf or setup install drf so django drf is a package that allows us to convert our application into an api an application program interface so that for example in this case next js can access the data in the database through django so we want to control how people can access this data so what we need to do is we need to set up some urls so that we can point next to that data that we want to collect through the url and then we need to then create some views which is going to get that request and then set off the process so we can get the data from the database etc and format it in a way so using the serializers to essentially format that data from the database or to the database in a way that can be used uh for the front end to pass the data across to next js and that's pretty much what we need to do next so we're going to set up just a a simple view to begin with so we can access all the data in the database and then we're going to move across to next and start to set up the front end for this application so let's go ahead now and get back into django and first of all we need to install django drf so i have kind of summarized django drf the rest framework and i'm assuming that because you've clicked on this tutorial you've got a general idea of what the rest framework is so we're creating web apis as i explained earlier it's going to allow next.js to basically collect data from the django database that's essentially not sure i guess what's happening here so we're going to need to install it so installation you can see that we're told to pip install uh django rest framework so let's go ahead and do that so pip install django rest framework there we go now because we pretty much installed everything we're going to be utilizing i'm going to type in pip freeze and then write chevron requirements dot text so that's going to create a requirements text file so i can see all the applications that all the packages are installed and then you can utilize that to replicate this application should you want to if you download it so that's that and then you can see we're told to then add this to the installed apps so let's go ahead and do that so in our core settings we've got our installed apps here there we go so that's the rest framework now activated within our application so for added security we are told that what we can do here is we can define these settings here so that the default permissions are essentially based upon the the permissions of the user or are just read only so if anonymous persons tries to access the data they just have read only else if you're logged in as admin say you just have access to the models as per normal so we can add that in for now um we can configure that a later point so inside of core and settings at the bottom here we can add in these settings here just copy and paste those in there we go so that's just copied and pasted in there a little bit of user permissions and authentication okay so now that's in place let's now head over to our urls right so there's a little bit of setting up here to do in our urls and i'm assuming that you understand or have used django before but if you haven't very quickly what's happening here is that the user sends a request to django that request is based upon the url so django will have a look at that url in its list to try and make a match so in this case we went to the admin area earlier remember that's made that match to this these settings these functions here so what we need to do is we need to add some paths to collect some data so that's what we need to do now we want to define these urls inside of our store folder or application here so we're just going to extend it here and say to our urls to also look inside of our store so we're just going to extend it by utilizing a path we're going to create a new path to the urls in the store so let's just bring in include here this tool so we just include these urls so what we now need to do is go into our store create a new file called urls.pi and then just basically create our urls and here just allows us to chunk up our urls to manage them in a separate place so notice i've got a namespace of store that's important when we set up the urls so we need to make sure that for example we have the app name store that needs to match the namespace it's optional but i like to use it in some applications so i can easily access the urls by the name store or reference it by store now now we put this in you can also see that i've included the views because the url is going to be connected to our views the views is going to perform the actions et cetera collect the data and so on so let's now add some paths that we need so we're going to need our url patterns as per normal and then we're going to create a new path so the first path we're going to make is a path to our home this is going to show all the data so basically when when uh next.js tries to access this path this url it's basically going to return from the view all the data in the database so all the products that's the first kind of view that i'm building here so notice it's uh api slash api so the url here is nothing so someone needs to type in the domain name slash api slash to get to this view which is going to collect all the data from the database so notice i've connected this to a view product list view that's going to list all the views oh sorry all the products in our database so that's now need needs to be connected to a view so that's our first url let's go to the views so now we need to connect that up so we can do that obviously by creating a new class i say obviously sorry we can connect that up by creating a new class that's going to be called product i got a product list view that's what i called it um and what we're going to bring in is the uh generics so we're just going to use the generics here from django these are pre-created classes that perform functionality for us behind the scenes so we're going to use the list api view um so we're going to need to bring that in of course so from the rest framework generics so these are just pre-created classes that are going to perform things for us so here we want to basically list a load of stuff so this is a pre-created class from the rest framework which is basically just going to perform those functions for us to save us having to write them out so we want to list some stuff what do we want to list so what we need to do is we need to tell django what we want to list so we define in this case the database so from the product database we want to collect all the data and return it into query set so because we're doing that obviously we're going to need to bring our models so let's bring in the category in the product model from our models table so here we define the models so now we're in the view we're just making it available so that we can do stuff with them so that's what we've done there from dot models import category and product right so um that's that now included so that gets all the data from my product so the idea here excuse me so the idea here is that i want to collect all my data but i want to make that data kind of formatted i want to format that data in a way that i can then send it across to next.js and this is essentially what the serializer does so we're going to build a serializer which basically collects that data and formats it in a way that we can utilize and send it across to next js front end so we're bringing the serializer class here i'm going to call this the product serializer and we're going to need to kind of now build a new file here called serializers so in my store i'll make a new file i call it serializers.pi so inside of here i basically just need to define a few things all right so here i need to bring in my serializers from the rest framework which does all the job the work for us we're going to need to bring in our model so from dot models um we're going to need to import the product table right so that's the models that we're going to need and now i need to build a product serializer model so basically what i need to do here is define the name of my serializer extend from serializers i want to make a model serializer so basically i want to collect some data from a database and then basically format it in a way that i can then send it back like i said to next js so all i need to do here is set out a class meta and then i need to just define the the model that i'm using so the model is equals my product model and then i can define the fields i want to collect from my product model so fields equals and then let's define the id uh so i want to bring back the title and then maybe also the description so these are all fields in my table id field description so let's go back into my models let's go back into the product table so product type category title description so these are all the models field sorry in my model and i'm basically just defining which ones i want to return and format the data in readiness to be then presented to next js so that's that done what i now need to do is hook this product serializer to my view notice here i brought this in this is the name of the serializer but i now need to kind of make it available so i need to say from dot serializer or just yeah we can do it this way from dot serializer import and that's going to be the product serializer that's right okay so i press save notice that the iso is sorting that out because um it formats into different these are kind of uh libraries from other packages whereas this is kind of local imports so it's just made a separation here with a space it does that for me the iso package with black and there we go so what i should have now so notice i'm using the api view here which means i can actually now graphically see what's going on and check to see if this is returning the right data so let's go ahead now and start our there we go we've started the application now so what we should now be able to do is utilize this api view and to actually see what's going on so let's go back into our project one blah blah and then remember the root for our data was api so let's do that and there we go so we now have this wonderful graphical interface this user interface here and you can now see what's being returned from the database if i go to this link this url it's returning the item so let's just quickly uh build a new item so i'm just going to go to the admin let's just go into products let's just add a new product another shoe is going to be boots again title boots 2 so let's just create boots too regular price it's gonna be a fairly cheap boot uh specification size whatever um and then image let's just give it a different image save that so let's go back let's go back into our api so path to our api you can now see we've got two products so we can clearly see now that our api is working we've collected data from our api and we're returning it and these two items here so now we can flick over to next js and we can start to now build up our front end our home page which is going to show all the products that we have in our database okay so now moving across to next js so we're going to need to install node well we don't have to but we're going to follow this process we're going to install node that's going to give us the node package manager and that's going to allow us to then kind of install next um and any other kind of packages that we're going to need while we're working with node with uh next year sorry and then we're going to start our next project if you've not done that before i'll just quickly take you through that process and then install the material ui package so once we've done that we can then start building our application the front end so let's get started so if you haven't already got this uh no js this is just going to give us access to npm so we can download packages like i said so this is just probably a simple painless process hopefully installing windows mac or linux for example go ahead and install that maybe do a restart of your machine so that's kind of stage one so get that installed and then we can move across and let's start to then build a new application with next.js so open up a new window in visual studio code let's open up a new folder so we were using a new folder on the desktop for me here it was called nextdrf so we've already created a structure that was django that we created previously so we're now in the next folder so let's go in there select that folder so assuming you've got npm or access to npm package we now need to install next so there's a few ways of doing this i'm just going to take you through kind of the automated um way uh to get things up and running nice and quickly so next js so if you haven't used next js before uh it's pretty much like react but it offers some other kind of tools so behind the scenes it's just react but it has some interesting tools such as server-side rendering and generating kind of static web pages so there's some cool tools that it provides is becoming a lot more popular in industry i'd say so let's go ahead and have a look at the documentations so you can see here we've got the setup so if you're using yarn you can use yarn but we can mpx create next app so that's going to allow us to kind of start a new application so let's give this a go mpx create next app we're going to be asked to create a name for our product project so i'm just going to call that as per normal core so that's going to take a couple minutes maybe on your machine or a couple of seconds to actually fetch all the data and install kind of a framework for your application so now you notice that we created this new folder called core and everything's inside of core so the first thing you need to do is just cd into that core change directory cd core and now we're inside of this area so you just need to remember that we're working inside of this folder sometimes it's easy to forget we're in the wrong place so just make sure we're in core and now what we can do is we can do an npm run dev to actually check to see if the project is working okay so you can see that it started on zero zero zero three thousand or logo host three thousand port three thousand so let's go back here and let's start the product and there we go so next is now installed we're ready to go so if you go back to the documentation it does take you through how to manually set up if you prefer to do it that way or if you're interested in next outside of this tutorial by all means have a look at some of the documentation so next up we're going to install material ui onto next so this is going to provide us the components for building our page so css components java script components etc so that we can build our user interface so obviously there's loads of different ui packages out there nowadays um i've just simply selected this one because it is very popular and that's pretty much it really because of the popularity that's why i've selected it so it does give us some interesting i'd say interesting it gives us some instructions in here here on how to use this so we just need to install it first so just make sure you're in the right directory and that needs to be the core directory so just terminate that control and c and just stop the server that's npm install material ui core so let's go ahead and do that so that'll take a couple of seconds so the next thing to do is material ui and next js they obviously work in a very particular way right so without getting kind of too technical here there is a a process or a preferred method of installing or configuring material ui with next.js to avoid some of the errors that you might receive if you just went the traditional approach of installing material ui and utilizing it that way so here if you head over to in this case it's going to be material ui get started example products i've just typed in next.js material ui into google here so you've got some examples here depending what platform you're using and so i'm going to select next.js and that's going to take me to this page here so what i'm going to do is i'm just going to quickly configure next js with material ui in our project so we've got a blank brand new next project here so without going into like too much detail here what's going on i'm basically just going to prune some of the things here so i just need to get rid of this style i don't need to start i'm going to go into my global css so i'm just tidying up first of all i'm going to keep i'm going to keep that in place in my global css here and utilize that potentially in my project so i'm going to keep the sgv svg for now and all these other files here that's all good so let's go into the example here material ui example and the first thing i need to do is go into my the src folder and i just want to create a new file here called theme so this is kind of a global theme file for material ui which i configure configure and override things so in my uh pages here i'm going to create a new file called theme oh no i'm not no i'm not not in there not in there in in a new folder sorry so let's just move this down okay so call right click new folder src and then i'm going to create a new file called theme.js in there okay so that's where it's going to reside so inside of this file i'm just going to copy everything that's in here for now so this is just some overrides potentially or configurations for the material ui package so themes boom in themes okay so all i've done is tied it up so far apologies tidied up i've now created a new folder here called s rc inside the core folder in the core section i've created a new file called theme.js and i've just copied that in you can see this is just some simple theming and that we can set up for our project and we will kind of dip into here and add some kind of overrides or some different theme options for our theme so we've got two areas it gets a bit complicated here because we've got the global css and now we've got the theme js file as well we can add different styles okay so that's stage one so next up we're just going to go into the pages and j the app.js and i'm just going to go back into here next js i'm going to go back into my pages the pages now here and then go to app and i'm just going to copy everything inside this app here this is all good so do that move it across app.js in there done right so i'm linking to dash dash dot src the theme so that's this one here so that makes the link here so that's the um underscore app.js file that's all set up let me just close this down right so that's that done so next up i just need to copy over the document.js so i need to make a new file called document.js that's going to be in pages new file document.underscore.document.js okay so now i've done that let's just add everything inside of here uh notice here it's giving you some explanation in terms of what's happening here and the fact that we need some sort of resolution order in order to get all the styling correctly configured because one of the problems is here if we don't follow this procedure we get a little bit of flickering in the application because of conflicts of how things are loaded at what point and because next.js's are very much um trying to do other things for us in terms of um in terms of dynamic dynamically loading pages etc um server-side rendering um we just need to set up this way so we've copied that i've gone back into document here pasted that in that's all good to go so there's nothing else we need to do there other than potentially remove this link to this font because we're not going to be utilizing it right there no we're not okay so let's take that out um and that's pretty much it there's nothing else we need to change there so now we've got this in place and i appreciate that i'm not really explaining anything here let's just go with this for a minute let's just now go ahead there is a problem i think let's just run the development server let's go into the page again and refresh you can see that there's a problem that's been looks like there's a problem here that's because i removed these styles so you can see that's in the index page index.js page so let's just resolve this problem by easy just reading this it just tells us where things are so index.js this style here that's no longer being utilized and you can now see well there's there's loads of problems loads and problems here so underscore document styles.container um okay so that seems to be a problem now the easiest thing to do here all right is just going to index file from the head section to the footer section we're just going to remove everything there just going to type in the word hello i'm going to remove the head from the top that's pretty much all i'm going to need there go back in refresh now it says the star name so i just need to remove that too so class names styles containers that doesn't exist at the moment so all i have left on the index.js is div hello div let's go back and everything is now working so as far as i'm concerned as long as you've got to this point we've now installed node we've started our next project and we've installed material ui so i've made a point of not really explaining all these files and what they do it's very easy just to type into google folder structure of next it's fairly similar to react if you come from react the different files we've got here everything if you're new to this completely new to this django and next we're doing a lot here there's a lot to to learn here and i'm recommending that if you are completely new let's just go with the flow as the project progresses i can give you some more information about things and we can just utilize these files and that's a better way of understanding what is going on so there is a lot going on that is for sure but let's just understand one thing here we've got a folder called pages let's just think about a web page so a web page is a file so your web page at the moment is just here index right so you can see that we've created this export default function home and we don't have the yep and all we've done here inside of the return is we've just identified the code that we want to display on the page so this is a structure div hello div let's go back here and right click and view the page source and notice that we've got loads of stuff here we've got the doctype we've got the html header et cetera et cetera there's loads going on where did all that stuff come from so in addition to our actual code which is um looks like it's down here that's the actual code that we typed in um i know so this one here you can see that there's loads of stuff being wrapped around this code that's the only code that we've kind of typed in on this page and it's been displayed so just very quickly what's happening here then is that this page is being wrapped up nicely so you can see the document page is spelling out some sort of structure for our page and you can see they've got this script or the main that's basically where our index page is being kind of injected in there's two files here document and app and they do serve slightly different they do serve us slightly differently but essentially what they're doing is they're allowing us to provide a structure for our pages and all this other stuff here these are just things that we can bring in to the page so for example if i wanted something to show up on every single page i can configure these pages here to make these overrides so i can do that and one thing that we're going to do is override the head section on each page so we'll see that happening but for now there's a load of stuff here would take me hours to potentially uh explain what's going on but essentially we have now set up material why as long as it's working like mine is we're just ready to go we're just ready to develop so even if you weren't to learn any of this here we are now ready to develop further so let's do that let's get started right so i was kind of explaining this idea of pages so all your web pages and next are going to be placed inside of this pages folder here so we've got the index page that's our home page and that's what we're going to develop first so before we start using material wire i just wanted to show you a basic setup of what's happening here so behind the scenes we're using material ui that has all kind of stars and components that we might want to bring into our application so in our index page this is how we're going to set the page up we're going to bring in our our style say for example in this case um and you can see here it's referring to theme it's returned to equal make styles now before you notice in the src we had something called theme and inside of here you can see we're exporting this as theme so behind the scenes we're bringing this code in so using this app and document page what we're doing is we're bringing this in and making this available for our whole application this is what this theme is and i can build upon this theme page here and add different colors etc and these are the type of styles i want to bring in the page so i can override them here or potentially i can override them just here so basically i just bring in those styles i can then override them here if i want to as well and then what i then do i can make this css overrides here i'm not using css here but um i can define the styles here and then you can see here i've actually then started to make it available inside of my app so the last thing i need to do here if i want to kind of connect this up is i need to bring in class or some classes so here for example i'm going to say class name in the div if you're familiar with classes in css you'd add class equals whatever so here's the equivalent class name and then classes referring to this referring to this here and then it's going to be in this case card grid so let's just change that to example so here what i now need to do is set up my uh styling up here example and then i can just define the parameters here so for example if i wanted for example color i could just change the color as per normal and then so on so i need to comment the end here so that's how it's kind of all connected up well kind of basic theme in in terms of styling i can still use my global css if i want to that's a css page here but alternatively i can define styles in my theme i can then also define styles here and then bring them into my project utilizing this here this variable here and then i can then define them on my divs or whatever as i normally do to build pages right here so hopefully that was useful in terms of your coming from general web development you're trying to work out how this works material because to begin with it's pretty tricky to customer to work with but once you get the hang of it like anything it's pretty simple to use so you may as well see this in action i've changed this to ccc like a light gray color so this should now be light gray in here so let's just make sure the server's on yep as we go back into our page and you can now see the text has gone like gray apologies of film it's a bit small but you can see there it's gone light gray so you can see that styling is now actually being used now i'm going to just take a stop gap here and just show you the code on each page because if you're having a problem at this point i don't have any code repositories to say i'll just quickly show just quickly have a look at that so i do want you to be able to say you got to this point the server's running for you and everything is working exactly how i'm showing you so let me just show you all the pages i've got here so next is obviously running at the moment uh api there's nothing i've changed there i've got apps so this is what's inside apps this is my code inside of apps here i'm basically just bringing in for example the theme my baseline from the material ui tools uh theme provider i've got a head section prototype react and you can see that i've got the export here so this has just been copied and pasted i haven't changed anything here i don't think as it's been copied and pasted that's what my apps pages looks like this is my documents page again i've made no changes i've copied and pasted this from where i showed you earlier so theme yep server document yep so it should look like that up here and then down here it should look like that so just double check that my index page this is my index page now um that's what it looks like i've changed the color of my text there just to showcase how to kind of incorporate material ui into our page here so in public i haven't changed anything i create a new folder called src i've got my theme inside of here it's just been copied and pasted again from the example project and then i've got my global css looks like this and that's it that's all the changes i've made so far so hopefully you've got to this point and now we can push forward so what framework like this provides us is a way of subdividing or decomp decompartmentalizing or minimizing scaling down our application into components so that we can make reusable components that we can use on multiple pages so for example the header that's an element or component that we want to use on multiple pages so it makes sense that we build it individually on a separate document page file and then we incorporate it into any page that we want and the wonderful thing here is what we could do we could utilize the the document and the app here to actually inject it into every page automatically but we're going to do everything manually to kind of begin with so everything that do here how we kind of produce them we bring in the apis et cetera everything here is going to be on screen so as much as possible so we can see what's going on and later on the project we can start to kind of structure our code in a more uh traditional way i guess or more structured way so let's go ahead now and build a new component so i'm going to make a new folder here in the core called components okay so components inside the components i want to make my first component which is going to be a [Music] it's going to be the header isn't it yep so new file header dot js there we go right so let's just start off small i don't know where i've got all these windows open right so let's just start it up small and let's just go into our index this is a nice little bass line here so we're going to copy this over to our header we've got all these kind of uh material ui stuff already built in for us so we can just remove the example we can get rid of the hello and the class we're going to have to keep something there so it's probably better off just to utilize this for example um so we're going to need something that was otherwise it's going to cause an issue so that should be okay right so this is our header page now we're going to call this header we're going to export it as header so there we go so let's go ahead and build a header section now before we start to kind of integrate everything in let's actually just build a a simple hello so we can see it actually working so we're going to create a component like this and we're going to then integrate it or bring it into other pages so for example our index we want to bring it into here so we need to import it in so we need to similar to what we do in django we just imported in so import header so this is the name of it that's how we're going to reference it within our application header and then from header it's our input header from and then we just need to find it so it's going to be um let's just do it the kind of manual way here so we're inside of this index inside of our pages so we need to come out of pages and we need to go into components so let's do that so we go out of pages inside of the components inside the components we've got header and there we go so that makes the link now notice it's grayed out because we're not actually utilizing it so let's for example now let's just uh create these kind of placements so this is just a techniques allows us to kind of code what's happening here some everything needs to be wrapped around an element now so if for example i i did this at the top here div i put a div here for example this wouldn't render correctly okay so everything needs to be wrapped up here so we can use these here which is essentially going to create a nothing block um so let's uh put our header here so we've referred to as header so what we can do is we can use the now refer to it as header now uh i don't think there's gonna be anything inside of it so we'll just finish that off like that so we're gonna finish that off and that's our header so we basically brought that code into that space there now let's put a name in here so we know that from header we should say hello it should say hello and then in their index it should say mike so let's go ahead and refresh and you can now see it says hello mike so you can clearly see that our header is loading on the page and then after that the word mic so that's just a showcase or just to show that how to actually kind of import elements into your application so we've created this component and we brought it in so now what we need to do is just go into our header and actually build an actual header so let's start off by creating some sort of html semantic section so we're going to call it section nav there we go and now we need to learn a little bit more about material ui so let's go into a new tab let's go to material ui so we're going to need a component first called so look at the components so we're going to need a component called app bar so you can see here this app bar produces components like this for example so you can see there's pre-written code which i can just copy and paste and use now because i'm using the same kind of back end material ui back end this code would just work for me because i'm using the same platform as this page for example so what i can do is i can have a look at the code now notice here in the code you've got not only the code that actually creates that element but you've also got the styles which you now are familiar with so we need to copy and paste those styles in that style area you can see that we're bringing the styles there to the page so it's all what i've shown you so far and up here these are the resources now material ui is a massive application a massive package now the idea is that we don't want to bring the whole package into our application because that's going to make it's going to bloat our application with loads of stuff so the idea is that we import small components that we require for this particular page so here what i've done you can see the imports all the different components that we're going to need to actually run this page here so let's just go ahead and do this um so we've got this app bar here so let's go in and that's what i love how i love programming uh so now if i press control alt and f so shift o and f sorry shift on f you can see it's formatted for me nicely so the reason why that is is because i am using prettier so i've been still prettier here and that basically is doing that for me so that was uh uh shift alt f and if i do a um ctrl shift f i can see i can use the formatting tool and it tells the shortcut here for it okay so that's what is kind of lining things up nicely for me and providing those indents so now i've got that in place if i were to run that there would be issues because it says you've not registered these components yet so in addition to that i also need to register the component so up here all the components so let's just uh copy those in um so that it's also going to include that so i don't need duplicates it's just there so that's all the components i'm going to need for that page wonderful so now let's take a look and it still says it some failed to load because these icons here these are loaded in differently so i need to actually now install that package so it installs these menu icons or these icons that i can utilize through material ui so on the material ui installation page if you go down to the i don't think i've gone past it hey the svg icons you can see we've got the yarn and the mpn mpm install option so let's just uh install the icons so let's do that oh that's not very helpful so just stop the server control c y and then we'll load that up so we're installing material ui icons so once that's done that should potentially solve that problem but while that's happening let's just go ahead and go back into our our app bar here we're just going to copy this in here all these styles here so i'm just going to copy those in to my project now that needs to go into the middle here go ahead and do that okay so now when i go back and refresh it's not working because i've stopped the server of course so let's just rerun the server npm dev run it's going to load and there we go so it's loaded this nav bar for us and nothing else is working here it's just a simple nav bar with some buttons but you can see how you're bringing components now in from the material ui how you're going to bring in components so you need to make sure that you've got all the components of that component to bring in so you need to bring in the imports the styling if it requires any styling and you can also now see you need to also bring in the actual uh the code at the bottom here so there's three areas so i do hope you feel as though you're achieving something here or at least you're getting the idea of utilizing uh next js and material ui hopefully i've explained it in a nice simplistic way if i haven't if you're having problems with the code then just let me know in the comments and i'll try and help if i can so now we've got this in place we now need to think about styling this so at this point um what we can do is now go back into our code let's just uh think about this so we've got the app bar edges start class name color inherit we've got the menu icon so let's just uh focus on what's happening here we've got the app bar position is static so we can change this to sticky etc so that when we move up the page it doesn't disappear etc but so you can see it's static at the moment which probably means that when i re if we had some stuff on this page it would just scroll up so we can do all those things now if you want to access that then just go over to if you want to learn more about that sorry just need to go over to the app bar and then just have a look at the materials here it will give you predominantly at the bottom all the different settings that you can define um so i go into api app bar that's going to provide me some more information about what i can include by default so this is going to take the this is where it takes a long time to learn something like this potentially and this when you start to think well i could just easily just make this on my own utilizing css etc obviously over time that time starts to change and that it takes you quicker it's quicker essentially then to utilize this and it is to write it yourself so stick with it if there's any questions please just let me know so let's go ahead now and make some changes so the first change i want to make is i want to get rid of this elevation here you can see that there's a shading here which makes it look like it's elevated from the page so let's go ahead and do that by just adding into the app bar elevation equals zero so i've got my server on anytime i make a change it will refresh so you can now see it's gone elevation is gone so i also want to change the color so to change the color i am going to basically make a class for this so what i'm going to do is add a class so that was the class name equals and classes so i'm going to call this at bar desktop for now um oh no i'm not actually going to call it that pod desktop i'm going to call this uh the toolbar main or so at bar main sorry i'm going to call this that bar yeah mate this is my main app bar i'm going to have multiple app bar c on this page so i've called that app bar main so what i now need to do is just go up here um title menu root account just uh i'm going to get rid of these i don't need to alright so i'm going to create this uh a new styling here um there we go and then what i want to do here is i want to set the color so that's going to be background color of course so let's have a look here background color and then i want to set that to a particular color of course so i'm going to change that to 2 d2 dt 2ds there we go so that should change the color there we go ok then we've got the color sorted now um so let's go ahead and just get rid of some of this stuff here so i don't want this button for now so let's get rid of the button i'm going to get this type of i'm going to just get rid of everything there we go so there's nothing now in my toolbar so what you're going to find probably is if i add some text here it's going to be white which is all great so i don't need to worry about changing the color of it but what i want to do want to do is obviously add a logo here so i've already pre-created a logo i do apologize i've already pre-created a logo it's an svg you can just copy and paste from the repository or just add your own logo so there it is so you need to be a bit careful here because this code here might conflict with um with the process here so you just need to make sure for example if i had class here that's incorrect it should be class name so this is probably a good time to introduce jsx if you haven't or if you weren't if you didn't know what i was doing there notice that i'm not just typing in normal css i'm having to use jsx here which is it's called gsx uh it's a syntax extension for javascript so basically what this is allowing me to do is to mix up javascript and html in the same space that's essentially what these um frameworks allow me to do which is really kind of nice but notice here i can't use this class equals like i would do a normal html document here i'm using class name so this is where jsx and up here as well you'll notice for example background color in css should be like background dash color for example so you can see here i'm using jsx here um so by all means have a little read at yjsx what it allows us to do etc so that's our jsx right so and just to cover that i didn't want to really talk anything more about that but you can see there's a lovely guide here for you to have a look right so um let's just go ahead and that's obviously important because maybe you were typing in some html and you're like wondering what some some css and you're wondering what was going on so here then class name class name svg so you just need to be careful here uh to make sure that you kind of extract any of the svg code out that can't be utilized here and just place it within a new section so i've created a class here called svg i've created a fill of fff to the color of the uh svg and i've created a nice little bit padding there because i i just need that and there we go so that's my logo in place like i said you can just copy and paste that in um the i don't know why i've added padding there i think it's because i was being too lazy to line it up properly and once we get into the uh once we kind of size this up slightly but it's okay it's all centered here so that's my navigation bar at the moment so if i want to make another app bar well i just define another wrap bar right and you can see here i've got position relative elevation again i've created a new class name for this called at bar desktop inside we've got a container now this container here notice that it's got the max width of lg and then i put my toolbar inside of it and in actual fact what i'm going to do is do the same thing for this app bar too so what i'm going to do here is um put a container so a container is a container a div container so this is going to be before toolbar i'm going to create a nice little container here and after toolbar let me just finish off that container there we go so what i'm doing here is i'm containing this item these this item this toolbar within this container with a max width of lg large so that means i haven't got a full width um page i've just got it's going to be um the toolbar is going to be retained within that size so let's just see that in action um i don't have container so i need to bring in container into my application so at the top here i'm going to need to bring in the container resource so let's import container there we go from material ui so i brought that in uh let's go back and refresh you can see now when i refresh sorry when i scale down you can see it's contained so instead of it being full width it's now contained within that area so that's what the container is doing now change it to lg that's the lg is referring to a size a maximum amount of pixels um and i'll explain that shortly so there we go so we've now done that we've added this top section here i do want to style that of course so this is a new app bar at the top here so this one's going to be called at bar desktop the toolbar is going to have a class here toolbar desktop so let's just um add in some more styling so it gets a little bit boring for you now because um i'm going to create a this is going to be our toolbar so it's going to have a class of class name of toolbar so that's going to be toolbar main app main that's going to be toolbar desktop so this is only going to be shown on the desktop this app bar here so what i need to do now is just kind of bring in some of these classes for this so i've already pre-created these of course so let's bring in my app bar desktop so that'll give me a background color and color of my text if i need to find that explicitly i've also defined my tool bar main so let's bring in that as well so i'm going to try and separate those that's my toolbar main padding 0 min height 60. so that's just sizing that main toolbar you saw here this size here so you can see that's kind of slightly been reduced um so now i've done that let's uh bring in i've got app bar desktop apple main toolbar i mean so i need toolbar desktop let's bring in my toolbar desktop there we go so that's going to be a size of 30. so let's go back in now you can now see that that has been changed so you can see how that's kind of moving around and how i'm kind of configuring that through the styling here okay so that allows me to set that up there so i've now got two app bars here the first app bar that gray at bar and then the secondary main at bar so i'm going to have a third one which is going to be categories but i'm not too worried about that for now i'll do that after we've sorted out the main page but what we have now is a good header or a header section so we can now start working within the main content so before we start collecting data from our api and displaying it in next.js let's just double check to make sure the server is turned on now we did previously go into our api view to check to see if we can collect the data so this is the url to this data so refresh so the server's still on so now i need to kind of replicate this but in next.js i need to collect the data so i'm going to introduce you very quickly to postman this is a similar tool which we can utilize to check to see if we can access data from an api so install it go to the tab here type in the url where the data is residing where you can collect the data press send and there we go so we can see the data that's the most simplistic view of how to utilize postman here so let's go back into our application this is our nexus application and let's now collect some data from our api so there's a few tools we could install here for example uh to collect the data so we're just going to be utilizing kind of the native fetch tool for now and then maybe later on we can move to axios or maybe a different tool to collect data from our api before we move on we're using next js so we need to understand a little bit about what it's providing us why would we use next over react for example so obviously that divide isn't maybe as clear as it might be for some it might be very clear why you might use an x-over for example react but let's just focus on what next can provide rather than a comparison so next as it says in the documentation here has two forms of pre-rendering so the idea here is instead of providing a user with a a javascript page and then asking them to actually then collect the data from the database so a typical render might be you collect the data collect a web page from a server it goes to your browser and then what you need to do through that page is collect then all the resources that are connected to that page the images any data etc while it's kind of in your browser so you're collecting more data so i suppose i could provide you an example of that if you are completely new let's just open up the history here um then yeah the sorry the uh the network here so let's just uh go to let's just refresh this page so you can see on this google page here alone i've had to go off um after collecting the page and collect all of this data i've got some javascript some css some javascript here again etc etc so all these resources are going to be collected individually to build up this single page so the idea here with kind of server side or static generation is that all this is done in the background on the server so that all we have or all we get given in terms of the front end is kind of like the end product so that way potentially we are speeding or improving the performance of the page because all we need to do is move that data over to the the user's browser and it's done there's no potential need for that browser that user to then download all the other dependencies for the page to build the page so this is all about static generation and server-side rendering so that's a general uh naive kind of view of static generation server side rendering everything is done in the back end so here what we're going to do is use get static props and that's going to fetch the data at build time so the idea here is that yeah we've got an api and we're going to send the page to a user and they're going to access all the data but all of that data is going to be automatically generated um when we build the application so when we build the application first when we finish building our next js application we build it it's going to build all those pages for us and then those pages then going to be there in terms of a static page which then is going to be sent across to the to the end user to view so that way we don't need to keep sending information to the api to collect data because it's all been generated so here we're going to use static get static props so that when we do rebuild this application in the end all the data is going to be generated at build time and hopefully that makes sense to you if not have a little read come through it and don't worry too much about it let's just concentrate um on learning a little bit about the code what it's doing and then also when you've got time going into the theory and thinking about what is actually providing us because this is just a maybe like a 10 15 20 minute read just this kind of section to understand what get static props is providing us but we're going to use get static props now to basically get some data for this page so we're going to put this under this export here so we're going to just change up this export slightly so we're going to have a function called home and then i'm just going to export default home okay so that's the home function that's what's going to be exported so we're going to create a a new export here and now what we're going to build is an asynchronous request or an asynchronous sorry function and that's going to be utilizing get static props so remember get static props that's the kind of tool here that we utilize to tell next yes to kind of collect all this data um when we build the application and have it ready for us to send to users so now we've got that in place um what we're going to do is we're going to run a fetch so we're going to create a new variable here res equals so res for results just to kind of short work for results we're going to say await so we're going to send an asynchronous request to fetch some data from the server now remember where that was it wasn't there hopefully i i thought i saved it so that was a 127 this is a django server 0.01 and then 8 000 that's the port number of django and then the url for the data or the all the products in the database is just this is an api so that's where i'm being collecting data from cool so that's going to collect all the data so the idea is i'm going to send an asynchronous request so which means that i'm going to send data to this api and i'm going to wait but at the same time i'm just going to carry on as normal and then when i've got the data i can then do something with it when i get a reply from the server so an asynchronous request so what i want to do is that when i've got data from the database i'm going to basically store that data i'm going to call this post i'm going to store this i'm going to store this in this variable so res.uh i'm going to store it as json so what i'm doing here is i've collected all the data from my api um when i get a reply i'm basically just going to store it within this variable called posts okay so that's that done so that's collecting data from as simple as that that's that that's pretty much it i've collected data from my api and now it resides in my post variable here so what i can do now is i can return so let's return this to our page and then i can reference it in props so um what i'm going to do now is uh pass this as props over to my page so this is basically let's just think of this as like a variable where i can place data in um so the data i want to place inside of here is props oh sorry posts that's my post data so i can access that through my props so what i need to do now is i need to pass this into my function home so this data here i'm going to kind of pass it down the chain into this function here called posts yep so it's imposed it's gone down in my props and now i'm going to make it available here in my home so what i'm going to need to do here is [Music] i'm going to add some more data later so let's put some curlies around it okay so there's my data that's where it is now so what i can now do is we'll loop it out i can loop it out of course on my page so now i want to display on my page so i'm going to use map here which is essentially a way of kind of looping out items in from json onto my page or into a format that i want to utilize the data so let's go ahead and get the data post.map so for every time i loop around there's two items remember in my database at the moment so for every time i kind of loop around um i'm going to refer to it as posts so i can refer to post when i want to collect some data from that item when i loop around so we'll see that in a second so let's go spacey here um and [Music] now i'm gonna need a okay right so that's that in place so now what i can do is i can now display some data so let's go ahead and just create a p tag and let's say um post dot and then title so that's a parameter one of the parameters of one of the data points so i will also do here um before i loop this out i just put a console i'll just do a console log here so what i can do is i can put post in this console log and i can then view it in the console to see what data's being returned in case i'm having a problem here because if there's no data returned here i'm going to get an error here so i may as well have a look to see if there's any data being returned just kind of a sanity check really more than anything so here title is referring to the fact that um if we look at our model from our database in django obviously i say obviously uh in our store in our models if i go into my products here obviously it's got a title so i can extract all this data now remember the only data that's been sent across are these parameters here my serializer because that's all i'm collecting from the database and sending across to my to my um in this api that's all i'm sending across side to next js so i can obviously expand these fields and add more data from my model if i wanted to but that's all i'm using at the moment so let's go ahead and have a look to see if this works so i'm just going to bring up that so it looks like it compiled okay in the terminal which is all good so let's go into my web page and have a look okay so we've got this problem here uh post is not defined okay okay that was uh surprising okay it's posts it's not post it's posts that's the data it's referred to as post okay so there we go so straight away although it's very faint you can see that i am actually returning the title of the two products that i have in my database so it's actually working so there we go i've collected data from a database now if i have a look in the django um console terminal sorry here you can actually see the requests that i'm making here [Music] or not so these are requests here to the api i'm just looking at the time so these are the requests that were kind of made which is great so we can see the requests that are being made by so let's just do another refresh and kind of see what happens so there it is right there you can see that the that's the url i've made a request to just now and you can see everything's working okay here so there we go with that's pretty much how you're going to collect the data from your api at least the most simplistic way utilizing fetch now i can't remember todd my head but i mentioned there's a package we could use axios and normally that's the package i'll be utilizing uh for api kind of managed for data management so fetch is a kind of a built-in tool here let's say a native type of tool which potentially isn't compatible with all browsers but to start off that's what we're using and that's what we've done and i guess now what we can do is think about well actually what do we want um we actually now need to kind of make a grid don't we so within here we're going to now need to make a a grid like i showed you in the preview so that we can output our our products so i'm going to create a link so a link in material ul material u ui world is is how we're going to build a link so it's going to create a link so i can click on for example so uh once we've done that um we're going to then create a grid so that's the deal we're going to build a nice grid so a grid if you're familiar to thing with things like bootstrap for example grid is the same type of concept in that we need to define the grid on the page that's going to outline the spaces within our page divide our page up into small chunks and then we can add items in there so here we're going to create a grid and so we can then we can build a grid essentially a media grid like you saw in the preview so in our grid what do we have well we have cards so again material ui provides us a card not cards actually so a card so we can build a media card and that's where we're going to put all the data and so inside of our card what we have is a card card media that's where we're going to add the image to our card and then underneath the card we have card media the card is made up of card content so we have card content all good there we go so we have some car content inside of our car content well we can have a number of different things um so let me just introduce you to two items that's gonna kind of help you out here in utilizing material i'll try and explain what material ui provides typography and box so box is like a basic thing a basic element which you can turn into anything so a box here says component p so this box isn't going to say box in the browser it's going to be a p component so this is going to be wrapped up in a p element i can turn that into a div i can turn that into a span i can just do whatever i want here it's great a box is really kind of a a tool which has access to all these type of parameters here font size font weight and if i'm feeling particularly lazy or if i'm just kind of prototyping something i'm going to try and utilize these attributes or properties um as much as possible so typography in contrast does provide me some similar tools i can identify the component i want to make but it doesn't provide you access to these type of font weights font size etc we'd need to create a class here in order to hook up to some of those tools so in some respects it's hard to explain when the situation you'd use typography in box um without kind of showing you here but uh most of the time you can just use a box just use a box put some text in it and then display identify what component you want to build p div or whatever and then just change some of the um properties here at least while you're kind of prototyping things so you can see we've got this box and we've got this typography post title post regular price so what we're going to need to do uh you notice i'm using regular price here so let's go back into django let's open up django and go to your serializer we just need to add in the fact that we also now want to use a regular price so that's part of the model we have a regular price field so i'm also bringing the regular price field in now from django so we don't have to do anything else that's all we need to do there um okay so that's not working just yet because i need to bring all these resources in so created a link we've got a grid because we're going to create a media grid we've got a card which is an individual element where we're going to put the image and some text for individual products and the card media that's where the image is going to be placed and then we've got the card content inside of the cart content we're going to have a title and the price so let's start off then i want to try and explain every single component here um so you've got a complete overview of what's happening so the first thing is that when we use map we will get a warning if we don't use a key so for every item that gets looped out what's happening here remember we've got say 10 items in posts 10 products sorry here so what happens we're going to loop out these 10 items in our grid on the page now for each item we loop out we want to give a key like a unique identifier otherwise we'll receive a warning so here we're going to place a key right so obviously what we also need to do here this is a link so we need to define the link that we want to build now we're just going to keep it blank for now but that's how we're going to build our link and put our link inside of here and then we've got a grid so what we need to do now is actually like define our grid um so what i'm going to do here is not use key there is i'm going to define a few things so when the screen is extra small it's going to be utilizing 6 out of the 12 rows so here we're utilizing a a column system a 12 um sorry 12 column system um here like similar to say bootstrap for example so imagine there's 12 rows across the page i'm going to be utilizing six of them for each item so this means that when i'm at extra small i'm going to use six of these columns for each item for each card so that means that i'm going to have two cards displayed across the page if i were to have 12 that's a small scale that means i'm going to use all the columns across the page to display one card that means the card's going to stretch the whole width of the screen so here i'm going to use six so 4 12 divided by 4 is 3 which means there's gonna be three cards across the page and then three 12 divided by three you get the idea i'm going to now have four cards so when i get up to the bigger scale md medium scale screen when the screen stretches up to medium which is around about 1 200 pixels wide um it will then have three columns or three um be utilizing each card will be utilizing three columns so that's going to give us four columns in total so four cards on the page so we'll see that in action so that's that setup um so what i'm going to quickly do is just go ahead and add some more items to my database so i'm not too sure if you're if you need to see this i'm just basically going to go in products i'm going to add some more products so i've got four products now in my catalog here so just to show you and be able to view them on the page so currently we need to do a little bit more before we get this started so here we're utilizing link grid card card media card content so these resources need to now be added into our page so let's uh remind ourselves we're using a box now we're going to be utilizing the container i think at some point maybe maybe not maybe not maybe not okay so it's grayed out so it's telling me that i'm not actually using that so card media yep card media we've got uh the card content and card so using those um link we've got a link we've got a link yet so let's bring in a link so link is um as you see the link is from next it's not a ur a component a material ui component so um you can read into next link so i'm going to just remove the href from this link just for now okay so let's have a look now see what it says adjacent seo must be wrapped in a closing tag okay so we've got some sort of enclosing enclosure issue here somewhere um this is going to be tricky to find so somewhere we've made a mistake here link i want to say it's going to be in the link there oh dear okay so we're going to need a curly there okay so i think that's a that thing grid is not defined so at this point it's just trying to work out it's fairly straightforward in the information that we're provided eventually typography eventually we'll get it working so we just need to bring in typography so these are just again all the resources that we've utilized so let's have a look so um okay so the prop href expect to spring object in link okay so we're also going to need to define a link okay so we finish this off here so we're going to need the curly bracket braces we're just going to create a link to the route here the root home page just for now until we set this up so once that's in place you've got all your dependencies here have a quick look um and down here so that's the full code so once we got that in place okay and then let's go back and refresh you can see we now have all the products being displayed now they're not exactly lined up are they um so they're on top of each other at the moment and obviously we want them to be displayed across the page right so there's a few more things that we need to do here then i do apologize it's taking a long time um but we've got to get it all right so we're going to have we are going to have a container so let's do this so we've got the header finishes here and then we're going to have a main section right so let's let's have the main section so that is uh that's the header okay so we've got this we've got a main section here so for some reason that isn't okay so we've got the main section right so after the main section we're going to build a container so let's go ahead and build a container so i'm going to add this to a class called card grid and i'm going to have this max width for lg large and that's just going to mirror the rest of the project remember the heading we also limited to large so it wouldn't stretch the whole width of the page so now we've got that in place we're going to need to under main just finish off that container so that's the container now under the container i'm going to build a grid so i'm going to define the grid so these grid items here they they're defined here so 643 that's the size of the grid item so here we've got a grid a container spacing of two so that's the um space in between the items so that grid is going to be let me just have a look here we've got this div entirely sure what this uh just dips or here so class name class example okay so that was just our example earlier let me just remove that that shouldn't that shouldn't be there because we've got the container and then we've got the grid right so just finish off that grid so remove the container so we're left with this here so grid grid grid grid okay so now we need to add a class for card grid let's do that so that's just going to allow us to add a bit of kind of padding um at the bottom so let's just add that in there we go so let's add some padding at the bottom of our grid for no particular reason other than we want to do that and then let's have a look at the card now so we're going to get the card so these cards here that we're building what we want to do is we want to remove the elevation and we want to give it a a class here of card and then we just want to style this card so what we're going to do here is just define the height and the width etcetera so the height display flex flex direction is going to be column okay so across the page and not row on top of each other and we're going to have a border radius of 0 because we just want to remove by default there's going to be a border radius on the edges so it's up to you whether you want the edges sharp or not and then what we're going to do now is we want to add in the card media so this is the image that we're going to be utilizing now we're going to need to do this separately in a second because we're going to need to change our our serializer for this to collect the image i'll explain that shortly so let's go ahead and we need to bring in the container clearly tells me here i've not defined the container so we need to kind of bring the container in so that's going to be from the material ui might be that you want to kind of start separating these into different sections so there we go there we have our little grid so let me just put that to 100 so it looks like our grid is working um so if i scale down a bit you can see that it's going to look just like that our grid so um looking good and you can see that when we scale down so let's just uh scale this down it should move into those other so we've got four four goes into three and it goes into this small goes into two or the extra small sorry it goes into two so mobile view it's going to look like that when it stretches up to medium and then large it goes into four items across the page so that's what we've set up so now we need to think about the image so we've requested data from the api that was our aim and then we collected data and we displayed it on the page that's what we've done so far we're pretty much there in some respects um we just need to scale this up to other pages so we now want to collect the image from the serializer sorry from django as well as the data now we remember that we need to remember that our image is coming from a different table than the product table so if we remember that what we need to now do is essentially create like an inline serializer so that we can pull in the information from the images to our product serializer so that we can also include the product sorry the product image information so let's just have a look here so here we've got the image here and the product here so what we're going to need to do is we're going to need to create essentially an inline by defining this serializer here and then placing it inside of our product serializer so we can collect the information from our product image table as well as the product data so we can put that all into one and send it back to the front end so we can collect and display the image from the product right so let's go back into django and we're inside the serializers so that is uh in the store serializer so you can see so far all we're doing is collecting information from the product so there's a few ways of doing this right so if you're wondering why you're doing it that way over this way etc so i'll just try and show you the most simplistic way up which i think is the most simplistic way at least to begin with right so let's um let's just move over here so let's go ahead yeah and make a new class first for our image why not so we're going to call this image serializer all right so we're going to create an image serializer and that is then going to be just a a serializer model serializer nothing crazy okay so that's going to collect them information about the the image so we're using the model ecos we're going to need to bring this model in of course so this is going to be a product image so let's just bring it in here product image right okay so that's our model and we just want to collect the data so the fields we want to return it's going to be the the name and we also want to include the slug so the slug's going to give us the actual link to the image that's stored in our media folder so that's the slug okay so now we've got the two items so like we did earlier with the admin we're essentially just going to um we're simply just going to bring this data into our model serializer like an inline type of thing and then we're just going to then just define that then in our fields that we're returning so something like this for example so here class um is going to be called product let's call it product image equals image serializer that's our image like silent blue our image serializer here and then we're just going to say we want to terminal many equals maybe we want to return many image true and then read only true we could these are many kind of properties we can add here so obviously we don't want to upload anything so read only true for example um there we go so now what well what we can now do for example is we just need to basically define this here in the fields so let's just do that there we go uh so now we've got that um we now have access to that image data so what's worth having a look now is if we just go back into our api view so admin and then it's uh api that's a link you can see here we've got a problem so let's create a blah blah blah creator monitor without either fields attributes or exclude attribute has been depreciated since that add all explicit fields all to the image serializer serializer apologies for reading that um so there seems to be a problem here so we've got an insertion error here so let's just go back into the code i wasn't expecting that but let's go back into this code and let's try and work out what the problem is okay so i haven't defined it does say here um it does give me a clear indication what the problem is um so i haven't had the field so it's identifying the fields i haven't include the fields because i've called it filled i've just made a typo in the code so it should be fields that's all good let's go back do a refresh here we go so now i'm not only including the data about the product but i'm also including the product image data so i'm collecting the id the image url obviously i'm going to be utilizing this url to actually display the image on the page and the alt text if i've included any so now we know what data is being returned we just need to go back in to our code now and of course we just need to set this up so we display the image right so if you remember i said that the card media that's essentially the the placement for our image so let's just get rid of a second and end it here and what we can now do is just add a load of things here so let's add a class name because we're going to link that to a class so classes dot card um it's called media isn't it card media yep so i'm going to add it to a class in a bit um and now i also want let's just do this so i also want image so i want to define the image i'm not too sure why why that's doing that classes classes dot card media okay maybe don't exist yet image equals and now we want to define the image so it's in post remember the data we're collecting or displaying is from post so post and this dot product remember in our in our json there we need to go into the product image and then inside of here are the images now i just want to basically display the first image so i reference the first image in that list which is image zero and then dot image okay so that's going to essentially display the image or the first image that's in the list now you might want to ask or you might be asking well how do i get the item that is displayed as um the default remember in the images in the table we set up a button so that we could define which was the um set the default image for example so we're not going to cover that in this tutorial we're just going to grab the first image for now and then we also want a title so let's just format this and it will put it down nicely for us so we can also now add the title or let's just do the alt for now so the alt text equals and then we just need to go into the post dot product image and then um get the first image and then we want to display the alt text for that so alt underscore text so before we displayed the image and that was the link to the image and now the old text that's obviously the alternative text for that image okay so let's go back cannot read property zero of undefined good right post product image zero so excuse me so what this is potentially suggesting is that maybe just maybe there's a product i've added without an image so let's just double check that because that's annoying or maybe this serves not turned on who knows right so products um this is a it's the wrong it's the wrong one so that's the demo one so let me just uh close that and i'll just start the actual server there we go so in our products uh now let's just uh we'll run through this again oh good there we go unexpected token in jason await post okay so invalid json response body at a reason unexpected token in json in position zero so if we go back and do a little bit debugging here in our django application it does actually identify for me the fact that the field name name is not a valid it's not valid in the model product image because we don't call it name we've got title i think so go back into models go to the bottom and have a look so product where's my image table product image product image so in actual fact we just don't have have that so it's actually image that we're looking for so in our serializer what we want to return is the image i've messed this all up on my image and the alt text that's it so we don't need slug i don't know where i got slug from uh so the slug essentially is the image and then the alt text those are the two items that we want to return from our django uh product image serializer there i do apologize so let's go back in and refresh and wonder why it's not working so let's go back here so we've got the image card media product image zero so let's go back into let's have a look at uh for example our api see what's being returned so you can see here we've got the product underscore image and then we're displaying the image and the alt text so let's go back into here so product post dot product image zero dot image now is it image or images no looks like that's okay so what i'll do now is let's just start and slow start stop and start it again and then we refresh our page it's still not working let's just go ahead and add our css here so the card media here we've added the card media class let's go in and just add the padding at the top so that's basically just going to define where the image is going to be placed and you can see now i've had that padding that has basically created a a space for the image to be displayed and there we go so hopefully i do apologize i was just a few kind of typos missing elements and having the wrong servers open i've got all these different programs running etc so i do apologize hopefully you've managed to follow that through so that was the card media css so this is uh i can't show you the whole page but this is the where we're at at the moment then so we've got the containing the grids we've added the link and the grid here the card media so this is where we got so far if you're just following the code wonder why yours is not working now most of the time you've seen that when you do get an error it pretty much tells you roughly what is wrong or where it directs you to where the problem is of course it's it's easy for me to say that because i'm familiar with the code errors and um if you're not familiar with the syntax etc obviously that's going to play its part in not being able to kind of resolve some issues and cause some frustrations so um let me just show you the rest of the code so we've not made any changes there so things that can be caused a problem here you've seen the imports not in place um [Music] potentially not naming things correctly or on the server side so this api really comes in handy here this view viewer this api view here really comes in handy because you can see the data that's getting returned before you start to move across so you can kind of determine whether it is a server problem or whether it is your code that has a problem in next.js so that's kind of really handy to determine so let's go ahead and just add a oh we're not going to do that just yet let let's add another navigation bar under here i think there's two more kind of uh navigation bars we're now going to add underneath here so let's go back into our our next code here let's go to our header i'm just going to finish this header up so let me just uh bring in everything that we're going to include so so far we've got the top app bar and then the second app bar that we've added so we're going to add another kind of app bar under that which is going to be um the kind of the menu list so i add that in so have a look at this code here so app bar i'm going to call this app bar secondary um toolbar list we've got some list items here which i'm just going to remove for now until we add those in because i've just copied and pasted across from the main app that i developed first so that's everything that we need right there so we're going to need ad to add in the app bar secondary we're going to need toolbar secondary and the menu list style so let's just add those in toolbar secondary first okay so back up here then in underneath the toolbars toolbar secondary i'm just going to add some padding and a minimum height uh and then for the um what else we've got here so we've then got the toolbar secondary at bar secondary so we've got outbar secondary so let's just bring in that coat so just copy that in so this is going to be the background color and text color so that then produces an error because we need to bring in the list item apologies as has loads of stuff going on here right so let's just bring in the list bring that in list from interior ui call list okay now don't worry about this here you see it's grayed out because they're not being utilized yet that is not a problem you can just remove them in a while so that adds that list item in so let's have a look so you can see we've got this nice little gray bar now and then we're just going to have a final bar underneath that um for promotions so let's just uh put that in so this is just going to be us a small kind of app bar underneath there so at the bottom here underneath that bar let's just add that in so this is going to be at bar promotion so we go up to the top we'll just add in the toolbar promotion styling and then in addition to that the app bar at bar promotion styling so this styling is going to be slightly different because we want to add some padding underneath so here you can see we've added a background the color and this time we've got these spacing underneath you'll see that in a second and what i've also done how here is just to showcase how you can change the styling at certain widths so here the max width is 600 so when the screen is below 600 um pixels wide the you can see that the spacing is going to be different on a mobile view so let me just show you that so you can see the spacing now here if i go into a kind of mobile view you can see the spacing will get reduced there it is right there so that's what we're doing um happy days right so that's that in place um it's starting to look a little bit like a store so let's do some other styling so let's go into for example our um style and global css so here we're just going to add or import from google we're going to import a font so if you don't know how to do that let's script you so google fonts so i've selected a font uh you know i think it's this one here um so i've gone ahead just added the styles i want to add say the regular 400 and then maybe the 700 etc and then i use the import here so the import i use that i copy that across and then i refer to that as font family to actually utilize the the font so go back into my code you can see i've added this in nuno sans in actual fact uh new nito nunito nearly two sans so i've imported that in and then i've added that to my html body oh hello yep and also i'm going to add that to p p tag so the font now is being applied across my website so when i right click and inspect it should now tell me i'm utilizing that font which i'm not so we'll sort that out in a second because what we're going to need to do is just a little bit of overriding here just a little bit of overwriting so we've got um important in there that's all good uh so i'm trying sure why that isn't working as in as expected so finally we sort out shortly so finally i'm just going to add a font size for my p tags and it's going to be a little bit um smaller 0.8 ram so that's a 14 pixels equivalent so that should kind of scale things down nicely for me um so that's just a bit of styling that i'm applying so it's still not working so what i'm going to do is i'm going to go into my pages and then apps do we have a look theme theme um so i need to include it here the reason why my globals isn't working because i don't actually have them so inside of my app jess i'm going to just bring that in so i need to find them so it's import so this page here i need to go out of pages and then into style so import um let's bring it in so dot dot slash out of that folder and you go into styles and then i need to bring in global oh it's not it's not coming up global.css there we go so i just need to bring that in to my project that's why the globals aren't working so i'm going to refresh and then just right click inspect and then hopefully hopefully you can see it's now utilizing um this font here that's the font i just incorporated so there we go so that's that incorporated into my project i'm now utilizing a different font so just to remind you i am zoomed in here so you can see the page um as you might view it on your screen so this is my actual kind of size here that i'm looking on in this viewport here so there we go so that's a little bit of font there so we've got that set up so now we need to move ahead and click on this item so it can take us to an individual page so hopefully you've been able to follow along so far i do apologize in that section it got a little bit bitty there there was a number of problems and i'd prefer just to show you the problems so you can see how potentially to resolve them rather than me just giving you a step-by-step process and it just working first time it may seem a bit kind of counterproductive because if you're not familiar with the technology maybe you're not going to be then familiar with trying to resolve these problems but this is uh the bread and butter almost of development you're going to need to solve problems because you're going to have lots of them and you're going to be spending a lot of time fixing problems so we may as well do this in this manner to kind of give you some experience fixing problems as well as just coding something out so next up then we're going to have a look at the individual product page there's a few things here that we're going to need to do which is a little bit different to what we've done so far but it should be a straightforward process of collecting data now we are going to go into django because we're going to need to set up an individual view for this because at the moment we've got a view which just that returns all the data in the database so now we need to create a view and a serializer potentially that just returns one item from the database so in actual fact we may as well just start in django that's probably a better idea so let's just close everything down here so we know where we are what we're doing right okay so the server's on right so in our store we're now going to add a new url which is going to point to an individual item so i'm just going to copy this in so and explain so you can see here what we've done is we've just extended api and now we're going to create the ability to add a variable essentially here a parameter that which we can pass across to the view so slug is referring uh to a type of data a data type which basically doesn't have any spaces and any words are separated by dashes so we're going to reference this data so that's a data type this is kind of a reference point or the variable name if you like called slug and we're going to use that to pass across to our new view that we're going to build so let me just show you what is happening here so here we go api remember now what we're going to do is we're going to type in for example this item is called boots4 has a slug we don't have slug yet here but it's going to have a slug say of boots so the idea is i'm going to capture this word boots4 i'm going to pass it in i'm going to pass it in here and then i'm going to pass that data across into my products and i can use that data then to run a query and get the individual item from the database right so hopefully that makes sense so let's go back into our views because we need to make a new view here called product so inside of our views we go into here and we're going to build a product so i'm just going to copy this in save us a bit of time and i can just explain it so here we go we've got product um so i'm just going to use retrieve api view so i'm just retrieving one item from the database i'm just using this generic class here retrieve api view retrieve one item from the database so i've got a lookup field so let's go into our model let's remember that in our product model we have a field called slug so that's the slug of the item what we're going to do is we're going to match the slug that someone's typed into the url or the link as defined we're going to pass that through to the view and then we're going to use that to match up an item in our database so let's go into the serializer very quickly let's just add the slug here to our product serializer so we're actually giving away or we're utilizing the slug so let's go back into our api view and refresh you can see here that we now have the slug so boots four so i'm now going to use this for example to get this one individual item so back in my um in my view you can see here that i've got the query set products object tool now i'm not using a filter here because i don't need to because this retrieve api view is just going to do everything for me because i've identified the lookup field should be slug what this class is going to do is basically just going to take this query set and get the one item from products and then return it now notice here i'm just using the same serializer as the serializer we use to display all the items so i don't need to produce a new serializer at all either at this point so what i have now is a slug i'm going to pass that data from the url into here i'm going to send that across to my view it's then going to this in this class prebuilt generic class in django is going to filter out based upon the slug in the database and then it's going to produce that one item that matches the slug from our database so let's go back in here let's uh oh actually let's just remember boots4 so we're going to just get this item back let's go back in here we're going to go to oh we're going to do it here in batch we're going to do a boots4 there we go and there we go so we've got the single item back so that's really the back end so as long as i pass this across from next.js it's going to retrieve individual items it might not be this item i might do for example boots i think i've got boots three there we go so this is a boots three um boots one i think i've got these all the individual items i have in my database referencing it by the slug okay there's no such thing as boots two but there's three and four okay so that's it really before that so let's now go into our next application okay so this is where it gets a little bit trickier right so we now know that data is returning from our from our back end from our api so let's have a look at what we're going to do here so we're going to build a new folder in pages we're going to call this product so remember these pages here essentially just pages um if we just think of separate pages index.js obviously these uh underscore um special items here for overriding and adding parameters to all of our pages essential essentially we're we're creating a structure we're then going to put in our pages in the body so it allows us to kind of make some overrides and set up some other kind of context some data that we might want to pass to all of our pages for example so really all we have here is one page so we're going to make a folder so this folder is that going to act like a path like a directory so here for example i can access that folder by doing slash product and then i can access that folder by doing that then whatever files inside of it so it works like a normal server in that what i can do is i can put an index page in it so let me just move this index page and copy this into the products page and i will need to change this link because i mean gone down uh so let's just see if that works so product slash oh product slash and there we go so you can see that i've just copied and pasted that page in the products folder and now we can access that file it's an index page the server is designed to serve index pages first that's why it's showing and why i don't need to type in index.html or whatever you know so that's not a problem or index in this case um so that's the index page so you can see how that is working as a kind of a normal folder so let's just get that index out yep okay so what i want to build here is a separate page now which is going to display the individual item right so let's go ahead and and actually do this so here's the thing i've told you that you kind of have to name we use names here to identify the pages like index or whatever page you build now we're building a dynamic page because what we want to do is to have products and project projects and then after this we want to for example have the name of the product so whatever the boot's for whatever it is right and then what we want to do is we want to pass this data across to our api in the background also so we can display that item now this is a dynamic link because this could be anything boots two boots three boots four whatever whatever so what we're going to need to do here is make a kind of dynamic link so we can do that by naming our page in a very specific way uh so let's create a new file so here is going to be for example we're going to use these the brackets here so here inside i'm just going to call this slug and then i'm going to name that dot js so here's a dynamic page hello dynamic page right so that's my dynamic page um so what i need to do now is uh just go ahead and build this up like i did before so so here's my boilerplate so we've got the imports for the styles the header section i've already added that in and then we've gone ahead and i've created the area now for my styles brought that into my function here the style so i can access and create classes and i've got the header as i said there and i've got the export so that's my template now for the the slug start off by actually bringing in data in a kind of simplistic way so we're going to bring in our export to our get static props let's just finish that off so that's our props and obviously inside of here we're going to bring in we're going to fetch our data so what date are we going to fetch well what we're going to do here you can see what we're doing here like before we set up this variable a we run the await fetch okay so this is an asynchronous request and you can see what i'm doing here is i'm sending a request to our api and then i've got this dollar params.slug so what i'm doing here then you notice this is called slug right so what i'm doing is i'm creating a dynamic page so basically anything i type here that's then going to be utilized or saved in the parameters as our slug so by utilizing this type of convention here i'm essentially storing data in the slug from my url so in this case this here is being saved or being extracted from here so it can then be utilized and as a dynamic kind of link uh to my api because remember here i want it to say boots one boots two boots three bridge four etc to get that individual item so here i'm creating a dynamic link stage one i name my page in a kind of in this type of format to create a dynamic page slug in this case it could be id could be something else right so then that's going to essentially allow me to capture this data here and then i can pass that into the parameters here slug so i get the params so this allows me to kind of collect this data and then i get that data slug so it's referenced this slug so now i have if i were to type in asdst here well let's just do boots sorry obviously that is now being passed across and i'm utilizing that to now create my link to my api which is going to collect that individual item so you'd imagine what will get returned now is that individual item so i can go ahead like before like the previous page and just save that information inside of post here excuse me um and now i've got that i can just basically return it right so um let's go ahead and let's return it so return my props and i can pass these props over to my function of course so uh post there we go so it's refrent references post so i go back into my product here post and then you would imagine at this point i could just do a a console log so let's just start off with a console.log and that's going to be paste we got big microphone in the way right so there we go so that's the flow that's the flow that we utilized last time but this time with parameters so i guess we should give it a go so let's um try this what did it say module not found cannot resolve components header oh okay so that's one little problem we need to resolve so because we're in a new folder we've gone down our directory so we just need to add that path so dot dash means that we'll just go out of this folder go out of the pages folder and then go into the components folder it just allows us to traverse the folder structure so now i've got that in place okay so now we've got the get static paths is required for dynamic ssg pages right so this is the next step that we need to go through so i'm just showing you a simple example here but what it's saying here is that we need to use get static paths so because we're using dynamic links let's remember what's happening here when we build this next application it's going to pre-build all the pages say we had 100 pages here on our application in our website when we click on create next app before we deploy it on our server it's going to basically collect all that data build all our pages and they're there the static pages which we can serve to our users okay the problem is here that unless we explicitly tell next to actually make the page it doesn't know anything about dynamic pages how does it know about dynamic pages pages that we've not told it yet what to find it has no idea at all so essentially what we need to do here is we need to need we need to use get static paths to actually tell django i mean to tell next what pages to get when it um deploys so at build time what pages to actually collect so we need to define we need to tell next when we build the application before we deploy it these dynamic pages um that's what they refer to we need to basically build a list of them so we can build a loop and collect all the pages and then tell that would then tell next what to collect or we can just build one up manually so let's just build one up manually hopefully this makes uh sense to you maybe i don't need to draw a rubbish drawing for you here um so let me just tell you one more time i do apologize you can afford a bit here but okay so what's happening here is that you've seen before that next.js when we actually deploy this application before we deploy it we build it before we deploy when it builds it's going to find all the pages that we've defined in all the other pages here and it's going to collect them all and pre-build them and then it's going to serve them in a really kind of quick way to users when they go to those pages so we don't need to build anything they're already pre-built so when we make a dynamic page like this where nexus doesn't know what pages to build because it's a dynamic page we actually have to type something in manually to get that page when it doesn't know that it can't pre-build them so the problem here is it's saying well i don't know what to build so you're going to need to tell me what to build for dynamic ssg pages so we're going to need to define get static paths right so here we're just going to create a new kind of export again this is going this function is going to get called at build time so async so that we can uh keep running um while we're waiting so we're going to use get static uh par it always confuses me when stuff comes up and it's not what i need get static path there we go um so we're going to use get static path here and what we're going to do in this instance is just tell so here we could run a loop of all the pages we could do that right but we're not going to we're just going to give it just say for example one parameter so we say paths um and then params and then what we can do is just say like slug so the first slug remember we referring to this as slug here so this is matching this here this parameter so one of the slugs that you might get is called uh what's called boots three that was one of them wasn't it so boots three yeah uh slug boots free so here what we could do we could loop we could manually define if we want to do more of these um by all means we could so let's go for like slug you know boots too etcetera so we could define them all here if we wanted to but we just because we defined one that's absolutely fine because we haven't defined all of them it means it won't generate all of them at load time at build time basically what happens is it's just gonna when we type in a different link that it doesn't know it's just gonna build it once so as long as we've gone there once it's gonna build it and then it's built so that's what's going to happen potentially with the other pages that it doesn't know about here but i've just defined one page right so because i've defined one page if i go back and if i refresh it's going to say the same thing good so what's the problem here um so let me just check the formatting um so i'm going to define a fallback true so that i can define other pages when i want to so let's just check to see if it's actually turned on um so let me turn it off let's run the server and build so i've stopped the server control c and i built again you can see that it's compiled okay you see it's um i'm trying to pre-build my page here build page slash product compiling complaint is required so get static password over there and it's missing for slash product slash slug okay so it looks like i've got an issue here because i need to type in product here slash so my url was actually wrong here and that's potentially the problem there so i've changed that i'm going to close the server down again i'm going to run this rerun the server this time it's all good i say that i say that uh so what's going on here so we still got a missing value potentially um so it's just me being uh just being me so i don't need that of course because that's just a link to my system that's not a link to my api room but that's just a link to um this is a link to my api sorry not a link within my system not linking to my products this is a fetching data for my api which is just api and then the the parameter so um [Music] i wonder what is wrong here so that's been all so it's a small thing um but i've just noticed that it says get static path but it should be as it says here get static paths so i've just missed out the yes there we go so with that in place if i were now to go into my con terminal you can see that i'm actually outputting to my console here um it looks like the page is now rendering okay so it looks like i'm good to go so i'm now collecting that individual item from the database so i've added the semis and the colon semi here the comma so just have a look at the syntax there so those are the two functions that i've added so now i can go into here let's just go to this console and now we can actually add a small loop to check to see if we are actually collecting data from the database or sorry from my api so the thing is here the thing here is that we're not actually producing more than one item so we can just go ahead as long as we're um passing post in like we did previously we can just have a look to see if we're outputting the title and there we go so that's the title of this so let's just go to boot four let's pass this in dynamically and you can see now i've got a problem because it says can't read property title of undefined so i just refresh again it doesn't look like it's working okay not a problem so what's happening here then it looks like is that i'm trying to collect now boots for and obviously it doesn't exist here we've not defined it here and we've got fallback equals true so you can see here that it's quite interesting the fullback provides us a version of the page on the first request so we can basically just fall back to the generated page that's generated on build time for example so that's fallback equals true let's go ahead and bring in the router okay so use router from next and now we brought that in let's go down and into our function here we're just going to bring in the router okay and then we're going to run an if statement so basically we're going to run this if statement if the data hasn't been returned it's just going to fall back to this div here loading so remember we're sending an async request so an asynchronous request we're sending it to django our api and basically we're then saying okay let's just continue as normal but we um are going to wait for that data because we might get a return from the server at some point and of course that might not be instant so our api might take a second for example to return the data and of course we're loading the page as per normal so potentially we're causing a problem so what we're going to do now is we're going to basically fall back so that if we haven't got any data we're just going to show loading and when the pay load when the data does return from the server it's then going to potentially then go ahead and render the page so let's try this instead so boots 4 it's all good because it's all been pre-rendered so oh so boots-free sorry and you can see already that i already have boots for i do apologize um you can see it says loading there and now it then loads boots four so it seems to be okay now so you hopefully you can see what's happened there is i'm using asynchronous requests so everything just continues regardless and then what i've done is i've rendered the page and of course an error potentially there so what have happened what's happened now is i've created a kind of an area of creative function whereby we can send an asynchronous request we can wait for that data and run that load pages loading and we could elaborate on that and make it a little bit more fancy of course but it just says loading and then when the data does return the page renders as expected so let's have a look at um is there i can't remember okay so we've got boots so that's the first item we made so let's just have a look now and use our dynamic link there just to go to boots you can see it says loading and then actually just about see it's loading i mean sorry it's a quite a a small text font size and there we go so we have the and then that as well so we can now we've now built sorry a dynamic link for this page so all we need to do now is obviously just build this page up and so it displays what it is we want to display on this page which is obviously a nice image of the product and so on so we kind of fumbled our way through that i do apologize again i just like to show you all these problems that might occur and you can see that although i'm trying to kind of fall into traps that you may i'm not trying to be um pedantic or i'm not trying to bill it to you in any way um but i'm trying to fall into traps that you may have experienced when you're developing so i can show you what the solutions are and that was a solution which may not have been very obvious the fact that we have to we're running async requests and then we potentially have to wait for the data to return before we then refresh um the page and show that data on the page so let's go ahead now and just finish this individual product page with some styling so this is a good time to show you the head so we're going to import head from next and you'll see that in the document for example we've got this space here head and also in the app here we've got this headspace here and what we can do is we can kind of override so you can see here in the appdress it says title my page so pretty much on every page and every tab you can't see this my mouse is kind of pointing up if you look at your tabs where your your page is open it says my page now obviously we don't want that we want it to show something else so we can override these app elements here so we do that for example here in this slug by bringing in the head and then what we can do is then just define a head section in the return so here uh maybe before the header we add in our head and the title override which is going to be the post title so now when we go to the page and refresh it now says uh it's gone from my page to boots so it now says at the top here boots sorry i'm not showing you the tab but it now says boots in the tab so you can see that that has been overridden so i'm just going to take you through line by line here i've already pasted in the code here so we've got the container max width of md so this isn't going to be as large as the other pages lg so this container which holds all the product information on the single product page is going to be a width of maximum of md medium and we're going to create a grid so we're going to use a grid system because what we're going to do is we're going to have three sections in our grid uh the middle left middle left and right so on the left hand side you saw in the preview it's going to be like small miniature images the middle one's going to be the big image and the right hand side is going to be the product information so create this grid here and then basically this item here is going to be hidden so this section here is going to be hidden and that section is the left hand side where it's only going to be displayed at extra small and small so this hidden is starts and ends um here and here so that's only gonna be shown at this these screen sizes so that's a good example there of how to hide things now then i've got a grid so i'm gonna build a simple grid item um so it's gonna take up one of the grid one of the twelve so it's a one column large when it's small i don't need that actually um because that's going to be hidden anyway so from small upwards so medium large extra large is going to be one column of one and then here we then add paper so this is just another element here material ui that allows us to kind of add something like a paper a space where we can add something and you can see what we've done here is um we're going to map the product image now remember the product image or the product the images there might be multiple images in the product so we need to kind of map those out we need to loop those out we need to um get the data from post image we need to run map so c is like the data id so we can set up this way if we want to um so that's not complicated things see so let's just call this c dot id so we've got the key there from this data and then we go ahead and create another paper item inside of here um so elevation zero again and this is just basically just going to show the image so this is an image tag and then we've got the product image zero image and alt post product image zero so obviously every time we loop around is is just going to show an image there's only going to be one image there so it's going to be product image so image 0 alt tag and then we're going to give this a a class of image so here we're just basically displaying the image so for each image we're just going to loop through and display it out on the page right so that kind of concludes that paper and that div here um and then but then that's hidden at small size so now we have this grid here so this grid here you can see it at small scale it takes up the whole width and a small ah sorry in the mobile view it takes up the full width and then it goes to six so this is the middle item so this middle item would just basically show an image in the middle of the page so we have a paper here again we're using paper and inside of that we're going to have an image so you can see here we're going to have elevation of zero again we've added a class which we'll explain shortly and then we've got src that's the link to the image and then the alt text and then the class name for that so that's the middle section the grid and then we have the right hand side of the grid which is going to be five so five plus six plus one is twelve so the first item in our grid was one so these are the three items in our page structured left to right there's gonna be another paper icon item here elevation zero and we're going to create a box here for some text which is the title font size 18 font weight 400 component it's going to be a h1 component and then we have a p component font size 22 and then that's the price and then we just have some other text here it's just free starting at this point that finishes off that grid item that's the whole grid element right there and then that's the container so that's the setup for this page hopefully that was useful um i didn't want to go through that step by step although i took you for it step by step hopefully that was useful you can type that out if you like now obviously we're going to need some styling for this and some items at the top here so let's just go ahead and bring in everything that we need so just like that of course so we're going to need the head item use router like i've shown you before the header that's the head of the page the container item from the ui uh that makes styles so we can bring in our styles from that other page i mentioned we've got paper icon items paper items we've got the grid we've got box and we've got hidden as well so those are the items from material ui that we're going to bring in and now we need the styling so i'm just going to copy this styling in so have a look at the code repository for this if you don't want to type this in yourself of course there's absolutely no need to so um use styles whereas that says right here so uh what we've got here so you can see that we got paper padding theme spacing paper image preview i don't think i'm even using that paper image so you can see i've got an app media so when it gets smaller the margins i just remove the margins when the image the center image gets to the mobile view so minus 20 either side um and then the rest of the time there's a margin on the left hand side of 25 a border radius of zero so there's no curves in the top right left bottom and right bottom and the edges so no curves at all and i've got paper right so i've just added some more padding etc here and different padding when it's at a smaller size and then the image is max width of 100 and that's it really for the styling so um let's have a look classes is not divided apparently um so um where are we paper class name classes dot paper image preview okay so this is online 67 so class name classes dot paper image okay i think we've got that 67 um paper class name paper image preview okay so did we bring our classes in i don't think um i'm not too sure if we are so we've got the router up taking this out of order slightly um so function we've got let's just uh let's bring this up so we've got the router so bringing the router and we also need to bring in our styles into the [Music] okay you starts classes equals use styles and then i think i've made that mistake here in actual fact haven't i um you start okay so that's that okay so use styles here one second okay sorry i've seen what i've done here i've just added this style in the wrong place my fault my fault so this so in the function includes the bring in the styles and the router of course it's just here isn't it so that's the style so it's outside as a function um so with that in place i do apologize that was some that was obvious there to solve let's go back in and there we go so we can see our page has now been created now the reason why this image isn't all the way across is because the size of the image so i'm just recommending that you create an image that is actually the size or bigger than this box so it fits in so let me just give you an example so if we just go into the project here the images are obviously going to be in your media um wrong in the wrong place in the django folder media images so let's just take um an image here let's just go with this this one here i'll just right click this and use this crazy application here called paint oh no i can do this with paint even better even better uh let's open this up with paint um of course like i never opened up an image before uh edit that'll bring up paint so we can just scale this up so simple press save i've just scaled it up look at that now i can open up paint 3d why would we even need photoshop i have no idea why i'd use photoshop when you've got these tools um okay of course uh so let's just uh fill this in with i've messed it up tonight let's fill this in uh with the color uh press save so that image has now been scaled up hopefully it's this image here no it's not okay there we go so it's this image here you see it's nicely scaled now on the page um so just make sure the images are big enough to fit in here um again this is just some smaller things that if you're familiar with styling you'll know how to kind of manage this more effectively so another thing i want to do here is just add another image just to show that is working so let's go into our our admin area and let's go to products and just go to product boots for say let's just add another image here so just to show you that it is actually bringing up other images um so i add say three images so press save let's go back into my boots it was boots four so this is now looping all the images here um oh it's actually only showing two that's interesting right um so boots four how many images have we got oh i only got two images that is why i've selected two images only so let's just add an image here because maybe it was the same image that's not the reason that's not ruined so save that refresh and another image so you can see what's happening there obviously we're going to need some build some sort of facility so we can click here and then view the individual images um and of course go ahead and just resize your images so they fit in this block like that and there we go we have the individual page um so we could add some more data here if you wanted to for now we're just going to outline this the shapes here so that we can build upon this and that's the individual page let's go back to the homepage because now what we need to do is link these pages these um products to that individual page so that should be fairly simple because um we're grabbing the slug from these pages so let's go back into our which is going to be the index page and let's go back into let's our link here now before you remember we were just linking to the home page this is in the index page so what we want to do now is we want to link to the individual pages so um that's just going to be a case of extracting the slug so let's do that so we're going to create a link now to product slash and then [Music] i'm going to use the encode uri component so let's just do that encode uri component so it's just a kind of a wild card i'm going to now explain what this is so you can have a little look at it um it's just my little wild card for this tutorial so encode ui component inside if i'm gonna put the post a dot is going to be the slug so that's obviously the slug that's going to be added in there i'm going to use the back ticks here um let's just add the backticks in okay um so that should be it there yep okay so that's my the url or the uri completed so we created that so that's just a post like so product slash post slug so let's go back into here refresh and click on my item here it takes me to the individual item there we go so i now have a links to the individual items so there we have it the individual product page is now completed to where we need to get to for now so obviously in the next tutorial we'll go ahead and maybe just expand upon it we need to add a button so we can add it to the basket etcetera so we'll set all that up in the next tutorial um but for now let's move on to the next component and that's going to be show categories so now we have all of our products we can it show we can show the individual products so now we need to be able to click on categories so we can see items that are in that category this can be fairly tricky and how i'm going to show you this isn't the way i want to take for this forward but i want to show from the ground up what's going on here before we start moving and abstracting uh code away slightly like we do with the components etc so let's uh bear with me and let's just follow this process so now i'm going to create a new folder here i'm going to call this category so inside of here we're going to just uh copy this slug over to no no no we're going to copy the index page because that has all the code to kind of loop through products so we might as well reuse that so i'm going to copy index go to category paste that in there i'm going to rename this to slug because we're going to use a dynamic link slug there we go so depending on what what's shown on this page will depend upon the actual um the category right whether it's boots or shoes or clothes or whatever so we're gonna make this um uh dynamic link again slug and i'm just going to keep everything right here for now except i just want to extend the header because i'm now in a separate folder so i can traverse two folders to get to components and header so i just add that in and i think that's all i need to do there at this point so i do want to be looping through posts etc um but obviously what i need to do now is to fetch the data uh based upon a category so that's what i need to do right here so like we did previously we just need to change this now and we're going to need to go into our api and sort this out but this is going to be category so in our api we're going to create this new url category and then uh lesson our parameters um and that's going to be dot slug so we're going to use slug again okay so um let's just use a p backticks okay okay okay okay so we've got that so that's where i need to fetch the data from so let's go back into our django application of course and now let's uh build a new url to kind of get all those categories to get the category all the items from that particular category that we define so it's kind of like a similar process like we did before in actual fact so let's go into our uris so here we've done we're kind of doing the same thing we're going to just get all the items where the category equals x y and z etc so i'm going to create a new path so category um slug api slash category slug i'm going to create a new view called category item view and name category item um is that right yes yep okay so category items i'm gonna go so with that in place i now need to make a new view called category so let's go into the views here um this is going to be category list view all right yeah item view so i don't know it says category item view this is going to be category uh oh yeah okay okay okay item yeah yeah because i'm going to make a new a new one later so this is going to be item view happy days uh so what i need to do here then is i need to make a new class then in the views okay let's do this class and it's going to be category item view okay and that's going to be utilizing the list api view so let's just bring that in uh list api view okay so now we've got that in place um let's just uh build a serializer for this so let's go into our serializers and so we want to build a new serializer i'm going to do it up here so what i'm going to do here then is just build a simple serializer potentially which is going to produce the all the information that we've got earlier but also yeah that's pretty much it isn't we want to basically return all the product information don't we let's uh make it as simple as that right so we could potentially just utilize this serializer right here to do what we need so yeah let's uh let's give that a go i guess so one thing that we probably might want to bring in is the category here hello so that we can yeah let's bring in the category right there so that's an item a foreign key within the product table so let's go back into our views and let's uh sort this out so and there's a there's a bit of overriding we need to do here because we know that we're going to be utilizing the product serializer so that's going to be the case because we want to produce the product information so what we're going to need to do here is we're going to create this function called get query set so we're going to override the query set now what we're going to return here is what we're going to return here is uh the models now what now sometimes what you might find is that when you refer to just say product let's just give it a go let's give it a show you the problem product um dot objects dot all um let's just try this so i've just did all for now i just want to show you let's just run this and see the problem that occurs if we can replicate the problem all right so let's go in to our api category and let's call our category um boots and this is a problem we return type object product has no attribute objects so this is a problem that you may come up with and you can spend hours on this problem because you ask well why does that happen i could i could run something else for example categories and this wouldn't happen it's just how you're referring to the model let's keep it nice and simple and say that so if for example i want to be more explicit in how i call the model so from dot import models and then down here i would call it return models dot product object tool so i'm just referring to it through models being more explicit if i were to now go back in and refresh we don't seem to have a problem so what we returned here is um all the products that are associated to the boots so a category four category four category two category four so that's interesting and this item here is in category two and it's being returned which probably isn't meant to happen right so let's just go back into let's just double check this so let's go into our admin let's go into our products and this is where we can customize of course and and show the categories that they're in that would be really useful wouldn't it i think they are all in boots uh so this is part of shoes in actual fact which potentially um what's happening here potentially is it's traversing the um the connection so it's not just showing me boots but it's show me shoes which is part of boots that could be a potential problem that's happening there that we need to kind of deal with um oh no sorry what most what was talking about what am i chatting about um of course it's showing everything um because i'm saying all of course it is i haven't haven't done this yet so anyway now we know how to collect this data so now we need to run a filter i apologize it's getting late here it's a it's been a long day so now we need to run a filter so let's do this category um so this is a filter we're going to run we want to capital so category uh slug so we're going to traverse from category in the products table to so from products we're going to traverse three category into the category table and we're going to look for the slug so we're trying to match this slug equals um self. quarks and then slug now where's this quarks come from so this is um this is basically looking for those additional arguments so here remember we're passing over slug and that's saved in the quarks and we can then collect it from the quarks and then match it so we're going to collect any product um which has a category slug um the same as the slug here so let's go back into our product here let's go into uh categories so remember when we create a category we we we give it a slug so url kind of save name um so we could just use the category name in actual fact this is this almost doesn't make too much sense while we're doing this but we're going to be utilizing and the slug name to identify items so um let's uh go back in into our products so remember that there's one item this is a shoes uh boots free the rest are all um boots in the boots category so now we've got that in place let's just uh run this again so this is going to be api category and then we're going to say boots so we should now have three items returned one just just one item it looks like id2 and id1 oh yeah three items here so three items are part of the boots category so there's one item that's part of the shoe category i kind of put shoes or shoe there we go shoes and there's one item so clearly this is working now um in the basic terms we've now able to collect items based upon their categories okay so hopefully that made sense to you i do apologize um for those moments there um hopefully yeah hopefully you can follow this hopefully you've managed to do that you've got your categories sorted if not just check the code in repository just uh rewind a little bit um hopefully i haven't been to have been embellishing too much and talking too much and it has been fairly straightforward it's always hard to work out how much to give wherever to spend 10 hours on this because i could easily explain this within 10 hours or 20 hours or two hours obviously there's more details i could include but um of course you can click on the button to speed up the youtube video um if you want to kind of speed things up so it's probably easier in some respects i spend a little bit more time talking because you have that ability to speed things up in the video right so now we've done the django side let's go back into the next side here so now what we need to do is finish off our category page so we've got our parameters sorted here so that we can add our parameters to don't make our dynamic fetch so as you might imagine similar to what we did previously potentially what we're going to need to do now is also set out our get static paths so i'm just going to paste this in here so this is what we did previously remember so this time um i don't guess don't let's just uh get something that exists um shoes so we can um prefetch all of our items uh set up all of our parameters so we can prefix prefix pre-fetch sorry all of our products when we go into build time so when we build the application for real before we deploy it of course so i'm just going to put shoes in for now um so that's another thing that we need to do there so let's just double check i've got this so we're going to need to bring in the parameters here so we can actually access them so let's not forget to do that so we bring them in here okay that's all good um so we passed over the data across to the page as post so let's just make sure we're capturing that so post it's going in okay so it looks alright but let's have a go see if there's any problems so let's just uh oh we need a way to get to it don't we so we don't need to do that next so let's just do category now this shouldn't show anything because we don't have an index page so category let's just type in boots undershoots and there we go there's all the shoes so boots three just to confirm boots three is part of the shoe so let's go ahead and now add in our boots so there should be three items oh okay reproperty map undefined so do boots exist is it boot or boots so this is where we get the same problem again so we've got this some kind of reproperty map because what's happening is that we're trying to load the page again without capturing the fact that we're using an async request again so it's the same problem as before what we're going to need to do here is to produce a kind of a small little loading tool so we can load wait for the page to load the data or get the data fetch the data using the async request and then when we get the data we can then load the rest of the page essentially here so that's what we need to do again so we're going to need to bring in the uh the router like we did before so let's go ahead and do that so that was the use router from next so back up here let's bring in our router and let's just set this up so we need to go into our functional home function and then bring in our router and the little kind of if statement here okay so that's just going to say loading why the page is loading so let's go ahead and do a a restart so i'm gonna close my server and it's gonna restart rebuild okay looks like it's ready yeah yep all good so let's uh go in and refresh on boots oh i think it's already done there and there we go we've got the three items that are in boots so we got boots category we've got some items in there and then also in shoes we've got that one item that's in shoe there we go so that's our category sorter so now what we need to do is list out our categories in our header so that brings us on to the last step in this tutorial where we're going to collect all the categories so we're going to need a little little bit of knowledge about mptt for us to do this so we're going to extract all of our categories and place it on our page so let's go ahead and give this a go right so we want them to be displayed here that's the deal so there's some quirky things that we're going to do here this is one of these things where we're going to move later we're just going to do this as is for now so let's go into for example we need to do this potentially on every single page because we're going to do it this way rather than putting it in the app for now so let's go to the index and um actually sorry yes yes yeah yeah so let's go into the index and i'll just show you this um so we need to basically collect data um we need to collect all our categories sorry sorry we need to collect all our categories so we actually we need to go into django first and create a new view for this so uh let's create a new url to begin with so this is just going to be called i guess we'll just call this kind of category so api create a new path let's create a new path let's put it right here um so this is going to be api category this is going to return all the categories um that we want to return now this is where we need to be careful because we've got different layers of categories that we might want to return so we need to think about that in a second so let's just build a new view so in our views let's bring this in so category view um so we're going to create a new serializer called category serializer our query set is going to be category.objects filter level one i'm going to explain that in a second so we've got our new view here okay so let's build in a category serializer so we're going to need to bring that in at the top here let's go into our serializers let's create a new class called category serializer that's going to be our new serializer and as per normal we're just going to use the model serializer and then as you might imagine all we're going to need is meta and the fields so let's bring in the class meta the model is going to be category which i haven't actually brought in yet model blah blah blah so let's bring in category at the top here model so we can start utilizing it so down here we're just bringing the model and the name and the slug that's pretty much all we need so that kind of connects everything up so let's go ahead and test that apologies i'm going 100 miles an hour here so what we should have now is a list of all categories that we want to show okay so what do i mean by level one well let's go into the admin here so let's remember that these categories here um we don't want to show men in the categories we don't show kind of individual items we want to show clothes shoes um coats jumpers blah blah blah so this is level zero where men is you can see then it's tabbed so closing shoes were part of men or in this hierarchical structure the next level so that's level one you can see boots is part of shoes it's kind of a sub level so that's i'm level two so this here these two items here are level one so i'm basically just lining up my filter here let's go back in i'm lining up this filter here at the bottom here um category objects filter and then level one so level one being what i've just shown you there it's going to produce those two items so if i just show level zero that's going to produce just in this case men right so um let's go into my api view again um category so that's just going to bring back men so you can see what's happening here potentially so um let's go into level two let's go into level two that's going to bring back or return i say bring back that's going to return boots there we go so you can see what's happening there and i'm going to add well i'm clicking in between everything here so level one so i'm just going to be using level one so i've got my data now i've got my data being returned so all i need to do now is go back press that button by mistake um so all i need to do now is go back into into uh next js so let's go in and let's just make the changes so what i'm going to show you now is the basics of passing data across to components so like i said we don't need to do this because we could put this in for example the apps and just pass the data to all of our pages through the props so that would be ideal but i'm just going to show you this way just to give you an idea of how to pass data across from page to page for example so in my index here i'm going to collect uh the data now from category so let's go ahead and do that so i'm just going to copy this in so underneath here i'm also going to run this i'm going to fetch my categories return it into this variable called categories i'm going to pass that into my props and then i'm going to make that available within for example this class so posts and categories all that data now is available through pops and now what i want to do is i want to pass it to the header because i want to display that information in the header so therefore i'm going to pass that as a data equals and then categories so that data is now going to be passed across to header and referred to it via cat data so now i can go into my header i remember my headers in components here so in the header here what i want to do is i'm going to pass this data in so how i do that is obviously i don't know why i always say obviously but how i want to do that is i want to pass this in so header and then data that's the data referring to the prop data and now i've got data i can now link it out right so let's go and create my links so here i'm going to make a map and i'm going to map this out so let's just to remind myself where i'm going to put this so this is going to be in the app secondary so here's the list in the app secondary so what i'm going to do is just uh create a simple map here um so just to show what's going on i'm zooming in and out so i've got data map category so data is the data inside of there i've got my category so refer to each category item as category so i'm just going to output the name and here i'm going to build a link so my link's going to be slash category remember that's the folder category in my project and then the slug name so that's going to build the individual links and then i've just finished off with the a tag here i'm going to create some styling here for my a tag with the category name and there we go so that's pretty much all i'm going to need to do there hopefully you can see that so i'm going to need a new class called um list item link and also menu list item so let's go ahead and just copy paste add it menu list item and link item list so nothing amazing here going on so list item is going to padding zero padding right so what i'm doing is i'm removing all the padding and then i'm going to make the padding um on the right so my menu list in actual fact let me just show you my menu list so my menu list is going to be flex the direction is going to be row because i want to make a road column to road column i want to make a um a list but a lot along the row um on the uh diagonal so instead of it being on top of each other and then padding zero so get rid of the padding then the actual li light the list items padding 0 and then padding on the right 20 that's going to make the spaces between the items and i'm going to use text tran transform catalyze just to make sure that the first letter is capitalized that gets returned so the data that was returned i'm just going to capitalize the first letter and then the list link item font size 13 color so i'm just overriding the a tag um styling here with a font size color and text declaration right so that's pretty much all that's going to happen there so let's take a look and it's now failed good right so let's go and have a look see what the problem is so here what we can do is let's just track to see what's going on right so in the header here let's just check to see if the date is actually being passed across so here i'm going to run console log data and obviously you should get return when i refresh the page on the homepage here we've got the data about the the category so clearly we are receiving that data so there must be just something wrong with our code so that just checked to make sure that happens now i have restarted the server just in case you're wondering um so let's go back into my map here so let's just uh have a look so data.map category so data is our data we're going to map it go inside and we're going to for each item we're going to loop through this okay so let's just go back again and refresh so clearly this is um it's not working uh our list item is not defined okay so we're receiving a different problem um problem is time we've not uh we've not defined list item here so let's go ahead and let's just add in all the items that we're going to need so um this is in the header pair of me so we're going to need our list item and our list yep list item so let's go back um link is not defined so let's also bring in link so these are just some resources um okay there we go so that's the link refresh and there we go so wow it's just happened there so let's go back in our code close these are close oh no not loading we're loading our clothes so as you might imagine what's happened here is you may have already guessed it in the header we are actually now loading this header on all the pages and it is expecting some data so apologies um it is expecting this data so essentially what's happening is it's trying to load this data for the pages and it can't do that of course because we haven't told it to do that so here in the index page we have explicitly created this this call to that data so what we're going to need to do now is just add this to the two slug pages now like i said earlier we are replicating code here we could use this in the app for example but we're just going to do this manually so we get the idea what's going on we are passing the data from here so let's go into slug uh let's go to the bottom here and let's just add this in manually so this is the getting the category information now what we're going to do is we're just going to pass this down through the drain hole and then we're going to pass it into the product up here and then we're going to put it into the header so data and then like we did before so this is the same process um as every page so we'll do the same thing on this page here so let's just finish this off so data equals and then our data okay so that's in this page here so i'm just going to copy this and then go into my slug category um the header let's take categories so just do this backwards this time so posts and categories and then down here on posts and categories and then the last thing is just to bring bring the call in right here there we go so let's just uh go ahead and let's just rebuild okay so let's go to our our homepage so it looks like everything is working so we link we need a link here don't we to our homepage let's um let's uh sort that out so in our header let's go back to our header so this is um this currently is is our image that we want to click on and go to the home page i think that's a fair assumption of what we want to do so we can just wrap this up in a link um so let's do that that's good we can just wrap up a nice little link and let's not forget the a tag of course okay so that's going to link me to the home page so hopefully that kind of solves that little link yes yep that sells that little link there so that now i've got the link now to the home page so i've got to close should show me clothes had what one item was it well no items there's no items in clothes so it's not going to show anything so shoes that's just one item and choose okay so is that the case so there one item in shoes let's have a look i think that's right isn't it so category shoes there we go right so now you can see the problem here for example is i'm explicitly asking for shoes and what i really want is to show all the items that are in shoes so just go back into admins and i'll show you what i mean so in the categories here i want to show shoes and anything so boots and blah blah blah because shoes is just like a top category so i want to show all the child elements as well so here it is so if we go back into the store and the views what we've done here is just created an extension to line 25 which is the category item so selecting the category item so um here what we're going to do is we're going to correct collect the categories as per normal slog equals slog that we're returning but we're going to get descendants so anything for example in our shoe category anything under that say boots and whatever is also going to include that too in that list so here we're using dot get descendants include self equals true so also include shoes now this depends how you set this up because you might not have anything in shoes you might just use the sub category so in this case include self true doesn't matter so going back to our tree so if i refresh you can see it works now so i can get i'm getting category four and category two back at the same time so um go into our category here so this is category one this is category three this category two tells me at the bottom here the page it pops up so you can see that i'm going to get everything from category 2 and category 4. that is what's happening so anything underneath shoes i'm going to get so in clothes if i had parts of clothes t-shirts whatever jumpers that would be under here so again i don't need to put anything in shoes i could put them in subcategories and then call it from the the main or the parent category hopefully that makes sense i'm just basically selecting everything now from shoes and boots so when i go in here and select shoes it's going to show me everything from shoes including all the boots and there we go so it does say all boots but some of these one of these is in shoes so let me just uh yeah yeah so the uh this was in shoes one of these here was in oh was it free yeah that see that's in category shoes there so if i just call this a shoe you can um you can see this save that refresh again so here this item is a shoe and everything else is a boot so you get the idea uh that kind of finishes that up so when i go to shoes now it's going to show me everything obviously i've still got nothing closed category that's why it's not showing anything but there we go so hopefully that was useful there's a lot going on there um we pretty much finished up now so that was the last component of listing the category items the code is in the description if you want to download and have a look and study the code um thank you very much for listening hopefully it was useful uh let's just go back to the the initial slide so i do hope you've enjoyed part one of this next js django ecommerce store build in the next tutorial we're going to be looking at crazing a basket system so users can click on any item that goes into their basket and we can kind of manage that system and then we continue we'll build accounts user accounts and then payments and order management and so on so again i hope you hopefully you've enjoyed this and hopefully i'll see you in the next tutorial

Channel: Very Academy

Views: 16,334

Rating: 4.9375 out of 5

Keywords: next.js, next framework, next js, next js tutorial, next js beginners, next js django, django, django drf, django rest framework, django rest, django api, django ecommerce, django project, django tutorial, djangotutorial, django tut, django 3, djangoproject, django examples, learn django, django beginners, beginners django, django framework, django example, django 2021

Id: AuRmc9OTC1s

Length: 229min 52sec (13792 seconds)

Published: Wed Mar 10 2021