Next.js 14: Create a Simple Admin Dashboard with Tailwind CSS and Material-UI with Source Code 2024

and welcome to V8 techworks so today we are going to build this simple admin dashboard here and we are going to use next js14 also we are going to use typescript and Tailwind CSS also building this application you'll be able to learn several things like how to use nested routes for example here you can see we have this part that you are calling home and also if you come here and click users you can be able to see that you have this Rich data grid of which also you'll be able to learn how to use reach data grid to show a lot of data here from the database so here if you look here into the routes you can see we have admin and then users and we are going to use nested routes here for next js14 also if you come here to products also you can be able to see we have re this reach data grid here and also you can be able to see this one also is a nested route and the other thing is that when you come here in home you'll be able to also be able to build these cards which shows us the revenue the users and the statistics also the other thing that you'll be able to see is this uh graphs here we can see we have line graph here and also we have this pie chart also you can be able to see we'll be adding this recent users and recent transaction here so that you can see you can be able to add the recent users who have added in your database here and the recent transaction that have happened here and this we treating it as a admin dashboard for an e-commerce website that's where you can see the information here uh is related to e-commerce so also the other thing is that here you know the importance of using uh this reach table data and here you can be able to see this is very important because you can use sorting here by ascending and also you can sort by descending and also you can do things like unsort and also you can be able to see other things like filtering for example here if I want to filter a name by maybe the letter you can be able to see I can search all filter and if I for example look for the name that start with f here you can be able to see we have Ferrari here so if ioad again the other thing that also you can be able to to do with this R reach data table is that also you can be able to hide can be able to hide a column if you want to so I can hide that column and also I can hide another column like this one here and then you can be left with the uh columns that you want to show here so the other thing is also here in the table on the products here also we are going to use the same we are going to create this this data and show it here using this reach data grid and this is very important because also you'll find that most application you'll build will need to be having this reach data grid because you can show the information here in a very easy Manner and also you can do sorting and other things like filtering and many other things so the other thing that also you can be able to do with reach data table is that you can see here on the top right you can on the bottom right you can be able to see we have pagination here and you can choose how many entries to show per page for example you can choose 25 per page you can choose 50 per page and many other things so also be able to learn how to use Reach This reach data table so right now we are you need to go and start looking at how we can be able to build this ad main dashboard and uh what you can do to support me is that you need you can just like this video and also subscribe to this YouTube channel and also turn on the notification Bell because you'll be notified when I upload new video so if you have already done that let's get into the tutorial so to start with if you want to install nextjs 14 so you can come here and search for how to install how to install nextjs nextjs here like that right now we are in version 14 so you can see the documentation is right here and you can click this one here and go through these steps here that they have addressed here so this is the command to install next js14 so I can copy it and uh I can just come here into the documentation here and uh let me clear everything also remember we are going to use typescript so let me just click and paste this um paste this terminal command here so if I do next J up here and at datest so it will ask me for the name that I want to call my application I can just add here dashboard dashboard like that and then it will ask me next so here you can just go with default options like that like that just clicking until it start installing so I don't want it to install because I already had created such a project after that now you after it has open you CD into let's say you have called your project dashboard and then CD into dashboard like that and then if you have a vs code then you can open using Code Dot and then it will open your your code now or where you are going to work for this application so already have done that and when you run you'll be having this landing page and here you can see this is just a data to show that your application is running and also to show you documentation and other things to learn templates and how to deploy the next js14 application so now I'm going to to first of all Closs this documentation and here I had already opened this part here that we are that we are cing or this part here after I have installed this nextjs 14 mine I'm going I'm calling it admin here so the first thing that we are going to do is to just come here into this app and if you click here into layout you can be able to see the layout here and the other thing that I want to do is that I want to remove everything that is inside this page here TSX because this is the one that you can see here that is being displayed here as a landing page so let me remove everything here so I'm going to start here at the main so I'm going to scroll up here and here I can remove everything let me remove until let's say here and remove that let me see now you can see we have been left with main here inside here and also I can remove this class here like that so if I do this and save and go back to my application you'll be able to see that now application is blank we don't have anything so what we can do is that also I'm going to come into this Global here and I'm going to remove this body here because you can see we have the the default stying here for the body so I'm going to remove this here like that and I think now the that color that black color will be gone now so you can see now how we have changed now it is not black because we had already default sing here in this uh this global. CSS so let me go back into this part here that calling page. cxx and we want to make sure that our application is working so I'm going to say Ad me home or I'm going to say home like that and when I save this let me see so you can see we have home here so to make sure also that our Tailwind is working we can start using our Tailwind we can and uh let me go back here so to do that you can say class name and I can just just see text and then 3 XL that means the font and then when I save this come back here you can be able to see actually it has changed so we have increased the font or font size so also you can be able to do things like text color text and then I can say red and then maybe something like 500 so you can see also if you have never use Tailwind how simple or easy how to use this uh CSS or Tailwind CSS can see we have changed the color so this is very very good so because that means that you can be able to see that our Tailwind is working so I'm going to remove this part here for the styling so I don't want to create my admin my admin dashboard in this homepage here I'm going to create it in itself folder so to create a route in next js14 is very simple so if you check here you can be able to see admin dashboard is in this/ admin that means the rout that uh is for admin and to do that in next js14 is simple you just come inside this app here and then here I can be able to add like for example admin so I can call this admin here and inside admin here I can create a page do txx TSX like that and here I can just use RFC like that and then here you can see already page has been built for us or we have build the component in matters of second so the RFC command that you have seen me using is because I have already installed a plugin that is called es es react or like that you can just type es here and then es and then react something of the sort and we have this es 7 here and react plugin so you need to install this to be able to use the command RFC and because I have already installed that let me just come back here into TSX I'm going to remove that so because I had already installed that plugin I can be able to come here and say RFC and then you can be able to see enter and uh you can see we have created this page in matter of second or this component so you're going to come back here and uh I can just add admin like that and uh let me show you what I mean now because now inside this admin here we have this page what we can do is that you can be able to see if I try and go to admin so admin here so I'm going to admin like that so yeah you can be able to see we have admin here because now we have this route that we are calling admin just by adding that folder inside here and this page do txx so now this page now this is where we are going to use now or where we are going to create admin dashboard and this is because I'm assuming that when you want as an admin you need your own route where you can be able to log in and go to that that we to go to the side of admin so we assuming that this the other side that we are calling home here this is where also users can be able to have their functionality and uh also they functionality and also their interface but when you want to go to the side of admin you can just click admin route here and you can be able to go to the admin also if you implement authentication you find that when you log in as an admin You' be directed to this route that is called admin so now we are going to use nested routes and uh nested routes when you click for example in this application here you can see SL admin SL user but right here now we can create that and to to make sure that we create that what we can do is that inside this now admin folder here we can create another folder and that this folder I'm going to call it users and inside users here I can create page. txx like that and here I can say RFC and uh then you can see we have that page I'm going to remove this react because I'm not going to use it here and the other thing is here I can add users like that and uh let me save this and when I tried and uh now access users like that you'll be able to see now we have users you can see we have navigated now to users just like that you can see now this is how you build nested routes so for example if I wanted to have a user for example SL users SL users here what would happen is that I would create another another folder inside this app not inside the admin folder so I can also create another folder here to create a nested route and this one we are going to call it products like that so the route or the route correspond to the name of that folder so inside here I can create page. TSX and then here I can use RFC like that and also again I'm going to remove this and here also I'm going to create here products product like that this is product and then save this and can remove this space here and uh if I try and to access Now Products here like that you'll be able to see now we have products here how simple is that so let me go back and inside this admin so here in admin you can be able to see we have this part here that we are going to call it sideb and we have this part here that we are calling the main or the other parts that is of course we are going to call them children because they are inside this admin here and we are going to display them as children of the route admin so let me show you what I'm going to do here so to do or to make sure that I create something that looks like this I'm going to have here another inside this admin folder here I'm going to have a layout file a layout. TSX like that and inside here I'm going to copy this route from here so I'm going to copy this let me copy everything here and paste it inside here like that and I'm going to show you how I create I'm going to use this to create our route for our admin side so this is you can see this route here and uh I think we have not copied everything so let me copy this again and then I'm going to remove everything and then paste down here so then you can see the error has gone so now I'm going to remove things that we are not going to require for example this that is up here also this here that we are calling enter so I'm going to remove that also I'm going to remove this part so here we need just minimal things so here I'm going to remove everything like that and inside here we going to have a div actually or we can call it even main but yeah let us call it Main and this main here also we need to close it down here so inside here now this is where we are going to determine how our admin side will be layout because you can see we have layout here so using this layout I can have a div here like that and this one it is for sidebar and also we have another div here and this one will be for the rest like for the rest part of the application so what I'm going to do is that inside this app folder here I'm going to create another folder that we are calling components and this is where I'm going to to keep all the components so this is components and inside these components here I can add another folder that I'm going to call it bar so this is sidebar and now inside the sidebar here I can create a file that is page. TSX like that and I can use RFC uh as usual RFC and just like that remove this react here and inside here now what I can do or I can be able to do is that I can call this side bar now uh Side Bar like that uh and since now we have created this sidebar I can go back to my layout and here I can be able to import my sidebar so I'm going to remove this space and I'm going to import sidebar Side Bar like that I'm going to import it sidebar from let me show you so I'm I'm going to import sidebar uh from let's say at at components so at components components so components here so we have components and uh actually it is Art and then slash components so I cannot be able to see my components so let me show you let me see if I have done any mistake yeah it should be inside this part here that we are calling our folder that is admin so I'm going to move it like that so let us wait and see so it is moving so moving components so we are going to also first of all remove this so the components folder it needs to be inside this admin folder here not in inside the app and let's see how it is working because remember if we put it inside the app here it will be treated as a route so when you try to go to components you find that you have now you are going to have another route which we don't need because components that's where we are going to just uh put the component that we are going to reuse for example sidebar and men so since we the components have not been moved we can just delete it very fast so let us delete and move it to recycle bin continue like that and uh when it is being removed now we are going to okay let me confirm here so we are going to delete it permanently and now inside now this folder here our root folder you're going to create that components so components like that and inside here now we can create the other folder that we are calling sidebar and inside now sidebar here we can be able to create page. TSX like that and here I can add RFC like that so I'm going also to remove this and here I can just call it sidebar so this is something that we had done earlier so I'm going faster so here I'm I have now added like that so I can now come back to this route here for the admin so remember this is not the route that we have here this is a admin route that is inside this route folder here so I'm going now to try and import the sidebar so I can come here and uh have sidebar so I need to try and uh import the sidebar here actually because we cannot be able to autocomplete I'm going to import it manually so import sidebar Side Bar yeah I've seen like there was aut completion yeah I think we don't have Auto completion so I'm going to add from now let me just add art you can see art and then components you can see we have components there we have sideb and now page like that so here we can be able now to use that sidebar so sideb and uh you can add it like that so the rest now so here we have the Side Bar inside these divs and inside here now we have the rest now what is the rest so the rest we is the one that we are calling children that using the route the layout so you can see using the layout we have this children here and this represent any other things will be displayed here so this is just a layout of showing how admin dashboard will look like so let me save that and I'm going to push this down so here this shows you that we are going to have this Main and inside this main we are going to have a div so this div here it will hold will hold Side bar so that means that we are going to show sidebar here by default but also we are going to have another div here that we are calling children and this is the rest of the other pages and components so here I'm want to show you how it displays so now you can see we have sidebar and admin here so now if I try and now go to users here let me try and go to users so you'll be able to see that you can see Side by is just there and then we have changed the route to users so that means that we can show any other Pages here and we left and we leave the Side Bar here of which is the same here if you change the route can go to users page but you cannot uh you can see that the Side Bar is left here so that is it so um the other thing that I want to do is that because you can see the Side Bar here and the other part here are side by side so I need to style that so I can come here and in main here I can see class name and then actually I don't know what I've done there so here we can just add FX and if we do that you need you can see now we have sidebar and users side by side here and also if you go back to the other side also you can see or to the admin you can be able to see we have sidebar and admin here so that is the how our route will look and this will be having a side bar here and the rest here so we are going to start by styling the sidebar and the Side Bar will be looking like this here so that's why I'm I need to St it so that it DET takes this uh appearance here so let's go back and start our side bar so where is our Side bar so let me cross this and also I need to cross this also so let me cross almost everything here and leave with and then we are going to leave sidebar only so we have sidebar here so it is inside components and then remember components is the in the route of our this it is on the route of our main folder so we can be able now to start siding the side here so here for the sidebar let me see how the sidebar should look you can see we have here we have this dashboard text here and also you can see we have list that contains the icon and then the text so let me come here and inside here now I can be able to start stying that so the first thing here I need to style so I'm going to come here into this div and I'm going to give it a class name and here I need to give it a height so I'm going to give a height of 100 v h and also I wi or I can just give it a shadow let me give it a Shad of let's say XL XL like that so if I do that and here I try to display now like the dashboard so I'm going to use the here and here I can just say dashboard or admin dashboard dashboard like that if I save this and then go back you'll be able to see now even we have this um part here that has a shadow and then dashboard here so you can see it is taking shape so the other thing that you can do is to style this text so I'm going to use class name here and inside here I can just add FX then justify content or Center and then the other thing is that we can do font to be semi bold you can see we have semi bold text here and the other thing is that we can give it a margin of two and then you can give it a text of 2 XL 2 XL like that so let me show you how it looks so if I go back here so you can see it is giving like this shape the other thing is that I don't think I have styled this layout inside this layout I don't think I have styled how Side Bar will look like so I'm going back to this layout here and inside here I can give them a winth so I'm going to give it a CR name crass name here and then we can give it a wi of let's say 20 pixel 20% and also I can come back here to this children and give it a class name uh here we can give it a win of 80% so 80 + 20 comes to 100% so the children will take the majority of the space so if I I do the the saving you can be able to see now as Side Bar has taken like 20% the rest is 80% so that is it so I'm going also to let me save this so I'm going to save here so format the code and then save and then save now go back to now the sidebar here so if I look here if you check here you can see this is taking shape now so the other thing is that we need the rest of the icons and the text here so I'm going to create a list here ul and and then add here or ordered list so here I'm going to give this uh list here so here I need to style this and to style this I'm going to give it class class name we going to use f we going to use FX colum like that and also we can do items items to be Center and the other thing is we can give a text and here the text should be 15 15 pixels also we can give it like a text to be a line left and then we can also do space space y that is vertically we need to give it a space of 10 and then we can give a margin top of let's say something like you can give it a a top margin of 10 here so like that so if I do this and then save here we can be able to see actually there's no difference we have we cannot detect any changes but now we can be able to start seeing the changes now so inside this list now here we can be able now to also St it and we can give it a class name and actually let me just add here like for example can have home here so we have home like that also we can have the other one here so we can have the the rest here for example we can have home can have users here we have users and uh also we have the rest like the products so we have products here so we have products like that so this is product and let me see how it looks like so if I do this you can be able to see how they are being styled here so I need also to add icons so to do that let me first of all also save because I'm I'm adding a lot of spaces so here I need to have icons so I had already prepared an icons for us but first of all we are going to use are react icons so how to install react icons you can just come here and type how to install react icons or even you can just search react icons so if you come here and into npm and then react icons you can be able to see npm uh how to install it so I'm going to copy this so copy this one here and come back to the application open another terminal so I'm going to open another terminal here and inside here we are going to be able to installed it so I'm going to paste it let it install and then we we are going to be able to use now the icons here so before that I need to style this this here so I'm going to class name and then the other thing is that you can give it a flex here or the direction of for the display to be Flex also we can do items to be Center and then also or align items should be Center and the other thing is that we can give the text to align to left and also the other thing is you can give it when you hover over this text you need to have a text or it will give you like a text and then it will give you a color rate but 200 so the other thing is that this one should be c a pointer so and then we have font to be semi bold semi bold like that and uh also let me just come back here so the react icons have in been have been installed so let me push this down also to have a space for working so you can see here we have some B and everything here it is being so I'm going to remove this first of all so that we are going to use the same styling so here I can just come back here like that and then let me format this so if I do this and go back into our application so let me first of all remove that so you can be able to see we have home here and when you hover over it you can be able to see it is changing like the color so so I had already seen or have prepared the icons that you're are going to use so I'm going to import all of this from now the react so icons or I'm going to import it from react icons and that is because I could not remember all of them on top of my head so you can see all all of these icons here so for example here for home you can see IO home outline so here in home we can also have that icon here so let me add the icon IO I think it is IO home IO home uh I can just copy it I think and let me add it like that and then let me save this and when I format my code and then save you'll be able to see here you're going to have that icon so you can see we have icon that that icon here so also I can be able to make sure that I stle that icon so I can come here and add class name class name so this one should be class name and then here I can add a very simple like a very simple uh styling so I'm going to use TX X text and then to XEL and then margin right will be to like that so let me see how it looks like so yeah you can be able to see now it is making sense so you can see we have this part here that we when you hover over it it just gray out so now the other thing is that now we can use this and copy paste several times so copy that and paste it here several times like that so if I go back and show you how it looks like so you can see how it looks like so the other thing is that now we can change here for example let's see uh this one you need to have users product so we have uh users so we have users here so for example here this is users and we need also to change the icon so the icon here let me see the icon that we need to use for users it is TB users so we have the one that we are calling TB users you can see auto completion like that for here for the products also we need to have another icon that we are going to call it list so we are going to call it far list like that so here this is for products so product like that also so we are going to have completed completed completed like that and also we going to have pending here so pending and the other thing here now we need also the other icon for complete which is MD actually I have not done I need to change this so this is MD so MD here outline and then incomplete or complete circle and also here for pending we need to change to another icon so for example we need to have an an MD so we are going to use MD here for pending we can use MD MD out and then MD out and then I think it is MD out let me I can just conf confirm MD actually it's pending I can see it there and then here we can have the one for the profile so if you want to go to profile also you can have profile here like that so we have our profile and icon for profile is uh also actually I think it's MD out person so MD out person person like I think this one here like that so you can see how it looks and then we have the Le now the other one for logging out so log out yeah so log out like that and then here the icon the icon here should be IO power Io Io power like that IO power Shar like that so if I save this and then go back you'll be able to see now we have uh they will be having those icons so I don't think I think we have not changed so let me save this let me format first of all and then I'm going to save them so if I go back you can be able to see now we have our admin dashboard here or the sidebar that is so we can come here and H over it you can can see it gr out also the list they completed the pending and then we have the layout or the log out here so that is it you can see it looks like this one here so now we need now to import or we need now to create this the other part the cards here and also the charts and the rest of this part down here so to do that to create this part for the card now we need to come back into the admin now so I can cross this and also remove that part also cross this part here and inside the admin now we need to come to let me Closs all this and inside now the page here this is where we are going to create everything so like those part here that you can see we have these cards here we have these charts here so we are going to uh we are going to create them here so we can come back here and uh here I'm going to have the main here you can call this main main and then here also we need to have main so these are like semantic tags so main like that and also inside here because we have main we can have another div and this div we can give it here let me start this div so this div here this is the one that will be holding this part this all of these cards here so let me come back here and uh I can just add here class name and then here I can just add FX because it will be we need to create it them to be FX and then item Center like that so that is the only thing that we going to start there so now let us create as one single card and here we need now we have this card we are going to have three of them here so I have this I'm going to stud it now so the the first thing that we are going to give it is height you're going to give it a height of 250 pixels like that also we are going to give it a wi of 350 pixels so 350 pixels and the other thing is we need to give it a shadow of MD and then we can give it margin left of let's say something like 10 P 10 or here so here inside the card now we need to have a text so you can see inside a single cut you can see we have text and then we have the rest of the part here so actually you can see we have the card has been formed here so we need to have a text here and then this one we giving it as span and inside here I can add this to be Revenue so this is revenue and the other thing is that let me just first of all create it here because here we need stying so a class name here so here we are going to style this we are going to give it a FX and here also I'm going to give it a font semi bold font of semi bold here and also I'm going to add it to be item Center like that the other thing is that I also I can give it justify Center or Justify content to be Center I need then text and then text should be Excel or large text and then we are going to give it a c of poiner here and then M or the margin top here should be 10 and then we have a text and this text we are going to give it a color of hash then 555 like that so let me save this and then see how it looks like so it saves and you can be able to see we have Revenue there so if you want to change also the font size you can do that but now after this I'm going to have inside here we have another div that will hold us we'll hold this part here for the money or the earnings so here we have that div and inside that div now I can have a span and then I'm going to give it a revenue of$ 500 here I can just add here class name and this here I can add this to be for example for here it should be items item Center so this one here item Center and then the other thing is you can have justify to be justify Center and then margin top to be three also we need to starty this pan here so this one should be crass name so this crass name here and we can give it a crass name of and give it a font here to be semi bold like that so that is it and now after this now after this Pan actually we can have another div so we can have another div inside here like that one and inside this div now we can start having another div here that will handle the arrows so I'm going to have actually I cannot do this because I'm using uh Tailwind so here we are going to have the arrows so I'm going to add a class name here so you're going to give it a f item Center item to be Center like that and the other thing is justy to be Center and then you're going to have a margin top of three like that so here is where I'm going to display those now the those arrows now so those arrows are this one here that shows us the uptrend and downtrend so you can see also we have the here we have this part that is revenue and then you can see the revenue there so I'm going to import those arrows here so import you're going to import it from react icons so import here from react icons react icons and then you're going to get them from hi2 like that and here we need to install or to import actually this I don't know what I've done there so this one this part here we going to take H Arrow so H Arrow small up actually down we can do down and then H Arrow here and then up like that so those two so we can also be able to display them here now so let me display them here so the first Arrow here is up so H Arrow so H Arrow up this one here like that and then we can have this one here and then this one is H Arrow H Arrow small up or can have H arrow and then uh this one is long long down uh I think so like that so I need to I think import this actually uh yes so I'm going to have those two so let me remove that so we can have this two here and when we go back into application here you'll be able to see those arrows so let it uh save and then you can see those arrows here so now we can be able to start this Arrow so class name and and then actually don't know what I've done there so crass name and then here the arrow we can give it a font size of here text 3 XL the other thing is that you can give it a color so this one I'm going to give you a text color of green and then 700 like that and then what I can do is that I can just take this styling here copy it and then I'm going to paste it here inside the this Arrow here and this one I can give it to be red like that so because that is downtrend now so if I save this and then go back into my application you can be able to see now the uptrend and then downtrend so the other thing is the other part so I'm going to save this first of all format the code and uh after this trend now here what we can do is that now we can have like the other part here so this part is for compared to the last month so inside here we can have a span and this span is compared to the last month last month like that so here we can have a class name class name here we can give it a FX item Center item Center and also can have justify content justify content Center and then also we can have a margin top of three like that so that is it I want to scroll up there so let me first of all also format this so if if I do that now let me show you how it looks like but also we are going to make sure that we start it we St the text so we need to do a small styling here so I'm going to add class name and then here we can give it a very small like uh styling so s uh we are going to use Font and then semi bold semi bold like that and then if I save that now you can see our card is taking shape so now we need to have the other two cards so because are just the same so I can format this first of all and I can copy now from from here now so this part until now I need to copy it until I think here so let me try and copy it until here but I think yeah it should be it should be let me let me copy this from here until somewhere here like that I think that's should be the case but I don't think so so I'm going to actually I don't know why I'm I'm not getting where I should cut that until so so it should be until here yes so I'm going to paste that and then paste three times like that and then now I can change this to uh now the other part is revenue we have let me show you so we have this part for users users here we have users so you have the first part here that we are calling Revenue which revenue is 500 here we need here also to have users so this is users here so after users we can have users to be 1,000 here or whatever you want and uh also here down actually we have this part here for users and I think now uh we need to have this is revenue and we have another Revenue here so let me see the other part we have users and statistics so here I can add as statistics statistics like that let me see here 500 like uh let me like that so if I do this and then come back here you'll be able to see now we have this part the cards now it's we have created the cards here so now we need to continue to the other part where we show the charts so copy this actually format if I format now it should be like this and then after that now we can be able to have the charts down here now so to create the chart we are going to use mui uh because that is very simple so I'm going to have mui here so let me have come back here and uh we going to check for mui charts that's what we going to use so after that you can be able to see mui charts here uh and we can click this to be able to see how we can start using mui charts so let me click again and then you can see how to get started you can see the charts that you can create using AI or U or mui that is so I can come here and get started so you can see gauge you can see scattered so I'm going to copy this and here because I have another we have in our terminal we are going to open another terminal so let me open another terminal here so we can paste this like that so also you can be checking at how you can be able to use them so the first thing is to install the mui and then xjs and then also you need to install this uh this part here for styling it is using emotion and emotion is styled so you need to also install this and the other part is that you can install this style engine here so also you can come back you can come here and see how you can be able to use the chart so you can be able for for example here you can see you can import Bart and be able to display the data here like the way you can see here here so you can see lines you can see Pi so let's see if it has finished installing that so it's still installing so we are going to install the other part here that is this one you can see the command here and also if you're using Yan you can be able to use y here n PN PM so I have never used n PN PM so you can also do that you can be able to install using this so the package that use package manager that you use you can use it so let's come here so it has finished installing that so let it install now the style emotions here and also now the other thing that we are going to install is this style engine here and that that like that now so already you have seen the overview here also so this is the overview you have seen the the mui chart component we have but chart we have line chart have pie chart here so this part Al let me installed now the other part for style engine so you can see now you can have the line chart here and uh you can see how to get started you can come here and see how you can be able to use it so I'm going to start with lines because we have line so you can come to line here and see how to make make the line so for example this line here you can import this line and be able to use it you can see also complex lines and also this one here so for example for this I'm going to use this so a simple line so let's see if it has finished installing yes so here we need to have those uh we have to have those here so I'm going to have a styling here class name and then here I'm going to add FX we going to call it items Center like that and uh we can give it a shadow shadow MD and then can give it a margin of 10 so inside here is where I'm going to give it uh to add now the charts so to add the charts I can come back up here and import so actually I can just copy let me copy this code here and show you how I'm going to use it so copy this so this this is a component so I'm going to first of all I make sure that I import it so D chart so I don't know if I can be able to import it direct but if I cannot do that let me first of format and then I can come up here and import it so to import it let me come back here so I'm going to import and then to import I'm going to import it from the now the mui charts so at Umi charts so you can see here and then now inside here I can import line line chart you can see the line chart here and also I can be able to use py chart so this is py chart like that so and then now we have the line already we have added the line here and then the rest now is the pie chart so let me show you how to use also the pie chart you can come here and look for pie chart so pie chart overview here so let me let it see the pie chart how to use pie chart and you can see the pie chart here so I'm just going to copy this I'm going to copy this here copy and paste down here so we have this line chart there and we can have pie chart there so let me also format the code and then save that so let's see if uh we can display them so let it uh save and then wait for some minutes and when it reloads you can see we are having this error so this error is uh create only works in client component so you can see we need to add this use client up there so that it works so let me come up here so it can come here and uh use client add use client here and then it will be able to work it should be working now so use client like that now it is loading as you can see here because it have you cannot be able to use the directive uh you cannot be able to use create context only works in Cent components so yeah you can be able to see now we have the graph here is being here is being you can already see now we have the graph and also we have the pie chart you can see how easy it is and now we need to have the other part down here so let me add the other part so I'm going to format this and uh now we can be able to see the other part now so this part uh we are going to add it here so this part that shows us the resent users and resent transaction you can see resent users resent transaction so let me come up here and uh we are going to style this so can have class here and uh class name actually so class name and here we can have F and then items to be Center like that and then we can have now the two part so we have part for the user but I'm just going to reuse everything so this is div one so this is for the user so I'm going to have a class name here and I'm going to stud it I'm going to give it a height of 400 pixels 400 pixel here also I'm going to give it a wi of 500 pixels so 500 pixels and then I'm going to give it a shadow shadow here of XL and then margin of five like that so we have this now the first part so also here we we have the text that we have for recent users resent users and also we are going to stud it so come here into class class name and uh here we can give it first of all a margin or a padding left of 10 also we going to give it like a font of semi bold font to be semi bold like that and here we can have a text text XEL like that so that is recent users so now we have the other part down here so this is a list so I'm going to have a list here and uh like that so this one is you're going to have the stying here so the first sing that we are going to have is a space so we are going to have space Y and here we are going to give it 10 you're going to give it a padding of 10 like that and inside here now we can have names here for example we can have James door like that we can have actually let me just copy it and paste here let me paste several times so here we can have gendo so gendo here you can have like uh reasy is need and then we can have Richard Richard door so like that so let's see how it looks like so I'm going to save this so format like that and then let's see how it looks like so if I come back here so and it loads it is still loading so after it loads you can be able to see now we have recent users here so now I can be able to just copy from here like that and then actually can copy and paste down here but this time this will be recent transaction so this is recent transaction transaction desent trans transaction like that uh descent transactions like that so let me see how recent transaction looks like so if I come here can see James 450 so actually so I'm going to have here recent transaction and then here we can have for $50 for $50 here we we can have like $500 so this is $500 you can have Disney Disney need to have $600 and also we can have Richard Richard should be having $700 like that so if I save this and then come back here into my application you'll be able to see now we have the this part here for recent transaction and you can see how it looks really great so actually I think this one I could have added until this side bar to at least be able to cover this part here I think I can do that so the other thing is that you need also to show the users here so if I click users here it should show us the users but right now because we have not like added the the functionality to go to the route of the users and also the products that's why you cannot we cannot be able to do that so I'm going to to do that now so let me go back to the sidebar now so where is my sidebar so I'm going to save or to cross everything here and then I'm going to go to let me cross this I'm going to sidebar and sidebar is inside the components so inside these components here I can come back here to the users and I'm going to import let me first of all import here I'm going to import link so import link here like that from now the react router so I'm going to import it like that so I can use this link here to be able to to show the or to go to the route that I want so this one I can just start by link here so we have link so link here the the link this one here with capital L so link also here so here I can just now paste the this part here the users and here I can just add HF I think it's hrf so I think it's so here it should be hrf and then here we can add like slash admin uh SL admin SL users SL users and also I can use this app here into the home so we need to cut the home first of all like that and then you can use Link here so we have link so let me move link here so like that actually I don't know why I'm not uh working the way it should so like that and then inside here now we can add the the list here so we can have HF like that and then this one here we can just add SL admin like that so now the other part is this for products also yeah so we can have link like that and then here we can have like this one so here inside we can paste now here and then also here we can add the class name so this is a class name here ah not class name hrf and then this one should be slash admin and then slash now the products so like that so you can see how it looks like now so now I can save this and uh let's see how it looks like now if we can be able to navigate to users so if you click here you need you should go to users so you can see uh here we can see like create only works in react add the user use client up there at the top so you need also to use that use here inside the sideb we need to use use client so use client again use client because this is client rendering in this component so like that and then let us see now so if we reload again you're going to see how it will work so it is loading and uh now we are going to show users and products using reach data table and we are going to use that in this using mui and this is what we are calling data grid here so if you come here to overview you'll be able to see that reach data Grid or this reach data table so you can see how it looks here so you can see this one here for example can select them you can do whatever you want with them so this one is also still loading so let us wait so to do that so it has finished loading and you can see here we are having like an here so react web web web pack here import module use context and I know what is that this means so you have done like a mistake here so if I come here into the import link here we should not import it from react router do and this is because this is nextjs and that's why we are we are not allowed to do that so we are going to import it from next yeah and also we are going to import from next link like that so and then now if we do that so let's see here Al we can be able now to see when we reload here it should do now the loading and uh it should be okay so I was talking about the data grid here and how we can also be able to use it you can come here into demo so you can see how it works also so if I come here to demo you can be able to see other things that you can use here like da loading you can use Master detail and all of the other things so let's see if this one will work now so you can see we have users we have products if you want to come to products you can see we have products now so that is working so the other part you can go into the completed you are going to complete that for you so here you can come back home so now let's see how we can be able to use data grid here so to use data grid so we need we need to come here to get started and see how we import that so I can come here and install that so if I come back to this part here can come to terminal open new terminal and then here I can be able to install it so you can see I've added a lot of terminal but it's okay still okay so let it install and then also we are going to see how we can be able to use it so you can see also you need to install this like the charts you need to install this emotion because this also uh it does styling for data grid and also you can see we have St engine here which also you need to import because it will help you when it comes to styling so let me see how this one uh if this has completed no it is still loading so the other thing that we can check is how to use it so you can see if you're using typescript you need to add this grid row props and if you also using typescript for the columns you need to add this grid col Dev here so also now you can be able to see how to use it like here so you can see we you first of all import data grid import grid row prop and grid column Def and then you need to first of all create row so let me come here and then it is still installing so here you need to have rows you need to have columns and then when we add the data grid you need to give it this as props the rules and then also you need to give Cor S as props and then this is this component will be able to display the data in that the way that you be like it to be displayed in in datag Grid so here you can be able to see open the sandbox so this you can see how it will look like yeah so this is a very simple way of having a lot of functionality so you can do that so this one is still installing so so we are going to do that so let me scroll up here also and you can read this documentation also you can read about columns the rows here the good thing is that also they have a lot of documentation also when it comes to pagination selection so styling also here you can be able to see accessibility performance and all of those things they have also talked about almost everything so let's see so it is still installing so I'm going to pause this video and then get back when it has finished installing so it has finished installing so what we are going to do is now let us install also this emotion part here emotion so let us install the emotion here also again so it is still installing after we install emotion so I think this will be a small package so after we install emotion also we are going to install this sty styled here or styled engine the same way we did with our charts so you can see how Umi uh grid here like will help us and also how to use mui for things like interfaces so let me come back here and see so it has installed so let us also install this again the style engine so I'm going to first of all come back into the user so let me come to users now inside the component and then users you need to come back here and then here I'm going to scroll this or to push it down because you need to have a space for working so here because we have users we are going to have a class name class name and then we are going to St it here so the first thing that we need is to in this in this part so the other part that you need to do here because data grid also will make sure that use client use client here so that's why I have added it uh early on so here we we need now to start this part here that we are calling the the div or the our main I can call it main or maybe D so I can give it just a margin round of 10 here and then here I can have another H2 here and this one we can call it now the users users like uh need to have users here and then we can be able to start this so we can have class name so let me have class name here so class name and then we can be able to St it so the first thing that we need to do is to give it a FX and then items to be Center so also actually have not done item Center so item Center like that need to have justy Center also another thing so the other thing is we need to have a family uh font here to be semi bold so like that and then the other part is that we need to have a margin left of let's say 10% yeah so 10% like that and then the other thing is need to have margin bottom of let's say to like that so let me save this and then see how it it looks like so if I come back here and then come to users so if I click users here we'll be able to see it so it's taking time I don't know why so if I come to users you can already be able to see we have users here and I think I can I don't think I need this margin dep so I'm going to remove margin de here I don't think I need it so I'm going to come back here and uh if you can see here the users now so the other thing is now yeah you can see now it is at the center because we have used item Center and justify Center so now the other thing now is to show the data grid here so how to use data grid now let's go back into documentation and the documentation here will tell us how to use it so you can see this is the whole part here so for example we need to import this part so I can import this part here like that so let me import it and uh I can first of all format this part and then I can import this here like that so I have imported the data grid grid columns or grid rows prop and grid column def so inside here also I need to add these parts the rows and the column columns so I'm going to copy all of them so let me paste them here like that and then I can able to add now datag grid down here so I'm going to come here and uh copy this data grid here so copy that and then make sure that I add it here so like that so if I save this so let me format this and also save so let me see how it will look like so here I think we need to reload this so that you will be able to see that data grid here in our UI so let us wait and see so it is loading and then after loading here you'll be able to see that so it is like loading and then next weit so here the thing the other thing that I want to show you is that when it comes to Rose this is where you have like the actual data but for the columns here this is just field and uh this field is the one that will be for the or the header of the column for example here let see still loading so I don't know why it is taking a lot of time while it is loading so we cannot be able to see the data grid so I'm going to come back to the home here and then try and go back to the users so I don't know why I cannot be able to see the data grid so let me see here if I have any any any error so let me see also come back so let me load again so if I reload I cannot be able to see the data grid so I don't know why it is not displaying the data grid oh actually it has come so there was a problem while loading so the other thing that I want to show you is that here the columns you can see column one column two here so these are the the names for the columns so that the one that you can see here in the columns and there's those are the fields here so the actual data is this one hello world so you can see hello world is being shown here so R are the actual rows are the actual data but the columns here are just the names for the column and the labl and also you can increase the wind here for example if you check now you can see the column one has a this wi here but when I want to increase it I can come here and add like for example 300 so this will be double the winth so if I do that and come back here it will increase in in wi by * 2 that is so it is loading here so I had already prepared the data so as it is loading so I have this data for for the users in this part here so I'm going to copy the rows here the actual data and also the fields down here so I'm going going to copy these ones here like that copy them and then let me come back here so while it is loading here you'll be able to see yeah you can see now the wind we have a very big wind here now so that is it so let me just remove this and then paste the data that I had prepared area so that we don't waste time so if I do that and then save this then we'll be able to see that our data grid here will change so also we are going to do the same for the product and I had already prepared also the data for the product here so actually uh here you can see this is the data for our our Ecommerce and also you can see the field here or the name of the columns so here I can just uh close that and here you can be able to see now we have added our data you can see how simple it is and now it has come with all the functionality that I was showing you sort by ascending sort by descending and also you''ll be able to see that even pagination here we have pagination and the other thing is that also you can do other things like hiding so you can hide this column like that so you can see how easy it is so we are going also to products here and we are going to do the same so here I can come back to products here and uh page do TSX and inside here now we can be able to make sure that we do the this part so I'm going to copy this part here actually because it is the same so we are going to paste up here like that and then the other thing is that actually we doing like a copy and pasting and down here also I can just um make sure that I copy this so I'm going to copy everything here copy this and then I'm going to paste it down here like that so this is products so this is products like that and then the other thing is that now we need rows and columns so I'm going to use now this data here for the product so let me copy this and also this here so copy that and then I'm going to paste it down here like that so I think now that is it and I want to show you how it will work now so we can reload or that it reload itself so here we actually it is not loading I think think this some problem so yeah you can see it has now have loaded and you have also the functionality I was showing you so also you can see how you can drag this and then how you can do like match everything so here you can just come to home you can come to users now and you can come to products so what I have done is that I've shown you how to use charts very simple charts and you can just come to mux mux and then n about other document other documentation about much everything about visualization accessibility performance you can just come to this mux and then you read about all of the above things now that I have shown you about how to show these charts about how to show the data grid and all about all those things if you need to create complex then also you'll be able to go through the documentation and read about that so that is it I don't want to take any much of your time so thank you have if you have come to this far also I will include the code into the description of this video so that also you can code while you are looking at the code so that is it see you in the next video have a great day remember to like and also subscribe and turn on the notification Bell so that you'll be able to be notified the next time I upload a video see you in the next video have a great day

Channel: V8 TechWorks

Views: 1,227

Keywords: Mastering MERN: Build Your Own Shift Taking Application

Id: xKv7_WW5E7w

Length: 88min 33sec (5313 seconds)

Published: Thu May 09 2024