Build a MERN React Admin Dashboard | Redux Toolkit Query, Backend Focus, Deployment, Data Modeling

hey guys this is at row today we are going to be building a complete full stack admin dashboard application using mirn from scratch so this application is going to consist of a dashboard page with different stats a line chart a transaction table and a pie chart now this information is going to be coming from backend and this will all be data that we'll be saving into database so if you've seen my other dashboard application where we focus on the front end this one is completely different because we'll be focusing on full stack and making sure we have our data organized after the dashboard page we'll have a products page where we have a list of products with rating description name category and we can see more then we have a customers page where we have a data grid we're going to use material UI data grid which is an excellent data table that you can use and put our information and then we'll go to the transaction page which it may look like the same but this one is different because we're going to be doing server-side pagination which is much harder much more complex and most tutorials are not going to cover this so we're going to be doing that and then we're also going to go to our geography page where we will see where our users are located so we'll have a list of users and we'll be able to display where their users are located using nivo geography chart and then from here we're also going to have line charts showing our Revenue by the month and we can Swip Swap between sales and units and then we can go to the daily chart and we can choose different ranges of dates for our daily sales we'll also have a monthly chart we'll also have a breakdown of our pie chart we're going to have an admin chart or admin table and then performance table as well but the performance table for this information it's going to be different because on the back end we're going to be using something called aggregate calls in Monger database which is very advanced in addition we're going to also be able to toggle on and off our sidebar with material ui's sidebar and our website will be fully responsive also in this app I'm going to show you how you can use an entity relationship diagram to data models so you can organize your backend before you start creating so you can save time and make sure your data is very well organized and finally I will also make sure I show you how you can deploy your application onto render.com and your app will be fully available to see on your portfolio and by the way if you saw my other admin dashboard app this is similar but this is actually very different because we are going to dive into the back end for the Technologies we'll be using we'll be including the myrn stack which is represented by mongodb Express JS react and node the front end will consist of material UI for styling material UI data grid for our tables nivo for our charts Redux toolkit for Estate Management Redux toolkit query for making API calls for the backend we will be using nodejs as a runtime express.js as our backend framework and Mongoose for managing our mongodb again this app is for both beginners and experienced developers I'm going to show you step by step and making sure you are using best practices and finally as I say with all my apps this website is completely designed all by me so you are free to use parts or even the whole project for your portfolio Okay let's get started so the first thing we want to install is going to be node.js which is a JavaScript runtime that allows you to run run JavaScript code in your machine and you can install whichever package is most sensible for your system then we can go to the npm website and install a package called npx which will allow us to execute certain packages and then finally we can go to visual studio code and install Visual Studio code as our text editor this was the one I'll be using but you can use whichever one you want to and by the way all these links are in the description below if you want to figure out where to go now with those installed I'm going to open up visual studio code I'm going to create a new directory go into that and I will open up the terminal inside the terminal I'm going to do make dir so make directory we're going to create a folder called server we're going to go into that server with CD server and I'm going to run a command called npm init Dash y so it'll initialize our npm package and from here I'm going to install some packages I'm going to run npmi Express for our framework for apis body parser for parsing our data coming in cores for cross-origin resource sharing dot EnV for environment variables helmet for protecting our apis Morgan for logging our API calls Mongoose for handling mongodb calls and nodemin for live server reload and we're going to wait for that to finish and then from here I'm going to open up I'm going to go to server you can ignore vs code for now these are just my preferences that I have it's not going to have any impact so I'm going to create a new file I'm going to call this index.js and this index.js file I'm going to create some imports so I'm going to import Express from Express like so import body parser from body parser import Mongoose from mongoose import cores from course like so import dot EnV from Dot EnV like that I'm going to import helmet and by the way I am using intellisense so whenever it pops up it's very highly recommended to use this because it does two things one that makes it faster to write so you don't have to write it and as well as and make sure there's no bugs because if you click on it it's automatically generated so if you ever mistype it it's not going to be a problem and finally I'm going to import Morgan from Morgan all right and then from here I'm going to set up some configurations like so and I'm going to start with DOT env.convig like that so we can set up our environment variables I'm going to do a const app equals Express and then I'm going to do app.use Express dot Json to invoke it the app.use helmet then app.use helmet dot cross origin I need to spell that correctly cross origin resource policy and I'm going to put in Brackets policy with cross origin so this allows us to make cross origin sharing requests and it's something you need if you want to make API calls from another server then we're going to do app.use Morgan common like so so a lot of this is just boilerplate for a lot of these middleware that we're using from these packages you do have to just set and configure a lot of these so from here I'm going to do app.use body parser and Dot Json pass that in and then do app.use body parser.url encoded and we're going to set this extended to false and then do app.use course so I have that I'm going to save it and then from here we can set up some routes so I'm going to do routes and then I do app.use and we're going to set up four different routes we're going to set up client so this is going to include all the client routes then I'm going to do app.use slash General like so and do General routes and then app.use slash management and we're going to set management routes and then app.use slash sales we're going to do sales routes you can make sure that's camel case all right so what these routes represent is going to represent client will represent these four routes or four pages all the routes relevant to this and then sales and then management and then General will represent getting the users and the dashboard so that's how I'm splitting the apis so now if I go back I'm going to go up I'm going to import client routes from files we have not created so client.js so client routes correspond to this guy and we're going to do the same thing for each of these and I'm going to set this client I'm going to hit command d 2. hit both of those and then from here I'm going to do client as well change this to manage mint and the final one with sales and then from here I'm going to create the routes folder I'm going to create the four different files in here so I'm going to create uh client dot Js general.js management.js and then sales.js so we're just going to keep these open I'm going to just create the general skeleton I'm not going to create the routes just yet but I will create the Imports and just the general setup so I'm going to import Express I'm going to do router equals Express dot router so we can route these routes in here and I'm going to do export default rather actually this would be a lowercase I'm going to save that I'm actually just going to copy this over for each of these files so we just have the routers set up we'll be setting the routes in a little bit but not yet and with that I'm going to open up and I'm going to create a few more folders just for our general layout and we're going to create controllers I'm going to create a folder called Data and we're going to create one more folder called models and inside here I'm going to go and create a file called client.js so it's just going to be exact replica we're not going to have any code in it just yet so controllers general.js management Js and then sales.js so these were going to be files we just leave blank for now all right before we get on to the next step we want to connect our database with Mongoose so you're going to go to mongodb.com and we're just going to try and sign in and here you're going to sign up and you're going to register your account so now I've already registered but I will do the onboarding process with you guys so you can follow me along after you confirmed your email this is what you're going to see so from here we're just going to build a new application we're going to say what type of application You're Building doesn't really matter I don't know application modernization I'm going to say JavaScript is my preferred then from here we're going to build a database I'm going to choose shared which is free and we're going to create and from here we're going to choose a lot of this doesn't really matter you're just going to choose a location that's closest to you for mines Oregon and we're just going to leave everything the way it is and we're going to hit create cluster and then from here we need to do we need to set our user so this could just be anyone dummy user and we're just gonna I'm just gonna set this to a random password so it's not that big of a deal and then create that user so this will be the main user that will be able to use it and right now you just want to say add my current IP address so we have access to this database so only this IP address has access to the database for now um and we're just going to go to databases you don't need any of this so we're just going to click close I'm just going to hit dismiss over here and we're just going to wait for this cluster to load and before we set this up I just want to show you a few things so you can go to database access so these are the users that will have access to the database you could set whatever permission you want and the network access so these are the ones where you set the IP address to the users or the servers that want to access mongodatabase so if they're not indicated here you won't that IP address will not be able to access your database so make sure your current IP address is accessible and if you go back to database you can see browse collections this will be where all your data will be once we add it so we're going to go back to database and we're going to hit connect and in this connect we're going to do connect your application and we're just going to copy this I'm going to go back and we're going to create a new file called dot EnV actually this should be inside the server and in here I'm going to write actually let me close this underscore URL and I'm going to put in quotations the thing we just copied and under the password we're going to write the password and then this one I don't really care about this so ABC13 that's my password for this particular user so it's the user's password user name and their password not the mongodb username and password and then after that I'm going to write port and I'm going to say this is port 5001. and in here we're also going to do one more thing I'm going to add a file called dot get ignore and we need this so that when we push this folder up to the repo or on GitHub we do not want to push up the EnV file or the node modules file this needs to be secret and node modules is just too bulky so usually you have the server install it so we don't want to have that over there and so in the dot get ignore I'm going to write I'm going to write slash node underscore modules and then dot EnV so we ignore those so we're going to save that one last thing before we set up our code we're going to go to our package Json and we're going to add a few things to this page so if I go on their main index.js I'm going to write type colon module comma so this will allow us to use import statements so these import statements will be used by this or this will provide us the ability to use those and it under scripts we're going to write a few commands so we're going to do we're going to set this as start like so and when we hit start we're going to run the command index node index.js like so so we're not going to use node Min for start but for Dev we're going to use node men index.js and the reason why nodeman is a live server reload so anytime we save the server is going to restart but we only want that to be doing that for our development server but when we actually deploy we're just going to have them run node so we don't really want to use node Min on the actual server so we're going to save that and with that I'm going to close this and what I'm going to do I'm just going to run the server so I'm going to write npm run Dev and we just want to make sure there's no errors okay so it started and it just completely exited because there's no server being run but as long as there's no errors we're good to go so there is no error and from here we're going to be setting up our index.js and we're going to be setting up our Mongoose finally so I'm going to say Mongoose setup and in here I'm going to say const Port is equal to process dot enb.port so process.emv allows us to access the environment variables that we just created earlier and we are able to access that and if that doesn't exist so sometimes it might not exist we're going to set this to nine thousand so this is a backup Port if needed and then from here I'm going to do mongoose dot connect and we're going to connect to our URL using process.env and inside this we're going to pass in a few setup parameters so use new URL parser I'm going to set that to true we're going to set use Unified topology to be true and then from here we're going to dot then I'm going to hit app Dot listen to the port yeah Port like so I'm going to say console log as a callback function server port and we're going to put in curly braces for the port number that we just use and then after that we're going to cut dot catch pass an error and we're going to do console.log I'm going to pass in the error message and we're going to say did not connect and we're going to save that and now I'm going to try to run it again and now we see the server Port running so it doesn't automatically stop so now we are now connected to Mongoose and the manga database now with this we have our backend setup now normally I would go and start writing back in code but we are going to build the application feature by feature so I'm going to go and develop a certain page I'm going to start with the apis and then I'm going to go and do the front end as well and do this based on each feature so we're going to start doing this via building the front end first so I'm going to go out create a new terminal I'm going to do CD dot dot so I can go out of it and here I'm going to run npx create react app I'm going to run I'm going to call this client I'm going to run this installation start create react app which is going to be for the front end so we have a react boilerplate it'll help us set it up very easily and we'll be able to get we'll be good to go from there all right before we go in and install some front-end packages we're going to go to the extension section and we're going to install some vs code extensions so the first one I want to mention is going to be called es7 plus react Redux react native Snippets this is something you guys have been recommending me and I really do like it so keep up the good suggestions this is very good for writing boilerplate code for react components and then also other components that you can probably use is going to be prettier so if you don't have prettier this is very good for code formatting it will auto format your code another one will be Tailwind Shades we're going to be using this one this is going to automatically generate some colors based on a color you provided and then finally oh I did not mean to disable that turbo console log so this is something that allows you to if you highlight something it's going to automatically write a console log for you so these are some vs code extensions that I recommend you can use if you don't want to feel free to disregard it so having said that we're going to be installing some packages so I'm going to write npmi in here and we're going to do react Redux and make sure actually sorry we have to go into our client folder so go see the client make sure you're in that particular folder and we're going to run some installation packages so I'm going to do npmi react Redux or Estate Management and we're going to do Redux JS slash toolkit so I highly recommend if you're using Redux nowadays you should always use toolkit with it to make it make your life easier we're going to use another package called react date picker so this will give us a date picker range that we're going to be using later then we're going to use react router Dom at six so this will allow us to use react router then we're going to do Mi mui slash material at a motion slash react at emotion styled at mui icons material at mui X data grid so these are all material UI packages that we're going to be using and then we're going to have to add the icons as well as data grid which is going to be the table that we're going to be using and then we're going to add a number of charts for our or chart packages for our charts so Nevo slash bar and then at Nevo slash Geo at Nevo pi I'm going to run that we're going to wait for that to finish once that's finished go to your client folder you can click on package.json I want to make sure that you guys absolutely have the right version for this one if your react date picker is at a further version there might be conflicts so if that ever comes to B do at npmi react date picker at 4.8.0 so if the date picker doesn't work make sure you do that version because this is the version that I'll be using most of the other packages will probably be fine because of how much support they have they're not going to break it on you but this one is probably less supported so this is the one that I would be worried about breaking and then finally we're going to go and we're going to create a another file called jsconfig dot Json and in here and in here I'm going to write a setting I'm going to put brackets I'm going to do compiler options and in this bracket we're going to do base URL I'm going to put Source inside and I'm going to do include I'm going to pass in source not in curly braces but normal brackets Source like this so this will allow us to have absolute Imports starting from the source directory I'll show you what we mean or what I mean by that later on so we're going to save that all right from here I'm going to close the terminal I already turned off the server so you can turn off the server for now I'm going to close that terminal and I'm going to go into our source in our client folder and I'm going to delete a few files so I'm going to delete setup test report web Bibles logo SVG app.test.js and then app.css so I'm going to delete these guys and then in here I'm going to go to index.css delete everything we don't need any of that inside our app.js I'm going to delete all the header stuff I'm going to change the class name to a lowercase just for convention purposes and then I'm going to delete all the Imports over here and I'm going to go to index.js we don't need the report web Bibles as well and we're going to remove the import from there as well all right from here I'm going to just close all these tabs so we have it clean close up the server we're going to go to our source directory on our front end which is the client and we're going to create a new file and we're going to call this theme dot Js so now I've covered this quite a bit I've done the same format in terms of how my theme is set up but let me show you how I generate the color schemes but I did some manual adjustments for this because it kind of needed it but basically this is a color that's like in between black and white and what I'll do I'm going to use Tailwind shades you can go and see this is the key binding command K command G other ones can be Ctrl K Ctrl G make sure you hit command K and then command G again make sure you hit the command key twice and it'll automatically generate a number of Shades based on this initial color and that's how I will be getting the colors for this there are three colors that I'm using which is going to be number 21295c which is a slightly bluish color and a yellow color which is going to be number ffd11 or 166. now what I'm going to do I'm just going to go and copy the theme file because there's going to be a lot and I don't want to spend too much time but I'll explain everything that I do so in the link in the description below I have a link to the theme file and you can just copy and paste everything and that'll include all of it the reason why I'm not doing this manually here is because I added a lot of colors and I so manually adjusted meaning I added these manually because I needed a few more colors for it to look nice so we have primary we have secondary so I adjusted a few colors here and there and then what I did I created my own custom function so this basically reverses the token colors automatically so basically it grabs this and it's going to reverse the colors from a thousand like this will be zero this will be ten this will be 50. so it basically reverses the number that's because we want to do that for our light thing so this is going to represent our Dark theme then we can reverse it we'll show that for the light theme and then from here what I did with the theme settings this is for material UI you need to set it up like this you're going to have a return with palette mode mode equals dark and then we set tokens.primary so I'm going to just copy the entire thing of tokens.primary like right here so all of this gets pasted into here so we can use all of those colors and we need to set the main and the light color so we use the light color if we need to and this will adjust the colors based on the settings we set and then we have secondary neutral and background and we're going to be doing something similar for the light mode we just have a few manual overrides like this these are kind of different same with my light things like that and then we have typography we're going to use a Google font called enter which We'll add shortly and then we're going to do font size for each one so we can specify the H1 font size H2 h3h4 as the default settings so this is pretty much all of this will represent our theme and we'll be using this throughout and one last thing to note in our source directory off screen I added this assets folder you can find this image below now all this is is just a image profile image that you can place it can be any picture it doesn't really matter so you can just we just need that one image and then from here we're going to go to server I've also done this off screen as well but you can go to the repo I have a link in the description below but this is going to be a file that contains a lot a lot of mock data so we're going to have all of this data that we can use for a database so we can pretend like we have lots and lots of users data and we can show how our database is going to be set up which I'll go cover not now but very soon but let's go back to the front end before we finish setting up our theme we're going to go to Google fonts and we're going to grab the font that we want to use which is going to be enter so we're going to go to enter we're going to click this and we're going to go down and we want a few different weights so we want 400 so actually let me remove everything that I already have so I'm going to get 400 600 and 700. and then we're going to hit at import and we're going to copy and paste everything that we have and we're going to go into our index.css and we're just going to paste it there and while I'm here let me just set up like the default settings so I'm going to put HTML body root dot app and we're going to make sure everything's height of a hundred percent width of a hundred percent font family of enter and we're going to say Sans serif so these will be our default CSS settings that we can use and then from here we're going to be setting up Redux and Redux toolkit the reason why I'm setting up Redux toolkit is so that we can set our mode which is basically a dark mode or light mode we store that state into Redux so we can access that globally so we're going to be adding that to Redux so we're going to be setting up our Redux state so I'm going to create a new folder I'm going to call this state I'm going to pass in a file called index.js in here I'm going to do import I'm going to make sure I close this I'm going to zoom in so you guys can see I'm going to do create slice and again I'm using the intellisense for better help and I'm going to do a const initial state I'm going to pass in mode and it's going to start with the dark mode because dark mode always looks nice and we're going to do export cons Global slice and I'm going to pass and create slice and I'm going to say name this will be called Global because this one is just going to be Global state and we're going to say initial state so we pass in initial State over here and we're going to have reducers and we're going to hit set mode and I'm going to set actually this needs to be a function so I'm going to pay State over here Arrow function and I'm going to do state DOT mode is equal to if state dot mode is equal to light we're going to set this to dark if not we're going to set it we're going to keep it as light so basically what this doing is we're basically creating a function a function that will allow us to change the mode from dark to light now people always talk about these buzzwords and Redux like reducers and actions and things like that it's much better to think of these as just functions functions that change the global state so meaning state that exists everywhere and then from here we're just going to export const set mode so we have access to this function globalslice dot actions and then we're going to export default global slice dot reducer I'm going to save that and then from here I'm going to close this I'm going to go to our index.js not the state one but the index.js that lives in our source directory and inside here I'm going to be importing configure store from Rex Jazz toolkit I'm also going to import global reducer from State like so and by the way the reason why we can just import State without doing something like this is because of our package.json configuration or JS configuration with base URL as Source because we are starting from Source we can just say state so it's much more convenient to do that and I'm also going to import provider from react Redux and with these three things we're going to set up our store actually this doesn't even need to do an export it is a cons store is equal to configure store and we're going to pass in reducer and we're going to do global and Global reducer like so and then from here I'm going to do react.strict mode and I'm going to pass in provider with store as one of the attributes and we're going to pass the store we just created I'm going to close this app with the provider and that basically is our Redux toolkit boilerplate and then from here I'm going to go into our app.js file and we're going to be adding a few lines of code so what we're going to do is we're going to import right above everything we're going to import CSS base line and we're going to import theme provider and we're going to import this from at mui slash mui slash material and then we're going to import create theme actually it might be better if I do create theme like this yeah so intellisense will be able to pick it up like that then I'm going to import theme settings that we've created and then from here we're going to do we're going to create const mode and we're going to set use selector and that's coming from react Redux so we've got to make sure we import that I'm going to pass in state and we are going to grab state.global dot mode so this is a way to grab the state that we just created in the state file over here so this is a way to grab the mode because it's accessible everywhere and we're going to pass in const theme and we're going to use use memo make sure you import that with the italisense I'm going to say create theme and we're going to use the theme settings to pass in mode now I know this looks like a lot of crazy stuff but it's actually pretty simple it's all in the documentation we're basically grabbing the state so the global mode we're passing it into the create theme function that we've created we're passing in theme settings it with the mode so we know that in our theme file we have go down over here we have our theme settings we're passing in the mode into this and we're using Create theme to configure what's necessary for material UI and that is going to be what's going to be in here so we're going to do theme provider we're passing in theme over here like this and finally we're going to pass in CSS Baseline so just to recap this is just to set up material UI material UI has a lot of documentation but this is probably the easiest setup that you can do for theme and also provide a light and dark mode so we have the mode stored in our state so we can use the state information anytime we want we just need to make sure we pass it into the create theme function with both the logic for the theme which is all in the documentation and we pass it into the theme provider now the CSS Baseline is just an extra thing so basically it resets it's like a CSS reset it resets everything in terms of the CSS making your code have more CSS defaults automatically it's pretty recommended okay and there is one mistake I actually made for a create theme this should be slash styles so from here we're going to be now be able to create our nav bar to set up our navbar we're going to need react router Dom for our routes that we want to create so that the navbar we can navigate so inside div I'm going to create I'm going to fetch something called browser router from react router Dom so make sure you use intellisense to grab it and making sure it's importing and I'm going to grab and wrap theme provider with browser router and then from here inside the theme provider and Below CSS Baseline I'm going to create routes plural make sure I import that and close that and inside our routes I'm going to create a single layer route make sure you import that as well and we're going to pass in element and we're going to pass in the component called layout component so this is a component that we're not going to import from one of the third party libraries this is a component that we will create and what this is doing for the element is that any route within this particular component it will have the layout component as the main parent so for example we're going to have the nav bar and the sidebar existing on every single page and that's what the layout component will have and so every route that we create in here is going to have the navbar and the sidebar and we're going to start with a route and we're going to set path for the default and we're going to say element and we're going to navigate and this is another thing we're importing we're going to navigate to slash dashboard and we're going to set replace actually that should be yeah actually that's correct replace I'm going to do self-closing and then I'm close the route actually this should be self-closing we don't need to wrap it so we're going to have a path that will navigate to the dashboard if we land on this page and we're also going to create one more route and we're going to say path equals slash dashboard like so and we're going to say element and we're going to pass in dashboard like that so I know this is a lot going on but what's happening is that if we go to the default home page we're going to be navigating the dashboard route and we're going to render the dashboard component this is so that when we land on the home page it's going to take us to the dashboard this is to emulate what we would do if you signed in and it's going to redirect you to a different page which is dashboard but we won't have any login for Simplicity purposes so this is just kind of a way to show that happening so the first thing I want to do is create the dashboard component I'll come back to the layout component but let's handle the dashboard so I'm going to do import dashboard from scenes slash dashboard so we have not created this component but it will be in the scenes folder so in the source directory I'm going to create a new folder called scenes and then inside the scenes we're going to create a folder called dashboard and inside the dashboard component or folder I'm going to create a file called index.jsx now with this we can use the vs code extension that everyone recommended and we can write RF CE and that will automatically create the component that we want to use and we're going to just call this dashboard like that so again keep up the great suggestions I really am fond of what you guys recommended so that we have our dashboard component so we're going to go back to app.js and now we can now create the layout component so I'm going to import layout from scenes slash layout like so I'm going to go to scenes I'm going to create a new folder and we're going to call it layout and inside the layout folder I'm going to create a new file called index.jsx and again we're going to use we're going to use the shortcut rfce and we're going to call this layout so with that before I go and create the nav bar I want to go and open up our terminal and I want to actually just run the server make sure we don't have any errors so right now what we're going to expect to see is just going to be the layout component we're not going to see the dashboard because right now we don't have a component called Outlet that's going to show everything else in here and I'll show you what that means later but for now we are expecting to see the layout so let's go open up localhost and we're going to see layout so this is what we expect everything's working so make sure you don't have any errors right now and then from here what we're going to do all right and then from there I'm going to close the terminal now I can go back I'm actually going to create one component before I start this and this will help with setting up layouts and flexbox so I'm going to create a file called Flex between jsx now if you've seen my other tutorials I use I use this quite often it's very handy to have but we're going to create a we're going to create a style component so style component so style components is a way for us to reuse Styles or css in a component-like manner so if I do styled I'm going to import from mui system I'm going to import box from mui material and what we're going to do because we're going to pass in some CSS property and this is going to be display of flex justify content of space between and line items Center so this is one set of style components that I use quite frequently and it shortens the amount of code we have to write I don't use style components too often but this one is very handy to do so I'm going to create that and then from here I'm going to go to our layout and we're going to start from here on this page I'm going to close this I'm going to import a number of things so I'm going to import use state actually this could be on the same line we're going to do use State like so I'm going to close that I'm going to import box and use media query from mui material I'm going to import something called Outlet so this is the thing I mentioned earlier from react router Dom so this will allow us to have those template layouts I'm going to import use selector from react Redux and then finally I'm going to import a component that I have not created yet which is import navbar from components slash navbar all right I'm gonna save it so from here inside our layout I'm just going to erase everything and create a box and inside this box I'm going to give it a property called with a hundred percent and height of 100 percent so if you haven't seen my tutorials or if you're not familiar with material UI material UI has a component called box that allows you to pass in properties as if they're CSS properties so you can say with you can do display things like that any kind of property for CSS you can pass it into the box component you cannot do this for all components so the normal syntax normally would be SX and then you pass in your CSS prop like display Flex like that that's the normal way to do it but for bucks you can pass in it like that I really like it because very convenient but it's up to you how you want to set this up and then from here I'm going to create another box in here and inside this box I'm going to get a nav bar like so and it'll be self-closing and then below this we're going to create Outlet component so now I was hinting on what this is this is but basically layout will set up the box so navbar will exist on every single page and the outlet is going to represent whatever components is underneath so the layout this is a child for example if it's on the dashboard page we're going to render this component where this is located where this Outlet is located so that's what this layout and the outlet is basically doing and then from here I can now go to components I'm going to create a file called navbar jsx I'm going to use rfce to create the layout so navbar like so and then from here I'm going to import a number of things so I'm going to import light actually let me close this let make sure I get the intellisense so light mode outlined I'm going to import dark mode outlined and later on I've already set this up but menu we want to set this as menu icon because we're also going to import menu from a different package then we're going to import search settings outlined and arrow drop down outlined I'm going to save it to format and everything is going to come from icon's material so these are all the icons that we're going to be using for our navbar then we're going to import Flex between components we created I'm just going to change this to components like that to be cleaner I'm going to import use dispatch from react Redux and then I'm going to import set mode so this is the function that we created earlier that will allow us to change from light mode to dark mode and then finally I'm going to import profile image from assets slash profile.jpg so we're importing the one image that we created and then we're going to import actually we're going to go up here where react is but a comma I'm going to do use State like so we're going to save it and then inside here I'm going to do const dispatch equals use dispatch and we're going to invoke it we're going to do const theme equals use theme and make sure you get it from mui material we're invoking that so you should see this import coming in okay with that set up I'm going to go and highlight the div I'm going to create a component called app bar and this should be imported from Material UI so this will help us set up our nav navigation bar inside our app bar we're going to add some styling so this is where I'm doing SX like this so we can set up some of our properties so here I'm going to do position I'm going to set this to static so it doesn't move we're going to set background of none because by default app bar has a background but we want no background and we're going to also get rid of the Box shadow and then inside our app bar we're going to do toolbar I'm going to pass in mui material and inside here I'm going to do SX justify content space between and I'm going to close this toolbar make sure I imported it yep right there and over here I'm going to call this the left side so right now what we're building is going to be looking like this if you see the app bar this is the completed build we have an app bar the app bar will exist from here to here so this is the sidebar the app bar stops here so if I open up a I'm using brave but Chrome extension also has this called pesticide it allows you to see the layout of all your components and in here what we have is an entire div that goes extends all the way and we're going to have two sections so this is going to be a div and inside this div we're going to have flexbox as well same with over here we're going to have Flex box rendering these three things and from there we have the left side we're going to create the left side first all right so if you take a look this is our completed build we have an app bar with two sections so this side and this side so if I toggle this extension I have something called pesticide it exists on Chrome and brave I think it probably exists on Firefox but I'm not entirely sure but it's going to show you all the div layout it's very useful to look at it and visualize so over here this is an entire div and this div is going to have a flex with space between meaning we have a div like this entire guy over here is a div and this guy entire guy over here is another div and we're doing space between these two items and then Flex also has something called align items meaning It Centers it vertically so this is centered vertically up here with these items and that's why we have Flex between the component that I create it made makes it so much easier to use it and allows us to Center both vertically and do space between each item for the toolbar we already have something that the space between so that represents these two guys right here that's already doing the toolbar but the left side is also going to have its own Flex between so we're going to do that and then here we're going to start with the icon button and I'm going to set on click and we're going to set this to console log open sidebar open close sidebar so now we have not created this yet but we will once we create the sidebar so here we're going to set menu icon and then we're also going to do Flex between and inside the flex between I'm going to add some properties background color and here I'm going to use our theme colors so theme dot palette dot background dot alt so if you remember the themes we set this is how you can use them and then we're going to do border radius and we're going to set this to 9 pixel I'm going to set a gap of three REM so this is a property many people don't use but Gap is pretty new it allows us to put gaps between each item so you don't have to go to each item and put margin write some 3 REM you can just put gap on the parent component and it gives you a gap between each item it makes it very convenient and I'm going to set the padding and in here we're going to do a shorthand which is just p and we're going to do another shorthand which is zero point REM 1.5 REM meaning we only have two Properties or two values so if you only have two values for either padding or margin this represents top and bottom this represents left and right so padding of 0.1 REM top and bottom 1.5 REM left and right and then we're going to use input base and that's going to be imported from Material UI if you saw that intellisense pop-up and we're going to do placeholder search dot dot Flash and we're going to do a closing tag and then from here I'm going to do icon button again and inside here I'm going to create the search icon like that let me save it and let's make sure everything's working we have the items perfect everything is here so this should just console log we're going to have the other items over there and as you can see we have dashboards so we no longer have the layout we have the dashboard so our Outlet is basically working then from here we're going to create the right side and in here I'm going to create Flex between give it a gap of 1.5 REM inside the right side I'm going to create icon button with an on click and this one is going to be from dark mode to light mode so this will trigger the function we created which is set mode so this when this button gets clicked we're going to switch from dark mode to light mode or light mode to dark mode and the way we do this is we're going to do theme dot palette dot mode and if it's dark we're going to give it the dark mode outlined icon that we saw and we're going to do font size of 25 pixels so this represents the size I know it's weird it's a font size not just size but it's font size represents the icon size and then I'm gonna finish up the ternary operator and in here I'm going to do light mode outlined I'm going to copy the SX that we just created pass it in here and we're going to have our theme button for it to work I'm going to finish this off and I'll demo it real quick I'm going to create one more button and this is going to be the settings outlined I'm going to close it like so now if you see we have our app bar going all the way or light and dark mode and settings so if I click it now you can see we have light and dark mode already so that's perfect and you can see the icon is also changing so the next thing we're going to be building is going to be the sidebar on the left side we can open and close like this we can go to different pages over here with different icons and hover effects and we'll be able to see all of these as well and each of these will take us to different pages so from here if I go over here I'm going to import sidebar and these this is a component we have not created so I'm going to do the component sidebar like so and then from here I'm going to create a variable called is non-mobile and we're going to use media query I'm going to pass in Min width of 600 pixel I'm going to close that so what this is going to do is it's going to give us a true or false Boolean depending on whether this minimum width is achieved on their screen so if it's a mobile screen we're going to have this is non-mobile is going to be false and if it's on the desktop screen this will be true and the next thing we're going to do we're going to create a state and we're going to say is sidebar open and as a secondary we're going to do inside set is sidebar open and we're going to set that use state to true so this is going to give us another Boolean so that we can determine if the sidebar is open and just a note I always love putting is as a prefix to any variable we have because that makes it very easy for if you're working on a team or anyone else who looks at a variable and if it's prefixed with the is now you immediately know that it's a Boolean then I'm going to put a display over here and I'm going to set is non-mobile and we're going to set it to flex if it's on desktop screen and block if it's mobile and then finally from here I'm going to add the component sidebar and inside this I'm going to put is non-mobile actually let me make sure you don't have a capital over there and we're going to set this is non mobile over here and then we're going to set drawer with of 250 pixel and I'm going to set is Side Bar open is sidebar open like that and I'm going to set is sidebar open set is sidebar open I'm going to close the sidebar and then we'll have that over there and then I'm going to copy is sidebar open I'm going to pass that into navbar so we can have the functionality of opening the sidebar and closing it with that menu icon that I clicked earlier and with that I can go to components and I can create a new file I'm going to call this sidebar jsx okay so in our sidebar component we're going to start with our template so rfce and we're going to have sidebar over there and I'm going to import a number of items so I'm going to import box divider drawer icon button list item list item button list item icon list item text typography and use the I know these are a lot of items that we're importing but they should help us build this pretty quickly and we're going to import this from mui material and then from here I'm going to import a number of icons so all the icons you see so there's going to be quite a few I'm going to do settings outlined Chevron left oops Chevron write outlined home outlined I'm not exactly sure why it keeps creating the jsx format but shopping cart outlined groups to outlined receipt long outlined public outlined point of sale outlined today outlined calendar month outlined admin panel settings outlined trending up outlined Pi chart outlined and this is all going to be from at mui slash icons material I know these are a lot of things that we're importing if you really need you can go to the specific page on the repo and just copy this if you really need to otherwise it's just going to give you an error and then you can just follow it back and Trace the error of which ones you maybe typed incorrectly and then I'm going to import use effect from react as well as use state I'm going to import use location from react router dump as you use navigate promise we're almost done we're going to import Flex between from the component we created and then import profile image from assets slash profile dot jpeg all right so in our sidebar we're going to do a number of items we're going to import actually let's add the properties first so we're going to import the drawer with is sidebar open set is sidebar open and is non-mobile so these are all the properties we passed in from the layout page and we're going to be using a lot of those and then we're going to pass in the const path name and we're going to grab this from use location so this will be used to grab the path that we're currently at and we can use that in our sidebar and then we're going to use const active set active and we're going to use state with an empty string so this will determine which one we're currently on what page we are currently at and then finally we're going to do const navigate so we can use navigate from react router Dom so that we can navigate to other pages and then we're going to have const theme to grab the theme and colors and the final thing we want to do is we're going to do use effect and we're going to set active to path name Dot substring one so what this will allow us to do is anytime we have the path name changing we are going to set the active value to the current page so anytime our URL changes we're going to set the active to the correct URL so this will keep track of the URL that we currently have and we will use that to determine what page we are on okay and then in here we're going to set box I'm going to close that and I'm going to give this a component of nav so what we're going to do is we're going to use a drawer component from Material UI so if I go to the material UI docs they have a react jar so we're going to be using this to show a drawer component now they have a lot of different options so you can have different variations but the one we are going to be using is going to be the persistent drawer like this so our goal is to have something that opens up when we click it and we can close it so the way you can grab the code if you ever want to is just open this guy up and you can copy and paste it's a little kind of crazy but we'll just go through the steps of writing this so here I'm going to set is sidebar open so we want to make sure this Boolean is true then we will show the drawer component that we imported let me make sure we close that and over here I'm going to say open is going to align with is sidebar open so this is always going to be true no matter what because we already have that Boolean over here but we just need to pass it in there as well so we're going to say on close is equal to a function side is set is sidebar open and we're going to set this to false like so now we're going to say this variant needs to be persistent and then we're going to set the anchor to be left so that positions it on the left side and then finally we need to add some custom CSS so I'm going to set width is equal to the drawer width that I set before and I'm also going to do some custom CSS modifying some of the CSS that they already have so at mui drawer paper we're going to set the color to theme dot palette dot secondary 200. we're going to set the background color theme dot palette background dot Alt we're going to set box sizing to border box then border with to is non-mobile question mark this is going to be 0 and 2 pixel for some reason I keep capitalizing this o make sure it's not and then we're going to set the width to drawer with all right so that closes that these closes this and that should be our drawer component let me make sure we have a closing because we're going to put something inside now just FYI to get this CSS property this is the one downside of material UI if you ever need to customize it you can open up the terminal and you can go and see into the drawer width so if you ever want to change you'd have to kind of look up you have to look up the CSS class and see which one you want to change so once you have mui paper you can probably change the MMI paper route or you have to mui draw root depending on what you're looking for so sometimes it's kind of a guessing game in this case we have the mui drawer paper this is what we're modifying and that's how I grab it because this is a drawer then you do and mui drawer paper so we're targeting that particular CSS this is the one downside of CSS in material UI if you really want to change their components it kind of becomes a little bit annoying but it's not that big of a deal moving on from there we're going to add a box we're going to set width of a hundred percent and inside this box I'm going to set the margin of 1.5 REM to REM 2 REM and three REM so again this is going to be a shorthand this margin if you have four values in there this is determining from clockwise top right bottom left so this is a very convenient shorthand so you don't always have to do margin left to margin right margin top things like that so it makes it in one go then we can do Flex between and we're going to give it a color of theme dot palette dot secondary dot Main and then inside this Flex between I'm going to hit a box and then this is going to be display of flex and we're going to do align items Center and we're going to give this a gap of 0.5 0.5 REM close that and in here I'm going to set typography give it a variant of H4 a font weight of bold I'm going to close that I'm going to say Ecom vision so that will be our logo and title and below this I'm going to do is non-mobile and we're going to say we're going to open up an icon button on click and we're going to set set is Side Bar open to the opposite is sidebar open and we're going to pass in Chevron left so essentially if it's on the mobile screen and the menu sidebar is up we have a button that we can close this menu for mobile screens so it doesn't get in the way then from here below this box we're going to do a list component and inside here I'm going to be creating each of the nav items so before we do that I want to create a list of nav items above here and then we're going to map through and loop through this nav items to create each of those components so I'm going to do the const nav items is equal to an array and we're going to have text of dashboard now we're going to pass in an icon of Home outlined and we're going to be doing this for every single one so I'm going to do a comma tasting a lot of these and we're just going to adjust a lot of these as we go so going back to text we're going to say client facing so this one is going to be null so this is just going to be the topic title and the category so if you take a look over here we have client facing sales and management as the titles for each subsection and so we're just going to identify those with an icon of null from here I'm going to set this as products I'm going to set this as shopping cart outlined below this is going to be customers we're going to do group groups 2 outlined from here I'm going to do transactions and I'm going to give this receipt long outlined and making sure I don't capitalize that r here I'm going to do geography I'm going to pass in public outlined and then this one is going to be sales so this one's going to be a title this should be a null value and then below this this is going to be overview this is going to be point of sale outlined now I'm going to have daily and I'm going to do today outlined and then we need to create a couple more I'm going to paste some more over here I think that should be enough if I can find it okay and then we're going to have monthly I'm going to set this to calendar month outlined I'm going to have breakdown with a pie chart outlined and then below this is going to be management and this should be null this will be admin this should be admin panel settings outlined and we're just going to have one more and this will be performance and this would be trending up outlined there's quite a few lists but once we have that this should be pretty simple so we're going to go back down to where we have the list and we're going to write we're going to Loop through the nav items and create a component for each one so I'm going to do nav items.map and inside it I'm going to destructure grabbing the text and the icon value and I'm going to do an arrow function and I'm going to set if icon doesn't exist so if it's a null we're going to do something separate for this one so we're going to do return and I'm going to give it a typography with a key of text because if anytime you make a list you need a key and we're going to set SX is equal to margin of 2.25 REM 0 1 REM and three RM again this is a shorthand with the three values or four values I mean and inside this we're going to place the text and it seems like I am missing a prance right there so that should be good right there correct so this will take care of the instances where you have the icon as null so that will represent the title and then right here we're going to do const lowercase text so we want to just do text Dot to lowercase because we want the lowercase version of this and below this I'm going to have a return so this will cover the normal scenario where we actually have navigatable icons that we can hover and click so this is going to be list item we're going to say key is equal to text again so we have unique keys for each list item now we're going to do disable padding inside this I'm going to give it a list item button and I'm going to give it an on click where I'm going to navigate to slash colon LC text like so and it seems like I do have some kind of error I'm going to do set actually let's fix this all right that's because this is not even closed so this should be closed like that I'm going to save that and then on the next line I'm gonna hit enter because we want one more thing we're going to have set active LC text so let me explain what's happening over here is we're creating a list item button around some text that we will be creating and when you click on it we're going to be navigating to that URL through the LC text So based on the text title of the navigation item we're going to navigate to that page and we're also going to set that page as the active version so we can highlight the color so if you go over here anytime you click somewhere else let's say I'm going to customers page and here as you can see we have a slash customers page so that's where we can take our users so this So based on this title we're going to lower case it and we're going to take us we're going to navigate the user to this particular URL same thing for the rest of the page and then from here I'm going to do list item icon I'm going to close that and inside and let me make sure I close that so we can have prettier automatically format for us and inside our list item icon I'm going to style this a little bit SX is equal to margin left of 2 REM and we're going to set this to have a color if the active is equal to the current LC text we're going to change the color of the icon So based on whether we are on the page that the nav item is clicked on we're going to change the color of the text so we're going to give this a theme dot palette dot secondary 200. and we also need to change the color of the button so we're going to do SX is equal to background color and we're going to do the same thing active equals LC text and based on that we're going to give it theme.palet.secondary 300 and it's going to be transparent when it's not and actually spelled background color incorrectly so background color like so and I'm going to give it a color of active LC text and then we're going to say theme dot palette actually it'll be exactly the same as this so actually let me just copy this entire thing and we're going to replace that actually I want this to be secondary 100 to give it the proper color don't worry we're almost done and then after this we'll just be checking if everything is correct so here we're going to actually pass the icon inside the list item icon and then below this we're going to do list item text working with a primary of text Within and below this I'm going to do active is equal to LC text and I'm going to give it and give an icon with a Chevron right outlined SX is equal to margin left Auto and we're going to close this and with that we're going to open up our terminal I'm going to go into our client and I'm going to run our application and as you can see we have a slight typo alt lined so let me close this shopping cart should be like that let's save it let's take a look at one more and we did spell that incorrectly as well over here outlined let's save it make sure we don't have any other errors so we're going to go back and now you can see we have our sidebar so now if you go to any other page we're not going to see anything because right now we have not configured this page but once we do everything should be working so we're going to next do handle this this right now doesn't do anything that's because we have not set the configuration but aside from that the layout is or the sidebar is working as expected so we're going to go back to navbar and inside the nav bar I'm going to go down or actually go up to our nav bar and we're going to grab the properties that we passed in so it's going to be is sidebar open and then set is sidebar open like that and we're going to go down to where we have the left side and where we added the console log we're going to change this to set is Side Bar open we're going to set is sidebar open like that so that when we click on it we can now open it and close it like that perfect now normally you can do animations to make this a little transition smoother but I want this particular application to focus more on the back end so we're not going to worry about that and also oh let me check one more thing so if you open this up we go to this screen now over here we have this little Chevron icon so you can open and close depending on that so there you go so the next thing we want to add is going to be this user information we want to be able to grab information about the user by sending an ID to the back end and the back end will send us the information about the user so to do that we're going to go into actually let me close all these tabs first to clear up everything and we're going to go to our state I'm going to go to index and I'm going to be adding user ID and this is going to be kind of a long ID so make sure you write this correctly so 63701 CC one F zero three two three nine B seven F seven zero zero zero zero zero e so this is a user ID that I have in the mock data that I put in the back end so we're just going to grab this particular user with their ID and we're just going to assume that the user has logged in and has the user ID so we're not going to do the login authentication to keep it short but we're going to be placing this user ID and grabbing the user information so now to do this we're going to go now to the back end and we're going to go to our routes we're going to go to General and in here we're going to be creating our user ID so from here I'm going to do some imports so I'm going to import get user from dot dot slash controllers slash general.js and then below our router we're going to do router dot get and we're going to do user slash user slash ID and we're going to do get user so this will be a function coming from controllers and note that there is going to be a param so this is where we will pass in the ID for the user now before we write the controllers I'm going to go to models I'm going to create a new file and we're going to call this user.js so this is going to be a schema that we will create for the user that will represent the model of the data so here I'm going to import mongoose from mongoose and we are going to be creating a mongoose schema in here so the way we do that is we're going to do const user schema and we're going to say no new Mongoose dot schema and in here I'm going to pass in a number of properties and the way this user is going to be modeled is we're going to pass in a name and we're going to give it a type of string so every user is going to have a string name that's required of true with a minimum of two values maximum of a hundred values and then from here I'm going to give it an email as well I'm just going to copy all of this so we can paste it this is going to be type of string required of true we're just going to give it a Max of 50. and instead of this being Max we're going to say unique of true so the email has to be unique and then we're going to give it a password of type and then string required of true and a minimum of 5. and then below this I'm going to do City and for simplicity's sake I'm not going to add all these validations so normally when you set up these schemas you're going to set up all these validations and things like that but because we have a lot of models and a lot of things to go through I'm going to keep it simple and just give this each of these guys a string so you don't need to go through and write all the validation criteria you can do that on real life applications but here we're just going to keep it simple so I'm going to give an occupation of string phone number of string transactions with an array a role that's going to be an enum meaning it's only going to be one of three values we're going to say this is a type of string but an enum of user admin or super admin so this will determine the role that the user has and we're going to give it a default of admin and finally below all this right here on the second closing bracket so we're going to give it a time stamp of true so this just gives us automatically created date and updated date as well and below this we're going to do const user is equal to Mongoose dot model and we're going to pass in user with the user schema set up so this is just kind of how Mongoose kind of sets this up and we're going to give it an export default of user so again here let me just explain everything that's happened this is a schema that we pass into Mongoose and mongodatabase will be using this model to make sure that every time you put in actual data into the database for a particular user it has to follow this format so this is like the format or structure or you can say schema there's a lot of different words to describe it but basically the same schema for each data that you're going to put in so if we want to add a user they have to have most of these params so require means they have to have these properties whereas if you don't have these properties these are basically optional same with this one okay so this will be our models and we'll go I'm going to very shortly I'm going to set up an ERD diagram which is entity relational diagram so we're going to be mapping out all the data that we have for each models and we're going to show I'm going to show you how you guys connect it and how you guys can think about building these data models but for now let's move on making sure we finish this particular route so we're going to go to the controller because we still need to create that so we're going to go to General and we're going to create we're going to actually don't need to import anything we're just gonna actually we need to import user from user model so user from dot dot slash models slash user.js so in this case this is different from the front end we do have to put dot JS so make sure you add those and then we're going to do export const get user and in the get user we're going to pass in async and we're going to do Rec res so this is typical of express application we have a wreck which is where you can get the params and the body and the res is going to be what we use to send back information to the front end or whoever is calling the API and the way we do this we're going to have a try catch block so meaning we will try everything in the try block and if it doesn't work out the catch is going to catch any errors and send it back we're going to say this res dot status 404 dot Json and we're going to pass in a message of error.essage to the front end in the try block we're going to do const ID is equal to rec.params const user is going to be a weight user.find by ID and we're going to pass in the ID value and I'm going to send to the front end if this is true we're going to give it a status of 200 and pass in the user so here what's happening is we're going to try to find based on the params of the ID we will try to find the user and that will grab us the information if we get any kind of Errors we're just going to hit this error block otherwise we're going to be sending the user information to the front end and just FYI the rect.params this ID comes from the fact that we have this as our route so on the front end we have to pass in the ID in the route to grab the user all right so with that we have the route created but there's one issue is that right now we have the models and everything but there's actually no data in our Monger database yet so if you go to mongodb you can go to collections and we're going to see we're going to retrieve we don't have any data so to do that that's where I have that data file that we created and I told you to copy and paste this so we're going to be using this so if you take go down to data user we're going to be using this particular information which has a list of a lot of users and we're going to inject that into our database and to do that we're going to go to our index.js and I'm going to be importing our data so I'm just going to set data Imports as a comment over here and we're going to import or model first because we actually need that to inject it so we're going to say models slash user.js and then also I'm going to import data user from that data file so we're just grabbing the mock data so we can inject it into our database and then right below dot dot then this is where we're going to be adding our information so I'm going to do user.insert many data user so now I'm just going to make a comment just to make sure you guys don't add the data multiple times only add data one time so that we do not have any duplicate data so you're going to run into lots of Errors if you try to insert all of this data multiple times so if I save it right now the server is not running so we have the front-end server running but not the back end so what I'm going to do is npm run Dev actually this is a client so I'm going to go back out and we're going to go to CD server and I'm going to run npm run Dev like so and it seems like the user schema is not defined here we have a reference error user schema is not defined and that's because you need to go back go to user this was spelled incorrectly this needs to be capitalized we're going to save that and we're going to rerun it see if it works out this time we're going to start node index.js and with that our Port is working correctly so let's actually go to database go back to our databases we're going to go to browse Collections and let's see if the collections have been added and we can see that there's a user so this is a good sign and yep we have 1 to 20 of many so there's quite a few users but we have the users that were need and just a note we have our user ID so I'm in the state index on the client side I can grab the user ID and we can actually search for this so if I do slash underscore ID and we have to put this in something called object ID and we pass in the value like so and we can do enter and you will see that we have a query result of Shelley and this is the person that we are looking for so this is a user we're essentially going to grab so with our backend set up now we are free to start creating our setup to make API calls for the back end so if you take a look here I am in the state file with the index.js and this is our Redux toolkit but Redux toolkit query which is what we're going to be using to make those API calls we're going to create a separate file and we're going to set this up a little bit differently but it's pretty simple so in our state folder I'm going to create a new file I'm going to call this api.js in here I'm going to import a number of items so I'm going to import create API and then fetch base query from at Redux JS toolkit slash query slash react and then from here we can now start writing our API file or API slice is what they call it we're going to do that with itcrate API and the way we set this up is we're going to set a base query of fetch base query like so and we're going to set the base URL to be process dot EnV dot react app base URL so this is an environment variable we have not created but I will cover that shortly so right here is going to be the URL the base URL that we're going to cover so right now the base URL is going to be located at localhost 3001. actually let's take a look so if you go to dot EMV actually the port is going to be 5001. so this is our base so you know what let's just create our environment variable and the way we do this in the front end is going to be Dot env.local so just FY there's a difference between dot e and V and Dot env.local for create react app they want you to do this configuration because that's what git ignore is also ignoring so dot emv.local so we want to use dot EMV dot local InStep but essentially it does the same thing and then we want to set react app base URL and we're going to set that to http slash localhost 5001. so I'm going to save that that's going to be the base URL we are setting and the reason why we are doing this with the environment variable is that when we deploy our application this variable needs to be something different so we would set that environment variable on the hosting app which is going to be rendering render.com that's where we'll set the base URL for the server and that's going to be different from here so this will never make it up to our repo but in the actual server we're going to set the environment variable to be something different and we'll cover that when we get there but anyways to go back to our API file I'm going to set the reducer path to be admin API so again it's just like the name of the slice and we're going to give it a tag types and we're going to give it one value and it's going to be user so these tag types represent the value basically the state of which you can identify a particular particular data so when we grab the user the tag identification value is going to be user so don't think too deeply into it but a lot of this will make sense because it's pretty simple so finally endpoint is going to be where we have our main logic of our API calls so here the endpoint starts with the Callback function and we're going to have a build parameter that gets passed into a parenze object and this is where we identify the API calls that we can make so the first one we're going to make is going to be get user and in here we're going to do build dot query like so and we're going to have query with an ID and it's going to be General slash user slash ID so this is going to be the path that we have set so again if you go back to our routes we have actually go back to index.js you can see that we have the routes over here so it starts with Slash General and if we go to General routes we're going to see Slash user and then slash ID and that will allow us to call this function get user so it's all kind of a long little path but that makes sense with the URL that we want to call and by the way the base URL will be attached to this beforehand to this path and this ID comes from when we call the API or call the function for this particular this will be a hook we can pass the ID and it will go into it and we'll it'll be transparent when we get to it and then here we're going to do provides tags and we're going to pass in user so we identify that the tags are related and with that we basically have our API call all set up with this so this is basically a get call with build.query and if we go down below I can do export const and I'm going to set use get user query and this is going to be equal to API so the way this value comes is comes from get user so that is represented by these two values and it has a prefix of use and a suffix of query so that's all you have to make sure it aligns with this particular endpoint and with that it's pretty simple we have our Redux toolkit query basically set up there is actually one thing that we kind of do have to do is I'm going to close all of this again to clean up everything we're going to go to our index.js and we're going to do last few setups for Redux toolkit in particular so we're going to do import sure I spell that correctly import setup listeners and this should be Redux toolkit not dist but just slash query and we're going to import API from actually the value is not popping up so we're going to just do API like so from state slash API because that's what we're basically exporting and then finally in the reducer we need to set api.reducer path and we're going to set api.reducer and we're going to have below this reducer we're going to have a middleware with get default and we're going to set get default invoked we're going to concat that with API Dot middleware and below this we're going to have setup listeners and we're going to do store.dispatch and with this we basically have our Redux toolkit all set up and ready to go and just to recap what we did for this particular page on the store is we set up the setup listeners and API we just did this we added the middleware and we just set up the listeners this is all you need to use toolkit query along with Redux toolkit so now we have not made the API call yet but we have set up the configuration to make the API calls so if I go to components I'm going to go into actually the scenes folder we're going to go into the layout go to index.jsx and we're going to make the API call over here so the first thing I want to do is I'm going to import use get use get user Curry a little bit of tongue twister right there and then below this is sidebar this is where we're going to grab information so we're going to grab the user ID that we created from Redux toolkit so use selector we're going to pass in state and we're going to grab state.global.user ID so this is going to grab it from the Redux toolkit not the Redux toolkit query but Redux toolkit we're going to grab that information from here in this index file and then we're going to then make our API call and in our API call we're going to destructure the data part of the information but to make the API call we're going to use use get user query and we're going to pass in user ID and we're going to save that and I will show you I'm going to console log this now if you remember I added a vs code extension called turbo console log basically you can highlight it and press Ctrl alt L and it will automatically console log now before we set this up I want to show one more thing just a couple things for the user.insert mini I forgot to mention it but make sure you comment this out so you don't have any duplicate data but if you actually did duplicate the data you might want to go back to Mongoose database you might have some weird errors if you need to you can delete you can delete your users like this and drop it and then redo this make sure you only do it once though so with that note we have use get user query we console logged it so if we go back to our current application let me close a lot of these we can see that the console log is displaying our information so we have the user we have grabbed the user information we have a super admin her name's Shelly all of that information so if you take a look I know it's a little bit small so let me zoom in for you guys but if you go to your network tab for brave or Chrome Firefox has it but it's a little bit different but you click on fetch exit xhr so it just shows all the requests that you make you can see that you want to see the request URL make sure the user the request URL is correct you might see localhost 3000 instead if you're seeing that make sure you turn off your server that's what's happened to me you want to close you're going you want to turn this off and then you can restart your client application and you can come back and then you can see this and then you can see the preview if you want to see all the information that's being sent back from the back end and then the response as well is just like the Roth version versus this is more a formatted version so you want to make sure all of these check off you're going to get a status code of 200 request method get and as a front-end developer should they get very comfortable with looking at this there's a lot of information here but a lot of times you don't need all this information you just want to double check that request URL is correct with the request method is correct status code is correct occasionally you have to look at the headers but you just want to check the preview is correct and with that we also console logged what we're getting back and it's exactly what we need and now that we got our user information when we console log it we made sure all the data is correct we can now pass it into both sidebar and nav bar so we can build the the information or the UI that holds the user information so here we want to do user and we're going to say data however we want to make sure we're not sending something open so if you know this we have a data of undefined so when it's loading when the information we're waiting for it we get a value of undefined which can be quite problematic so that's why you can have an or sign to make sure that if it's undefined we're going to send an empty object otherwise we're going to send the data information so this will prevent us from breaking our app and we're going to do the same thing for navbar so in our sidebar we're going to go in and we're going to pass in user like so and by the way if you have this you can do you can hold command or control depending on Windows or Mac you can hold Ctrl wait for it to underline and you can click and that that takes you to that particular component there are some Oddities about it so sometimes it might not work and with that we're going to go down we're going to go all the way down and below this box and above the drawer we're going to add a box component and we're going to do position of absolute I'm going to say bottom of 2 REM and inside here I'm going to give it a component divider from Material UI give it a flex between component with text transform and give this a none value with a gap of one REM a margin of 1.5 REM to REM for the right side 0 REM for the bottom and three REM for the left side I'm going to make sure I close that so now in here I can give it a box component and inside this box component I'm going to give it some props with component of image with an ALT of profile so this is the alternate text and then source of profile image and then height of 40 pixel with a width of 40 pixel border radius of 50 percent in SX of object fit of cover now I really like this object fit you may this is a more nuanced CSS property that many people don't use but this is object fit it crops the it crops the image as necessary to fit in this image and we're doing a circle border radius 50 will make it into a circle so this will provide us to automatically crop as needed and I really find it convenient for images from here we're going to do boxed text align of left and inside here I'm going to give it a typography with a font weight of bold font size of 0.1 0.9 REM and given SX of color with theme dot palette dot secondary 100. and then close one of that sweet oh this should be actually a bracket not curly braces and then we should have one more closing curly braces and make sure we close the typography save it so we Auto format and inside here we're going to give the user user.name like so and then I believe I can just copy this and we're just going to change we don't want font weight of bold we're going to change this to 0.8 REM give this a secondary of 200 instead and instead of user.name we're going to say you user.occupation and below this we're just going to have an icon settings outlined I'm going to do self-closing tag and above this we're going to have SX of color theme.palette dot secondary of 300 and then font size of 25 pixel so I'm going to save this I'm going to actually comment this out so we can see the sidebar see if it's working so I'm going to save it we're going to go back and it does seem like we do have an error so let's check that out go back to sidebar so if you take a look this component image should actually be a self-closing tag and we just need to get rid of this box near the bottom actually this particular one make sure you get rid of the one on line 229 right before the flex between and with that we should have everything save it we have our user information or a user profile image the username user occupation and the setting and now we're going to do the same thing for over here except this will be a drop all right so with that we can close our sidebar and go to index.jsx we can uncomment our navbar for the user information for our navbar and we're going to add the user as well I already did it but add the user right here in the nav bar props and then you can go all the way down to where we have the right side and make sure you identify this correctly but it's below the icon button but before the ending Flex between so I'm right here is where I'm going to have our user information so we're going to do Flex between make sure it closes it's just popped up randomly and then in here I'm going to do button I'm going to give it an on click and we're going to set handle click so there's a few things we want to set up and I'm going to go up right below the theme setting so over here we need to set a few things up we're going to set up anchor L and set anger L like this and we're going to set use state is going to be null like that so this a lot of this setting is going to be because we're doing a drop down we need to set this up and if you just look at Material UI they will have the settings for you ready to go so we need this for like our menu drop down and then we're going to have it is open and we're going to set this as Boolean anchor L like that and then we're going to do a handle click function which is what we were creating earlier so we're going to have event and we're going to make sure we do set anchor L and we're going to do event dot current Target and then we're also going to have a handle close which is just going to be a set anchor L of null so we reset it so this is all for opening up our menu and closing it as needed so if we go down to where we are over here we have the handle click and inside of here we can do SX is equal to display of flex justify content of space between let me save it so I have more space and then align items of Center text transform of none and a gap of one REM I'm going to save that so we have this pretty big button all ready to go and again I'm going to have something very similar to what we have for sidebar so I'm just going to reference our sidebar just a little bit so we can just copy and paste a few things because there are some similarities here so image profile everything is the same except the width and the height should be a slight smaller slightly smaller and then from here I can copy the rest of this with the username and occupation then we're going to make some tweaks like we did so copy that this should be font size of 0.85 this one's going to be 0.75 I'm going to save that we can leave everything else the same and over here we're actually going to add one more icon so this is going to be Arrow drop down outlined I'm going to make this self-closing and I'm going to style this a little bit so I'm going to do SX color of theme dot palettes dot secondary 300 I'm going to set this as font size of 25 pixel like so now we're going to have a closing box right here actually this closing box should be right above the error drop down instead so the error drop down outline should be below the closing box of this and then finally right below our button we're going to have our menu so this is going to be the actual drop down image so this is where we're going to use Inc or l anchor L will be set and open is going to be is open with on close is going to be handle close so this is all in the documentation for material UI menu so that's all you got to search if you want to look these documents up so anchor origin is going to be set to vertical at the bottom with a horizontal set to Center like that and let me close this and then we can save it to format and the only menu item that we really need is going to be the log out button we're not actually going to implement the functionality of the log out but we're just going to have the image of it we're just going to have one item that allows you to supposedly click on it so if I save it let's double check we have no errors we do actually have menu item is not defined so if I actually go back there seems to be a number of components I have not imported so if you take a look we have a lot of items that are not imported so let's actually take the time to write all this so we have button we have box typography so it's all shown in this over here typography I forgot the comma menu is not defined as well so let's add menu and now with that we don't have any errors so we can go back to our site and see we do have this but the flex item is not properly aligned so let's take care of that so the main culprit as to why this is not growing to the entire width is because of we need something called flux grow so if I want to put flex grow is equal to 1 over here on this nav bar this will allow this part of the flex so this is like flexbox right here this sidebar will take up the width of 250 pixel but this other box is in this particular Flex when it's on non-mobile screens we're going to have the rest of it take up as much space as it can that's what flux grow one is going to do if I save it we're gonna see that we have everything growing to the full width length and so with that with all of this all this setup we have our themes we have we have dark mode light mode we have the sidebar we have the nav bar all ready to go and now we can finally start building our pages with the Redux toolkit query to make API calls and then we'll have the back end somewhat set up and we're going to continue building out the back end so we can grab information as needed so after we have the sidebar and the nav bar all fully set up now we can work on the pages and the first page we are going to be working on will be the products page as you can see we have a list and we have some information about this a lot of this data is pretty straightforward but when we create a big application that has information that are kind of related to each other it can be an absolute mess if you just go at it without any kind of thinking so when you're trying to design your application you need to sort out and organize the data beforehand so you don't end up in a big pile of mess so if you go back we can see I've created a little diagram over here and this is going to be a process called Data modeling so you want to organize your data properly before you start coding and now I know if you look at this this might seem a little complex because everything you see is just kind of already laid out and there's a lot of relations between each other but let me go through this and I'll show you how you can get some ideas of how you can do this on your own and learn some general tips and why I'm doing these things so we've already created a user model so this is the user schema that we created already now if you take a look a lot of this is basically the string just for simplification purposes but we have a few things that might have some relations for example we have a transactions property and this is an array now this array will consist of string IDs that represent a transaction now you might be thinking that you can just store an array of objects of transactions inside this user and you might not be wrong in some cases where if you just want users to have their own set of transactions like this is the user and he's made he's bought these three items and made these three transactions essentially and you can just go through the user and find the transaction you want however there are many situations where you look at this and be like you might want to get the entire list of all the transactions throughout the entire database and this is where you might have issues because if you store it like this all in the transaction if the transaction exists okay that looks kind of crazy but let's assume let's just delete all these array or like the links and assume transactions exist over here now if you want a list of the entire list of transactions now what you would have to do is grab every single user and because you have to Loop through every single user you have to Loop through every single user and then Loop through their entire transactions to get every single transaction and that's an extra Loop instead of having an ideal scenario where you can have the transactions stored separately in its own tables and diagrams so that's why here we have a list of transactions and this is just storing a reference to this transaction and this goes into the concept of SQL databases and them establishing relationships between each other now we are working with mongodb which is nosql so essentially these are non-relational databases but when it comes to complex databases and complex data models you definitely want to separate it and act as if it is an SQL database just because we have separate information because we want to keep it separate we want to keep the relations there and we want to make the data clean and accessible for different use cases so why would you use a nosql database well in this case we're using database that's why you it allows you to adjust your database very quickly and you get increased speeds now I'm not going to go into the depth of SQL versus nosql but know that you can set up your nosql databases like an SQL database as long as you think carefully and format it properly so going back to our database you always want to look at the different relations for example a transaction can also have a link between the products but we want to store the product separately they need to be stored separately because if you want a list of products you want that information to be separate from all the information and then we have the product stat and another reason like you have to think about this very carefully for your application for example the reason why I have the product stat separate from the product because sometimes you just want the product stat information and you want to keep this separate from just regular products because maybe if the user let's say a regular consumer goes onto your website and he wants a list of the products you don't want to be sending the products that information to that specific user separately because it's not I mean you shouldn't show them how many of that product has been sold like if you are sending that to the front end then they can see how many items of this product has been sold which I mean maybe you don't care but you know that's generally not what you want you just want the product information how much it costs and the name and description whatever that's what's get getting sent to the front end but you don't want to send the statistics of that product with it so essentially you have all of these users they have all these uh relationships between each other you want to be able to map out this information because it can get very hairy if you're doing this on the Fly and if you don't take care of setting this up properly beforehand you can end up in a situation where your code base and you're making all these weird requests it can be unoptimized and it can be an absolute mess of writing code while you're doing it because you have to think of how these data is is going to interact with each other so it makes a lot of sense to prepare this beforehand so you can take a you can take a pause and look at how your data will be structured so I know I'm doing a lot of talking about these data modelings and setting up these diagrams but I think it's very important to note that this is a process that you need to take care of beforehand and it'll save you a lot of time while you're coding and I'm just saying this because you don't have to think too too hard because you never know what type of you know predictions or what kind of features you might end up having to do you might have to make adjustments you have to do a lot of different so now you have to you have to figure out all the different possible edge cases and scenarios that you might encounter and it all depends on your application but you can have a general sense of how you want to organize it beforehand and making sure that's as clean as possible then you can move on and by doing that you don't need to be like this massive database architect to get everything perfect from the get-go you can have a good sense just by carefully thinking about it what your application needs what your end result should be there's all this information about read speeds and write speeds you can optimize for read you can optimize for write but just take into consideration of just break it down see what you your application needs does it need to be fast for regular users does it need to be able to save files if it needs to save files you need to probably optimize speeds for that and you can figure out the best way the ultimate goal is to have the less less amount of processing power for your servers meaning less code to you meaning you Loop through your data as least as possible for any given situation but there's a lot of trade-offs so you have to consider those but I'm not going to go too in depth and do that but there's just a lot to think about when you build these databases you just want to make sure you're doing this step-by-step process and over time you will get better all right so I will leave a link in the description for you to access this and you can just take a look at this and by the way if you want to create your own ERD diagram you can go this is this app is called lucidchart I find it it's one of the more easier diagrams that you can make and it also looks pretty nice so if you wanted to make your own ERD diagram you're going to need these shapes so if you go down to the shape Library you can go down to the shape click the entity relationship and then you can drag these guys and you can make your own set or own data model so feel free to go lose a chart this is all free I have a paid version because I'm using Lucy chart quite heavily but you can just you can do this with a free version and as we build this app I'll be referencing this and I'll show you how these things will work all right so now let's go back to our code so now we're going to get a list of products and we want different information as well as a product stat information so the first thing we want to do is we're going to create the models so I'm going to go into the models folder I'm going to create a new file and we're going to call this product dot Js and I'm going to create one more model as well and it's called Product actually this should not be a folder let me delete that so we're going to create a new file and this is going to be called Product stat.js so in our product we're going to create another schema and actually let me go to the user I'm going to click on all copy it paste it so I don't have any errors so I'm going to just delete everything inside here sure I have it closed and I'm going to copy this say product schema and this should be product all three of these so I did command D I clicked all of them did product like that inside here I'm going to do name is going to be string we're going to do price should be number description and where this is going to be a string category this should be string rating should be number Supply should be number just keep note that this D should be required entities in a real application but for simplicity's sake I'm just setting this up this and one more thing we actually need to add the timestamps it's always good to have time steps just in case because you always want to know when these products have been created it's a useful information to keep all right so that is our product now let's go to our product stat so I'm just going to copy everything paste it over here again and we're just going to do the same thing with the names I'm just going to go where the product is and I'm modifying both of these guys this should be product stat same with these two over here so I'm just gonna type in there I'm going to save it these should be different right here so I'm going to do product ID and this should be string yearly sales total which represents the number of items that have been sold or the total price that has been sold per year for that particular product we're going to do yearly total sold units and that's going to be a number we're going to do year it's going to be a number as well we're going to set monthly data so now this is going to be specific to this application but generally when you do maybe like an e-commerce application you're going to have statistics and maybe maybe the business people or the product people they want information on how much we have sold of this particular product on the month to month basis so in this case we're just going to store for every single month the total number of sales and the total number of units being sold per month so we are essentially nesting an object within array so we have a list of objects that will include this information and then we're going to do something similar for daily data so we want information per day for this product so we're going to have total sales the number and total units number like that I'm going to save it now we have our product stat schema we also have our product schema so before we create the actual routes I want to inject this information into our database so I'm going to go to index.js I'm going to go down to where data Imports is I'm going to do the same thing I did before so I'm going to import product from dot slash models slash product dot JS remember we need the dot JS as well I'm going to copy this this should be product stat and then inside here this should be data product and then data product stat like so and I'm going to go down over here and we're going to do what we did before with the users we're going to do product dot insert many and we're going to do data product foreign product stat dot insert menu data product stat like so let me open up the terminal we still have our server running so I'm going to save it I'm going to only do this once it's going to take some time and then just to double check we want to go to our mongodatabase Cloud we're going to hit refresh and now we should see products and we have our products information perfect and then we also have our product stats and everything is there and that's a lot of information and we want to make sure we want to comment this out now we have information in our database so now we can just set up the routes so I'm going to close my terminal and I'm going to go we're going to set this up in the client routes and under our router we're going to do router.get and we're going to do slash products comma get products like that and we should import that function that does not exist yet so get products and we're going to do it from dot dot slash controllers slash client dot Js and then finally we can go to our controllers we can go to client and this is where we will be setting up our get product function so the first thing I want to import is going to be product from dot dot slash models slash product dot Js and then we're also going to import product stat make sure we have the dot Js and then we're going to import actually I don't need the user so we're going to export const get products and we're going to do async wreck res like we did before and just because I'm lazy I'm going to go to General I'm going to copy this over here paste it and I'm just going to erase everything in the try but the catch we're gonna just keep it the same now I know normally you want to make sure you handle the error and be more specific about what's the problem but because this application is quite heavy and intensive already with all the data and what we're doing I'm going to give it a very generic error so make sure you don't do that in your actual applications all right so from here we're going to set a products variable and we are going to do a weight product dot find so we're going to grab all the product that we can get so now we also want the product stat information because we're on a dashboard we want the user to be able to see this is the final by the way this is the final build we want to be able to use it to be able to see all this information about yearly sales units their rating and the price things like that you want to be able to see everything so we also want to grab all the product stats as well so we're going to do that so we're going to grab each product and we're going to do a weight promise dot all and what we're going to do is we're going to with each products we're going to cycle through and we're going to make an API call for every single one API call to the database essentially so we're going to ask mongodb I want this information for each product I want the product stat of each one so I'm going to grab the stat and the way we do this is we're going to grab product stat dot find and we're going to grab and pass it in the product ID using product dot underscore ID like so if you don't fully understand this I'll in a very short bit I will explain everything here so product and for whatever reason we need to set product.doc because that's what mongodb sends to seem I'm not entirely sure why that's the case but mongodb since when you're using promise that all sense to give you product dot underscore doc if you understand it please let me know why that's the case but here so let me rehash what's this this is a little crazy but basically we're cycling through all the products that we've received so product.find will give us all the product that we just requested and what we want to do is for every single product we're going to find the product stat using that particular product ID and we are returning an array of objects with both just the product information so this is just all the product information and we're combining it with the stat information so we're combining it into one big object so referring back to our ERD diagram what I'm essentially doing is I'm essentially telling manga database I want all the list of products here and then on the second go what I'm going to do is I'm going to take the ID of each one and I'm now going to call the database and tell them I want the product stats relevant to this particular ID and this is what's called a foreign key essentially so using matching this with the product ID I can grab the product stat relevant to this particular product so if I wanted like a shampoo ID has an ID and that ID is stored in the product ID property of the product stat so by doing this I can get the products that information of each product and we combine it into one object like this so here we have as one single or an array of objects for each product we have all the product information along with all the stats for each product and with that we can do res dot status 200 dot Json and we're going to return to the front end with products with stats hopefully that makes sense because we are essentially grabbing every product just grabbing the stat information alongside with it now this is a little bit slow in reality this query is actually pretty slow so if you actually refresh the page this will be slow because we're constantly telling the database I want this information for this product then this product and this product and there's just separate information now I don't want to cover this yet I'll save it for later in this video but there is something called aggregate functions which allow you to use two databases and you can make a query that will combine information together and mongodatabase has optimized it with aggregate functions now if you're familiar with SQL databases this is equivalent to what you would see in SQL database called joins and unions and they have database has its own version of those aggregate type functions so but we'll cover that shortly I just want to keep this simple so you understand what's happening and so with that we have our products information so that will be sent to the front end and so with this I know you guys have requested me to call this API endpoints as we go using Postman but what I'm going to do instead just to speed up the process is that I'm going to build a front end just for a products page and we're going to make an API request to test this and we'll be testing it from the front end but we won't build the entire back end first like I have done before but I will build this just for build the front end relevant to this section first so we have the products get products so we're going to make sure we call this particular endpoint so I'm going to close everything and we're going to go to our front end now close all this and then I can go I'm going to start by creating the API endpoint for our Redux toolkit query so in here since everything is all set up we just have to set up a tag type called products and in here we can do get products and we can do build dot query and we're going to do query and we're going to do a callback function and we're going to say client slash products to hit the endpoint that we want and remember the reason why we add the client is because this is part of the router so slash client and then go to client routes slash products and then that's what's going to hit the endpoint all right and then for the provides tags is going to be products and it's pretty straightforward and make sure we gotta export that use get products query and that's pretty much it we don't need to set up the store anymore because we already did that last time so this is all we have to do to create another endpoint I know before we were kind of all locked into setting up the store and all of this but when you're actually working at a company and you've set this endpoint you set the entire store and was it the query and this page you'll realize that you don't need to you don't often need to set up everything like that's very infrequent you don't have to do that often and plus it used to be this used to be a lot worse okay if you're gonna complain about this it used to be a lot worse trust me there there didn't be there was all sorts of like packages that made a lot of this very complex and people have complained a lot so right now this is pretty pretty good I would say and then from here we're going to go I'm going to close these guys we're going to go to the app.js file so we can create up our products page so first I'm going to do import products from scenes slash products and in here we're going to create a route for that so route path is equal to slash products and we're going to do element and we're going to pass in the products component that we just imported and we're going to create that route now obviously this is not going to work yet because we have not created the products component so I'm going to go to scenes create a new folder call this products and oops I really need to not type these things incorrectly okay so products we're going to write index.jsx and in here I'm going to use rfce to write products like so and in here we're going to do some imports so I'm going to import the number of components a box card card actions card forgive me for doing this kind of fast but it's pretty straightforward you just have to copy it you can pause the video if you need to copy these so I'm gonna have button typography rating use theme and use media query and we're going to import it all from at mui slash material so I'm going to save that it'll Auto format and up here I'm going to import use State as well and then I'm going to import use get products query from from state slash API so that's what we created earlier use get products and then finally I want to create a component called header so before we work on the products there is one component that if you take a look this is you I use the products header component on every single page like this Heather so I'm going to make this into a reusable component so let's actually do that so I'm going to import header from components header and we are going to create this particular component so I'm going to create a new file this will be header.jsx and in here I'm just going to import a few things this component will be pretty small we're going to leave box use theme like that I'm going to do rfce and we have our header and inside here I'm going to pass in parameters of title and subtitle and I'm going to pass in theme equals use theme like so and inside this this should be box and I'm going to make sure I close this inside here this is just going to be a typography with a variant of H2 with a color of theme dot palette dot secondary 100 with a font weight of bold and SX of margin bottom five pixel I'm going to close this and inside here I'm going to pass in the title params that I passed in and below this I'm going to have another typography actually I'm just gonna copy this to make my life easier this should be a variant of H5 secondary color of 300 and I'm going to just remove these two guys and this should be subtitle I'm going to save it now no I'm going this kind of fast but this is essentially just two typographies with the title with a box laid out and it's kind of reusable so it just makes our lives easier when we're creating new components we can just pass this in so as we did we pass in header so we're going to go back to our products page and we can set up our header inside of here but let's do this box slash box like this and I can pass in Heather like so and we're going to pass in the title prod Ducks has to be capitalized then we're going to do a subtitle equals c your list of products and we're going to make that a closing tag and we shall see that we have a header let me make sure everything's running we're just we just have a lot of unused but they're not detrimental so if I go to the products page we have this we don't have the correct margins yet but we can set that up easily so I'm going to go back close the terminal close this close a lot of these and we can now get started writing our product information so if I go down I'm going to write const data comma is loading and this is something we can get from use get products query so as I mentioned before we are able to grab the data we are getting from the back end but we also have something called is loading so we can use this Boolean that Redux toolkit query provides and we can check if the data has not come back to the front end yet that's what this guy is particularly used for but before that let's actually double check we can console log the data and making sure we have the information that we are requesting so this is going to double check our API endpoint so let me save that and let me go into products the way you can check it is opening up your Dev tools we do have some kind of code you likely forgot to export your component okay it seems like I did not export something correctly give me one sec okay it turns out there was no issue with that so if you just refresh it you won't see the error but now you can see that we have the data so this is our product information now I know this these are names of people but I'm just imagining this is just a product name so we have our list of products that we are grabbing from the back end so everything is working as expected all right so now we can resume back going back to creating our component so I'm going to go down right before right below use get products query I'm going to do const is non-mobile and we're going to do use media query and in here I'm going to set up Min with of a thousand pixel like so and with the Box we're going to set up a margin of 1.5 REM 2.5 REM for our edges and by the way I've never explained this yet but the reason why I'm using REM instead of pixel is because it it makes it very consistent across different browsers so this is called root root em and we're basically essentially using the default pixel size which is like 16 font and we're basing it on that so everything is proportional to that initial starting point and that makes it more convenient than just using an absolute value like pixels anyway so below the header we're going to add a box and we're going to set data or if is loading now react Redux toolkit query is a little quirky with the is loading but you want to make sure that the data is not loading and to make sure the data already exists so you want to make sure both of these one of these is not one of this is true before we can actually render our component and then inside here I'm going to create a box make sure I close it first like this and I'm going to add another one over here just so we can have our formatting so inside our box we're going to have a lot of properties so I'm going to say modern top is going to be 20 pixel and we are going to use grid for this one so display of grid because grid is much better for two-dimensional or no yeah two-dimensional uh layouts as opposed to one-dimensional layouts for reflex box so if you take a look on our final build we have a grid that's spanning over here and the way this works essentially is we're going to have a grid of four items until we hit a certain point until we hit a certain point we're just going to make each item be on its own line like this as you can see we have one for every single line and grid actually makes this very very easy so you can use flex for something like this but grid makes it even easier once you know how to do it so let me turn that off we're going to go back and we're going to set display of grid and I'm going to set grid template columns and we're going to set this as repeat 4 comma min max with zero and one fractional unit let me save it so we have all of this on the separate line easier to read but basically we are going to repeat a grid set of columns we're going to split it into four and we're going to give it a min max of zero so a minimum of zero and one fractional unit that's what this unit represents actually let me make sure close that one fractional unit as the maximum value so if it gets to a point where it's too small it's going to it's going to allow it to decrease further but for our purposes it's going to be 4 Columns of items split and we're also going to set Justified content so that we have a space between layout for the item so it's very similar to how flexbox is setting up we're going to set up a row gap of 20 pixel meaning the gap for each row so vertically and then we're also going to have a column Gap of 1.33 percent this is something I just played around with getting a percentage so this will be the gaps between each column so left and right and that row Gap is going to be vertical so up and down and then here I'm going to set the SX and this is a very convenient way for me to make this responsive so if you do end if we target the immediate div that's what this represents the mediative div we can set a setting that will allow us to make it responsive so what I would do is do grid column and we're going to set that if it's non mobile so basically desktop screens we're not going to set anything we're not going to set any kind of value for this however for each div inside this parent component we want this to be span of four meaning it takes up the entire width for mobile screens by doing this we are selecting the child elements of this parent component so anything that exists in here so if we have a div like this every child component it's going to have a span of four meaning it takes up the entire width when it's on mobile screens whereas if it's not on mobile screens we're not going to give it a span of anything so it's going to take there's going to be four columns per line and this is how you kind of do it so instead of doing this as div we can use box components that's how this kind of works below this I'm going to write loading because that's what we're not going to handle like a fancy loading component we're just going to put loading so when the data is not loaded we're going to have this now for this I want to be able to map through our data and we're going to create a component for every single item and inside this I'm going to have Arrow function we're going to create a component called Product and I'm going to create the product component up here above it because if I put the product component over here it gets a little messy so I'm going to have the product component up here so I'm going to do const product and I'm going to pass it a number of things that come from the data itself so underscore ID is coming from the back end same with the name description price rating category Supply and then stat and from here I'm going to just return something so here I'm going to do constane equals use amen here I'm just going to do a lot of like layout things to create our card that represents each product so I'm going to do set is expanded over here to make sure this represents the c-more button to open and close it and it lives on each component here and I'm going to return a card component I'm going to make sure we close that and inside this I'm going to have an SX I'm going to set this background image to be done and then we're going to have a background color to be theme dot palette background dot alt for the color foreign ER radius of 0.55 REM and just a note I haven't mentioned this but the reason why we use this color theme.palot.background.alt instead of having a hard-coded value of the color like some hex code blah blah blah instead of doing that we are using the theme because if you change it to dark mode material UI will automatically assign the dark mode or light mode version of these colors whereas if you hard code the colors it's not going to allow you it's not going to flip that color it's always going to be let's say if it's going to be like white if I have that over here then whether it's dark or light mode it's always going to be a white color but we don't want that we want it to be different based on the theme mode that's why I kind of have that and then from here I'm going to do card content inside of this I'm just going to set a bunch of typography we're going to do SX of font size of 14. I'm going to set a color of theme dot palette dot secondary 700 and I'm going to set a gutter bottom this is just a property that gives a little bit of bottom margin then we're going to do category in there and here I'm going to set another typography we're going to set this a variant of H5 component of div and we're going to set this as name and then finally I'm going to just copy this one if we're going to do one more we're going to set this SX of margin bottom of 1.5 actually 1.5 REM like so we're going to remove the component div we're going to say it's color we're going to copy this color of secondary except change it to 400. and then what I want for this one is going to be actually the price so I'm going to put the dollar sign and inside curly braces I'm going to put the actual price and we're going to change that to a number so I'm going to do price in here since it's in a string format we're going to do two fixed to two decimals so this will change our price and set it to two decimals at most below this I'm going to set a rating give it a value of rating and we're going to do read only so this is a specific component that material UI provides this is why I really like component libraries because sometimes you don't need something fancy you just need something functional and by material UI provides you with the rating component and if you were to create your own grading component it takes a lot of time like most people underestimate how how much time those things can take building your own component library is one of the biggest time sinks I've seen a lot of people really underestimate how much time it takes to make it they're worth it maybe for a large company all right so anyways we have a description we have a typography we can put that as the bottom one and then finally we need card actions and by the way a lot of this information about this card exists on material UI maybe I should just show you how you can do a card I just want to show you that you can just go to material UI docs and they'll give you all the information as needed so is all the card content and card actions this is where I got all this information from so it's not Magic okay so we have card actions then we have button and then we're going to have a variant of primary and we're going to do size of small and we're going to do on click and we're going to pass in set is expanded and we're going to say not is expanded so we're just going to invert that and we're going to give it a c more text and below this we're going to say collapse so this is a component that just will collapse the information if we need so it's going to be based on is expanded so n is equal to is expanded and we're going to set a timeout of Auto and we're going to do unmount on exit SX color of theme dot palette dot neutral 300. and below this we're going to do card content again and we're going to set a number of typography over here so I'm going to use typography and I'm not going to have to style this one I'm just going to do ID colon and then pass in underscore ID value I'm just going to copy and paste this four times three times this should be Supply left so the number of items left so this should be Supply this should be yearly sales this year and we can do stat dot yearly sales total and over here we're going to do yearly units sold this year I'm going to pass this over here stat dot yearly total sold units and we do seem to have some kind of prettier format okay that's because we have a syntax error if you go down over here we have not completely finished so we have the product component now but we want to be able to use that so if I go down over here we're going to create the product component so we can use them so data map is going to be an object so we're going to destructure that item and make sure you're getting this syntax correct because there's it's a little hard at this point to see it so we're going to do underscore ID name description price rating category Supply make sure you spelled Supply correctly and then stat and then after the curly braces and after the prints we're gonna do Arrow and we're going to pass in product like so and this should be self-closing and we're going to pass in a lot of the params that we have just added and I am silly because this Arrow function okay I need to take my own device about the syntax so just get rid of this Arrow and I believe this should be correct you have two parens and then the curly braces and then the curly braces with the closing prints they should be product okay and then we're just going to copy all of this over here and I'm gonna I'm gonna I'm gonna select all the commas actually let me put a comma there I'm going to select all the commas hit back then I'm going to hit equal sign hit curly braces and then paste what we just wrote again and we're going to get rid of the comma and then I'm going to save it and it seems like we do have another syntax error okay so now I can save it we have everything over here we just need to add a key don't worry if you didn't follow what I did but just make sure that you have all the properties getting these structured from data and passing all of them down into the product component and making sure you have the key ID for as well so react doesn't yell at you and then make sure all your products are good now everything looks good to me so let's see how it looks and with that let's go to our website and as you can see we have our list of products we have loading when we're waiting for that information and we have all of the data that we need we can go see more we can see all the items that we see we have the ID of each one as well and everything works as expected and if you close it we have responsive so everything looks properly looks proper to me I just want to note that yes it took a long time to set up everything but now with all our setup with reduxil query or schemas and models and everything makes it very easy to continually build all these pages so with that we have the products page now we're going to go to the customers page and with that now we can create our customers page so the customers page is going to be grabbing information from the back end and we're going to put this into a data grid which is the material UI table component so to start off we're going to go to our backend we're going to go to client.js and we are going to be adding a route so under router.getproducts we're going to do router.get slash slash customers and we're going to put get customers like so and then from here I'm going to import get customers from controllers and we're going to go to client and this one is pretty simple so we're just going to do export const get get customers and we're going to do async wreck res and what I'm going to do is I'm going to import the user model from dot dot slash models slash user.js and then from here I'm going to copy the try catch block again we're going to keep the catch the same and inside our try block I'm going to do const customers is equal to a weight user dot find and for us to get the customers we're going to say the roll is basically users so users are basically the people who are going to be our customers admin or the people who will be able to access the dashboard super admin are the people who will be able to access and manage the other admins and then right here we're also going to add select and we're going to do minus password and the reason why we're doing this is that if you take a look at the models and the user we see that we have a password we want to make sure we don't include the password when we send it to the front because you don't want to send their passwords to the front end or else it can be abused and then from here we're going to do res dot status 200 meaning that's okay and then dot Json customers and we're going to save so that's pretty straightforward and then from here I'm going to go to source into our front end and we're going to go to API and we're going to do what we did before except we're going to do it for get customers so get customers we're going to build dot query query and we're gonna have an arrow function and we're going to say client slash customers and you could put the closing bracket but it doesn't really matter we're going to do provides tags and we're going to put customers here and I'm going to put customers up here as well I'm going to save it and we're going to put use get customers query then from here I'm going to go to app.js and I'm going to import customers like we did before customers from scenes slash customers which is a folder and file we have not created yet and then we're going to create a route and we're going to say path is equal to slash customers say element is equal to slash customers closing tag we're going to close that route and then we have now created this customers yet so let's do that so we're going to go through scenes create a new folder we're going to call this customers and I'm going to add a file called index.jsx within there and in here I'm going to do rfce and call this customers so here I'm going to import a few things I'm going to close this tab I'm going to import box from mboi material as well as use theme now I'm going to import use get customers queried the hook that we just created and then import headers from components Heather then finally we're going to import data grid from Material UI data grid so I'll cover this very shortly so I'm going to create theme is equal to use theme because we need colors and then we're going to grab data and is loading from use get customers query and we're going to make sure this customer's API endpoint that we created works so I'm going to save this I'm going to go back to our application and go to our customers page we see our customers title and we see the data coming back now I'm console logging this but preferably you check the network tab so check the network tab will make sure that you have everything correctly so over here we have information about each customer in the preview section so you always want to you want to be able to learn how the network tab is working we have our correct route we have a good status we're using the get method and in the preview this is kind of what we expect we have 102 customers here and then we're going to go back and we're going to set up some layout stuff so I'm going to do box and we're going to set this as margin of 1.5 REM top and bottom 2.5 REM left and right I'm going to close this box and inside the box I'm going to set the header to be title of customers with subtitle list of customers now in here I'm going to create a box and inside this box I'm going to put data grid all right so data grid so we have an arrow over here failed the prop okay yeah so right now data grid is not working because we're missing some props but if you go to material UI data grid we will see extensive documentation here so data grid has editing sorting filtering pagination selection they have a lot of different things over here now they if you see this there is an open source version so this is the free version but they also have a commercial version which is Pro Plan they have a lot of extra features in the Pro Plan but you'll be able to get away with using the open source or in the free plan even for a lot of different companies you'll be able to use a lot of the features without having to pay for it so you don't have to worry for the most part and now you can find a lot of information of how do you style your components do filtering sorting a lot of this information is there now the reason why we don't create our own tables is because I personally have created a reusable table myself and I can assure you that creating your table yourself takes a significant amount of time you're going to spend a long long time building up your own table there's way more functionality in tables than you would reasonably predict but why would you do that when you can use something like material UI data grid which offers a lot of the functionality has a lot of documentation has a lot of things where they fixed a lot of the bugs and provided an easy way to access a lot of it so I highly highly recommend creating a table but I know people they're going to want to create their own table by all means if you want to go and try I have done it for work and it's not fun it's not fun when you try to make a table reusable in 10 to 15 different places I don't know I don't think it's worth I don't think it's worth but anyways we have our data so now we can set up our data grid so the data grid let me put this on a different line and uncomment this out so data grid requires of just a few properties namely Rose and this is where we're going to be put out our data and the way we're going to do this is going to put an empty array if it hasn't loaded with data like we've done before and then we're going to do columns and we're going to place a columns array so we have not created this columns array yet we'll do it in a very short fit but before that we're going to write loading and we're going to do is loading and we're going to make sure the data is not loaded so this will provide loading you'll see a spinning Circle in the middle of the data when the data is going to be loading so it's very nice and convenient so then we have get row ID so meaning every single row needs an ID and typically it goes by dot ID if tries to find the property of dot ID in our data but in our case it's dot underscore ID so instead of saying row.id we're going to do row dot underscore ID and that should give us the proper rows we're going to save it we're still going to have issues because the columns don't exist so now let's actually create the columns so the columns represent each column and the header as well as the field in which we should be gathering it from so for example the field meaning inside our data we're going to have a property called underscore ID so we're going to say if we want to grab that information we're going to say underscore ID the Heather name is going to be a capital ID so this is the title or the column title of each column and then Flex we can set this to one so this is going to be how you want each column to grow shrink and how much space it can take up so if you wanted to take up an even space for each one you can set every single one to flex step one or you can let's say you want this to be smaller you can say this to 0.5 but for the ID since it's kind of long we're going to set that to be one I'm going to copy and paste we're going to say this is name the header name should be capitalize n name and then we're going to say 0.5 for this one and we're going to continue doing this for all the properties that we want so the next one is going to be email let's change this to email this one should be capitalized and the email should have a flex of one and then from here the next one is going to be phone number so the phone number is going to be a little special so we're going to say phone number like this but the field is called phone number camel case we're going to set the flex to 0.5 and we're going to set render cell and we're going to give it this a function so if we ever want to customize that particular column we can create a callback function that looks like this and we're going to return params.value dot replace so what we're doing is essentially we're grabbing the value for this particular column but we're going to replace it with some regex because this is a phone number we want to format this phone number and the way we do this for this particular format is we can just put a parens we're going to put slash D meaning a number and we're putting three so three numbers and it's going to be wrapped around prints and we're going to say slash d curly braces 3 again because that's going to be another set of three and we're going to put parenze slash D and then this time 4 because this is how phone numbers are represented and then we're also going to have quotation oops we're going to have quotation double quotations like this and what we're doing is we're going to place it like this so essentially this is what like if you know if you're familiar with regex what it's doing is grabbing the first three set of numbers placing it in this section we're going to grab the next three we're going to place it in the two we're going to put a dash after that and put the last four in this section so this is how it formats the phone number because the phone number is a set of 10 numbers and we just need to format with the parens and the dash and then we're going to continue on adding a few more columns so this is will be country and a capitalized country over here with a flex of 0.4 I'm going to copy and paste this we're going to have occupation for this one occupation and then make sure this is capitalized and this will be one and then finally we're going to set the roll foreign capitalize this and set this to zero point five and now let's save it let's double check everything is working we're going to go back to our app and as you can see we have our box but we're seeing nothing so far and that's because we need to set the height of the parent component because there's no height set for this it's not going to show anything so we're just going to set a margin of 40 pixel actually a margin top of 40 pixel and we're going to say the height of 75 viewport height so that will take 75 percent of your screen's height size and now as you can see we have all our information we even have pagination everything works expected we can change the rows the number of rows change that you can even sort information as well and just Note data grid by default has first it sorts by ascending descending and then the third time you click it is actually it unsorts so it doesn't send and then the following time is going to go around that cycle again so here we have we have our data grid and you can see how simple that was we have the ID we have the actual value and it's grabbing for example underscore ID that's the field another city as well actually we're not even using City but country grabs the country value so as you can see it's pretty convenient but we still want to style this a little bit so we're going to go back and styling can be it's going to require us to grab some of the CSS class names and I think this is pretty convenient if you know which one to modify it's not too bad so the way you would figure out what class names you want to use is you can go over here and check the rows and Fields for example if you want to see columns Heather's inner if you want to modify that you can grab that particular class over here and you can modify it with and Dot something like this and that will allow you to change that but I've already set and found all the CSS properties I want so I'm going to get mui data grid root and I'm going to set this as border with none and then and dot m-u-y data grid actually I'm going to keep this copied so we don't have to write this over and over I'm going to have dots and we're going to modify the cell this time I'm going to give it border bottom of none and then from here paste what I had we're going to change the column headers foreign color and give it a theme dot palette dot background dot Alt give it a color of theme dot palette dot secondary 100 and give it a border bottom of none and then right here I'm going to do the same thing as before Dash virtual scroller colon brackets I'm going to copy this over here so we have theme.background dot Alt actually this should be primary dot light I'm going to copy and paste this for convenience sake and this should be further container so we are changing the footer this time and I'm going to copy all of this in the column headers and make some modifications from there give it a border top of none instead of Border bottom and these two colors are going to be the same and then finally I'm just going to copy this guy and we're going to do toolbar container and mui button Dash text so we're changing two things we're going to give this a color and give template strings theme dot palette dot secondary 200 and we for this particular case we're going to have to use important because it doesn't overwrite it properly so if we take a look and now you can see we have our styles so it looks pretty good let me make sure everything is going as expected yep perfect and as you can see data grid is very convenient and has a lot of functionality that you can use and it provides an easy way to add all your data okay we so we did our customers page the next page we're going to handle is going to be transactions now if you take a look you can see a data grid again you just have some extra items which are pretty cool you can close and open some of these columns and then we can change the density of it as well we can even export this as a CSV if we wanted to and then we also have a search where we can search something in this table however there is a major difference between this table and the customers and it's not because of those functionality customers page is what we just did which is client-side pagination what that means is that what the server is going to do it's going to send you all the information to the front end so once you make one query we're going to get all 100 102 results onto the front end and then we do the Sorting on the front end but what happens if you are sending thousands and thousands or maybe even hundreds of thousands of information to the front end that's not ideal you don't want to send that much data because it goes it costs too much and it becomes too slow so in our transaction table we have 500 transactions but we're not going to send all 500 to the front end at once what we're instead going to do is we're going to do this every single 20 pages and when we hit next the back end is going to set us send us new information as you can see these are getting populated every time I click so it will be different information and then when we sort since we don't have all 500 results right now we need to send to the back end the Sorting information so this is what's called server side pagination it does get tricky and a bit challenging but this is valuable information because this happens quite frequently that you have a list of a very long data you're not going to send all the information to the front end and that causes issues with you know sending um and trying to sort information because you don't have all the data in the front so you have to send a request to the back end to sort the information and then also when you change the rows of pages you're going to have to tell that to the back end as well as the page number you are currently at so this is server-side pagination and we're going to do this with data grid and I'll show you how this differs and how convenient it is to use with data grid so to do that we're going to start with the back end so I'm going to close all these tabs I'm gonna go close the client and I'm going to go down to models and the first thing we're going to do is we're going to create a transaction transaction model over here and in here we're going to import we're actually just going to go over user actually product copy all of this paste it and what we're going to do we're going to get rid of product schema we're going to say transaction schema and over here the product should be transaction and we're going to change this to user ID to be string cost should be string products is going to be a type of mongoose dot types dot object ID I'm going to put of number just a couple things to note is that cost should typically be a number instead and there's ways to convert the numbers and doing all that but for our purposes we're going to keep this a string and I'll show you what we need to do for that and products is going to be essentially an object of type with an object ID and we're going to give a number as well we're going to save that and then from here I'm going to go to index.js and I'm going to import our model and we're also going to import the data as well so we're going to import transaction from dot slash models slash transaction dot Js and then from here I'm going to do data transaction I'm going to save it I'm going to go scroll down and this is where I'm going to add the transaction so I'm going to add transaction dot insert many I'm going to do data transaction like so I'm going to open up my terminal I'm going to save it make sure everything goes as expected and we're going to go to our manga database over here and I'm going to refresh making sure our transactions exist over here and everything is perfect we have user ID cost and our list of products okay so I'm going to close this I'm going to comment this out I'm going to save it and then from here I'm going to go to our routes page I'm going to add another route using router.get slash transactions and we're going to hit get transactions over here inside here I'm going to say get transactions and we're going to be creating this function so if I go controllers client and below this is where I'm going to write our function so this function is going to be kind of tricky because we're going to do some server-side pagination so over here I'm going to copy the try catch I'm going to remove all this I'm just going to remove our customers and because we're doing server-side pagination we need to grab some values from our query string so the way we grab that is going to be we're going to grab the page and we're going to have a default of one page size of 20. for default the sort is going to start off with null search is going to be empty and we're all grabbing this from the front end and the front end is going to send us the rec.query values over here so these are defaults with the equals and we're just grabbing these values from the front and by the way sort the way we're going to make the sort look like it should look like this we're going to have field we're going to mention the user ID or sort and we're going to say maybe something like descending or ascending so that's how this is going to be sending to us from the front end and that's what material UI will be sending and then the way we want to format our sort it needs to look like something like user ID of negative one so this is what we need to format this string for the database so this is what mongodatabase will be able to read versus this is what we're getting back from Material UI data grid so we need a function to make that happen so we're gonna do cons sort parsed so we're gonna parse the string of sort so the front end will be sending this as a string so we need to parse that into an object and we're going to do sort formatted and we're going to create an object and in this object we're going to set sort parsed dot field grab sort parsed dot sort and if it's equal to ascending we're going to set that as one and if it's not we're going to set that as negative one and then we're going to do return sort formatted to give us our value and we still need to call this function so we're going to say sort formatted is a variable and we're going to call generate actually we're going to say Boolean is sort so if it exists we're going to do generate sort like that otherwise we don't do anything this should be generate the reason why we need this Boolean is to check if sort exists or not if it doesn't exist we're just going to give it an empty object and then finally what we need to do is set up our transaction search so the way we do this is we're going to do a weight transaction.find like we normally do shouldn't find and actually we need to import transaction import transaction from dot dot slash models slash transaction dot Js and that will allow us to use this variable and we can find and search what we need to look up so we're going to do or and in here I'm going to give it a cost with the reg X new reg XP search comma I like so so now let me let me go over what this is doing so basically if we want to search we can set this and we can search the cost value like the cost params or the search field of cost and we can do reg XP with the search and we can check for all right so let me explain what's happening over here so over here we are checking for cost and we're going to do a regular search with the search value that the user inputted so this is a search term that if they want to search something specific then they can give us a string and we'll set it over here so this will allow us to search the cost field for us and this or allows us to search multiple Fields so if I wanted to search up cost then I can search up another one let's say we can search up user ID over here so now we're searching both of these fields now there was an issue that I encountered with my data is that if I go to data transaction I made this user ID it needs to be an object ID format mongodb has this particular object ID format that you need to set otherwise it's not going to work so here the user ID works but not for these underscore ID this needed to be in a different format but for standard purposes we're just going to be able to search these two columns so we can't search every single column we're going to only search these two columns to keep that in mind so over here I'm just going to get rid of that semicolon I'm going to do sort and we're going to go by sort formatted so this will provide the query of sorting alongside this search right here and then we're also going to add skip and we need to do page times page size so that will allow us to skip to the proper page as well as the page size we need and then we're also going to limit to the page size of how many results we need so we're going to keep that so now we have our transaction query so this will give us all the things that we've formatted in terms of what the user requested on the front end the only problem is with this is that transaction has a limited number but we still need the total amount of queries because we need to display that information so to do that we're going to run another query so we're going to do total I'm going to say await transaction dot count documents so this will just give us the number of documents that exist in the Monger database so we're going to set reg X search and we're doing options of I so we're basically counting with the search option that we've already found and we are setting the options and this will allow us to give us the total count and with that we can send the front end both the total number of documents that exist as well as all the transactions that we have so I'm going to write transactions and then total all right so that was quite the handful we're doing essentially we're grabbing the sort we're grabbing the page number and the page size as well as the search term and we're returning all that information or we're sending that information in our query so mongodb can give us the right information and then we send that information back to the front end all right from here now we can work on our front end so I'm going to close all these tabs close this we're going to go to our client and I'm going to go under source and then State API so this is going to follow the similar path of what we've done before so we're going to do get transactions we're going to build dot query and inside here we're going to do query and because this time we're actually going to have a decent number of params that we need to pass this will look slightly different so I'm going to create a callback like we normally do I'm going to give it a page page size sort and search like all the similar params that we were setting for the back end we're passing it over here and then we are going to return an object and this is going to look a little different and we're going to pass an URL with client slash transactions comma a method of get params of page page size sort and search like that so now if you look at this the format looks a little bit different from what we have written this is if you need params we're going to have to write it like this this is essentially a shorthand that we can use if we're not using something like params or the body but if we do have it we have to write it in this format and then from here we're going to do provides tags and we're going to set this as transactions and by doing so we need to set the transactions up here and then in here we're going to do use get transactions query like so and that will give us our hook and then from here I'm going to go to our app.js file and we're going to import our transaction page the transaction from scenes slash transactions like that and we're going to create a route of path is equal to slash transactions now we're going to give it an element with a transaction component and like that and we're going to go to our scenes folder we're going to create a new folder called this transactions and create a new index .jsx file inside here and I'm going to do RF rafc e paste that in and call this transactions I'm going to save it and then from here I'm going to make some imports so let me close that so over here I'm going to do use state with from react they're going to import data grid from Material UI data grid then I'm going to import use get transaction query from State API import Heather from the kether component we've created and then from here I can save it I can go on to the transaction line we're going to do const theme equals use theme for colors and then we're gonna create some values that we'll be sending to the back end so values to be sent to the back end and we're going to save this as state so the first thing is going to be page so set page is equal to use State and we're going to initialize it with zero then we're going to set page size to set page size we're going to do use state of 20. and then from here we're going to do sort do set sort equals use state and we're going to start this with an empty object and then we're going to do search and we're going to do set search like this so this is going to be use state empty string and then from here I'm going to grab the data and is loading from our query so use get transaction query and in here we're going to pass an object and we're going to pass in page page size sort with json.stringify sort so we're going to stringify the object that we have in our sort so that we can put this in the query string and then we're going to put search like that so this is going to be the params that we're sending to the back end and to double check everything works as expected we're going to console log our data and it's going to send these values we have not set it to be dynamic at all yet so it's going to send these values but we should still get an input back and it does seem we do have some kind of error so actually let's go back we're going to go to our server and we're going to go to our client Js get transactions so this should be plural actually and let me make sure okay this is commented out so that's fine we're going to save that let's see if this works all right so we have that to be worked it seems like we do have another error over here where it says use theme is not defined so I would go back to this we are actually missing some imports so we're going to miss say box and use theme from at mui material so we're going to save that so as usual you can see a lot of times I'm looking at these Terminals and that helps me diagnose things that I've missed all right so I saved it let's go to our application and we're going to go to transactions to double check everything is as working so we have our transactions value and we are getting the first 20 items and that's as expected perfect and so if we go back now we can create our columns so I'm going to create columns over here and I'll create an array of objects so a lot of what we had with customers we can kind of copy so I'm going to go to my customers file I'm just going to copy everything over here and paste it and we're just going to modify all right and then let me close this let me close all these tabs to avoid all the Clutter and then so I'm going to have ID that's good this should be user ID instead and we're going to call this user user ID like that this should be a flex of one this should be created at and this should be capitalized Flex of one we're just going to get rid of the phone number because we don't need that we're going to change this country to products and this one should be number of products and what we're going to do is we're going to set sortable to false because we don't want this to be sorted because this one doesn't actually work properly so we're going to do render cell and we're going to set params to be params.value.linked so here we're just going to grab the number of products instead so we're grabbing the number of products this transaction has and then finally the last one we want is going to be the cost right here I'm going to call this Capital cost and I'm going to do render cell I'm going to set this as params and this will be double dollar sign because we have a template string this is going to be number and we're going to pass in prems dot value and we're going to set this to fixed so two that small places and by the way this is not going to sort properly this was my mistake because I created the data and I used the cost and I did not set this as a number and that's why I mentioned this should be a number if you wanted to sort this properly it should be a number but because we're sorting based on string the Sorting does not go from lowest dollar value to highest foreign so from here we're going to create a box like this and inside here we're going to set margin of 1.5 REM so 2.5 REM for left and right then from here we're going to set Heather I'm going to give it a title of transactions a sub title of entire list of transactions I'm going to close this I'm going to set this as box and inside our box we're going to put data grid this should have a height of 80 viewport height so this one's going to be taller and I'm going to go back to our customers we can copy majority of this of the SX that's coming over here and there might be a couple modifications virtual schooler for actually everything should be the same okay and then from here in our data grid we're going to set some of the same values so we're going to do loading is equal to is loading and we're going to change the data we're going to do get row ID and we're going to set row to return row dot underscore ID we're going to set rows 2B data and data dot transactions both of these have to exist for this to work so we are setting both of those so it's a little different from what we had before that we're going to set columns so now this would be fine for a normal data grid but we're doing server side for server-side pagination to work now we can go to react data grid and we can search up server side pagination it's a server-side pagination special configurations from the table sure let's close that and then we can see that these are the things that we basically need so we're going to have rows row count we're going to set the page the page size and the pagination mode should be to server so a lot of these configurations will allow us to use server-side pagination in a very straightforward manner so I'm just going to go over here and I'm going to start taking a shot at all of those so we're going to start with row count and we're going to set this as data and data total so the total is the number of values that we've sent and we need to set this to be the total data the total amount of data that we needed so that's what we are sending to be row count and we're going to set pagination because we want this to be paginated page we're going to give it a page a page size of the page size state that we've created we're going to set the pagination mode to be server we're going to set sorting mode to be server we're going to set on page change and we're going to set new page to be set page of new page like that so this is a configuration for setting the new page and we're just configuring our data grid to follow this format and then we're going to set on page size change and we're going to be setting new page size to be set page size with new page size like that an on-sort model change so this is the Sorting we're going to set new sort model and we're going to set this to be set sort and we're going to do dot dot dot new sort model and finally what we need to create is we're going to have to create this column but this column right here is a little bit custom so what I wanted to do is I wanted to create my own toolbar and you can create your own toolbar they have custom data grid toolbar mui you can you can create custom toolbar as well somewhere over here yeah right here so typically you would just use grid toolbar but if you want to create your own you can create your own function toolbar and just pass that in into the components section of the data grid so that's how you get this custom toolbar if you would like and that's what we're going to do so here I'm going to show you you can pass in components and we're going to say toolbar we're going to pass in data grid custom toolbar so this is a component that we will be creating so I'm going to import data grid custom toolbar and we're going to put this in the components file over here so I'm going to save that if I go to components I'm going to create a new file I'm going to call this data grid custom toolbar.jsx I'm going to run rafce and then in here I'm going to do some imports so I'm going to import search from mui icons materials so we get the search icon then we're going to import icon button as well as text field and then we're going to do input on Dorn myth so this is so we can create our own search component and then we're going to import grid toolbar density selector so this is how we can customize our toolbar so we're going to do grid toolbar container grid toolbar export and grid toolbar columns button so I'm going to save that let me close this and then we're going to import Flex between as well so once we have all of these I'm going to go over here and I'm going to create grid toolbar container actually this should be capitalized over here on line six say that this container and close this so this is how you can create your own toolbar container and you just pass it in to data grid so over here I'm going to say Flex between we're going to give it a width of 100 so it takes up the entire width and we're going to do another Flex between and inside here I'm going to give our toolbar so these are all the toolbars that material UI data grid comes with we're just going to add the ones that we want so we want density selector we're gonna add grid toolbar export as well and then below this we want a text field so this is going to be our search So Below this we're going to give it a number of params over here so we're going to do label is equal to search dot dot SX is going to be margin bottom of 0.5 REM with a width 15 REM and on change we are actually going to give it some other value so we're going to say e is going to be set search input and we're going to do e.target dot value so for now let's ignore this I will show you where this comes from and the value is going to be search input and this is also going to come from somewhere else but we're going to ignore that for now and the input props is going to be the end adornment so this is if you want to customize the text field that you are creating and we are doing that with like a search icon and we're passing an input adornment we're going to set this position to be at the end I'm sorry if I'm going a little too fast for this I don't want to focus too much on the front end but I just want to show you how we can customize our data grid and then from here we can do icon button we're going to close this and inside the icon button we can do on click and we are going to just have an empty function We'll add something soon and right here we're going to have our search icon by doing this we now have something that's going to be passed into our component so if I take a look at our current app we have our search we have the columns we have everything we essentially need so this is looking pretty good we can do this we can even sort we can sort by user ID same with over here but search is not going to be working just yet the page size 20 is not a preset okay I will cover that shortly all right so going back we have our data grid we have everything now the only thing about search is the problem is we can typically pass in set search over here but we don't want it to search every time we type because that's what's going to happen if I pass in set search over here it's going to make an API request anytime we search now one alternative is to debounce it but I just want to search when they hit the search button so what we're going to do instead is we're going to create a separate we're going to create a separate State and we're going to call this search input set search input and this will be the temporary state that we will set so we're going to keep track of what the search input is at the moment and when they hit the search button we are going to set this value and anytime this value changes then we are going to make an API request so that's how Redux toolkit query will work so anytime these values are going to be changed set page set page size it's automatically going to make another API request so you got to make sure you are aware of that and now you might ask how do we pass this in to data grid custom toolbar because we're just passing in the component like this there's no room for props but the way you would do it is a little a little out of it but it's pretty simple so you do component props and we can say toolbar and in an object we're just going to set search input we're going to set set search input and we're going to do set search like this and then we can save it and that will allow us for us to grab those values inside their data grid custom toolbar so here we're going to do search input a new set search input and then do set search and because of this we can now uncomment this out and in our on click we can we can configure our settings so anytime we do set search or if someone clicks the search button we're going to do set search we're going to set the value over here and we're going to set search input as an empty string like so so let me recap everything because it looks a little confusing so set search input is going to be this value what I would call the temporary search value so anytime we make a change it's going to change to this state that's what on change will be doing we're also grabbing the search input as the current value but when you click the search button we're going to set the actual search text using set search once they click it and we're going to also clear out the temporary set search input so if that makes sense we're basically using two states to keep track of our search and finally to address the warning we were having we need to set rows per page options so this is like the options that we want to set and we want to keep only 20 items and then 50 and then 100. so these are options that they can choose for their values and finally I want to change the text field variant so it looks just a little better just for me I'm going to do a variant and we're going to set this as standard so if we do that we can now see the search looks like this we have columns so we can change the number of columns that they can see at some point so the user has access to all of this they can change the density we can export this as a CSV or print it and for the search we can do a little bit of a search let's say 3 3 and we're going to search up everything that has 3 3 in there in the user ID and the cost remember it because we have a date and we have an object ID for the ID we can't really search these two columns and number our products is not something we can search on the back end we would have to implement a search on the front end for this so that's why we have some issues with it so if you ever want to implement for all the columns you're going to have to make sure your ID is in the right format when you create the mock data as well as the created at which is going to be the proper date but with that we have our entire transactions everything gets sorted on the server this is a very common issue people have and you happen to do this quite frequently for a lot of data tables that you do so this is very valuable information to Place into Data grid and datagrid provides you a lot of easy ways to do these things because otherwise this would be this would be a lot of work for you to put this into some kind of other table and add server side pagination but a lot of manual work all right so here is going to be the next page so we're going to work on geography so this is actually a chart that is based on user information that we have so we have based on this China has a lot of users that we have 53 to 60 and then we have we don't have that many USA users for example 60 or six of them Brazil has nine so on and so forth so this will show us where our users are located which is very nice so we're going to go back we're going to go to our server and I want to show you that we do have all the country information in our users so country information this is India I'm not exactly sure but country CN represents China for example so we can continue looking at all the other countries I'm not exactly sure what all these countries stand for like AR not too sure what that Armenia but anyways so we can go to index.js and we are going to anyways so we can go to our client page and now we can add the geography route so I'm going to go under this I'm going to write rather dot get and we're going to write slash geography and we're going to get geography function that we have not created so we're going to do get geography so I like I said all the country values are existing in the user so we don't actually have to create a new model for this so we're going to go to controllers go to client and we're going to be creating another function over here and this is going to be called X const get G photography and we're going to do async wreck res like so and we're just going to copy this last part we're just going to start with try and I'm going to paste that over here so we have our empty try so the first thing we need to do is we're going to grab the users so we do that by a weight and we're going to do user dot find and by the way I guess I haven't mentioned this I probably should have mentioned this a long time ago but you can find a lot of these you can figure out how to call our apis on the Mongoose docks so if you wanted to call you can find it dot find so if you want to just find specific things or you want to find all the documents it's all on this Mongoose page Link in the description below if you want to find it I probably should have told you guys about that earlier it's just hard to remember everything I want to communicate because there's so many different moving pieces here um all right so from here I'm going to do mapped locations and I'm going to say users dot reduce so what we need to do what I'm trying to do is I'm going to try and format this in the way that Nevo charts wants us to so if I go Nevo chloroplast chart so this is the chart that we're going to send information to we need to make the data look like this so we have an ID and the value the value is the amount of users that we want to set that but the ID is going to be the country so this has three Val three characters whereas our format is two characters so what we're going to be using is we're going to be using a specific package we actually need a package that we have not installed and we have an error but that's because we haven't finished this let's save it but I'm going to close this actually I'm going to do npm I and we're going to grab a package called country slash Country dash ISO 2 ISO Dash 2 2 3. this will help us convert the two country symbol to three country symbol and that's what we are going to do in this function over here with our reduce so in our reduce if you guys know the reduce function in JavaScript we're going to have an ACC an accumulator value that we can pass along across every instance or every Loop this value goes through each item and we're also gonna destructure out country from each of those values so from here we're going to do an arrow function and I'm going to set const country ISO three and we're going to get country ISO three from country and we actually need to import this from the package that we just got get country ISO 3 from country ISO two to three so this will allow us to convert the country to the proper format that we need and in here basically if the accumulator so the accumulator is going to be in object so hopefully you guys know what reduces basically doing we start with this empty object and we can add things to this object for each item as we go along but basically if our country doesn't already exist as a key property then we are going to set the value to be zero actually it should be one I believe but if it already actually no this should be zero sorry this is zero because we're gonna increment that value below this so we're going to do country ISO 3 and we're going to increment that and we're going to return the object so basically for every single one of our users we're going to grab the country value we're going to convert it to the iso 3 format and we're going to add it to this object if it doesn't exist and if it doesn't exist we're going to set that value that country that three format country of zero and once we have done that we're going to increase that value and we're going to return that accumulator so in the end we're going to have an object that lists all the countries as our key and the value is going to represent the number of users in that country and with that we're going to do one more Loop because this is still not in the format we want this will just make it more convenient for us to do our final formatting so we're going to do object.entries we're going to pass in mapped locations and we're going to map through what we just used using object on entries so this is going to have key value pairs and the key value is going to be country the value is going to be count and what we're going to be doing is we're going to return an object of ID of country and the value of count so now this is the proper format that Nevo charts for the geography chart that we need this will be the format that it can read and with that we can do res dot status 200 and we're just going to send that value like the formatted that formatted locations to the front end it's a bit of a hassle but sometimes you do have to do a lot of these conversions especially on the back end to properly format so the front end can use or you can do this formatting in the front end it doesn't really matter for different scenarios sometimes you generally want to do the formatting in the back end as much as possible all right and then from here I'm going to close everything out I'm going to open our directory close up the server we're going to go to our source we're going to go through our state and we're going to go back to our API so here I'm going to do get geography like we have done before and this one's pretty simple so we're going to do build not build queries build dot query and we're going to pass in query in Arrow function of client slash geography and in here I'm going to do provides tags with an array of geography I'm going to pass this up here into our tag types I'm going to save it and then we are going to do use get geography query and then from here I'm going to go to app.js and we are going to create the component so import geography from scenes slash geography so component we have not created and then the route for that component so slash geography element of the components and we're going to close that and then we're going to go to components actually sorry scenes create a new folder call this geography and create an index file in here for that geography component and then we're going to do rfce and we're going to create the geography component like this and here we're going to make some imports so we're going to import box from mui material as well as use theme and I'm going to import use so use get geography Curry from state slash API import header from components slash header so for us to have like a world map that looks like this we actually need to copy and paste some information so if you go to the chloroplast website nevo.rock chloroplath you can find the file used for this example and you're going to have to pass the features value so this is a very large file you can click Raw over here we're going to we're going to hit command all and we're just going to copy this file so this gives us the information to create the geography data and where I'm going to put this is going to just be in state we're just going to say Geo data.js and we're just going to paste everything in there this is a huge file but we're going to save it and actually because this is not a Json file we need to do export const Geo data is equal to this object and that should technically save and I think it will it's just a huge file yeah there we go everything works so we can go back to our file and there's another there's a couple more things I want to import I'm going to import responsive chloroplif so that's the chart that we're going to be using and then we're also going to import geodata which is the stuff that we just created or we just copied over and in here I'm going to do conch theme is equal to use theme and we're going to do const data is equal to use get geography query and we're going to grab that information and just like we usually do we're going to do console log for the data just to make sure our API endpoint is working as expected so I'm going to close this out if I go to react app and go to actually I need to make sure my server is running so make sure your server is running over here it's working as proper so I'm going to go to geography and as you can see we have our information and it's in the format like I mentioned the ID is representing the country the value represents the number of users over there so we have all our data ready to go and so from here I'm going to close this terminal so you guys can see better remove this console log because we don't need to worry about that we're going to do box and pass in margin of 1.5 REM 2.5 REM like we normally did and then in here I'm going to give it a header give it a title of geography capitalized with a subtitle of find where your users are located and we're going to have a box component and in here I'm going to give it a margin top of 40 pixel height of 75 viewport height so these are all configurations that I've showed that makes a lot of sense or it looks very nice with these settings so I'm going to give it a border with the shorthand one pixel a solid border and we're going to give the color of theme dot palette dot secondary 200. and I'm going to set up border radius of 4 pixel and inside this I'm going to say data will be this will be where our responsive chloropleth will exist but I'll get to that in very short and over here I'm just going to do loading like so so for our responsive chloroplast now I could put the the component over there but instead we're going to go to this page on the chloroplast we're going to go to the chart and we can make modifications over here so the way I want to format this is I can just change things like this make different settings I can rotate but I'm going to keep a lot of these the same the one thing I want to get rid of is these like lines over here which is something you get rid of with the fills actually we'll just manually do that we can get rid of the graticules or basically the grid if you want to um this represents the gradual okay so that's if you want to change the lines we want to make it Interactive we want to keep these Legends okay I think that's perfect so I'm going to go over here grab this code and we're just going to modify a lot of it so I'm going to copy and we're just going to erase this and then paste it and we're gonna have our information over here so what I don't want is going to be these fills so all the weird like polka dot and the dots that you have those are the fills but we don't want any of those we also don't need any definitions which kind of goes along with the filling and we're just going to modify a few things so let me take a look the features so one of the mandatory things we need to do is this feature needs to be the geodata that we copied over and it needs to be the features parameter so make sure you have this properly set the margin that we have for this is going to be negative 50. so we want to make sure we have those and let me check I don't think we want any of the colors for default so we're just going to erase this I'm going to keep this to point to projection scale should be 150 projection translation is going to be 0.45 and then 0.6 over here I'm going to get rid of the graticule line color we don't need that we're going to set a border width of 1.3 and the Border color of FF F so basically White we want the legend to be bottom right instead we want the Translate Y should be negative 125 translate X of 0. left to right this item text color should be instead theme dot palette dot secondary 200. and then when we hover over it we actually want this to be a theme dot palette dot background of alt color so now this is a lot of like this is based on your preference so you're going to have to choose the colors that you particularly want and here you can customize it further using the theme property over here Nevo has some charts for you but or has some documentation for customizing this but I'll show you what we want to customize so we're going to have access and we're going to set the domain over here and we're going to set the line and we're going to set the stroke to be theme dot palette dot secondary 200. and then in this domain under the domain we're going to set the legend to be a have a color text fill of theme let me remove the e we're basically going to set all of these to the same color so I'm going to go down I'm going to set the ticks to be line of stroke with the same color and a stroke width of one and it text color of fill and we're going to set the setting over there and then finally we need to set the legends to have a text and the fill of the same color and below this I'm going to set the tool tip to be container color and this one is actually going to be primary dot Main make sure this fill doesn't have any so I modified that and let's actually double check we don't have any errors so that's good so if I go back to my app and we have everything as we need let's refresh it make sure everything works so nice we have a lot of these settings the only thing I've noticed is that these are not the correct values these should be much smaller so for example Russia should have 24 so that 0 to 110k does not is not correct so to change that we just need to go and change the domain to 60. so that will go this basically is the Min and the max value so our min max values are way less than what they had and then now we have our perfect numbers so these correspond correctly and we have a nice Geographic chart of where our users are located so we have a lot of users in China a lot of users in Russia no users in Australia same with this so the next thing we're going to build is going to be the Nevo line chart which here is going to be the overview page and this will show the overall General revenue and profit that was made in this year and we're going to have two different views which is the units and sales view so let's get started so the first thing we're going to do is we're going to go to our models folder in our server we're going to create a new file and it's going to be called overall stat dot Js in this file I'm going to copy over everything in product just to make our lives easier and we are going to select our product schema and we're going to say overall stat schema like so and I'm going to change the product to be overall stat and inside here we're going to change the Key Properties so we're going to start with total customers and this will be number yearly sales total should be a number as well yearly total sold units is going to be a number year is also going to be a number and then monthly data should be actually we should just we can copy over a lot of this both the monthly data and the daily data and we're just going to paste it over here so it should be essentially the same and then we're also going to have sales by category and we're going to create a map which is basically an object in JavaScript and we are going to have a value of a number so the key will be the string basically the category for example shoes or clothing or something like that and the value will be the number so we're just going to have an object for sales by category and you create objects via map in mongoose then we're going to keep the timestamps as well so I'm going to close this we're going to go to our index.js and now we're going to be importing our model stat from dot slash models slash overall stat.js and from our data we're going to import overall stat just to note in our data if I go find data overall stat it's only going to be one object that will have our month and all 365 days for 2021 but we're not going to have any other ears so just keep in mind I've only put 2021 for our stats to make it comprehensive and then finally below here I'm going to paste in overall stat dot insert many and we're going to put data overall stat like so and let's see we have our server running and we're going to save it make sure our data goes into our Monger database correctly so we should go to mongodb go to our Cloud refresh this page I'll probably need to re-log in and after I re-logged in I'm in the collections page I see the overall stats and I see our data as expected so perfect so you can see monthly data is just going to be an array sales by category is also going to be an object as well all right and then from here I'm going to comment this out so we don't add duplicate data I'm going to save it and then we're going to go to our routes page and we're going to go to our sales file now so here I'm going to create rather dot get and this is going to be slash sales and get sales like this and then we're going to import get sales from actually this should be in curly braces from dot dot dot dot slash controllers slash sales.js so this is a function we have not created yet and for this just specifying for the routes for sales the sales page there's four of them but they're all going to use the same endpoint because this has all the statistics and this is a nice way because we only need to build one endpoint for four different pages because we're all we're using the same pieces of data for that page all right and then else let's go to sales.js in our controller page and we're going to import overall stat and this should be dot JS so don't forget that and we're going to export const get sales and we're going to write async wreck res and we're going to do a try catch block again and I'm just going to write this one manually so we're going to do res dot status 404 dot Json and we're going to pass in a message error Dot message save it and inside our try block this should be pretty simple so we're going to grab the overall stats as a variable and we are going to call overall stat dot find and we're just going to grab everything from that database and we're going to do res dot status 200 dot Json and what we're going to be sending to the front end so this is going to be an array but in our array like I mentioned we only have one data point which is going to be 2021 we have the stats for 2021. so we're just going to be sending that information so we're just going to send the first version of that just for this case so we're going to save that and our sales route is pretty much good to go so we're just going to close this and now we can go to our front end okay so here on the front end we're going to go to the source directory file we're going to go to State api.js and we're going to do what we normally do and here we're going to put get sales we're going to do build.query like so and we're going to get a query we're going to put a callback function and here we're going to put sales slash sales I know it's a little weird for that endpoint but that's just how the routes ended up and then from here I'm going to do provides tags and we're going to put sales like so and we're going to make sure we add that to the tag types and for our export we're going to do use get sales query to export that value and then from here we're going to go to our app.js file and we're going to import overview component which we have not created yet so it's going to come from scenes overview like that and in our routes we're going to add that so we're going to do path slash overview and we're going to set the element 2B overview this component and we're going to close that as well so I'm going to go now into components actually scenes and I'm going to create a new folder called overview and inside this folder I'm going to create a file called index.jsx let me just make sure okay scenes everything is correct so here I'm going to close it I'm going to say rfce and call this overview inside here I'm going to do some imports so I'm going to import use state I'm going to import form control from mui material menu item input Label Box select and then we're going to import header from components header and finally I'm going to import overview chart from components overview chart so this is a component that we have not created but this is going to have our line chart and the reason why I'm creating this separately is because this is going to be used on the dashboard anytime you have a component that's going to be reused in multiple places we're going to place them in the components file because those are where our shared components will be used and then from here I'm going to do const view set View like so I'm going to set the use state to be units so this will be the toggle between the two views inside this div I'm going to set this to be box I'm going to be closing this box as well I'm going to set this as margin with 1.5 REM top and bottom and 2.5 REM left and right and inside here I'm going to set the header we're going to say title will be overview and the subtitle will be overview of General Revenue and profit and then below this I'm going to set a box make sure we close that I'm going to have a height of 75 viewport height and inside here I'm going to create the form control so this is going to be the drop down where we can switch between the sales and the units and form control is a way to group our information and data or our UI basically so I'm going to close this given the margin top of one REM and in here I'm going to do input label and I'm going to set as View below this I'm going to set select with the value of view label of capital View on change and it's going to be e and we're going to set this as set View with e dot Target dot value and inside the select we're going to do menu item with the value of sales and sales will be the item and below this we're going to change this one to be units this should be capitalized and we have our drop down right here and below this oops didn't mean to delete that below this we're going to have the overview chart we have now created and we're going to pass in something called view so that will change the display of our chart depending on what the view is so I'm going to save it right now it's not going to be working because we need to go to our components file and we're going to be creating our overview chart jsx in here I'm going to do rfce and we have our overview chart and then we're going to do some imports so I'm going to import responsive line actually our intellisense is not detecting that let me make sure we have the correct all right so I'm missing one package and that should be at Nevo slash line so we're going to open this up I'm going to close this terminal I'm going to run npm I at Nevo slash line so this is the package we need to create our line charts and once we have that I'll be running that we now should have and I vote that line our intellisense has picked that up so we can import that all right I'm going to close our terminal once again and I'm going to import use theme from Material UI and then here is where I'm going to import or use get sales query so our API call that we're going to make will be in this chart because we're going to be using the same data for both the charts on the dashboard and the current page that we're on and then from here we're going to import use Memo from react actually this should be up here so you do comma use memo and we can just get rid of this and inside here we're going to have actually two parameters we're going to say is dashboard is equal to false and we're going to set this as view so I know we didn't write this one but because I have a default param we can set this this is basically an optional parameter and by default it is not the dashboard View so if we are working on the overview chart where it has is dashboard equals true then we can make adjustments to the UI based on that and that's what we kind of need to do for our dashboard so here I'm going to do const theme is equal to use theme and I'm going to grab data and is loading and you're gonna do use get sales query we're going to invoke that and before we move further I'm going to save this I'm going to console log and then I'm going to run our server once again okay once we console log and we have our website running we go to our overview page we can see that our data is locked I did notice that we are actually missing daily data so I have made a mistake in our models so if you go back to overall stat daily data is an object but it should be an array of objects like that and I did copy this from product stat so daily data in the products that also has this issue so I'm going to change this and as you can see if you go back to database overall stats didn't have daily data as well as product stats as well so what we're going to do and this is a good good learning experience if you want to re-insert the data it's safest to drop the collection meaning you're just going to delete the data and we're just going to re-insert it so I'm going to go to overall stats I'm going to delete that one as well and then when I go back I'm going to go to index.js and I'm going to go over here and I'm going to insert product stat and overall stat and we're going to make sure we save that and let's see if that works okay looks like it ran so I'm going to refresh our database and we can go to our overall stats and now we can see our daily data same with over here this should be product stats we have our daily data cool so if I refresh this page we should see the daily data being populated perfect so this is how you can diagnose database problems you can delete and reinsert them if you need to and with that let's actually uncomment these oops I don't know why I was clicking on that we're just going to comment those back out so we're going to save it I'm going to close all these tabs and I'm going to work on overview chart so we have our data it's working as expected so I'm going to delete the console log so here is going to be where we format our data so that we can input that into our line chart now there's always a question of whether you should format the data on the back end or the front end but there is no General clear-cut answer when those things should take place here in this case we have a backend where we have a sales endpoint that we are going to grab information from because we are going to use that endpoint for four different pages it makes sense that we're going to do our formatting on the front end for each of those pages while the data stays in the format that works for all four pages so we're going to do some calculations on the client as long as the calculations aren't too extensive on either client or the back end usually you're pretty safe so here we're going to create a create a variable called total sales line and total units line like this and here I'm going to do use memo so we're going to use use memo not use me we're going to use use memo to make sure this doesn't recalculate anytime we don't want it to so the time we want it to recalculate is when the data changes but we shouldn't recalculate this information any other time aside from when it loads and so if we do not have any kind of data though we want to return an empty array so we don't want anything happen so we don't break it however we're going to grab the monthly data from the data set and we're going to grab total sales line is equal to ID of total sales with a color of theme dot palette that secondary dot Main and the data is going to start off with an empty array so this format the reason why I'm doing ID color and data is because if you go back now we're going to go to Nevo and we're going to go find the line chart which is going to be right here sorry took me a while to find that if you go back to the data you can see this is the format that we have for each line we have an ID representing what that line represents and then a color as well as a data with an array of objects that represent X and Y so we want to format this in this correct way that's why we have this particular line so here I'm going to do const total units line so we're basically creating both of these lines in that same format we're just going to change a few things total units I'm going to set this one as a different color so this is going to be 600 instead we're going to leave the data blank and now what we're going to do is we're going to grab the values of monthly data so monthly data if you look at what the data represents so I go back data monthly data is going to have month total sales and total units so that's how this information is coming back so we're going to be formatting that and we're going to use reduce and we are going to grab the accumulator which is going to be foreign object and here we're going to grab the month total sales in total units from each monthly object and our secondary value is going to be if I go over here I can set an object that has a sales of zero and units of zero so we want to keep track of sales and then the units so we have an accumulating line so basically if you take a look at the final build what we're trying to calculate on the overview chart is in accumulating value that increases over time so basically we're going to add January February March April May June we're just going to add it to each number and we're basically keeping track of the Y value for every single month so we're basically adding it so we're not displaying every month's sales or every month's unit sales we're actually keeping track of the total unit sales up to date that year so that's exactly why we're keeping track of the sales and the units so We're looping through this once so we keep track of both sales and units so this is more efficient than looping through both of them on two separate loops so here we're going to grab Cur current sales and we're going to set ACC dot Sales Plus total sales so we're just adding the current sales for that month and we're going to do the same thing for the units so current units so we're going to grab units over here and we're going to grab total units over here and then what I'm going to do is just grab total sales line dot data and I'm going to create an array over here and I'm just going to add total sales line Dot data and I'm just going to add that months value to this object so I'm grabbing this guy and I'm basically copying what already exists in the data and we're putting that particular month and sales value so While We're looping through we're just adding each one to our line data so this will build the line and this will keep track of the current amount that's being sold up to date that year so hopefully that makes sense this is just more calculations so you just it's always going to be different depending on your needs but this is what you can say is what you would kind of see in the wild like an algorithmic question you won't have to do all those like binary trees majority of the time when you're actually doing algorithms for front end and back end a lot of times it's going to be something like this and then here we're going to set this as current units like that and we are going to return the sales with the current sales so we're keeping track of it and the units so if you don't fully understand this just take a look at what's happening it's not too complicated it looks intimidating just because the calculation you probably aren't you aren't the one doing it but it's something that you would when you think of the problem it will make sense to you anyways so let's keep going and here I'm just gonna have a fail check which is going to be data and is loading so if either of those are true we're just going to return the loading the loading string and then from here I'm going to go to the line chart I'm going to look at this and now here I can format different things so X format I don't think that really does anything but if I go down we don't want area so if you wanted area you can change that but if I go down I want to keep the points the point size is okay Point label we definitely don't want the point label let me double check we don't have any grid so in this case we don't want any grid so we can keep like keep our information like that we have is interactive use mesh I think I think that's all that's all we want to do for now we're going to make some modifications after we do this but I will show you the modifications but with this we're ready to go to put our line chart and the data we're going to have a different view depending on the different views so we're going to do view if that's equal to sales we're going to use the total sales line chart otherwise we're going to use the total units line so this is why we have those two different lines and we're calculating those okay we also did have an warning okay that's because we actually just wanted to change only when it's only when it's like the data changes we don't want it to change in any other scenario so I'm just going to get rid of this warning I happen to do this quite frequently I don't know why it's still part of eslint because a lot of times I don't I need to not require the exhaustive depths because you wanted to only re-render at certain times so I'm not entirely sure why they have that still on by default but anyways we have a margin the margin should be 20 and this is just from me experimenting there's no like trick to this it's just me wanting to place things in the right spot we're going to have a type linear audio stacked should be false so stack represents the fact that if you have two different lines they will stack on top of each other which you kind of don't want but in this case it probably actually doesn't matter and actually there is something I missed which is going to be a curve the other one was a very straight line but if you want more of a curvy line you can put cat mold ROM and it is in the line chart over there but I just didn't find it then there's one thing I want to do for axis bottom so I want to format this because this is based on month and if we are on the dashboard page which I have not covered yet but if we're on the dashboard page it's too long so you want the month to be concatenated or cut to a three leather string from January to Jan so if we're on the dashboard page we want to do return V Dot slice zero comma three so it makes sense we're on the axis bottom we're formatting that so we're going to return V Dot slice 0 3. otherwise we need to make sure we return just regular V so this will depend on if we're on the dashboard if because on the dashboard it's like there's less space that's why we need to cut this all right and then from there the legend should not be Transportation but we're going to say if we have a dash if we're on the dashboard we want no Legend because there's not lots of space like I mentioned otherwise we want a legend the month and by the way the reason why as you can see I'm changing a lot of this with based on the dashboard the dashboard just ends up simply doesn't have enough space that's the main reason why I'm doing that and the same thing with count here I'm going to do is dashboard we're not going to put anything otherwise I'm going to do a template string I'm going to say total I'm going to say view is equal to sales I'm going to set this to revenue if we're on the sales version and then units if it's not so for a year Legend offset should be negative 60 for this one so we turned off grid we're going the point size is okay everything else is good and now we don't want legend for is dashboard so again we're gonna do is dashboard over here so basically if it's not the dashboard we're going to have this otherwise we're going to set this to be undefined so this lines over here with this curly brace actually it lines were here so I'm going to do undefined like that I'm going to save it and we're going to have the values that we want let me make sure we need to translate the X for the legend from neg from 30 the Y should be negative 40. and then from there I believe everything looks pretty good and then with that we actually need to set the theme like we did before so if I go back to where was the other chart we wanted to change our chart in geography so if I go and copy the theme section so theme allows you to change a lot of the colors I'm going to copy that over and I think for most part we should be good let's save it let's make sure everything's running we have no errors and we're going to go back to our app and we do seem to have an error undefined is not iterable so we're going to go back and we're going to check that okay so the reason why we have an undefined for iterable is because we did not add the total sales line for a return so we actually we're returning this as empty so you need to return an array we're going to return total sales line making sure that that aligns with that and it needs to be in an array and we're going to also add total units line as well and we're going to make sure we return that so if we go to our current APP now we can see our chart so I'm going to refresh it you can see that we have our perfect line chart so this is a little the data is a little unrealistic the units have a similar value to the sales but sales should typically be more because that's the price whereas total units will be just like the number of items sold but this is the best we got with our data so this should be pretty good next in line is going to be the daily chart so the daily chart is going to be a list using the same pieces of data we can see how many sales per day and how many units per day so we can also use a date range picker so we can choose how many days we want to see so this is pretty cool you can see which day you want to see and it'll be based on that information so I can see more than all of this so we can see like a 30-day chart for example almost like this but this allows us to choose the proper dates so this is pretty cool so from here we're going to go to scenes folder and we're going to create a new folder and we're going to call this daily and we're going to play the file in here and we're going to call this index.jsx and I'm going to create our skeleton component with rfce and we're going to do the daily so in this case we actually don't need to make a component in the components folder because the daily chart we're not going to be using in the in the uh was it the dashboard page so we're just going to have the daily chart component in the page itself and so here we can actually we can actually open this up we can go to overview and I'm just going to copy the Imports that we just created because it's going to be very similar just a few different additions as well so here I'm going to have use memo and we're going to have we actually don't need a lot of this we can just keep box and use theme we're also going to import use get sales query and this is the first time we're actually using the same API endpoint for a different page and that's ideal if you can use the same different data points for the same or for like a different page or a different UI that's usually ideal not all the time but you can make it so that you're basically using the same pieces of information for different views so it's efficient in a way and then from here we're also going to import date picker so date picker will allow us to grab different dates based on the ranges and so if we go to react date picker like so we can go and go to this GitHub and we can see the demos that they have this is a simple and reusable date picker it's pretty simple you can use whatever date picker you want but you can go to this page and it has a lot of the examples and so the one we're basically using is going to be the date range so we're essentially going to be using information that's very similar to what we have we're not going to be styling this because I want to keep this more focused on the back end but I'll show you how to do the functionality and basically when you're installing and using this you want to make sure you import their CSS so you can go to this page which is in the link in the description and grab this information right here and you can just paste it above right here and with that we are going to have two different states so we need to keep track of our dates we're going to keep track of the start date and we're going to have a function that controls it so set start date and we're going to say use State and we're going to put new date like this I'm going to do 2021 0 2 0 1. so we're just going to have this as a default date like you can choose whatever date you want if you want but here I'm going to copy this I'm going to choose end date change this e to a lowercase and we should set this as 0 3 0 1. and then from here I'm going to grab the data from our use get sales query and we're going to grab theme for our colors and inside here we're going to format our data once again because we need to massage our data a little bit to get it in the format we want it to so I'm going to create our skeleton for this make sure based on that we need to ignore eslint disable line exhaustive depths was that correct react hooks slash exhausted them and to be fair a lot of this information that's going to be passed into use memo will be kind of similar to overview so we're just going to go back to the overview chart and I'm just going to copy everything and we're just going to modify this we might yeah let's just copy everything but we're just going to modify this quite a bit so instead of monthly data we're going to change this to daily grab the total sales Line This is fine same with the units and we're going to grab the daily data over here and inside here we're actually just gonna get rid of most of this because this is not going to be reduced we're going to do 4 each and here I'm going to grab date total sales total units like this I'm going to close this and inside here I'm going to do date formatted is equal to new date and we're going to pass in the date that we have so that comes from the date inside of each daily data so we're going to make sure we're doing that in the correct format and then we're also going to do an if check to make sure everything is okay the date formatted has to be greater than or equal to start date and date formatted has to be less than the equal to end date so this will allow us to chart the line only within the range of start date and end date so this is what's actually happening and then in here we're going to have to change our date a little bit we're going to do a split date we're going to do date Dot substring we're going to date dot index of I'm going to pass in a dash I'm going to hit Plus 1. so essentially we're just grabbing the correct parts of the date and we're going to make sure we grab the part after the dash and then here we're just going to grab these two pieces of information because it's very similar I'm going to grab total sales line dot data and I'm going to set the month instead to be the split date and we're grabbing the total sales and the total units like so so again this split date basically is so we grab the current relevant date because a lot of the date information we actually don't need so if you console log it you can see all the dates and you can see that we need to make sure we format it correctly and then from here I'm going to do formatted data and we're going to set this to be total sales line and then total units line so it's similar I just kind of did this a little bit differently instead of returning these arrays of arrays we're just going to return formatted data like so and the reason why it's this is different is because we're displaying two lines at once as opposed to before and in here we're actually going to add a few more params so this entire hook will get re-rendered anytime start date end date and the data changes so we actually needed to add these two guys and with that we have our formatted data now we just need to create that information over here so in here I'm going to set a box we're going to set margin of 1.5 REM 2.5 REM for left and right I'm going to set the header and this should be title of daily sales with the subtitle of chart of daily sales I'm going to close that I'm going to say box with a height of 75 viewport height and inside here I'm going to do a box with the display of flex with justify content of flex end and inside here I'm going to put the date picker and the date picker requires a few parameters so I'm going to go back to our page I'm going to copy this actually yeah I know I already wrote it but let's just paste that and we have start date which is good set start date select start start date end date everything is pretty we don't even need to change this and then we have this box and below this this is where we're going to place our line and fortunately we don't have to go back to grab a line again we can just go to overview chart we can actually just copy everything and we're just going to make some adjustments and below this we're just going to have loading like so and where we have our data we're just going to put formatted data like that and let's see we can keep this top margin of 50 bottom of 70 left of 60. we're going to keep going down I'm actually going to add something called colors and we want to put datum color so this allows us to use the color data that we have inside our data instead so otherwise this would just not be the default color okay and then the tick rotation is going to be 90 because we want the axis to be rotated over here we're going to do Legend offset of 60 meaning it moves it down we don't need the is dashboard over here and then this Legend just could be total as well because we don't have any differences between dashboard this should be negative 50 instead and then we keep going down false false we don't need the is dashboard anymore so I can just get rid of those save it we're going to have an anchor of top right instead so I want to place it at the top right this is a better placement for this one translate X should be 50 Translate Y should be zero a lot of this we can keep as is and yeah I think that's should be pretty good let's go back to our page let's actually change to data okay so we actually have not rendered this so let's go to app.js so we're going to import daily from scene slash daily and we're going to do route path is equal to slash daily we're going to do it element and we're going to pass in Daily as our component and we're going to save it let's see if that works date picker seems to be not defined and I think I know why this should be instead of it being react date picker we should have just regular date picker and we can actually get rid of overview chart as well so let's save it and responsive line is not defined okay so let's go import responsive line this from at nivo slash line and we do seem to have an is dashboard somewhere so actually we can just get rid of this format and I think yep and there we go oh some some of our alignments is a little off let's just let's just look at this real quick everything does seem to work so this flexbox seems to be a little mistaken but we can change that so let's go down to R date picker and let's see what's happening with that so to resolve that issue we're just going to add a box and we're going to surround it because the date picker has a width of 100 percent and because of that the flex end is not working properly so we need to just surround it with a box and the width is no longer a hundred percent on the child elements of this one so that's how we can get it to the right side and as you can see we can change it by the dates which is pretty cool so the next chart is going to be the monthly sales so this one is actually pretty simple it's very identical to the Daily we just don't have a date picker so all we're going to do is we're going to go to the scenes we're going to create a new folder and we're going to call it monthly create a new file called index.jsx and I'm going to create rfce I'm going to change that to monthly I'm going to save it I'm going to go to app I'm going to set the route to path slash monthly we're going to do the element and we're going to set monthly like so and close it and I'm going to go up here I'm going to import monthly from scenes slash monthly as well and I'm going to save it so now we have the monthly page so even though I already did that I want to just copy everything from the daily and we're just going to modify it and I already wrote that but we can just replace it we don't need any of the date picker stuff we can just change the daily let's actually change this to monthly same with the export all the way over here and here I'm just going to get rid of this range information because we don't need that anymore and I'm going to change this to monthly sales and we're going to say in this chart of monthly sales like this and then we are going to do some adjustments over here I'm going to get rid of start date end date over here a lot of this is pretty self-explanatory we have responsive line use State we actually don't need U State now and in here instead of the daily we're going to change this to monthly so I'm also note that I'm also changing down here as well these should be the same and we are just going to change this to four each this should be a month total sales total units we don't need any of this data for date formatting and we could just keep most of this we're going to change the date we're going to keep that information this is good formatted data we don't need to change start date and date we have our formatted data over here and let's make sure everything is pretty similar we're going to have month that's good total and we can save it we can go back and we can see our current APP we have split date still is not defined so let me find that split date okay so this instead should be the month and save it let's make sure we have no errors and I think this should be pretty good yep we have everything we need so this was just a variation of the original uh we do have some things that go underneath but if you want you can use a non-curved chart instead so for example let me close this you can just comment this guy out and we can see now we have more of a line chart so if you wanted to adjust it it's pretty cool pretty simple so now one thing I have noted I did not note but Redux toolkit query is very nice because we're essentially caching some of the data so here if you see the daily and you go to the network tab when we go to this page the reason why you're not seeing any API calls being made is because uh was it Redux toolkit query already has made the data API call for sales and because we're sharing the same information we do not have to make another API call which increases efficiency saves money because you're not making the same API call over and over you're not burdening their server or anything like that so we're basically using the same pieces of information for three different pages over here so Redux toolkit query is very nice because it automatically does this for you occasionally you want it to refresh the data and you can do that manually if you need to but for most cases you don't want to set that up and finally the last chart we're going to deal with is going to be the breakdown chart which is going to be a pie chart if you take a look at here it's just going to be based on the categories that we have set and we will split the chart information on there we also have something in the middle to show the total amount of sales so let's go back to app.js and we are going to import breakdown from scenes scenes slash breakdown which is not created yet and we're going to go to the route and we're going to do path slash breakdown we're going to set element and we're going to pass in breakdown over here I'm going to close this and we are going to have a route I'm going to create a new folder call this breakdown and in here I'm going to create a file called index.jsx I'm going to do rfce that in and we're going to call this breakdown like this and then from here I'm going to import box I should make sure that's on another line import box from mui material I'm going to go to the next line we're going to import header from components Heather and I'm going to import breakdown chart from components slash break down chart and this is another chart that's going to be used on the dashboard that's why we are going to make the breakdown chart in its separate component and then here actually we're not going to have anything in there we're just going to return a box that has a margin of 1.5 REM 2.5 REM like this and I'm going to give it a header with the title of break down and the subtitle of breakdown of sales by category like so and in here I'm going to have a box with a margin of 40 pixel actually margin top of 40 pixel and we're going to give it a height of 75 viewport height and inside here we're going to have the breakdown chart we don't need to pass anything in and let's go and create the breakdown chart so inside the components folder we're going to create break down chart jsx I'm going to do rfce to create our function component and in here I'm going to do a number of imports so I'm going to import responsive pi from nivo slash pi we're going to import a box from Material UI as well as typography as well as use theme I'm going to import use get sales query from state slash API and in the breakdown chart since we're using this for dashboard we're going to do is dashboard is equal to false so that means by default and in the case that we're using this this is going to be not the dashboard page so again remember dashboard page it's going to be like it's going to have things that are smaller so it's harder to deal with so we need to make some UI adjustments just for those and we're going to do use get sales query and I'm going to do const theme is equal to use theme I'm not going to console log the data because we have already seen the data and I'm going to add this if data does not exist and if it is loading we are going to return loading information and just FYI I've been doing this kind of differently for each one but it's to show you you can do you can handle the loading States differently but it's ultimately up to you and then from here I'm going to create an array of colors so I'm going to set theme dot palette dot secondary 500 I'm going to paste this three more times so two of them is going to be 300 the first and fourth one is going to be 500. so the color will be offset from each other and we have some variation and in here we're going to format our data this is a lot more easier to format because this is just a pie chart so we're going to do object dot entries data dot sales by category like this and we're just going to map it so we're just going to grab the key which is a category and the sales is the value and we're going to grab the index as well and we're going to do ID for category value or actually label is going to be the category value is sales and color should be colors I so again this is pie chart stuff this is how we need to format our data it's an array of objects with ID label value and color that's what the pie chart needs and then we're going to save that and now we can go down to our breakdown chart and we can make some adjustments so I'm going to create a box and here because we are dealing with is dashboard we're actually going to have to modify this a little bit so we're going to set height to be is dashboard we're going to set that to be 400 pixel versus a hundred percent when it's not the dashboard page the width should be undefined so our box is dependent on the height not the width and we're going to set a minimum height for it is dashboard and we're going to set that to be 325 pixel and undefined when it's not we're going to copy this and we're going to do the same thing for min width and we need to set the position to be relative and the reason why we're doing this is so we can place the text in the center of the pie chart and so let's go to our nivo website we can go and find the pie chart we have something that looks like this but we want to make some edits to this we can keep the arc labels we have some fills and definitions actually we can just keep most of this we're just going to copy this over and just modify it so again I like to get rid of the fills and the definitions so I'm going to go up and remove all the defs like that and the fills and then I can go back to our overview chart and then copy paste our theme so I can go down right below our data we can paste the theme and instead of the data this is going to be formatted data and here I'm going to set the colors colors should be set to datum of data dot color so this will default to the colors that we have identified like we mentioned before and let me double check on what we need to do for these settings so the margin it's going to be tricky because there's a lot of like responsive issues especially on the dashboard so you kind of have to do a lot of this manually but I've already set a lot of this took me a bit of time to get this kind of right so I'm just going to set is dashboard we're going to be pasting this we just need to get rid of one of these curly braces and in here the bottom should be a hundred and left should be 50. and we can keep it the same or we can just leave it the way it is for non-dashboard then we're going to sort by value to be true so this is gonna organize the table based on how big the values are we're going to set the inner radius to be 0.45 so that's how thick the circle is we don't want a pad angle nor do we want Corner radius we're going to set the modifier to be actually 0.2 is fine we want to disable Arc link labels if it's not the dashboard and then the text color we actually don't want to skip angle we want to change the text color theme dot palette dot secondary 200 like so we have a 2 from darker and then bottom Row for translate X we want to do is dashboard we have 20 and zero and over here this is going to be is dashboard and we're going to set this to 50. and then 56. item width should be 85 have it left to right item opacity is great circle we want to change the style to be one of the themes so theme dot palette dot primary 500. and I believe that should be good for the most part okay and then below this is where we're going to add the text right in the center so this was a little tricky to set up so we're going to have a few things so we need to set a position to be absolute with top of 50 percent left of 50 percent because we're positioning this and the parent component is relative so if you always want to Center something over another thing you always do relative on the parent absolute on the child and then you can position it top 50 left 50 from the parent component or a parent element and then from here I'm going to set the color to be theme dot palette dot secondary 400 we're going to do text a line of Center pointer events of none and we're going to set SX to be transformed is dashboard and I'm going to set translate to be negative 75 percent and negative 170 percent when it's on the dashboard this was a lot of trial and error because there was a lot of responsive issues and I'm going to set Translate typically you shouldn't have to do something like this but occasionally you are left with no choice then we have a typography with a variant of H6 and then we're going to set is dashboard and we're going to set the total to be data dot yearly sales total so this conditionally if it's not the dashboard we can have this value otherwise it doesn't have enough space so yeah that was a little bit tricky has a lot of like responsive issues had to take care of but now let's double check we don't have any errors it looks good so far so let's go to breakdown and yeah there we go we have our pie chart everything moves we have a little denotation of what each item is we have a little bit of a cool animation and it looks very nice to me okay so with the breakdown completed now we're going to work on admins so admin is just going to be another data grid table and performance is where we're going to do an aggregate call but let's take care of admins which is pretty simple so let's go to our server we're going to go to our routes and we're going to go to management and inside management we're going to add a route and we're going to call this slash admins we're going to do get admins and we are going to import get admins from dot dot slash controllers management.js and then from here we're going to go to controllers go to management I'm going to import Mongoose from Mongoose and we need to import user from dot dot slash models slash user.js and here I'm going to create a function called get admins I'm going to do async wreck res and I'm going to do a try catch block like so and I'm going to do res dot status 404 dot Json message error Dot message and then here I'm going to do admins await user dot find with a roll of admin this time so we're getting all the admins for this particular user and I'm going to select minus password so we don't grab their passwords as well and we're going to do res dot status 200 dot Json admins so essentially this is just a normal get call we're just grabbing information about the users who are admin specifically and with that our API is already completed so the first thing we're going to do is we're going to go to client go into Source go on their API close this warning we don't really need that and then right here I'm going to do get admins and we are going to do build.query and I'm going to pass in query with a callback function and I'm going to write management slash admins and then here I'm going to provide tags and I'm going to put admins and over here I'm going to do admins over here in the tag types and then from here I'm going to go to app.js and then I'm going to add I'm going to import admins from scenes slash admin actually this should be singular and we're going to get the route as well so we're going to go path slash admin I'm going to do element pass in our admin component like so and then from here I'm going to go to scenes create a new folder called admin create a new file inside admin call index Dot jsx and I'm going to do r a f c e I'm going to call this admin and save it and I almost forgot let's go back to API and I forgot to do use get admins query so make sure you're exporting that so I'm going to save it we're going to go back to index.jsx and here I'm going to import a number of items I'm going to close those close these tabs and I'm going to import box from mui material as well as use theme now I'm going to import use get admins query from State API and I'm going to import data grid from mui X data grid I'm going to import header from components slash Heather and inside our admin component we are going to grab our data is loading and get it from use get admins query like so I'm going to put theme and use theme like so above here and here I'm going to console log I'm going to save it let's make sure we don't have any errors okay just a bunch of warnings which is fine I'm gonna go back we're going to go to our current application and let's just make sure everything works so we have our admin we didn't put any UI but we have our Network and then we have all the information and again remember try and get comfortable with the network tab it'll be very good to get a handle on this so here we have management and then admins and in our preview we have our list of the admins right here great so now we can work on the UI and so again with data grid we can oops we can create a bunch of columns and this is probably going to be most similar to customers so we're going to go to index and this is just to save a lot of the time I'm going to copy this columns section and we're probably going to keep most of these the same let's see if there's anything I want to change yeah we're just going to keep a lot of that the same and then we're also going to go down and grab this box and we're just going to copy it from customers and the reason why I'm breezing through this and is copying the same thing it's just so to show you that you can do a lot of different things as long as you're getting the same data you can change the UI so with the same set of data you can make a different type of charts just make sure you format the data properly and grab the information and then from here I'm going to change the title to admins and then we're going to do management managing admins and list of admins I'm going to keep the margin top the same most of this should be pretty much we're just going to keep all the styling the same I'm going to go down and there's one last thing that I actually want to just change I want to create a components that's going to include a column menu and we're going to give it a custom column menu instead so I'll show you what this will do so I'm going to import custom column menu and we're going to create a component and we're going to call this data grid custom column menu make sure you don't capitalize the r and we're going to save that so this is not created yet so we're going to do that go to components create a new file call this data grid custom column menu so this is going to be a way to create a custom column menu so that we have different settings for our column so if you look at what we have right now we have sort by ascending descending filter hide show columns but let's say I want to change what these are showing so again in the material UI docs you can look this up but we have several options we can do grid custom or grid column menu container so I'm going to import that grid filter menu item and then hide grid call menu item so you can use this and use it to create your own settings so I'm going to do rfce we don't need the react for this one we can just say call this custom column menu instead I'm going to pass in props for this one and we are going to pass in hide menu current column and open and we are a granite destructured from props so now these are not props that come from what we've created but it by default comes with these props that we need to use so here I'm going to do a grid column menu container I'm going to close that and inside here I'm going to pass in hide menu I'm going to put hide menu like this same with current column as well and then finally with open so these are just default props that you need to pass in here and in here I'm going to do grid filter menu item do self-closing and then hide hide grid column menu self-closing and inside here I'm going to pass in on click we're going to hit hide menu and pass in column equals current column so by default data grid requires these props for both of these so we can use them so I'm going to save it let's make sure we have no errors so if we go back here refresh it now you can see it's actually still the same so let's go back and see why that's the oh the reason why is we have components and we did not spell that correctly all right there we go we we now have our filter and then we can hide it if we want things like that so we can fresh it and it should reset and the final page we're going to be working on is going to be the performance page so this one is going to be another data grid and you might think oh we don't need to do another table but this one will show you how to do aggregate calls which is something I've been mentioning for mongodatabase as a reminder aggregate calls are similar to joins that you would see in SQL but the idea is you are using two or more data different database tables and you're combining that information combining them and aggregating them in a way and using that information so you can send it to the front end all right so with that let me close the terminal I'm going to close all these tabs and now we're going to go back to our backend and the first thing we're going to do is we're going to create one last Model this is the final model we really need and we're going to call this affiliate stat JS so this is going to get information about some specific user and how many sales he has particularly made and so what I'm going to do I'm going to go and grab the product JS information copy it over to make my life easier and I'm going to say affiliate stat schema I'm gonna select all the product I'm going to say affiliate stat like so and inside here I'm going to delete everything I'm going to say user ID and grab type of mongoose types mongoose.types dot object ID so this has to be an object ID that DB States and we're going to have a reference of user we're going to set affiliate sales and here I'm going to pass in the type of mongoose dot types dot object ID so in this case this is an array of this ID and we're going to say ref of transaction so this ref is representing which data model it's referring to so again if you look back onto our page user ID is referring to user affiliate sales is referring to transactions this is what's called one to many because this is has an array so from one to many transactions and then this here user ID from user is one-to-one relationship because there's only one user ID per affiliate stat but anyways let's go back we're going to save this and what we're going to do is we're going to insert the affiliate stat information like we normally do so I'm going to go up I'm going to import affiliate stat from the model like so and I'm going to grab data affiliate stat and make sure you don't have a capital f and then finally I'm going to go down over here I'm going to say affiliate stat dot insert many and I'm going to do data affiliate stat I'm going to save it and what we just did we inserted it to our database so I'm going to make sure we have that so I'm going to hit refresh foreign and now we have our affiliate stats database collection and as you can see we have our affiliate sales the user ID so these are the transactions that the user has made very cool now let's go to routes and we're going to go to management and we're going to create another route so here I'm going to do router dot get and we're going to do slash performance and we're going to do another query params so we're going to pass in ID from the front end to get the performance of that particular user so I'm going to put get user performance as the function so I'm going to get user performance up here I'm going to save it and now I can go to controllers and then I'm going to go management and this is where I'm going to create a function so first I want to do is import transaction from dot dot slash models slash transaction dot Js remember don't forget the dot Js and then you're going to set export const get user performance like so so this one we're going to do aggregate calls so we're going to do Rec res over here and I'm just going to copy all of this over and just replace everything so we don't really need this all right so the first thing I want to do is grab the ID from the params so rec.prems and what we're going to do now is I'm going to create a variable called user with stats and what we're going to do is going to use the user.aggregate function so if you go to database aggregate calls they're going to give you information how to make aggregation calls so this allows you to use what they have something called the aggregation pipeline meaning it has multiple steps of which you can use to do various operations for example this is an example group buy and calculate sum you have something called match and then group and then sort they have a lot of these different functions you don't need to know every single one you can just reference it when you need to but these aggregation pipeline will allow you to reference one database and use that reference to talk to another database and I'll show you what that means it'll make a lot more sense when we do it so here with user aggregate first thing I want to do is I'm going to match so I'm going to match our ID with the new mongoose Dot types dot object ID all right so you might think Oh shoot what what's going on over here there's a lot of crazy syntax here but what's happening is we're grabbing the user ID we're making sure we're converting it to the right format so mongodatabase has this object ID type so you need to make sure that the ID type is in the correct format and we're matching it and finding the user who has this particular ID that's what's happening here so we're just grabbing the information about the specific current user and grabbing that information and then with that we can go on to the next step with this information and we can use something called lookup and what this lookup will allow us to do is we can grab information from the affiliate stats model so what we originally did was we grabbed this ID information about a user in the user model but now we want to look up in the affiliate stats information so we want to grab from the stats data and we're going to use the local field of underscore ID and we're going to compare it to the foreign field user ID like so and we want to display this information as affiliate stats okay let's take a pause and let's look at this so what's happening is if you go back to this database I am looking at these two tables and we're comparing this ID which is a local field because that's where we're running our aggregate function call and we're comparing it with the user ID over here so we're essentially seeing which of the affiliate stats is going to be referenced in these two tables so we're grabbing these two guys and grabbing that information and we are displaying that information as affiliate stats so now affiliate stats the last step we're going to add is I'm going to do unwind and all this one this is this is very simple this is very extra but you can just do this and they will flatten your array so basically it's just going to flatten the information so essentially to reiterate what just happened here is that we're matching our current user see if any seeing if we have the current ID and we'll grab that information and then we're going to look up the affiliate stats table and we're going to compare the ID of our current user with the user ID in the affiliate stats table and we're going to save that information in a property called affiliate stats and then we are going to flatten that array or object so that is going to be what this information is so essentially what we're going to get out of that is the current users normal information but also their affiliate stat information so we're combining those two into one using an aggregate call so unlike before if you compare to the client if you remember when we did get products we had to cycle through our products then we have to cycle through each product and grab the products that relevant to each product through a promise.all and this process is a little slower in comparison to doing an aggregate call which will do the same thing but at a faster pace and it's just in general a better practice so it's very similar to how SQL does joins and then finally I'm not going to bombard you with another aggregate calls because this is kind of Hefty but I'm just going to do a weight promise dot all and we are going to do user with stats zero like this and I'm going to do affiliate stats affiliate sales so again user with stats is going to have this information and I'm finding this affiliate stats which is the property and then I'm grabbing the affiliate sales from that information so affiliate stats has affiliate sales over here and I'm going to map through I know it looks a little crazy but if you console log and see what these are inputting they should make a lot of sense and then we're going to do transaction find by ID so for each one of these we're just going to grab each sale transaction and we're gonna pass the transactions we get and then finally we actually need to filter this so I want to filter all the sale transactions I haven't figured out a way to do this natively in mongodatabase but what you can do is we're just going to filter make sure that we have a transaction transaction should not equal null so we just we just want to get rid of the ones that end up being null because not all transactions typically all the transactions should have some user but the data that I created didn't have that and make sure sales transactions should be plural right here and then finally we can do res dot status 200 and we're going to dot Json and what I'm going to do is I'm going to pass in user which is user with stats the zero value because it's an array I'm going to do sales as well to get the user sales it as part of the information so filtered sales transactions now hopefully this aggregate function makes sense but it takes a lot of practice it's very similar to SQL joins like the idea of it it just requires some practice to understand what's happening okay and then so I'm going to close this tab and now we can go to our front end all right and then you should know what I'm going to do from now it's pretty simple everything is going to be exactly what you expect so we're going to get performance we're going to do build dot query we're going to do query over here and we're going to set this to management slash management slash performance performance and then slash ID like that this should actually be template string and we are going to pass in an ID into our query and we're going to do provides tags I'm going to say performance and this actually should be get user performance just a better name for this particular one because it's relevant to a specific user I'm going to go up I'm going to add performance over here and go down and I'm going to do use get user performance query like that I'm going to save it now I'm going to go to app.js I'm going to import performance from scenes slash performance I'm going to go down to the route path slash performance we're going to set element I'm going to pass in performance like so and then close it and I'm going to go to scenes go down create a new folder called performance and inside the performance I'm going to create a new file called index.jsx and before I just do re fce I'm going to go to admin I'm just going to copy everything It's a lazy way to do this and I'm going to go to Performance and we should have most of everything so box use theme this should be I'm going to select both of these with command d and do use get user performance query like so we can keep the header we can keep the custom column menu for this one and also I want to grab use selector because we want to be able to grab the ID for this one so I'm going to do const user ID and we haven't done this in a while but use selector we're going to grab the state I'm going to grab state.global.userid and we need to pass the user ID into here for our API call and before we go further I'm going to console log this data and I want to comment the data grid out for now just so we can test our API works and let's make sure we have no errors and it looks good so let's go to Performance and it seems like we have our user information and as you can see we have the affiliate stats this aggregate call combined both just regular user information and their affiliate stats relevant to that and then sales also includes all the transactions relevant to this user so everything is working as expected so now we just got to make some adjustments this should be performance and we are going to do track your affiliate sales should be f performance here I'm going to save it and I'm going to change the columns because this column is going to be a little different so ID we need to change this one to be let me change this to user ID and we're gonna just change the name over there this should be one we're going to set this to be created at and this is going to be capitalized we can get rid of the phone number we can change this to products and this one is going to be number of products I'm going to set this flux to be 0.5 sortable to be false render cell is going to be params like before params.value dot length and the last one is going to be cost so I'm just going to delete all of those this should be cost capitalize this set the flex to be one render cell should be params and we are going to do template string number params.value dot two fixed two I'm going to save it then from here I'm going to uncomment all the data grid stuff and we are going to make pretty much no adjustments to the Styles because it looks that looks fine and then I'll keep all of this with data the rows should be right here data and data dot sales because we want the data sales information not the data itself get row and then we have is loading we want to make sure the columns are good and it looks pretty good to me now we just want to change this to Performance same with the admin over here since we copied this over actually let's close that sometimes I forget to close that and here I'm going to save it and I think if we don't have any errors everything should work as expected so let me refresh it and we have our performance data perfect I can change this as well I have two different columns and we have our custom column menu perfect there's one thing I wanted to make sure you guys comment this out because I kind of almost forgot but you should comment the affiliate stat insert many make sure you save that so you're not adding duplicate data all right so now we are finally at the last of the pages which is going to be the dashboard so the dashboard is going to have some stats over here with some value in this section this is the line chart basically this is the revenue chart we saw in overview and then we have transactions and then we also have a pie chart representing the sales by category as you can see the line chart and the pie chart are reused from some of the other Pages that's why we are keeping this page as the last one so from here let's get started we're going to go to our server we're going to go to routes and I'm going to under General we're going to write our first route for the dashboard so we're going to do router dot get slash dashboard we're going to do get dashboard stats and we are going to import get dashboard stats and then from here I'm going to go to the controller go to General and I'm going to fill out our dashboard information and we are going to import a few things so I'm going to import overall stat from dot dot slash models slash overall stat.js and then I'm going to import transaction from dot dot slash models slash transaction dot Js and then from here I'm going to export some functions so I'm going to export get dashboard stats which is going to equal to async rec res like so and I'm going to create a try catch block over here so I'm going to remove all this and from here we're going to start so now basically this endpoint is just going to retrieve all the information on the dashboard page and we have a separate endpoint because we want to compile all the stat information into just one section of the website so it's a very convenient way less API calls so we'll have to call multiple apis if they're just entering the dashboard so from here we're going to write some hard-coded values because we are limited in terms of like the mock data that we have so I'm just going to assume our current month is let's say November and then we could say const current year is going to be 2021 because that's the only year we have data on and then we're going to say the current Dave is going to be 20 21 11 15. and here I'm going to set recent transactions because we are going to grab the latest 50 transactions that's happened on the website so I'm going to grab transactions and we are going to await transaction dot find we are going to limit the number of items by 50. and we're going to sort dot sort and we're going to say created on and we're going to do negative 1. so that sorts it backwards and then from here I'm going to do overall stats and I'm going to grab it from our overall stat data table we do that with overall stat dot find and we are going to grab it from our current year from here I'm going to grab several pieces of information from our overall stat that we just grabbed and we're going to destructure Total customers yearly total sold units yearly sales total monthly data and sales by category and then we also want to grab this month stats and we can do that by grabbing our overall stat grabbing the monthly data and we are going to find within our data of month and we are just going to return when month is equal to current month so basically we are looping through our monthly data grabbing that information when the month is equal to our current month and the same thing we need to do for this for today's stats so I'm going to change this month I'm going to change this to today and I'm going to change this to daily data and I'm going to say date like this and this should be date is equal to current day and what we're going to do is we're going to return a lot of information for the front end to use so we're going to do Json and we're going to pass in total customers we're actually going to pass in everything over here as well as this month stats today stats and transactions so all this information is going to be set to the front end and this is everything the dashboard page needs so I'm going to save it we'll have all the information that we need so I'm going to close this and now we can go back to the front and you know the drill we're going to go to the state and the API file and here I'm going to do get dashboard we're going to do build dot query we're going to pass inquiry do General slash Dash board like so and we're going to do provides tags dashboard we're going to pass in dashboard above here and then way below we're going to do use get dashboard query like so let me close this we're going to go to app.js we are going to actually we already have our dashboard so we actually don't need to do this this time and then from here I'm going to go there are components or actually scenes go to our dashboard and we can start filling this out so here I'm going to import some items I'm going to import Flex between from our components I'm going to import header from our components I'm going to import download outlined and the number of other icons so email point of sale person add and traffic then I'm going to import box from Material UI button typography use theme use media query I'm going to save it so we have it formatted we're going to import a number of other things so data grid we're going to import breakdown chart and this is why we made it reusable we're going to also import overview chart I'm going to import use get dashboard query as well and we're going to do what we normally do so we're going to do theme is equal to use theme we're going to grab is non-medium screens so this is for responsiveness so we're going to use media query which we haven't done in quite some time since the beginning of this app so we're going to set the Min width to 1200 pixel for this case so we have more responsive elements and finally we're going to grab the data is loading and we're going to say use get dashboard query and here I want to check if the data is working so I'm going to console log save that I'm going to open up a terminal just to check if we don't have any errors so I'm going to go to my app click dashboard and we're going to check our Network tab so I'm just going to refresh this so we can grab it we can see that we have the dashboard we have monthly data sales by category this month's stats today's stats and all the other information that we need perfect so let's go back we're going to remove this and The Columns page should be actually similar to the transaction so if you go back to the transaction we can go to columns we can probably just yeah we can just copy this because it's going to be exactly the same so this is a transaction file and we're just going to copy the columns so we don't have to write that and I'm going to save it and in our dashboard we have a lot of UI elements here so this will be kind of longer so margin is going to be 1.5 REM top and bottom 2.5 REM left and right like so and then here I'm going to do Flex between I'm going to put a header with the title of dashboard subtitle of welcome to your dashboard and that's self-closing and then here I'm going to create the download box so I'm going to have a box with a button like so and we're going to have download reports as a text and we're going to give this some custom styling so we're going to do background color with theme dot palette Dot secondary.light color of theme dot palette dot background dot Alt alts like that and then font size of 14 pixel font weight of bold padding of 10 pixel top and bottom 20 pixel left and right and actually we are we need download outlined icon over here and we're going to give it SX of modern right 10 pixel oh and this needs to be closed so we now have our header with our download button and then from here we can go back to our completed app over here and we can take a look on how this is set up so if you go into inspector tab let's open this up a little more so if we go over here I'm going to click this I'm going to click right here there is a grid button that you can click on that will show you how this grid is displaying so the way this grid is designed is that we have about 13 lines 13 or sorry 12 columns so this is 12 columns these will be two columns right here each of these this one is going to be six columns same with these will be 2 2 these will be two as well or actually this will be one two three four five six seven eight and this is going to be four as for the height we are specifying this height to be just one like one with one row height this will be two row height this will be one row this will be how many one two three three row height so it's pretty simple so once you get that done it's pretty simple so now when you go past the Min width that we set these kind of collapse and this will be a full width let me just turn this off these will be full width like this same with over here and this so everything takes up its own width height and when you get closer this should collapse so now you can just see everything is on it's online and that's essentially how this layout is manufactured with the grid and then right here so I'm going to do our grid in this section so I'm going to give it a margin top of 20 pixel and I'm going to say display of grid and then from here I'm going to do grid template columns and like I mentioned I'm going to do repeat 12 of one fractional columns so 12 of these meaning one fractional unit meaning it's just it's split up equally into 12 parts and then grid are the rows for the height we're just going to have a hard-coded value for height generally you want uh absolute value so this one's going to be 160 pixel and we're going to set a gap of 20 pixel between each column and rows and then finally for our responsiveness I can do what we've done before which is and div like this so it selects the immediate child directly and we are going to set the grid column to be if it's on non-medium screens we have undefined so we have no grid column specification the stat boxes and all of those will have their own identified spans where if we are below this value we're going to do span of 12. so that means that it takes the entire row so from here I'm going to set this as rho number one and what we're going to do is we're going to create stat boxes because there's four of these one two three four and we're going to create these UI in a separate component so I'm going to go up I'm going to import stat box like so from components slash stat box I'm going to go into components file create a new file call it stat box jsx I'm going to do rfce to create our component and then from here I'm going to import box from Material UI typography and use theme I'm also going to import Flex between and flex between as you can see has been getting a lot of use so it's very nice style component in this case so anyways this stat box is going to take a title value increase icon and description so it's going to take some State values that you need and here I'm going to pass in theme with use theme for the colors and this is where I will set my box like so and I will add a number of properties to our box so I'm going to do grid column of span 2 grid row of span 1. display of flex Direction of column justify content of space between we're doing a padding of 1.25 REM and one REM left and right Flex of one one and a hundred percent so this is to identify the width and the percentage of how it grows in the grid so it'll take as much space as it can unless there's other things that taking up space and then we're going to have background color theme dot palette dot background dot alt and we're going to say border radius of 0.55 REM inside here I'm going to do Flex between I'm going to say typography with a variant of H6 SX of color theme dot palette dot secondary 100. and then inside here I'm going to do title and below this I'm going to set the icon and again I'm going to do another typography and this is going to be a variant of H3 font weight of 600 SX of color theme dot palette dot secondary 200. and I'm going to pass in our value in here and then finally Flex between we're going to have a gap of one REM and inside here I'm just going to copy this typography and make some modifications so in here we should have a variant of H5 a font style of italic and we're going to set this as dot light and we're going to set this as increase and one last one we want the typography with a description so let me save this I'll show you real quick I forgot to show you but here we have a flex like these two are aligned we have another Flex actually not one Flex this is just one typography and then we have another Flex right here so that's exactly what we essentially created and with that we can go back to our dashboard and we could go down and now we can create our stat boxes so I'm going to do stat box like so and I'm going to set the title to be total customers I'm going to set the value of data and data dot total customers and then we're going to say increase of plus 14 now by the way this increase typically you want this to be more Dynamic but I do not have the information in the back end to grab the increase or actually we probably could but it's just kind of a lot of work and then so we have a description we're going to say since last month and finally I'm going to put the icon and in here I'm going to put the email icon with an SX of color theme dot palette that secondary 300 I'm going to say a font size of 20 6 pixel I'm going to close this and it seems like oh yeah the email needs to be closed like that and what I'm going to do is I'm going to copy this I'm going to add this one more time here we're going to say sales today and the data should be today stats Dot total sales this should be plus 21 percent and this should be point of sale all right then from here the next item would typically be the line chart for it to be the proper line but we're going to finish up the stat box stat boxes first so I'm going to add two more here we're going to do monthly sales I'm going to say this month's stats so total sales this should be plus five percent and we are going to do person add and then we're going to set yearly sales over here and I'm going to do data Dot yearly sales total and this is an increase of 43 percent and I'm going to have traffic like so so those are all our snapbacks's but the line chart should be the third one and the way we're going to do that we're going to set a box first so we can set the configurations for our overview chart so I'm going to say grid column is going to be span of 8. remember I actually I remember saying span of six this should be span of eight so I was mistaken so this is going to be a grid row of span 2 and the background color of theme dot palette dot background dot Alt with a padding of one REM and a border radius of 0.55 REM and over here I'm going to set the overview chart I'm going to set view to be sales and is dashboard to be true like so so now we have our overview chart with our line chart and we have all the specific configurations so actually let's pause here and let's take a look at our website so we have it responsive and as you can see it looks pretty good so far now the only thing we're kind of missing is the area underneath and this has less items so actually let's go to our overview chart and let's fix that all right if I go down you can put it anywhere you want but enable area we want this to be is dashboard so and also if I want to go to access left so there's axis bottom axis left we want to add tick values to be 5. so there's much less ticks so there's that many ticks we should see much less yeah so now we have the area underneath perfect so now let's go back to our dashboard page and we are going to continue now on to row two So Below this particular box below this one let's see where this aligns this aligns with inside here so actually before the closing of this box we are going to have a second row all right so right here we're going to have row 2. so right below our stat box so not after these closing boxes so here I'm going to do box close that and this should have grid column with the span of eight grid row with span of three and now what we're going to have is we're going to be looking at the transaction because it's very similar we're going to look at the SX over here we're just going to copy the SX section and below this I'm going to set up our data from our transaction so we actually don't need all of this we're just going to keep this one simple so we don't have as many this is not server side so I'm just going to remove everything aside from loading get row ID rows and columns so I believe that should do the trick so if I go back over here we can see we have our transaction now the cursor is a little messed up if you look at this cursor it doesn't look as great as our finished product but I will cover that very shortly actually you know what let's let's make those adjustments there is something I want to change in our current styling because it doesn't seem to match as well so I want to go to over here I'm going to set border radius to be 5 REM so it's a little more round we're going to have mui data grid column headers the virtual scroller this actually should be background dot Alt if you look at it the color is good the only thing is going to be the scroll bars so the scroll bars is a little bit tricky so that's why we kind of need to go to the index.css page and we are going to Target the scroll bars directly so the way we do that we do webkit scroll bar and we're going to set width of 10 pixel and then we want to Target our track and we're going to do that with web kit scroll bar track and this is the this is the section where you it's like the behind of the scroll that makes any sense so we have a background we're going to say seven a seven F nine D and then with the handle we're going to change that actually let me close this handle I'm going to set this as web kit scroll bar Dash thumb I'm going to set the background to be 21 295 C like so and then finally I'm going to do handle on Hover and I'm going to pass in webkit scroll bar track and hover oops hover like this I'm going to set this as background of the same color save it if we take a look I'm going to refresh it now we have our colors that are very nice so this is this right here on the back is going to be the track this is the scroll right here or the handle and then handle on Hover is the color when you hover over it okay and so the last thing is just going to be the pie chart so we're going to go back to our dashboard I'm going to close all these tabs and we're on the final stretch for this and below our box our closing box I'm going to have a box and in here I'm going to set grid column with a span of four grid row of span of three background color with theme.palette dot background dot alt and we're going to set a padding of 1.5 REM with the Border radius of 0.55 REM and in here I'm going to set a typography with the variant of H6 with SX of color theme dot palette that's secondary 100 and I'm going to say sales by category and here I'm going to put the chart so I'm going to do breakdown chart with is dashboard W true and below this I'm going to have a typography with a padding of 0 on the top and bottom and 0.6 REM left and right with the font size of 0.8 REM X is going to be color theme dot palette dot secondary 200 like so and then right here I'm going to do break down of real States and information doesn't really matter what the text is over here via category for Revenue made for this year and total sales whatever save it and now let's take a look now we should have our pie chart everything is nice and perfect we do have some situations where it kind of pushes out not exactly sure what solution I can handle for that because it becomes a little rough at those particular dimensions but all the other dimensions work perfectly go in now you have this dashboard or the sidebar in the way but you can open and close and now with this we have our entire dashboard fully complete and we just need to deploy so I know you guys been asking how we can deploy our API and front end we will be doing this and the website will be doing it on is going to be render.com so if you go to render you can see this is a way to host both your backend apis and you can host your front end so basically static hosting and service web hosting there are other Alternatives Heroku used to be the dominant one for backend API hosting but we cannot do that anymore there's other Alternatives such as Railway like this and you can see they have a free version actually let me go back we can go to the pricing they have a free version but they have some limits and they deploy and if you hit the limit it's going to shut off render.com is probably the easiest to do I would say however there is one downside I just want you guys to know is that these automatically do shut off if you haven't used it for 15 minutes so when someone is going to your website the first time the API is going to take some time before it loads up so you have to be aware and maybe mention that on your own portfolio if you want to add your apis as a portfolio that the first time you go to the website it's going to take some time to load the apis so there's no real good alternative to that so I'm not entirely sure if there's like an optimal solution but render.com does a pretty good job aside from that downside but anyways let's go to the render dot dashboard and we are going to sign in and ideally you would sign in with your GitHub so I'm going to do that all right after logging into render now before we do anything with render I want to make sure you guys know how to push your GitHub and how to set up your GitHub repo so the first thing I want you to go is to look at your client and we're going to check you have a git ignore make sure your git ignore is going to be ignoring your environment local so this doesn't get pushed up to um doesn't get pushed up to render and then on server we also want to create if you haven't created already a DOT git ignore and we're going to ignore two things slash node modules and Dot EMP so these two things we do not want pushed up on our repo and I want to check one thing because this happens a lot is if you go to our client you're going to see possibly a DOT get we're actually going to delete this and the reason why is because we want the dot get to be in here otherwise we're going to have some problems so I'm going to open up a terminal I'm going to close everything actually or turn off our servers because we don't need those anymore I'm going to go to our main directory which is going to be run and I am going to do get a knit over here so this is where our docket will be created so if you take a look if I go back you can see that the dot git has been initialized over here and now if you've never pushed up a GitHub repo you can hit new over here I'm going to choose myself I'm going to call this full stack admin and I'm just going to create Repository and over here I'm going to follow these rules except I'm going to ignore add readme I don't want that so I'm going to do get a knit which I already did I'm going to commit I'm going to remote add origin I don't need this Branch to be Main and I'm going to push so just copy this part right here not my not my repo but your repo so I'm going to go back to my code I'm going to do git add Dot get commit I'm going to say init commit like so so that's just a comment and then I'm going to paste what I had and I'm going to push origin master and once you have that you can go back to the repo refresh it and now you'll be able to see that we have our repo so you want to make sure we have get ignore and the dot EMV doesn't exist over it here same with server the dot EMV does not exist so everything is perfectly done now and before I fully deploy I want to do one thing I want to show you guys how our deployment is set up so this is pretty simple in a real production application this diagram would be a lot more complex but I want to show you guys what's going to happen so here this is kind of what we just did so basically you have your computer with code we had the local environment variables stored on our local machine but when we push the code to GitHub we're not pushing the node modules or the environment variables into our GitHub and then from here this is the part we haven't done yet but what we're going to do is we're going to set up a server and that's going to hook up to the server folder that we had so we're creating a web service for our server and here on render.com we're going to be setting our own environment variables that will be different from our local environment variables same with the client we're going to set up our front end we're going to use the same repo that we just used and we're going to set up our front end environment variables as well over here that will allow us to call apis on the server because if you remember our environment variables has a link to the localhost 5001 but one that's on render.com that URL needs to be different and that's what we're configuring over here and just like usual This Server is going to be talking to database so these will be communicating and this is a general gist so if you want to enter if a user wanted to use your website they would go to this URL and this URL will be interacting with both of these right here and it all comes from the GitHub code so hopefully that makes sense all right so now we're on render so I already logged in you might see a different page over here but you want to go either to new or you can click new web service that's what we're trying to look for so the web service is going to be our backend we do need to have our backend first and here we need to connect our GitHub I'm going to connect my GitHub and I'm going to select just the repository I want so full stack admin like so that's the repo I want and we can just keep it as read access only and once we have connected we're going to hit connect over here and here I'm going to call this uh let's say full stack um I don't even know admin backend okay we're going to choose a region where it's closer we're going to make sure since we used Master that's going to be the default and the root directory so the root directory let's take a look at our repo our root directory for the back end is going to be server so this is going to be where our root is so I need to write server for this one we're going to choose node and for our build we're going to do npm install so that's going to build our application because we need to make sure the server on render is actually installing all the packages and the start command is going to be npm run start here we're going to choose free there's a lot of different options if you want to increase but here we're going to do Advanced and here we're going to add environment variables and what we need to do is we're going to be adding the URL so if I go to server and Dot EMV we're actually going to use this same URL over here and that should be good so URL and then from here I'm going to add another environment variable and this is going to be port and we're going to set this as 5000 and one so we have a URL and then port 5001. and we can just leave everything else the way it is and so here we're just going to create the web service and now by the way while we're waiting let me show you what's happening so this is going to be where our logs are so essentially what you would normally see in your own terminal this is the log section so you can see this is our logs and we can see our events if you click on deploy it's going to show you what's happening right now and let's just wait for this this can take a little bit of time since we're using the free tier this takes a bit longer and so if you run it like that you're going to encounter the same problem I have over here and I keep forgetting so if you go basically what it's saying make sure your current IP address is on your IP's whitelist so that means you want to go to network access and you want to be able to add the IP address relevant to this so what you do is you go to connect and we're going to add these three IP addresses so the way to do that we're just going to go add that IP address you need to add all three I'm gonna add this as well and add the third one as well I'm gonna we're gonna wait for these to finish and with that if we it does take some time but it's going to rerun and we have our server running so that's perfect so how do we check we can grab this URL and if we want to grab one of the endpoints we can do management slash admins so this will give our list of users so it's a little ugly but as you can see we have our list of admins so that is our admin backend page so now that's just the back end so now we got to do the same thing for our front end and our front end is going to be a static site so we have to click static site over here and we're going to connect the same repo in a real production app you would have these two as separate repos most likely but in our case for convenience sake we're going to have them on the same repo we're just going to set the root director as different and again root directory like I said this one should be client and over here we're going to have a build command and in this case it's going to be npm run build and over here the publish directory is going to be built so this is by default what create react app has and over here we're going to add environment variables and the environment variable we only need one and as you can see if you remember client used to be HTTP localhost like this but we're going to change that we're going to copy a react app base URL but instead we're going to change it to this space URL so the back end so we want that as our value and with that we are going to hit create static site and we're going to be taken to this page I think these outbound IP addresses are going to be the same yeah so if I add this 120 92 101 yeah these are exactly the same so it doesn't really matter and let's just let's just wait for this to finish now with that we have everything fully set up it says your site is live so now we are ready to go I can go to admin front end and as you can see all our information is loaded we can go to products this API call kind of takes a while remember I told you we're not using aggregate calls so this one takes some time if you go to customers we have our page we have our transactions we can sort by rows we can sort it we can do search we can do different columns we have our geography we have our overview daily monthly breakdown these are using the same piece of data so we don't have to reload it but if you go to admins we have different API calls perfect perfect everything is working as expected you have your application deployed and our application is finally complete I'm glad you got to this point this was a lot of work a lot of things over here I fully focused on the back end hopefully trying to get you guys to understand the complexities of dealing with backend and how you can set up your databases give you some general ideas of how you approach modeling and organizing the data as well as grabbing that information from the front end and displaying that information in nice looking charts we did everything from backend to front end now if you don't fully get and understand every single piece of it that's expected and normal but just understand we we covered a lot of what you would do at a real company these are applications that you would these are things that you would normally do at a real company like server-side pagination that's a real problem and can be very complex we have a lot of tables and a lot of sorting filtering a lot of different things with UI challenges all of that comes into play when you're at work and we have done so much I'm glad you got to this point congratulations on getting this far but yeah that was it we've covered so much in this tutorial I hope you guys enjoyed all this content this took me a while to build so hopefully you can just give me a like comment and subscribe if you haven't already there are a lot of you who are not subscribed hopefully you can subscribe I put a lot of effort into this one and I hope to see you next time

Channel: EdRoh

Views: 64,975

Keywords: EdRoh

Id: 0cPCMIuDk2I

Length: 420min 32sec (25232 seconds)

Published: Mon Dec 05 2022