Build A MERN Finance Dashboard App | Machine Learning, Typescript, React, Node, MUI, Deployment

hey guys this is Ed Rowe today we are going to be building this complete full stack Finance dashboard application from scratch application that we're going to be building today is going to consist of this beautiful landing page for this particular dashboard and it's going to consist of a lot of kpis and information that business persons can use to display their information about key performance indicators and other types of data that they need to keep track of their finances for their company and in this application we're going to be building with multiple charts and tables so we're going to be using recharge to build our area charts over here line charts bar charts another line chart and some pie charts over here as well as Scatter Plots and these charts are the most common type of charts that you would see in an application or a data analytics dashboard like this and from here we're going to see the list of products as well as a list of orders and we're going to be using data grid to display this list of information in this small little table and it'll be very easy to set up once we have a once we download data grid and then after here we're going to go to the predictions page and here we're going to have information about the revenue for the particular company and what we're going to be doing is we're actually going to be using real machine learning very basic we're not going to be using open AI for this one but we're actually going to use real machine learning with using a regression line which is like a best fit line that will display our information and show the best fit line for this particular data and using this regression line we can show the predicted information up here and it'll give us information of what the revenue will be predicted for next year so this application will not just be front end but it will also consist of a back end where we will use lucidchart to data model meaning we'll organize our data for our back end prior and then we'll be building our backend once we have built our backend and front end what we'll do is we're going to be deploying our backend to fly.io and we're going to do this all for free and I'll show you how to do this and then after that we're going to deploy our front-end application onto versaill which is also free so we're going to be using Versa for our front end fly.io for our backend and our server will be entirely hosted and deployed all for free for you to use in your profile for the Technologies we'll be using today is going to include both front end and back-end packages so the front end is going to consist of material UI for a component Library material UI data grid for our tables typescript for a language Vite for starter app recharts for our chart Library Redux toolkit for Estate Management Redux toolkit query for making API calls hero icons for our icons and react router for navigation for the back end we're going to be just using node.js as a runtime express.js as our backend framework and Mongoose for our database finally to make our predictions for a machine learning model we're going to be using regression.js to make our prediction which is a simple library to do on machine learning now machine learning can be an intimidating topic for many and might be challenging at first glance however as someone who has been learning on the side machine learning is actually not that bad and you only really need a basic level of math to truly utilize it and you can definitely utilize the power of machine learning without having a deeper understanding of all the math that is going behind it and if you're truly interested in learning machine learning brilliant.org today's sponsor has got you covered now brilliant.org has a ton of courses on both math and science and computer science and they have in-depth courses on neural networks so you can learn how neural networks work with their visual program and the platform itself is very engaging and fun because they have courses designed to be both stimulating with lots of visual aids and interactive exercises that help you learn by doing instead of just reading text so you'll never be feel bored or overwhelmed as you can learn at your own pace and track your progress along the way furthermore if you don't want to learn neural networks brilliant also has you covered in other areas such as computer science they have a ton of course on computer science designed for both beginners and advanced Learners and you'll find courses that can suit your needs and level of expertise if you truly want to go deep into machine learning you can learn the mathematical side and they have the mathematical Basics that you will need for machine learning so we have math we have geometry we have statistics and probability we have data analysis as well so a lot of this can contribute to helping you learn what machine learning is truly about to try everything brilliant has to offer free for a full 30 days visit brilliant.org and row or click on the link in the description the first 200 of you will get 20 off brilliant annual premium subscription and finally just as a reminder this app is created for both beginners and experienced developers and explain everything step by step with all my apps this website is completely designed all by me so you're free to use parts or even the whole project as your portfolio now I hope you enjoy this application let's get started so the first thing we're going to do is we're going to be installing node.js so node.js is an open source server-side JavaScript runtime built on the Google Chrome V8 JavaScript engine basically that means that you can run JavaScript code on your computer instead so go to the link in the description and you can install node.js and then from here we're going to install npx so npx will help us install some npm package binaries and so if you go to the link in the description you can run npm install G npx and then for our text editor we can use Visual Studio code this is probably the most recommended text code editor that you can use but there are other options if you want to use those but Visual Studio code is the prime code editor that most people use and then from here I'm going to open up visual studio code and I'm going to open up the terminal and I'm going to write npm create Vite at latest and it's going to give you some commands over here so I'm going to call this client because this is going to be the front end of our application I'm going to choose react and this app we're going to be using typescript so we're going to install that and then we're going to go to CD client I'm going to run npm install and now I'll just wait for that to finish so Vite is a build tool and development server for modern web applications so basically it is like create react app if you ever heard of it but Vite is much more faster when it loads up the development server it doesn't mean that the deployment will be faster if you use this it's more that when you're running development Vite is very fast create react app can be slow and can be very slow when you have big applications so a lot of people like Vite better but create react app has a little more boilerplate and a little more features in it but we can do the same thing with fight so we're going to be doing that today and then from here I'm going to open up the extensions which is this particular one it says extension over here I'm going to close this and we're going to be installing some extensions so the extensions I already have installed but the ones I recommend is es7 react Redux react native Snippets but basically this will give you shortcuts for writing and setting up your boil code for each component that makes it easy and then I'm going to install eslint which will help us lint our code as we need and give us significant improvements in terms of develop player efficiency because it tells you if you have any kind of syntax errors and then finally we're going to go down I'm going to show you that you should install prettier eslint so that your code will be automatically pretty verified basically it'll format the JavaScript typescript code as needed and then from here we're going to go to Google Chrome or whatever browser you want and generally they usually have the same type of extensions but at least for Chrome we have Redux Dev tools so this will allow us to see the state in our Redux store so this is very very useful that a lot of other State Management libraries don't have and also I want you to install pesticide actually this is optional if you want to take a look but basically it'll give you the layout of the page so if I click on it actually doesn't work on this page but basically it'll show you the way that elements are laid out for CSS purposes so if you want to install this you can and then next thing we're going to do is we're going to go back to our Visual Studio code open up our terminal again and I'm going to write npmi react Redux and at Redux JS slash tool kit so this is our state management library with react Redux and reduxjs toolkit which is a wrapper around Redux that makes our lives very easy so we're going to be installing those two and I'm going to install react router Dom as well which will help us navigate give us navigation for our website and then from here I'm going to do mui material at emotion slash react at emotion styled at m-e-y slash icons Dash material so all four of these are related to material UI so basically this gives us all the material UI components add a motion gives us some of the ways you can Style the material UI library and at mui icons material gives us icons that material your high material UI has and they have the most icons and they're all free and then the last thing we want to install is going to be mui slash x dash data grid so this will represent our material UI table which is very very powerful so we're going to be installing these just to note that we're going to be installing more packages as we go along but I'll be able to explain those better as we use them but these are the things we need at the beginning because we're going to be using them very soon and one more thing we need to install for the packages is going to be npm I slash D so Dash D represents Dev dependencies so these are dependencies that don't need to be in the final build but you can place them while you're doing it's basically used for development so these are you separate these from those packages so we have a more efficient final library because it's just smaller so you're importing less libraries in the final build and here we're going to import the types for react Dom so what this is actually representing if you're new to typescript we have types we have types library for you know relevant packages so basically react router Dom needs some extra types so we can use it with typescript so sometimes you need to install the relevant package for a specific Library when you're using typescript and once that's installed I by the way I cleared up my terminal I'm going to open up our browser directory now you're going to see dot vs code for my specific one this is for my settings that I use for recording but you don't need this so basically we're going to open up our client Library folder we're going to go to source and we're going to be deleting and modifying a few things so the first thing we're going to do is we're going to go to app CSS we don't need any of this so I'm going to delete that I'm going to go to app TSX afterwards I'm going to close our terminal I'm going to delete everything inside our div class name app I'm going to change this to lowercase app over here I'm going to remove this use States and I'm just going to delete all the Imports right here so this is just to clean up a few things that we don't really need and then if we go to index.css I'm just going to highlight everything and just delete it for no and then from here we're going to go to Google fonts and we're going to be adding our own Google font that we want so it's in the link in the description we're going to be searching for enter so enter is a particular font that looks nice in it's one of those general purpose fonts that are very good so we're going to choose 400 600 and 700. so we're going to choose those three I'm going to click at import I'm going to highlight everything inside the style copy that I'm going to paste it over here and so that's how we can use our enter font then from here I'm going to write HTML comma body root comma dot app and we're going to set this to be height to be 100 percent width to be 100 percent font family to be enter and I'm going to set this to Sans serif like so and give this background color of hashtag one f2026 this is a color I just decided will look good for our application so basically what these Four Tags or select their CSS selectors are doing is we're going to set everything to a height width of 100 so we take up the entire screen and I'm also going to set the font family for all of them as well as the background color all right then from here we're going to set up our es link configuration so now we installed vs code extension for eslint we still need to set up the eslint configuration for this particular project so what we're going to do is I'm going to just close this out I'm going to open up our terminal and I'm over here I'm going to be writing npm I Dash D so it's a Dev dependency again because it makes sense that we don't need this for the final build and I'm going to install eslint and I'm going to install eslint config react app and basically what this is doing if you see if you know react app this is basically setting the create react app initialized eslint default settings into light so we have default settings for eslint so we don't have to mess around with ESL configurations you can customize it all you want but I generally like create react apps default syntax configurations but if you're on your own project you can change it to whatever you want and then from here while we're installing this I'm going to open up the Explorer I'm going to go in and in our client folder I'm going to write Dot eslint rc.json and in this file I'm going to create curly bracket brackets and I'm going to say extends react Dash app and I'm going to save it so this will now give us basic defaults for eslinting so if I go over here and I'm just going to write const or let's say hello and I say function like that we now have eslint telling us we cannot find this name so this is basically eslint working at its core if you didn't have this it would just be like three dots it'd be harder to see but eslint gives us more warnings and helps us with our efficiency and then from here I'm gonna erase the hello and what we're going to do is we're going to set up our EMV file so our environment environment variables and the only thing we'll we're going to really need for this is going to be the URL to hit the backend server which we haven't created but we're going to set up just the URL to it so in our client folder I'm going to create a new file I'm going to call this dot env.local like so I'm going to call this Vite base URL like so and call it http slash localhost colon 1337 and I'm going to save that and then because for whatever reason typescript doesn't like these environment variables so what we're going to do is we're going to go to our tsconfig.json file and we're going to look at compiler options and Below everything I'm going to write types colon in square brackets I'm going to say byte slash client so this setting will help us use this particular environment variable without it giving errors so for whatever reason if you don't have this typescript we'll yell at you next thing we can configure is the path the pathing for imports so for example if you see the Imports over here we see it dot slash so these are called relative Imports but we can actually set up more absolute Imports that are easier to digest so let's say you have some kind of import some component from dot dot slash dot dot slash dot dot slash and then you can say components slash like index.js so if you take a look at something like this this can be very very hard to read and it just kind of like doesn't it's not very clean so instead what you can do is we're going to make a configuration so that we can have it at instead which starts from The Source directory and we can find our particular file from there so this will help us set a path that are much more readable and easier to write so I'm going to erase that for that was for demo purposes so what we're going to do is I'm going to open up the terminal I'm going to write npm I Dash D so it's another Dev dependencies I'm going to do at types slash node and this will install like the typing for for a package we kind of need and then from here I'm going to go to thevite.config.ts file and I'm going to import path from path like so and then right here I'm going to resolve I'm going to set alias I'm going to write square brackets find at and then comma replacement I'm going to set this as path dot resolve underscore which is two underscores their name comma source so at types node kind of helps us to use import path without typescript yelling at us and then this will basically find anytime you see the at in the Alias and we're going to replace it with the current absolute directory starting from source so that's how this is basically working so if you don't fully understand it's okay but we'll be using it as we go and then if we go from here we go to tsconfig dot Json and we just have to set up one thing and we're going to say paths and in curly braces I'm going to write at slash star colon square brackets dot slash Source slash star and from there our padding configurations will be fully complete so if I wanted to I could change this to at instead and it'll still lead to the correct location so now I can if you ever hit a command or control depending on your machine control click and then you can go to that particular section if you have intellisense on and you can do the same thing with index CSS so before you can do this but now with the configuration we just set up we are able to do that now so I'm going to save that all right with that installed out of the way now we can set up material UI and the theming configuration so once we have the theme configurations we can use different colors but before that we need to set that up so in our source directory I'm going to create a new file I'm going to call this theme dot TS so now I want you guys to save some time go to the link in the description where I have the theme file and we I want you to copy everything over onto this particular page so if you have the link in the GitHub description there is a file over here I want you to copy and paste it because a lot of this is kind of like a lot of manual labor if you're just if I was just to type it out you guys would might get bored but I will explain what's going on over here so basically we have something called tokens like in the design space they have something called design tokens but basically they just represent different colors of variations of different Hues of the same color so basically you choose three or four colors essentially and you have different variations of Hues and different shades of that particular color so you have 100 through 900 so it's very useful to have multiple Shades and these are like you can just choose one color and you can have different ways of automatically generating the rest so for example you can use Tailwind Tailwind shades which if you take a look command K command G so if I take a color like this I'm gonna I'm gonna do it over here command K command G and it'll automatically generate colors of different shades for you if you need different shades because it's very useful to have different shades of a specific color for various use cases because you don't always want just one particular shade of a color you need variations of it so it's very helpful to have all that so here I have Grays you always want some like shade of gray as well as a light green color and then yellow and purple I call them primary secondary tertiary it doesn't really matter to naming and then you can set background as this is the separate one I call it light in main for like the background colors and then from here this is where we set up the material UI theme settings and the way you set up the theme settings is just create an object and over here we can set the palette over here and we have primary secondary tertiary we have gray and then background so essentially I'm just destructuring tokens up primary so for example if I go back up right here it'll just grab all of these and then place them oops sorry place them over here in the primary palette so if I wanted to use this you can use use theme from Material UI and then you can grab the primary and then choose whatever from 0 to or from 100 to 900 colors from there and then you also need to set a main and light so you have default like if like material UI has like default coloring settings so basically you want them you need to overwrite those by setting the main and the light like this and then the same with secondary we're going to do the same thing we're going to set up the main and then tertiary we don't really need to do that it's mostly for primary and secondary you just need to set those default colors so the components you have less styling to do and then gray same as usual and then you do need to set background with the default and then you can I have added light so this is my like custom one but this will set material UI background default so that's why you really need to set that one and then finally you can set the typography I have the same basically same font for everything it's just the font size will be different so this is basically the default and then we have different font sizes for different uh variations or different header settings for the fonts and I also have some different colors for different ones but this is just basic customization and you can just you can style it in the component itself so now that we have material UI set up we actually have to set up some configurations for typescript for material UI because we're doing a little bit we're extending the theme settings a little bit by using dot dot tokens primary so that by default material UI theme has their own types integrated into material UI but we are extending that with 100 200 300 things like this so this doesn't actually exist like these numbers don't actually exist in the types for material UI so we actually need to expand our theme settings so I'm going to create a new file I'm going to call this expanded Dash theme dot TS and in here I'm going to import palette slash palette color so so like that and I'm going to write slash Styles slash crate palettes and what we're going to do is we're going to do declare module and I'm going to copy this entire thing that I just wrote and put it in double quotes and then write interface I'll explain what all this is doing it's a little tricky to understand but it's not that bad once you know what's going on and in here I'm going to put key colon number colon strings like so actually singular and then finally I'm going to do interface palette I'm going to put tertiary colon palette color all right so what is happening is that we're grabbing the types in create palette so if I take a look all right so if I take a look that palette color and I do alt click or sorry command click we can go over here we see expanded Dash theme which is the current file but we can open up create palette.t.d.ts so this is typescript settings that material UI has created so if I click this and I click interface and I double click this particular file we can open this up so now we're looking into the type settings that material UI has created so if I take a look at palette color these are the types that they have configured so light main dark and contrast text if I go into theme over here we have Main and light configured but I also have 100 200 300 400 all of these colors being added to this particular primary but in here we don't have that so what we're doing with the expanded theme is we're basically extending it with interface palette color I know usually when you're using object-oriented programming you could use usually extend it but by default with typescript you don't really need to set that for this so essentially we're adding a key number and string like so so this represents any kind of number and this has to be a string and over here with the interface palette and if you take a look now let's control click palette instead if we go over here we go to interface palette we can check over here we have primary secondary but we do not have tertiary and that's why we set up a tertiary so we're extending tertiary to have a palette color as well because our theme is including the tertiary gray and background already exist over here so if you take a look gray and then background these already exist I won't go over them but basically everything is now set we expanded our colors and also I believe we do have to keep this imported I'm not exactly sure but I'm just gonna do eslint disable next dash line and it won't yell at us I'm not exactly sure if you have to keep the import but it was working like this so that is mui typescript and the last thing we're going to do I'm going to close all of this I'm going to in this theme file we have theme settings but we're not actually using them anywhere in our component so if I go to app.tsx this is where we're going to be using the theme settings so what I'm going to do is I'm going to say const theme I'm going to use use memo over here so now by the way you want to make very good use of the intellisense that pops up when you write something so when you click on it it's going to automatically import while you're typing over here so it's very convenient but also helps with preventing bugs so you have it written correctly so it's a very developer efficient way of doing things so make sure you use those and then from here I'm going to create a callback function I'm going to create call this create theme and I'm going to import mui material over here from create theme but it actually needs to be slash Styles over here so I'm not exactly sure why it doesn't import that and then over here I'm going to pass in theme settings so this is the actual theme we're passing in so create theme comes from Material UI and then you need to pass in theme settings over there and then because we're using use memo I want to make sure it only happens once on initial load so that's why you can do this there's nothing in there as well and then from here inside our div I'm going to set up theme provider and then you're going to get multiple theme providers over here but the one we particularly want is going to be from mui material so right here I'm going to close this and inside our theme provider we're going to pass in theme of the theme we just created and then finally inside our theme provider we're going to write CSS Baseline so this is going to reset the CSS settings to default that material UI has set so all we have to do is pass that in and it'll give us a nice CSS reset basically it just removes all the defaults of styling on the browser if you ever heard of it but basically it gives us a nice default to start with and this theme provider over here gives us our theme settings so now anytime we have any kind of component inside here we're going to be using that particular theme so I'm going to save that and with that material UI is now set up for us to use all right with that we have configured a lot of different things now actually I want to run our app to make sure everything is working now I probably should have run the app a little earlier so you guys can check what's going on but let's do that now so inside I'm just going to write hi just to check if we can see some something visual so I'm going to write npm run Dev in our terminal and we're going to have that loaded up I'm going to alt click over here and it's going to open up our page and then we actually do have hi it's just a little hard because the default color is going to be kind of like a black color on top of an already dark color but we'll be adjusting that as we go so everything is working make sure everything is working if you have any questions by the way I set up a new Discord so if there's a link in the description below to my Discord so if you have any developer questions please go into the Discord and ask questions there not in the comments I'm not going to reply nor on the GitHub I'm not going to reply to those because I don't really go on GitHub that much I go on my Discord if you have any questions related to the apps you can go to the community if I don't have time to answer your questions other people can't so I highly recommend doing that all right with that I'm going to close the terminal keep that up and then from here we're going to set up our router navigation so what I'm going to do is above the theme provider I'm going to write browser router and I'm going to use intellisense to import that close that I'm going to cut this and paste it on the bottom of theme provider and inside here I'm going to get rid of our high now I'm going to create a box component which comes from Material UI and I'm going to close it the cool thing about box component from Material UI is that you can set as property CSS properties directly into the component so sometimes you just need the quick default setting for CSS so we can just pass in CSS props directly so it's very very convenient I would say it's a good alternative to Tailwind if you guys like tail one this is a pretty good alternative in my opinion I I love material UI because of the amount of functionality it gives Tailwind excels in certain areas material UI is very good if you have more internal dashboards or internal apps that require much more functionality sometimes and less about you know custom styling and detail so material UI is very good it has a lot of features for those things anyways basically I'm setting some default settings like this one R8 so padding is basically one REM to the top two REM to the right for REM to the bottom to REM to the left so basically I'm setting some padding and by the way I'm using REM so this is root em basically it's based on the default it's basically based on the default like font size of the browser so REM is probably the best way to set padding and sizes unless you need like an absolute value so REM is the most recommended way to do the styling anyways from here I'm going to set up routes like so which is from intellisense react router Dom so make sure it's grabbing it from there and finally inside here I can set up a route and that should also be imported [Music] actually this is self closing and what we're going to do is for now we're going to set path is equal to slash and we're going to set element and we're just gonna for now we just want a placeholder we're going to say div and we're going to say dashboard page just so we can see what's going on and then we also are going to set another route and this app is going to only have these two routes so this is going to be the predictions page and we're going to have an element like so and I'm going to do the same thing with div and I'm going to set predictions page and then make sure you close the route as well so we have these two pages now if you can see the very hard text to see we can see dashboard page over here on the right because we have I saved it and it's reloaded and Vite is showing this and above our routes we're going to add a component called navbar we have not created so we can't use intellisense yet and I'm going to import navbar from at slash scenes slash nav bar so this is going to be the location of our file and we just haven't created it yet so from here we're going to create a folder structure so now this app it doesn't require it doesn't have that many components to it or too many elements or different parts to this application so our setup for our folder architecture is going to be relatively simple so when you create folder structures and folder Arc architectures you generally want to keep it as simple as the app needs now a lot of people try to predict future hand to see if uh you know if we want to scale this we want this to be infinitely scalable trying to build all these like fancy folder architectures that is not the way to go because if you try to make a huge scalable you know folder structure you're going to have a headache on your hands if you have to deal with you know trying to mitigate all your scalable issues when your app is very very simple so in our case we're just going to have let's actually look at our final application just give you okay I don't know there's some kind of let's close that actually that's I don't know what's going on but basically this is our final application so we have basically just this one dashboard page and we might be able to split this up into it like different folders and different files and then if you go over here we have predictions so this can be a separate page as well and then we have this prediction as well so we have these basically two pages so all we have to do it makes most sense for me for any kind of like UI based software is that you want to separate it based on the UI and the pages it makes the most sense to me and it generally like each page can't be so much code that it's hard to manage so separating it based on page makes a lot more sense because when you have new developers that come in all they have to do is open up and fire your application they can see they can see the pages and see hey this the folder structure is architected in the same pattern so you generally want to do that because it makes a lot more sense I mean it's up to you depending on your application you might have very specialized needs but sometimes just keeping it simple having it page that will allow people to find things very easily so they can look up oh this is the dashboard page I'm going to go to the dashboard folder this is where I find this particular component I want to work on this component specifically so it makes a lot more sense to do that everyone's so worried about all these fancy architectures like ducks pattern feature based patterns or you know the default react pattern none of that none of that matters really it's just you just need to know the proper way to organize folder to make it easy to find that's the purpose of the architecture not all these fancy buzzwords so just keep that in mind so for this app all we're going to do is we're going to create two maybe three folders actually so components is where we're going to have components that can be reusable in multiple locations we're only going to have a few but this is basically components that we're going to reuse throughout our entire page let's refresh this so so we can have components that can be reused throughout the page it's going to be like it's going to be non-ui based and then from here I'm going to create a new folder I'm going to create call this all right it's kind of glitching so I'm going to call this scenes over here so now scenes represents the pages we're going to have so all we're going to do is we're gonna I'm gonna create a new folder and I'm going to call this dashboard dashboard page right here simple as simple as day so anyone who comes in they're going to immediately know where to go and then you have predictions same thing with the page also sometimes I know everything's not page based sometimes you want to create some art navbar navbar exists on all pages so that makes more sense we can also put navbar in components but I feel like putting it in the scenes remember there's no strict way to do things and also one thing you do know when folder archa structure is that these components and scenes they represent the UI basically like the UI layer you generally want to separate that from the data because a lot of times data can be reused through multiple pages so it makes sense for scenes and this new folder called state to be separated because State and data or yeah state is basically data and data is reused throughout the entire application in various various ways so it needs its own folder structure and architecture or hierarchy essentially so I highly recommend separating State because that's what most most people do all right and so there you go those are all that's this is a general layout that we're going to have if you have like a bigger application you can have much more scenes maybe if the dashboard becomes way too big then you can Nest it into dashboard but I highly recommend try to keep your full destructures flat as possible meaning you don't go too deep if you go too deep if you have like if you have to constantly like go down into different folder it becomes such a headache to navigate around so keep it as flat as possible without it being like a super long line if it's like if you have a thousand files and Source it's going to be hard to navigate that too so you want to make sense and have it as flat as possible but split it out as needed okay all right anyways enough about my ranting about architecture now let's go to scenes we're going to go to navbar I'm gonna close this so we have more space I'm going to create a new file I'm going to call this index.tsx and here is where I can use the vs code extension that es7 Snippets I'm going to write TS or at afce so if you click if you write TS it's going to pop up and you click on it you're going to get this default boilerplate for components so it makes a lot more sense however I'm going to click these index I'm going to do command D or control D depending on your machine and I can be able to grab all of these I'm going to call this nav bar like so so we have our navbar component and we have our types over here all right and then from here I'm going to make some imports so I'm going to do I'm actually going to get rid of the react we don't really need that we're going to say use State instead I'm going to close this make sure it's singular like that and I'm going to import link from react router Dom so notice I'm not putting the curly braces because we can use intellisense to grab it so it'll automatically grab it from react router Dom like so and then from here I'm going to import box component from Material UI again I'm not putting curly braces so I can use intellisense because it doesn't register intellisense if you write the curly braces first and then from here I'm going to grab typography and use theme okay and then from here I'm going to grab the palette and we're going to grab it from use theme so essentially use steam is grabbing the theme settings that we've originally created so the theme over here we can grab these palettes so by grabbing use theme palette we're grabbing essentially this object over here so if I wanted to use this I could say palette dot primary dot main or a hundred whatever depending on the color we want and we can then use the color for any use so that's what this is for all right from here for the nav bar we're gonna erase all of this I'm going to create a box right here and in here I'm going to do display of flex and then do justify content and we're going to do space between and align items and we're going to do Center so now I'm going to save it now I want to tell you guys what this really is doing because a lot of people struggle with flexbox but this right here is the most common flexbox you will ever have to use so this display is equal to flex and then we have Justified content of space between a line item Center so basically I have a link in the description if you want to check this out but basically this website will show you kind of what this is doing but the main thing you want to look at is justify content and we see space between meaning the items are going to be aligned with spaces in between whereas space around will leave a little Gap but space between is the most common use case sometimes you want to do Flex start Flex end sometimes you want to Center but space between is the most common and then now align items Center is also the most common thing you're going to do to align things vertically so by doing this you can do line item Center so now with justify content space between which has everything spaced out as much as possible and then Center which will align things vertically in the center this will provide that aspect so if we look at the final build over here we can see that over here with this nav bar we have two sections I'm going to turn on pesticide like I mentioned before we have a box outside here and we have a div element on the left side another div element on the right side and we're doing space between to give this these guys a little space and then also if you see this it's hard to tell but it's vertically aligned in the center so that's what these guys are going to do and to be honest we're going to be using this so much we're going to separate this out into a separate component so I'm going to go back over here close this out because we probably don't need that and then I'm going to go into our components file because this is our components folder and this is a place where we are going to use reusable components so Flex between is going to be what we are going to create and we're going to dot TSX so in this one we're not going to use TSR AFC because this is going to be a styled component so if you remember we installed a motion and style components is part of that we can style we can have components that are automatically styled and we can share those stylings across different components and I'll show you how we're going to use that so we're going to import box so mui material so we're going to import that and then I'm going to import so styled from at mui system so make sure that is correct and then from here I'm going to do Flex between I'm going to do styled box like so and this is basically the syntax if you want the style component and then from here we can actually just let's go back to our index.tsx close that out so there's more space I'm going to grab this I'm going to paste it over here however it is not in the correct format because this is equal sign whereas this is in an object so we have to change that to a colon I'm gonna hit all the way over to the right and I'm going to hit the column or hit create a comma and then I'm going to export default Flex between like so so now we can reuse this everywhere and we can still have the same functionality as box so if I go back to actually make sure you save app.tsx I'm going to close that out as well as Steam so I'm going to go back to our index.tsx and then from here I'm actually going to change this I'm going to grab both of these guys I'm going to do Flex between and it's going to pop up in the intellisense with our at Route and then we don't need to write this anymore and then from here if we wanted to we can do stuff like give it a modern bottom just like we did with our box so MB is a shorthand for margin bottom I'm going to set that to 0.25 and set padding to be 0.5 REM and zero REM so if you know that we have a shorthand here as well you can put four two or one of these so if you have four of them like I showed before it goes in a clockwise fashion starting from the top whereas if you have two you're gonna have padding vertically and then padding horizontally so that's why that's how you do it if you want like a two section and then finally we're going to set the color to be palette so we're grabbing the palette we're going to use gray 300 so if you remember what we did with all the typescript and setting up the theme this is why we are using it so now we have access to these colors anytime we want so it's pretty simple so what we want to do is we're currently not using our navbar so if I go back to app.tsx actually we do have our nav bar so so let's go back to navbar and let's actually write some text over here and say hey we can see that we have our nav bar so right now there's not that much going on we just have the text in between but now we can add different things to it so the first off I'm going to add selected and I'm going to set selected as well so this is going to be the state determining on what page we are on so that we can highlight the text for the page that we are currently at and I'm going to start with dashboard so we first start the selected page going to be the dashboard page so from here I'm going to say we start with the lefts side and then from here I'm going to create Flex between just like I did before which is very useful and I'm going to do a gap of 0.75 REM so now if you know flexbox putting a gap allows us to space out elements in between our Flex items so Gap is extremely useful for those purposes and what we want if you take a look at our final build is this little icon so this icon is provided by material UI icons and you can look at the link in the description below again I know there's a gajillion links that I have but material UI icons has so many icons that you'll find something and what I'm looking for is going to be picks so this is what we're looking for and then you can go and click on it and you can just copy it straight up paste it in over here and then we can use this directly so if I do picks picks icon over here I can do a self-closing tag and you'll be able to see this so if I go back over here and actually we prop yeah there you go I hit the one thing I do hate about Vite is that sometimes it doesn't reload and doesn't refresh as I think it would but it works well enough I suppose and then from here we can do SX so if you're new to material UI icons SX provides color in our components so I'm going to do font size and I'm going to say 28 pixel so when we want to change the icon size This Is How We Do It if I save it as you can see it got a little bigger and then from here we're going to do we're going to use typography so typography is anytime you want to use um specific font type and I'm going to set the font size to be 16 pixel and I'm going to say Finance sear so that's the name of the app and then we're going to have that and then from here we're going to work on the right side now so I'm going to write a little comment it's very useful to have some comments in there just to designate certain sections of the UI so you know where to go and then from here we're going to do Flex between I'm going to do a gap of 2 REM like so and inside this Flex between I'm going to have two boxes so I'm going to create a box here and another box there so we're just going to have two sections for different links so if we go back here we have a flex between this is basically the right side and as you can see let me open up so we can see our pesticide we can see that this is two segments over here so we want to imitate that width right here and inside our box I'm going to do SX I'm going to write and colon hover so this is a pseudo selector so one cool thing about material UI is that we can have a pseudo selector directly on the component itself so we don't have to do anything crazy and we can just pass in palette primary 100. it's just you have to be aware of this syntax which is and colon hover basically that represents whatever your element you are currently on and we want to select when it's hovered so over here inside I'm going to create a link and this is from Material UI and this allows us to navigate to different pages this one's going to be dashboard and as you can see it's telling us we're missing some props so we're going to be adding those so 2 is basically where this URL takes us so this is going to represent the dashboard so this one is just going to take to take us to where it currently is and then when you do on click we are also going to set selected to be dashboard like so so this States right here set select the dashboard this is more for it's not for navigation purposes but it's more for so we can highlight the text when it's selected so the way we do that is we can add a style tag and this is because react router Dom is this is a react router Dom component not a material UI component so that's why we're not using SX we're using style which is for react router Dom so over here I'm going to set the color to be if selected is equal to dashboard I'm going to say inherit so it's just going to grab the color that it currently is which is primary 100. from the parent and then I'm going to do palette Dot oops not that palette dot Gray 700. so this will give us primary 100 when it's selected palette gray 700 when it's not and we're going to set text decoration to be inherent so it's going to grab the same styling that the top box is and this provides us a proper text decoration for dashboard all right and then from there we're also going to just we're actually just going to copy the entire thing over here and we're going to paste it for the second one and we're just going to modify a few things so this should be predictions and I'm also going to set select it as permissions as predictions as well and actually I should have just selected all of these I'm going to say predictions over here so these two are pretty much identical and as you can see we have dashboard and predictions so if I go over predictions that will take us to the predictions URL and dashboard will take us to the home page so that is basically our simple navigation that's it this is all we need this one section will give us all the navigation as well as what we had in our app which determines what elements are going to be displayed either type over here and with that that's pretty much our nav bar fully complete so we just have two divs over here with separation and this is just for display and this is for navigation so now if we go back we're going to go to app.tsx and now we're going to be working on our dashboard page all right so the first thing I'm going to do I'm going to get rid of this placeholder I'm going to do dashboard which is a component we haven't created so I'm going to import dashboard from at slash scenes slash dashboard colon so I'm going to save that I'm going to go over here in our dashboard I'm going to create a new file I'm going to call this index.tsx so by the way if you haven't noticed with the nav bar like this we are basically getting the nav bar when you have index.tsx so we don't have to actually specify the file if it's called index so just be note that if we call it index we don't really have to mention the file on the last part of it so here in our dashboard let's go over here and let's fill this out so we're going to do TS or afce and we're going to fill that out we're going to add dashboard like so and so if I save this we can see the dashboard is now updated it's still like kind of like a black color so if I just do this let's just do box and my material we can just do color and we can set the palette to be that using use theme we're just going to grab our color and we're just going to paste the palette dot Gray uh not 300. so if we do that this is now a color of white but this is not where we're going to use this just to demonstrate that our dashboard is currently working as expected and I'm going to erase import react I'm going to save this and keep this all right so now this is the dashboard so if we take a look at the final build we can see on lighter screens I'm going to hide this for now on larger screens we have this very complex layout so now a lot of people have questions on whether you should use flexbox or grid now flexbox is good for one-dimensional layouts meaning it's one direction for something like this this is perfect for flexbox because it's just One Direction so it's horizontal or it can be vertical but if it's both horizontal and vertical and you have maybe like a two by two box this is even in those cases grid is much more cleaner and easier to use once you have the setup and once you have the understanding it can be a very helpful tool to use instead of flexbox and especially something like this where we have very asymmetrical situations and there's like different places where everything's going flexbox is quite difficult and it's going to add a lot of like verbosity to your code so instead we're going to use grid now before we go and Implement CSS grid let's actually discuss CSS grid a little bit so if you go to this cheat sheet which is a link in the description below we have a lot of little attributes that we can put for our CSS grid so on the container component for like the parent component of the div we can have a display of grid and we can change a lot of these things depending on what we want so the most common thing that you would use for grid is going to be grid template so these are called Auto grid basically what it's basically doing is if you want a grid template of three by three you can just do repeat three comma and then the size of the grid unit that you want so if you repeat three you have three sections and then each of them are going to be 12 pixel or you can do auto if you want the rows to be automatically placed so these are like different settings that you can do and this is very common for more more symmetrical type layouts and it's very convenient so if you have like two-dimensional grid but it's kind of symmetrical for these scenarios this is very good for those grid Gap is like a gap that we use so that's essentially the same these these attributes are very similar to what you would know for Flex so basically it'll determine how the grid is basically aligned so you can just use these and you can look at the cheat sheet for those and then the grid column grid row you can specify if you're using something like this grid template maybe there's a section on maybe like the third one you want that to be two units vertically instead that's how you can specify with grid column and grid row you can determine how long the grid is specifically starting like grid column one basically it starts from one and it ends at the third unit so that's why this one is two if you do span of three it's going to take three spots so on and so forth so you can take a look at all of these now the only thing missing is actually grid areas so this cheat sheet doesn't actually have grid areas because grid areas is very special so when you see a layout like this one so this layout is very complicated and has very specific scenarios you can use grid template columns and you can use grid like specifying how long or how minutes each grid item takes however there's a better way to handle this with grid areas so grid areas is a very useful property for setting up very complex layouts so we have something called grid template areas for CSS and what we can do is we can actually manually input how we want the layout to look like so if you look at something like this grid template areas this will give us the entire first row would be for this particular element same with b c c BCC so B would be this first one cc would be the other two and then we can change this and we can see all the B's right here would represent this section A and then CC like that so grid template areas is very good for something like this and we can also add like a DOT if we want nothing in there so we can have a weird layout like this now it doesn't show you but we also sometimes need to set the grid basically like how many columns we want and how many rows so we're going to be doing that for our layout so for something like this it's better to show you so let's get started with that so if I go back I'm gonna close this out and then over here I'm going to have a box and I'm going to be setting the settings over here so I'm just going to actually get rid of the color because we're not going to have any text specifically right here so I'm going to set the width to be a hundred percent and a height of 100 percent and I'm going to set display is equal to grid so I'm going to save that we're going to have that on the next line and I'm going to give it I'm going to give each of them a gap of 1.5 REM so everything is going to have a space of 1.5 REM and what I want over here is I'm going to go and set the next line and we're going to do SX like this I'm going to set grid template areas and I'm going to set grid template this is a variable we have not specified so actually let's go and specify that so now this is going to be a little tricky for me to display this but if I go over here let's actually move this until it splits up so we're going to do responsive design but let's first do our dashboard so if you take a look here we have a three on the first row but we kind of have some kind of weird layouts going over here so the way I did it is we're going to split this into three three units horizontally because if you take a look this these are all evenly spliced so we don't have to worry about horizontal because it's just three columns essentially but vertically it's a little different and very tricky so what we're going to do is we're going to split this actually into 12 units so right here maybe not 12 actually this is going to be 10 units so this right here this first one is going to be four units vertically this is going to be three units vertically and this is also going to be three this is going to be four this is going to be 2. and this is going to be four and this is going to be three this is going to be 3 this is going to be 2 and 2. so you can see it's a very complex layout even though it kind of looks simple but it's kind of tricky to set this up so I'm going to set const grid template and apologize for the small screen but I want to show you the actual dashboard while I do this and the way we do this is you want to use template strings make sure you have template literals and for each line we need to do double quotes like this and we're going to set by letters we're going to say ABC so a b c so if we see a it's going to represent this particular box so over here I'm going to set a again because I said this is four units like so then we're going to keep doing that ABC and then finally since this one is still four so we're going to have a b but this particular one on the fourth fourth unit vertically we're going to have a different we're going to have a different widget over there so this is going to be f so we're going to call that one F over here this will be a b c d e f so that's how we will align this essentially and then this is going to be D and then e and then F so d e f and this is going to be three units so we're going to keep doing that so T and then e is still there f is still there and then this next line is going to be where it changes so we're going to have D and then since this is F this is going to be G H I J so this part is going to be H over here and then the right side is going to be I like that and then next is going to be g h i and then g h j and then g h j and then by doing so we now actually have our grid template area however we have not specified the units so instead instead over here I'm going to go down over here I'm going to set grid template columns and what I'm going to do is to set the columns up so the columns is going to be just three so we're going to say repeat three and we're going to do a min max of 300 excuse me like that min max 370 pixel with one FR so let me explain what this is doing let me add a comma so right here grid template columns means when we're on the big let's close that one more in the large screen over here we're going to split this column into three repeated columns but the minimum of each column should be 370 pixel it should never be smaller than this because if you the reason why I set that is because if it goes smaller than that it's like the charts get too scrunched up and it doesn't look good however if we have lots of space this is not a space this is not a particular screen size where we'll have lots of space but if we did have a very wide screen we will go to one FR so that will be one complete fractional unit so that means it'll just split into three like this so we have a min max that represents that it just never goes below this and by default we're just going to have them split evenly so we want to make sure that's secured and then from here let me go on to the next line and refresh that we're going to have a grid template rows and we're going to say repeat and I said vertically we're going to have 10 units and I'm going to set this min max of 60 pixels so 60 pixels represents one unit so 60 for this one which is 4 units vertically this will be six times four if I can do 60 times 4 if I can do my mask correct so that's 240 pixel vertically so that's what this represents minimum and then we want to do one fractional unit so we split that and we need a comma and by doing so we now have our grid we just haven't set up the individual elements like we have here so we're not going to see anything but let's do that next okay so from here I'm going to get rid of dashboard I'm going to write box and I'm going to make sure we close that I'm going to say grid area and this is just going to represent a so we're just going to represent each of these elements so you just have to tag which element represents which section so this one is going to be a and for now we're just going to do BG color which represents a background color and all I'm just going to do is at zero zero zero just so we can see this actually this should be let's do FFF so this will be a white color so now we can see the box over here we just have a box in this particular section and then from here I'm going to copy this many more times until we have enough of the letters so I'm going to go through and add until we have all the way from a to J so I'm just going to continue to add that so I'm going to say d e f g h i j and voila now that we have that we can see we have our perfect grid layout so that is pretty much identical to what we see here so we have 1 by 4 units 1 by 4 1 by 3. so basically that represents the same layout over here and you can see everything else is pretty much identical so that is perfect so this is the power of grid template areas you have a full control over here with how the layout is going to look like and it's pretty easy to set up after you have this you don't have to worry about what order the elements appear you just have to know that this section corresponds with the a section J represents this last section and so on and so forth now if you know this this is not responsive you go like this we're just going to have the same level because what we have done is minimum is going to be 370 pixels so at the minimum this this is going to be 300 pixels if it's on small screens and one fractional unit if we're large enough so if you see it now at some point it becomes uh what was it one third of a split of the screen so that's how this is going to affect it same with the grid template rows 60 pixels so now this is just dependent on the screen height and so we're going to have that so that represents like the height of this thing so to do responsive let's actually do that next so to do responsive layout let's actually look at our current application like a completed application so this is our final application and if I go through a smaller screen you can see some of the width doesn't automatically adjust on width if you like decrease it manually by the way so if you take a look it's getting cut off you kind of do have to refresh but no one's no one's resizing the window browser horizontally usually so we don't have to worry about that because it's more this is because recharts you can blame recharge for this like I don't know how to fix that it's just going to be just gonna have to accept the shortcomings with that so right here all we know is that every single widget basically to make it simple is going to be one column everything is on one column length over here and some of them do have higher height as we did as we saw before like this one has a higher height compared to this one so this one's a little shorter this particular box so we're gonna have to make a count with that with grid template areas so all we have to do for this section is we're going to grab use media query so I'm going to grab const is above medium same medium screens and what we're grabbing is use media query from mui materials so this is a built-in hook that material UI has and we can specify a breakpoint say Min Dash with and we can set this as 1200 pixels once we have this we can use this Boolean to determine when we are at a minimum width of 1200 pixel or not so this will help us determine that and if it is below this particular breakpoint we can add a different condition for grid template so we can have a different grid template for smaller screens so let's let's do that so I'm actually going to call this I'm going to grab both of these actually let's just add a double cursor I'm basically modifying both of these so I'm going to say grid template large screens so that's our original but we also want a second one and we're going to call this grid template small screens like so I'm going to do the same thing except this time this is going to just be very very long but it's just going to be one long single column for each one so I'm just going to copy everything over but I'm just going to change these as we go and I'm just going to let's say I'm basically removing everything I just want a single line for everything so I'm going to continue down c c like so and note that I'm keeping like the vertical height the same so there's four A's Three B's oh I actually added four C's but it should be 3C so as you can see we have three C's over here we're going to do the same thing with 3DS D like so copy this over paste it and then we're gonna do two e's so e e and then three F's I know it's a little tedious but it makes a lot of sense then I'm going to use G so three G's and I think there's four h's those and then I J J so oops so we're going to have eyes over there J over there so once we save that we now have grid template small screens so what we do over here is in our SX component right before before our second curly bracket bracket so I'm going to say is above medium screens I'm going to put a ternary operator so if it is on if it is above medium screens so that's going to be representing when it's larger screens like this and then we're going to have a condition where we have lower and smaller screens so we're going to say grid template areas and I'm going to say grid template small screens like so and then from here I can copy grid template columns and grid template rows and we're going to change we're actually going to change this because this is repeat three columns we're going to have a one column layout so the only thing we need to set up is the width of the one column layout and in this case it's just one fractional unit because there's only one column we just have to say one fractional unit is represented of the column structure and then from here I'm going to say Auto this is actually sorry this should be not template columns this should be Auto because we're just going to have it set as Auto we don't really need the template grid all the columns is very similar because this is so simple we could just have this automatically set everything up and so I'm going to set this as 80 pixel so we want everything to be 80 pixels from the beginning so I'm going to save that and I'm going to go over here and as you can see we have our layout as you can see some have longer Heights compared to other ones which is smaller for example like this one and so it is basically following this particular grid template screen I know this is kind of long but it makes a lot more sense it makes a lot of sense when you come back to this code this will be very self-explanatory it's very simple you just have this and then you just see that the grid template areas is specifying the particular layout same with the small screens as well you can see what it's looking like in the mix easy sense if you use flexbox or if you used other type of grid this is this can be a lot more chaotic and hard to manage now that we have that set up now we have the layout completely set up for both responsive and non-responsive you can see how easy that was now we just need to set up each box and the styling so what we're going to do since the styling for each of these boxes is going to be similar we're just going to create another component over here actually let's reduce the size so you can focus on code now so I'm going to go over here I'm going to create a new file I'm going to call this stop squishing so dashboard box TSX and this is going to be a style component again so it's not a regular component it is a styled component and what I'm going to do is I'm going to go over to flex between I'm going to copy everything over and we're just going to modify it from here so I'm going to select both of the flex between and I'm going to call this dashboard box and then from here I'm going to say style box and I'm going to pass in theme over here and the reason why I'm passing the steam is that I need to use the color and the way to do this I know there's a lot of curly brackets and it's kind of hard to notice kind of what's going on but it is necessary for this particular use case so I'm gonna close it like that then we have our theme and then here we're going to change a few things so I'm going to grab background color so we're going to start with that I'm going to give this a theme dot palette dot background dot light so that will represent the background color and then we're going to have a border radius of one REM like so and a box Shadow and this is going to be kind of long but it is what makes it looks pretty nice so 0.15 REM 0.2 REM 0.15 REM 0.1 REM rgba 0 comma zero comma zero comma 0.8 like so and then I'm going to save that and I have not there's no update here because we have not used it yet so I'm going to go over to our index file and I'm going to import and actually instead of importing I can just do dashboard box like so import like that and what I'm going to do actually let's just get rid of this what I'm going to do is I'm going to just select every single dashboard or sorry box over here I'm going to pass in dashboard box instead and I'm going to get rid of the BG color because we don't need that and for some reason I didn't click the last one as well so let's fix that and after that let's actually test and see perfect as you can see the styling is different I'm going to open it up so we can see perfect so it has it has an interesting box Shadow this is a styling that I don't really do too much but it looked very nice so I have a dashboard box and this is like a box Shadow but it's not very blurred so that's kind of a nice effect over here all right and then from here I'm going to just remove this we're actually not using use theme on this page so let's just get rid of that I'm going to save it and notice over here if we have all of these components there's going to be a lot of like a lot of code that we have to write for our jsx there's going to be a lot of logic as well so trying to fit all of that logic onto this particular component is kind of unwieldy so what we're going to do is we're going to go over here we're gonna split this up into three rows so the first row is going to be represented by these first three second row is these three and then the third row will be all four of these at the bottom so we're going to make sure we split it out into those sections so if I go over here I'm going to create new components for each of these so Row 1 TSX and then new file Row 2 TSX new file Row three dot TSX and by doing so I'm just going to copy or cut everything out over here and I'm going to go to row one write TS r a f c e and we're going to have Row one over there but I am going to get rid of all the jsx over here and Surround this via uh empty fragment so this is react where you can put this without having to add a new you know like an element but anyways we have our three dashboard boxes over here so I'm going to make sure I import it which I can do using intellisense like that and now we have dashboard box over here and save that and then I'm going to import Row one using intolocence over here and we can just pass in like that so we now have Row one this would be exactly the same result from before and we're going to do the same exact thing for Row 2 and Row three so I'm going to do TS rafce for this one grab these three again pass it over here add empty fragments make sure I import dashboard box as well over here save it and we should be good to go for row two once we have it saved um I think yeah the intellisense is lagging sometimes the intellisense can be lagging if you have a lot of files and then row two I'm just going to import that again and then the final one I'm going to grab this again go to row three TSR afce go over here paste it add empty fragment like so and then over here intellisense with dashboard box save it and then add the Row 3 over here sometimes it's important to refactor like this if you have if this is going to be a very long component we want to split that out into manageable chunks so over here we now have an unused component in the dashboard index page so we're just going to get rid of that and one thing I want to get rid of is the type props I'm going to get rid of that I'm going to go down and I'm going to remove this because we don't have any types props coming in so we don't have to import that now I know what you're thinking this is a typescript project but we haven't even touched any kind of typescript well right now we don't we didn't need to use typescript for anything there is nothing valuable as of right now because we're just setting up layouts typescript comes becomes valuable when you're actually dealing with data so right now we don't have any data we haven't created our backend we haven't done any of anything of that sort so we haven't need any kind of typescript or typing as of yet but once we make API calls and get the response that's when we will use types from typescript to really narrow in and make sure we don't have any bugs with our data all right so the next thing we're going to be using is going to be Redux toolkit so Redux toolkit is a set of utilities and tools that simplifies the process of building applications using Redux which is a popular state management library for JavaScript applications so we are going to use Redux toolkit to manage state so we can access the state globally and we're going to be using Redux toolkit query on top of that so we can grab or make API calls and that data can be stored in the global store easily so the first thing we're going to do is we're going to go to our folder uh State and I'm going to write api.ts and here we're going to be setting up our boilerplate for Redux toolkit alright so from here we're going to create our boilerplate for Redux toolkit query so we're going to import create API actually it doesn't seem to pop up on the intellisense sometimes it doesn't work properly if it's too nested and I believe that's the reason why it's not popping up so I'm going to do from at redex.js toolkit query slash react so in here I'm going to do export const API and we're going to create oops didn't mean to do that create API like that and we're going to pass in parenze and we're going to pass in curly braces like that and we're going to say base query fetch base query like so and I'm going to pass in base URL I'm going to pass in with colon I'm going to do import meta I'll explain everything as I go once I finish writing this but import meta.env.vite base URL all right so what's happening here is we're basically using Redux JS toolkit query we're using Create API so this will allow us to make endpoints that we can use to call our backend so we can grab data from our backend using this particular setup and to do this we have some boilerplate code that we need to set up and the way we do this is by setting base query we're going to be using fetch base query as a function from Redux we'll get query and and our base URL we're passing in the environment variable we added earlier so over here we added HTTP localhost 1337 so that's the URL that we're going to call every time we make an API call and then from here I'm going to do reducer path and I'm going to say main so now this all this means is this this is the name of the producer and the slice in Redux so basically if you don't if you're not familiar with Redux it's just a name for this particular you know API calls so it's just a name it's just a name don't worry about it being too like fancy buzzword types and then from here I'm going to write tag types and in here I'm going to start with kpi actually let's let's leave it blank for now so these are tags so this is what these are what's being used to keep information and this is the name of each API data and I'll I'll cover that shortly it'll make more sense when I actually do it so this is just a lot of simple Board of plate that once you set up should be pretty simple once you have this we're going to do build and we're going to pass in an empty object so this is the endpoint so this is where we actually create our API calls and the first one we're going to create is going to be get kpis and we're going to do build dot query I'm going to pass in an empty object I'm going to say query ens like so and I'm going to call this kpi slash kpis slash comma and over here I'm going to say provides tax with curly braces going to be kpis and over here this is going to be kpis as well so the whole thing about what's happening here is that essentially we're using this endpoint get kpis and we're making a call using this as a base URL so localhost 1337 and then we're going to make an API call to this particular base URL slash kpi slash kpis so I know the URL is a little weird but basically that's how this particular API call is set up so this will set up a function that will grab our kpis which is key performance indicators so that will be grabbing information and we're going to be saving it into kpis tag so that's essentially what this is doing it's a lot of boilerplate and just understanding the basics of that once you have that it's super easy to create another one so if I wanted to create another API call I could just do get kpis2 or whatever and just change this and then you have another API call and that's all you have to do and then from here we can just do export const use get kpis query so if you have that actually let's do this because just to give you a better understanding how this is easier for you we can just write export Cons with the curly braces that are empty equals API so in here we can write use get kpi's query so this already exists once you have the API so intellisense will tell you that you can grab use get KPS query from this so basically it's just the same name as this right here except with a prefix of views in a suffix of query so that's how you grab this particular hook and then if you wanted to use the hook all you have to do is go to row one and above here you can say hey const data which is going to be the result that we get and we just have to do use get kpis query and grab it from our API call so this is everything we need to make an API call right here the only thing left is that this seems to give us an error it says expected one to two arguments but got zero that's because of typescript so typically when you create these queries you just want to pass in void void like this so this will make it so that we don't really need any arguments for now but we will add those types in a little bit so stay tuned for that so once we have that it takes a little bit of time but this will go away after we do that so yeah so as you can see there and the reason why right here you don't see anything is because we have it set up our provider and our store for Redux yet so we're going to be doing that right now so I'm going to go to main.tsx over here and we have to add provider from react Redux and then I'm going to import configure store from Redux JS toolkit and then import setup listeners from this query this actually should not be dissed it should be just query and then I'm going to import API from at reduxjs actually no no that's not so we're going to do API like this from at slash state slash API so that's grabbing the actual API that we just created earlier and then from here I'm going to do export con store configure store like so and I'm going to pass in reducer and then in here I'm going to do API dot reducer path I'm going to do colon API dot reducer like so and then over here I'm going to do middleware colon get default I'm going to pass in get default Dot concat API Dot middleware comma and over here I'm going to do setup listeners I'm going to pass in store dot dispatch like so and then finally over here with the react strict mode I'm going to replace this with provider I'm going to pass in store is equal to store so essentially this will set up our API reducer path so basically our Redux toolkit query API slice we're passing it over here with api.reducer so that's the thing we exported earlier and then the middleware is just configuration that we need to set up with our API so Redux toolkit query Works same with setup listeners so that will help us make it work so once we have that everything should essentially work so we're waiting for this and as you can see everything is back to normal now the data that this is going to be fetching over here is not gonna call anything because we're just we're not hitting our endpoint that doesn't exist so we are going to be creating our background back end next all right so to set up our backend we're going to open up our terminal let me close this and I'm going to close out our server we don't really need it right now at the moment so I'm going to do CD dot dot so I go out of the client directory and I'm going to to make the which is make directory server so we're creating a folder and we're going to go into the server folder we just created so you should see over here that we just created this server directory with nothing in there for now but over here I'm just going to close this I'm going to do npm init Dash y so this will initialize npm and the packages or package Json file for us with all the default settings so we have this file like this and in here I'm going to install a number of packages so we're going to install Express which is going to be the framework for node.js to handle apis so make it easy they're going to install body parser so this will be able to handle information that's coming from like a body of a request then we're going to install cores which will handle like cross origin resource sharing requests so that you can call from a different URL then a DOT EnV to handle environment variables helmet is for API endpoint security Morgan for handling console logs so anytime we hit an endpoint it's going to console log information and I'm going to install Mongoose as well which will be in orm used for mongodb and then also Mongoose currency so we can handle numbers and values that are monetary like currency values so we're going to be installing all of these right here and then from here I'm going to do npm I Dash D so it's a Dev dependency I'm going to install node mon so this will allow us to run our server but it will automatically refresh if we change some files and then from here I'm going to close the terminal and in our server directory I'm going to create a new file call this index.js and in here I'm going to close the exploratory I'm going to import Express from Express like this and one thing to note if we want to use Imports we're going to have to go to package.json and then we're going to have to write type colon module like so so we can use the Imports and then from here I'm going to import body parser from body parser I'm going to import Mongoose from mongoose import course from chorus like that import Dot EnV from dot EnV and then import helmet helmet like that then import Morgan like so so we have all our Imports ready over here and then we're going to do our configurations so I'm going to make a comment say configurations and I'm going to dot EnV y dot config I'm going to do const app is equal to express app dot use express Json app.use helmet and we're going to invoke it and by the way this is a lot of just spoilerplates so we can use each of these packages so you kind of have to configure these so that you can use them properly and then from here I'm going to do cross origin resource policy and we're going to set this policy to be cross origin I'm going to do app.use Morgan set this to be common app dot use body parser.json app.use body parser.url encoded and we're going to put extended it's going to be false and then app.use cores and we're going to invoke that we're going to save that and then from here I'm going to do our mongoose setup over here as a comment but we're going to be setting up our mongodb shortly but before that I'm going to save this I'm going to go to package Json one more time and under Scripts I'm going to do Dev colon like so node mon index.js actually we should have a comma over here as well so this will allow us to run our index.js file so if I go over here I'm just going to say console log hello and I'm going to open up our terminal and let's just make sure everything is working so we're going to just run npm run Dev and there we go we have our file basically running it exited because we don't have any kind of server running yet but it did console log or hello so it means everything has is working as expected and there's no errors that we are aware of so I'm going to save it it's going to redo it but we're just going to keep it like that all right so the next thing we're going to do is we're going to be setting up our database so mongodb is a nosql database and you can go to the link in the description to go mongodb.com you can sign in or start free and this is where you can sign up so I already have an account that's already signed up and once you have signed up you're going to see a dashboard that looks like this it might be the UI might be a little different because I didn't just sign up yours might be different there might be more instructions but anyways we're going to click build a database or whatever depending on what you have but what you want to choose is m0 which is free and we want to choose a region closest to us mines Oregon and we cannot change what's this created so we're going to keep this as cluster zero you can call it whatever you want and once we have that we're just going to hit create and then from here we're just going to have some information um we're just going to have some password I'm going to just call this one through three four so I can easily remember but this really doesn't matter but for your database you want to make sure these are username and passwords that you can remember so we want to make sure we create it because this is going to be the user that can log into your database so we're going to create the user and then from here we're going to go down and you want to choose my local environment if you want to use cloud environment you can do that as well but over here you're going to see an IP access list so you have entries to your IP access right here and what you want to do is you want to add your current IP address so I've already added this IP address so make sure you add your own IP address then from there once you have that you want to hit finish and close we can just do go to database don't worry about that and once this will start loading for you once you have that you're going to be able to see our connected database so this is our cluster that we've created and it has collections so that is where we are storing our data but before we do that we're going to go to our database axis and you can see over here we have two users and you probably only have one but I have two users just some dummy email if I want to access this this right now only has read write any database access so if I want to I can change the role over here and I can change this to Atlas admin if I want so give it more permission so if you want to do that you can do that as well so this will give this ultimate access so this all depends on whatever your use case is you can change the rules as needed but either way we can go to database and over here we can see browse collections so this is going to be where our database information is going to be put but for now we're going to ignore that we're going to go back to overview right actually we're going to click the database over here so we can see everything and we're going to hit connect I'm going to hit connect your application and over here this is the link that we want to use we're going to have a username and then we're going to use password over here so I'm going to copy this and the username and password are going to represent the user that we want to use once we have this copied we're going to go back to our server directory I'm going to create a new file I'm going to call this dot EnV this is where we will keep our environment variables I'm going to call this URL and I'm going to paste everything that I had in quotes like this right here so we have the username over here and that's what we're going to change so if we go back over here you can go to database access we want to put the username over here and the password so now I labeled the password pretty simple I'm going to do one two three four make sure that you are using your own username and password last time someone was using this empty database and they're saving their data in this mongodb but you want to make sure you're using your account and just use this instead because I usually just delete some of the databases and I don't really care what I do with them so your day that might get lost if you're using this one so anyways we're going to set the port to be one three three seven so that aligns with the base URL we set earlier so if we were setting over here white base URL one three three seven this is the URL we're going to hit and that is aligned with this port right here okay so I'm going to close this and I'm going to go back to our index.js file and in here we can now connect to our database so I'm going to say Port is equal to process.env.port so this is how we access the environment variable that we just created and we're doing or nine thousand so this is basically a backup for our port and over here I'm going to do mongoose I'm going to do dot connect I'm going to set process.emd.mongo underscore URL and the passing and object over here I'm going to say use new URL parser so these are some settings that I kind of like but you don't really need to do them so I'm going to set that to be true use Unified topology I'm going to set that to be true as well and over here I'm going to set dot then I'm going to say async with a callback function I'm going to pass in app.listen and we're going to be listening to our Port basically this is where we essentially start up our server this should be async I spelled that incorrectly and we should do console.log and we're going to do server port and I'm going to pass in our Port environment variable over here I'm going to set dot catch and I'm going to set error and we are going to be using console.log I'm going to say error and did not connect like so and once we have saved this we seem to do have a problem so let's actually look at this oh it seems like we are already using this port so let me fix that I'm using this on a different screen so let me cancel this out real quick okay yeah so on my other screen I was running a different server in the background so you don't have to worry about anything so let's just rerun npm run Dev and let's actually see now we have server Port 1337 completely working so this is running this part right here so everything is working as expected all right so I'm going to close this terminal over here and I'm going to open up our directory in our server and I'm going to go over and in our server folder I'm going to create a new file I'm going to call this dot git ignore so this is for GitHub we want to ignore certain files we don't want to expose these environment variables to the public so to do that we're just going to ignore them so I'm going to dot EnV as well and then another another folder that we want to ignore is going to be node modules because node modules is a bunch of packages that we can install for anyone who installs the GitHub they'll be able to access this just by installing but this is too big so we're not going to push that up to GitHub so we're going to save that for git ignore and then finally I want to go over and I'm going to create a new folder called data and this is going to be our seed data so I already have a bunch of seed data that we can feed into our database so this is basically mock data that we can add and I already have everything set up for you so you don't have to create your own mock data which is kind of tedious and kind of annoying but if you take a link if you take a look at the link in the description below there is a link to the mock data and all you're going to do is just going to go to that particular file copy it and then paste everything in there it's a very long file 4000 because it has all the data we're going to need and we're going to pass that in to our database so we're going to save that and now before we go and set up our models and data and our routes I want to go and talk about data modeling for our current application so this application is very simple in terms of data modeling we could make it more complex but I opted to keep this one very simple so we only have three basic models now if you're not sure what the model basically is it just means that we're basically creating the equivalent of objects in our database that represents like one piece of entity in our database now I'm using a lot of fancy terms but if you take a look we have an entity called transaction and this represents a single transaction that the user has made to create an order or whatever and we have different properties of that transaction for example we need an ID we also need a buyer or we need to include the name of the buyer the amount and the product IDs so basically this model this data is how we structure our information into our database so that's all what this data modeling is it's just a way of organizing data it's like organizing a room you just want pieces to be organized properly so you have all your socks in one location you have your shirts in one location things like that that is the same concept for databases and we need to organize it in a very specific way that makes a lot of sense now when you start doing with very complex and scalable applications where there's a lot of information you generally don't you generally need like a very very complex structure and you have to plan it for a while and you have to think about how you're going to do it but in this case we're going to have a very simple data model we don't want to keep we don't want to make this very complex so here we have a key performance indicator so this is just overall data so the daily data of how much transactions happens per day or happens per month and the total profit total revenue etc etc transactions is another piece product is another piece now if you look at these arrows these represent relationships between these two models so for example the array of product IDs and transactions represent a single ID for each product and the same goes with transactions so you can have an array of mongodb or sorry array of transaction IDs and each product can list all the transactions that are relevant to this product so you can show relationships between different models now this is for mongodatabase even in database you generally want to display this information and organize your data beforehand however if you're doing with SQL this is going to be this this is going to use something slightly different but we're not going to talk about SQL today so this is the way we are going to set up and a link in the description below if you want to take a look at this all right and then from here I'm going to close the data I'm going to close the packs.json over here at the top I'm going to import kpi routes we haven't created this but if we want to separate our routes we can do something like this and make sure that in node.js we need to specify the dot JS in react we didn't have to in the front end but in this case we're going to have to specify it we haven't created this file but we will shortly so over here I'm going to go to right below configurations and I'm going to set up our routes so this is where we say app.use we're going to have a slash kpi entry point for our kpi routes so you can think of it as the enter points for these specific routes that we create and then from here we're going to go and I'm going to create a new folder I'm going to call this routes and in this folder we want to create a new file I'm going to say kpi.js and in here I'm going to do some imports I'm going to import Express from Express like so and then I'm going to import actually we don't need to import we're going to say const rather and we're going to say Express dot router and over here I want to do export default router but in between these guys I'm going to do router.get so again this is the actual route and the previous what we set up was the entry point for these specific routes so you can have multiple routes in this page if we wanted to for our purposes we're only going to have one but either way we're going to have a callback function over here and we're going to say try and then catch we want to make sure we catch an error I'm going to say res dot status if you haven't status of an error we can just say 404 for now we're not going to do any complicated error handling so we're just going to keep it like this I'm going to say error.message and I'm going to save it and Insider try block I want to grab the kpi's data from our database and we're going to do kpi.find but we have not created this yet so to grab information from our database we're going to use something called Mongoose so Mongoose is basically something called object document mapping odm so if you ever heard of orm which is object relational mapping is the equivalent for nosql so odm does the same thing orm does but for nosql databases now what object document mapping will do is it helps us set up a model that will make it easy to call our database and grab information it's just a easier way to grab information directly from the database otherwise you'd have to use raw SQL or raw I don't exactly know the equivalent for database but you would have to use something that's more closer to like the database and actually call the database properly whereas odms will make it easier for you to call these things and the way to do this is we're going to create a new folder in our server component I'm going to call this models and inside here I'm going to create a file called keep yeah sometimes it glitches so I need to do that so kpi Js and in here we're going to set up our models so I'm going to do import Mongoose from Mongoose like so and I'm going to import and this is specifically for Mongoose currency because we want to set up some currency types and this is one way to do it and over here I'm going to say const schema is equal to Mongoose schema so every time we set up a schema we're going to have to set up this way and I'm going to do const kpi schema is equal to new schema like so and this is where we're gonna set up our schema before that let's set up the boilerplate first so I'm going to say kpi is equal to mongoose dot model I'm going to set this as kpi and I'm going to say kpi schema like so and I'm going to export default kpi so this will essentially create our model now we just need to provide it the same information that we were looking at when it came to the model structure so for example we can take a look at our data modeling diagram and we can see total profit total revenue blah blah blah so we're going to have to identify each one of these into our schema so the first thing is going to be total profit and what we need to set in this object is going to be mongoose.types dot currency so that is this particular type this load type from Mongoose currency allows us to use this and actually we need to set up one more thing for that to work which is load type and mongoose and by doing so now we have access to this particular currency type and so total profit will be able to take in a decimal of two decimals and a number and that will allow us to convert it as necessary and just I know this is a little tricky when it comes to currency but this is probably the best way to set it up in the database and what we can do is after that we can set the currency to USD so whatever currency you want to use you can do that and then a get call and the reason why I want to use a get call for these ones you don't have to do this for other types for for the currency ones we want to get called because we want to grab the value that we have in saved in the currency and the currency is always multiplied by a hundred so we want to divide this by a hundred to get the real value so that's why Mongoose provides us this access we can write this code so anytime we grab total profit from the database we can divide by a hundred because the currency multiplies it by a hundred this is why we need to do that we need to grab divide this by a hundred it's just the way Mongoose currency works and that's how they suggest doing that and then from here I'm actually just going to copy this entire thing I'm going to say total revenue and it's going to be exactly the same and then from here I'm going to say total expenses and that's going to be exactly the same and then next is going to be expenses by category so this one will be a little different and since this is an object the way Mongoose defines objects is using something called map and we're going to say of and we're going to put curly braces I'm going to say I'm going to actually grab everything over here because expensive by category if you know it's going to be an object and we're going to have an object that shows some string maybe like shoes clothes whatever and the value is going to be a currency type so like 5 322 or something like that so that's how we set this up and actually this would be plural expenses by category and then finally we have monthly data in monthly data is going to be an array it's going to be an array of objects however if we have this object we can write everything in here but actually we want to set up a new one because it's problematic when you have like an arrays nested in objects so you need to Define another schema so what I'm going to do is right above and since this is the monthly data we want to create a schema called month schema and we're going to say new schema and inside here I'm going to Define our object and then in here we're going to have month to be a string and we're going to have some other values now I didn't write this in our data modeling so expense if you see daily data array of objects I did not identify what it is over here but that's why I'm kind of doing it right here so I'm just telling you what this is going to represent so revenue is going to be actually it's going to be the exact copy of these guys so all of these are values they're all currencies so that's why we're just going to do this for all of them because every month we're going to have Revenue expenses operational expenses and non-operational expenses so we want to include all of those and those are all going to be currency so I'm just going to copy this over I'm going to call this expenses like so this one is going to be operational expenses this one's going to be none operational expenses and one thing I didn't mention is that right here if I comma I need to include two Json curly braces gathers to be true so this is a setting so that we can use these get so this is by default we just need to set this if we're using these get properties to grab our currency so now that we have that we can go down and we can write month schema like so and there you go with the month schema and then we also want daily data and we're going to do the same thing we're going to Define day schema and we're going to go up and identify our day schema I know this page this is probably the most complex model compared to the other ones so just bear with it it's a little complex but all we're doing is basically setting up our models and the structure it's all about setting up the structure correctly and once we do that it should be good and what I'm going to do is I'm going to copy everything in here in the month schema and we're just going to remove things as necessary for today's schema we're not going to include operational non-operational expenses in real life you might want to keep those we're going to keep everything the same except the month should be date and we're going to keep all the other stuff the same and we're going to go down now we have our kpi schema we have our daily data and now what I need to do is going over here I want to add the two Json gathers so like this guy over here and we're also going to add one more property and that's time timestamps to be true so what this will do is in this object it's going to give us when this particular one was created and when it was updated so it will give you two timestamps by default so it's just more of a convenience factor you don't have to write it in the schema itself so if you wanted the current date of when the object was created or when your kpi was created this will give you default values okay so now that we have our model schema set up finally we can go back to our kpi file and then we can import our kpi actually intellisense has come but it does not work in node.js so we're going to do from dot dot models like so and I'm going to say kpi dot JS remember to put the dot JS for node maybe there's a way to do it without it I'm not exactly sure I've tried digging into trying to figure out how to get rid of the file extension but by all means if you guys know a way of doing that I'm all ears anyways let's go over here and what we want to do is we're going to give the res status of 200 so basically once we have our kpis we want to return to the front end that we're getting a success error if or nice not a success error a success result via a 200 status to the front end and we do that with res dot status 200 and then we're going to say Json kpis so we're sending our kpis object that we've grabbed from our database and we're sending it to the front end okay so now that is everything for our route I know it was kind of a little rough one for the first one which with the model we have all of this complex data structure but this is probably the most complex one if you look at our data I want to give you a little taste of that we can say kpis and you can see how this is kind of structured we have an ID among a database ID which we don't need to specify in our model we don't need to specify an ID over here because by default mongodatabase criticism but we're I am I am uh what was it I am providing an idea default ID for it so this is basically seed data and anyways I have total profit total revenue total expenses so I am feeding dollar signs into it and monthly data I have this particular object for our month and then if you go down we have our daily data so I have 365 of these so for one full year it goes to the full entire year so it has revenue and expenses for every single day and then I have expenses by category after that so that is our data for our kpi we're feeding all of that information into this particular model and that is how we can after we see the data into our database which we'll do next we can grab that particular information so right now we have our model set up but we have not seated the database so we're going to go to our index.js and I'm going to import our kpi from our intellisense actually worked so from our models file and we're just going to grab the kpi file and we're also going to import kpis from dot slash data data.js so we're grabbing the kpis data from this particular file so we're grabbing this information and we are going to import this and then where we go down you see where app.listen exists right below it we're going to be first since this is async we're gonna do mongoose dot connection dot DB dot drop database so what we do is before we're going to seed our database with information we want to drop the current database that we already have and the reason why we do it is so that we don't have duplicate data or we don't have it we don't run into specific errors we're just going to run this particular thing once and then we're going to see that see the information as needed and this is kind of necessary for development purposes especially when you first start out your database and you're just testing things out you want to be able to drop the database information it's seed data so it's not really useful just don't do it on a real production app with real data you want to make sure you have real backup otherwise you'll have a lot of people angry with you so the first thing you want to do is we're going to do kpi insert many and we're passing in kpis so we're passing in the array and by doing so we can input this information so before I save it once I save it it's going to restart and it's going to insert this so I'm going to go to my database this is where all the cluster is right now if I go to browse collections right now I have the kpis set up but there's no documents inside here and let's say if I save it we have server Port 1337 so that kind of worked and as you can see right now we don't have anything but if we hit refresh we have an object now I know there's only one but we have our monthly data I only set it set one object to be inserted and you can see we have our ID total profit total revenue we have all the information we kind of need so this is perfect so we've just seeded our database so now before you do that before unnecessarily saving it and then dropping the database again and reinserting we'll probably get the same result but we're just gonna comment that out and we just want to add a comment add data one time only or as needed so we only need to insert information every once in a while we just don't want to always insert information or else you might get rate limited if you have too much information things like that so we only need to do it as necessary so now we have our data we can now finally go back to our front end so I'm going to close all of this close the terminal close our server folder and we're going to go back to The Source directory and I want to go back and I believe I have everything set up for this to work so what I'm going to do is I'm going to grab this information and console log it and by the way what I just did was Control Alt l or control option l this is if you have a vs code extension called turbo console log just by the way this will turbo yeah right here so this guy so basically if you install this Plugin or vs code extension you can just highlight some text hit control option l or Ctrl alt L and you can just console log and I'll put it on the next line all right I'm going to save that and what I'm expecting I'm going to open this up and let's say open up our inspector tools and it seems like oh yeah our server is not running so what this means is that we have our backend running so let's just close that it's kind of distracting and we want to create another terminal over here because now we got to run our front end so we have our backend running we also need to run oops this is my vet we are in a server folder so we need to First go out of it then I can go to the client folder right here and then I can run npm run Dev and this will run our server and we can see we can wait for it to refresh and now over here we have data undefined but it pops up once we have the array and perfect we have all the information that we've gotten from our backend now don't worry this doesn't mean that the API is being called this just means that it's just checking right now we tried to run it but the hook determines when the API call can made so if you take a look we're only making one API call so if I refresh we're only making one so we're just grabbing the information as needed it might be re-rendering once or twice because they have some weird rendering when it first runs but for this we have the data as we need and if you know just FYI limited space over here if you see this this particular information is saying that we're calling our endpoint backhand so anytime we're logging this this is the information that we're grabbing and logging as needed from the server so if I refresh it it's going to hit make another API call as you can see and it's just logging it so it's just useful this is Morgan so it's useful to see that all right so the next thing is we're finally going to be creating the charts I know we've done so much boil plate and setup and base configuration and doing all of this you might be wondering why have we not built anything so far we just have these layouts and that's it but we don't have any chores trust me setting this up properly from ground up properly in a very clean way makes it helps a lot and it makes it easy for me to teach you uh feature by feature or like based on each function like me going with the back end first and the data model doing things like that makes a lot of sense and then now we can focus on the charts itself so well now that we have all our data how do we set up the charts how do we pass in information into our charts so if you take a look let's go back here this is our chart it looks very good what we're going to be using is called recharts so actually let me go to a new page we're going to say recharts and recharts is another chart Library if you've seen my videos I use something called uh I use nivo before but recharge is also very good I personally like recharts now now that I use it it's been growing on me because it's pretty simple and it's very modular and it keeps it simple and it's very under it's pretty easy to understand navo is good because they have like a UI documentation but recharge is also pretty good so you can't really go wrong with either of them it's just whatever you're comfortable with to be honest if you're new I would recommend read charts so we go to API you can see we have a bunch of charts and then we also have a bunch of examples so we have the API documentation and then we also have the example documentation so we can basically just copy some of this code and just use that as needed and so for the chart we're going to be using is going to be the simple area chart so found over here for the first one so if you take a look at the actual UI this is an area chart as you can see we have like the line and the area below colored in and we're going to just have a simple x and y axis so we're going to go over here now what we can do is just kind of go over here grab this code and we can pass that information into r jsx so over here inside our dashboard box I'm going to pass in responsive container and actually before we do that I forgot we need to install recharge so I'm going to cancel out so I canceled out my server I'm going to do npm recharts like so and then from here I'm going to do npm run Dev so we could start up our server once again close this and go up here and now we just got to make the Imports and what I'm going to do is just erase an R actually I wonder if intellisense is going to work and it doesn't seem to work so import responsive container and yeah it finally was able to do it so I imported responsive container like this and I'm going to import area chart Cartesian grid then x axis y-axis tooltip I'm going to save it so we see that and then we're going to have area for some reason I'm not sure why intellisense is not configuring the recharts but sometimes it just doesn't work as expected it's just kind of going slow as you can see there is some lag with the intellisense popping up but anyways we have our data and right now we don't have the proper data we have our data but our data is not formatted in the way area chart is going to want it so if you take a look we have some weird lines because the data is not correctly inserted so we're going to go back and we're going to take a look at how they're setting up so if you take a look we have name page e so that represents the x value and the amount which is going to be the Y value and then we're going to have UV and then PV now some of this naming might confuse you but all you have to understand is this name we can configure it to be anything but it needs to align with the data key so x-axis represents data key name and then we have an area and the data key is going to be UV so UV is going to be 1890 for this one and then 2780 for the other ones so right now in this particular data set we're actually not using PV or an amount so you guys can ignore that we just need to align the correct area with the correct data we're going to do the same thing with the data key over here with the name as well so I'm going to go back to my code go over here and we can configure our data into the proper format as needed so what we're going to do is going to go up here and I'm going to create a variable called const Revenue expenses and I'm going to use use memo so we're going to be running this function but we want to make sure it only runs as needed and use memo is perfect for that I'm going to put a callback function over here and in it I'm going to have an array with data being passed in so what this is essentially doing is we only want to run the data or we only want to run this function only when data changes and most of the time data is not going to change and here I'm going to return we're going to make sure data exists so just FYI there is a period of time before when we're making the API call the data does not exist so we have to be aware of that so we're just making sure data exists and if it does we're going to grab the first element of the array because that's the first object in kpis this array there is only one object and that's in the first element and I'm going to say monthly data because we just want the monthly data for this particular chart if you take a look we're just grabbing the month monthly Revenue monthly expenses that's what we're trying to configure so if we go back I'm going to say monthlydata.map if I want to grab month Revenue expenses like so from the information and actually we need to put parens around it so make sure you're getting the parens correctly like this it's a little confusing because we have a lot of destructuring going on and in here I'm going to return an object and I'm going to say name is equal to month and we're going to say sub string because we are setting January February March April May June however the substring will grab the first three letters so we have a shortened version of our month and then we're going to say Revenue we're going to set that to be Revenue I know there's a lot of Errors right now and I'll tell you how we can handle it so we can say expenses colon expenses like so so this will essentially give us the proper format and we're just going to make sure this aligns with our chart so if we take a look over here we're going to say we're going to see typescript yelling at us say monthly data does not exist on type on type never so what this means is that when we get the data back typescript doesn't know the type of data we're supposed to get because we set this as void so if I go back to our API endpoint that we've made we've set this to be void so this essentially represents the response from the back end and this is representing the payload that we're sending in so we need to make sure the correct types are being passed in over here so what I'm going to do is I'm going to actually set this one is going to be I think I made a mistake this is not the response sorry this right here the first one is going to be the response that we want and what we get is an array of an object and we're going to call this object called kpi's response so this is typescript specific we're going to get an array of an object so if I take a look again in our console log so let's see bring up let me open this up a little more so we can see the console and we're getting a lot of ridiculous errors but as you can see we have an array with an object inside and this object is going to be the get kpis response object that we're going to pass in so that's what we are going to type this as so over here I'm going to go over here in our folder directory and in our state file I'm going to create a file called types.ts and in here we can identify the type that we need and what I'm going to do is export interface get KP kpis response interface represents the object that we want the response to look like and we just need to mirror what is being sent back over here so one thing by the way one thing I'm not sure is we have a duplicate of ID and underscore ID they're exactly the same I think maybe I'm injecting the ID problematically but I'm just going to specify both of them for now and we're also going to see the version type this is going to be thunder underscore V is equal to number so we're just essentially mimicking this structure and we're correctly adding the type as needed so we're going to say total profit is going to be number total revenue is going to be number and then total expenses is going to be number as well hold on a sec and then we're going to say expenses by category and this is going to be an another object because expenses by category is an object that we will need to create so I'm going to put that and over here I'm going to identify expenses by category so it's going to be export interface expenses by category and this is going to look like salaries like number so supplies number and then services number so that's what this particular represents and then over here we can say monthly data I'm going to say array of month like so and month is something we need to identify I'm going to say export interface month and I'm going to say ID is going to be string month is going to be string Revenue it's going to be string as well so if you take a look this is what I'm doing is replicating what this looks like so Revenue I know this is kind of tedious and this is typescript in a nutshell you're just typing what objects are supposed to be and it's usually this is like the main aspect and it's not more it's not more complicated than this people try to make it very complicated and that's for advanced use cases and generally you would use it for maybe when you're using with libraries but you don't need to do a lot of those fancy things like for most cases and my mistake this Revenue should be a number like so and people need to be aware like you can add all of these and you can have this and you can have bugs but or you can use typescript to avoid some bugs but you also have to wear be aware that you can add bugs to typescript as well in the types so sometimes I'm not saying you shouldn't use typescript it's just it adds time when you build it so it's not always always use use it or not kind of thing all right and then we're going to do we're going to copy the same thing for day and the schema is a little bit different we're just going to have revenue and expenses those are the only two things and this should be date instead oops and then we're going to be passing daily data with array of day like so so now I can save this type we can use get kpi's response and we're going to import from dot slash types and now we should no longer have problems with this particular typing I think there's going to be a delay for these okay and as you can see intellisense took a little bit of time but now the linting is no longer there because now if you can go and hover over you can see that get kpi's response this data knows that monthly data should look exactly like this month and then month comes from string revenue is a number expense is a number so everything is following what we have identified over here so by doing this you can prevent some bugs when you are using some of this so if I use revenue and then I can and if it didn't actually revenue does not have so if I just do data if I hover over data it's going to tell us that this is the type over here get kpi's response so now we have all our typing everything is in place Revenue expenses is formatted correctly however we need to be able to pass that in so we're going to say Revenue expenses and we have identified name to be month dot substring revenue and then expenses is its own value now we still need to connect it to the lines correctly so if I go down over here where we see area we are going to look at this and say monotone which is fine what I want this one is going to be Revenue like so so this will basically align with the revenue line and area chart or part of the chart and then the stroke is we're going to set this to palette and actually we have not identified the palette yet so I'm going to say const palette and we're going to say use theme like so from mui material so we're grabbing the color and then once we have that we can go down over here in our stroke section I'm going to say palette dot primary dot main so this represents the color of the line essentially and once we have that passed we can say fill opacity is going to be one so we have a colored section and then finally we have a fill over here with URL and we're going to say URL and we're going to say color revenue and the reason why we're going to do this is because we're going to have a little bit of a gradient and as you can see so far let me just close this actually we can see we already have a line already coming up so we have a revenue and it's showing up like so we still need to get rid of the background the background lines and grids because I don't want that you can keep it if you would like but we're going to get rid of it but before that let's actually copy this area and we're going to do the same thing for expenses so I'm going to get rid of that say expenses over here and I want to change this to color expenses so we haven't done the fill part but I'll cover that and we also let's actually save that and now you can see we have our second line perfect what we need is the dot so I'm going to say dot is equal to true and I'm going to pass that in over here so we now have dots for both our lines we still need to modify a few things so we're going to add excess or we're going to change something for the x-axis and we're going to say we do not want the tick line so that is the background so if I save it or actually sorry tick line represents like let me let me show you if you see there's like a little bit of a line if you can see very normally like right above like the months there's a little bit of a line that extends if I keep that to false that gets rid of that line right there so I don't want that and then also I'm going to do Style and if you want to change the like the styling of this we have to use Style instead of like SX in material UI so I'm going to say this is going to be 10 pixel so this is going to be a lot smaller I want it to be kind of small and then y-axis we're gonna basically copy everything the same we're gonna but we're gonna make some adjustments and tick line is going to be false we want we don't need a data key for this one we are just going to have an access line like so and give it a stroke with of zero and then I'm also because if you see we have zeros to six thousand zero to ten thousand a lot of this is not being used so because we're not being used I'm going to say domain is going to be eight thousand and twenty three thousand like so so now we can see more of the chart it's going to be extended more like this and then from here we can see Cartesian grid I don't want that so that's the background so now we don't have any background but we also want to set the up the little gradient that you can see there's like a little bit of fading gradient I think that looks cool so I'm going to be adding that and the way I'm going to do that is I'm going to create a little element called defs and by the way this is all in the documentation but in this case I'm just going to set this up and these are these kind of already exist as standard HTML elements so we don't need to do we don't need to import anything and what I'm going to do is do 0 y 1 is equal to zero X2 is going to be zero and Y2 is going to be 1. so basically I'm setting up a linear gradient vertically so from 0 to 1 is how we essentially set this gradient I'm going to set the offset to five percent with the stop color and I'm going to say palette primary 300 so it's going to be kind of a green color just like what we had but a little lighter and I'm going to do a stop opacity of 0.5 oops 0.5 like so and we are going to be able to see that we have not actually set the gradient yet because it looks kind of cool with a flat color but let's actually make it opaque so we're going to do 95 for this because you need two different stops this is going to be for the revenue and this is going to be zero for the Stop opacity so now we can see this top one has this fading going down and that's specifically for color Revenue now you can play with this and just choose different settings but love this is just trial and error not doing anything fancy and then here I'm just going to say expenses like so and so now we have two gradients going up and down and now we have our chart fully there I am going to fix some of the margins so I'm going to say top is going to be 15 right is going to be 25 and negative 10 over here and 60 over here and then there we go we have some settings and we're going to also have like a header which we'll do right now all right if you take a look at the final build we have like a little top Heather Heather over here and it's going to be the same for every box and it's going to be slightly adjustable where sometimes we have a subtitle like this other times we do not so we're going to configure that so the way we're going to do is we're going to create another component in the components file and we're going to call this Heather or actually sorry box header TSX like that and in here I'm going to initialize with TS or afce so this one is actually going to be a real component and in here we're going to have we're going to be using Flex between to figure this out so let's import Flex between like so and in here I'm going to give it a color of palette dot Gray 400 so it's going to be kind of a grayish light color and we need to make sure we import a palette from use theme from Material UI like so and in here I'm going to set the margin to be 1.5 REM at the top one REM on the right zero REM on the bottom one REM on the left so that sets up our margin and then below this I'm going to have another Flex between and we're going to have an optional icon if we want to so over here I'm going to set the icon like so and that's going to come from our props over here so now we actually are going to pass in not perhaps icon like so from the parent component and it's going to be identified in our typing and for typescript we want to pass in icon and we are going to use react dot react node because this is going to be a material UI icon and that is represented by react.react node typing and that's what we need to pass in and over here below this I'm going to add a box and we need to make sure we use intellisense for that and I'm going to say with of a hundred percent and inside I'm going to say typography from Material UI and I'm going to say variant with H4 and the margin bottom of negative zero point 0.1 REM like so and this is going to represent the title and the title again is going to be passed in from the parent component and by the way this is required if you don't have a question mark this is going to be a required element of the props whereas question mark means is optional so I don't have to pass an icon so some of these don't have an icon and we're going to be using the icon for the other page so that's why we only have the icon we're not really using it that much and over here I'm going to have a typography and then we're going to say variant of H6 like so and we're going to pass in subtitle like this pass in subtitle over here and then subtitle is going to be optional and it's going to be a string as well below this we're going to have a flex between right here below the flex between right here we're going to finally have typography and this is going to be the text on the other side so we're going to have a variant of H5 a font weight of 700 give it a color with palette dot secondary 500 and I'm going to pass inside text so over here side text and over here side text is going to be string like so so now we have our box header completely ready and we're going to be using this up here in our Row one so let's import box header from AC components and we are going to be passing all the values as needed title is going to be revenue and expenses subtitle is going to be Top Line represents Revenue bottom line I know this is not done technically the line could be in different order I'm just adding random text by the way and then over here I'm going to say side text is going to be plus let's see where's my plus button plus four percent so there we go so this is our final project but let's look at ours and now we have our title with plus four percent and our subtitle right below it and it looks pretty dang good I'd say so if we go over here we can see how it looks like and it's responsive depending on the size of the screen but yeah like I mentioned because of the nature of recharge I'm not exactly sure how to fix this when you manually move it it doesn't exactly respond you can refresh it but chances are people are not the reason why I don't address it is because I'm not exactly sure how to address it but also most people they're going to use either like a mobile or a computer they're not going to change the horizontal width like that it is very rare for people to do that there you go we have our first start and now from here I know there's a lot of setup but now it should be relatively simple to do our future charts so now we have our one chart we're going to go and look at our final build and we're going to see this is our second chart so this second chart is going to be a line chart instead so instead of it being an area it's going to be a line so most of the ideas are the same but I did this for a reason you can see that this one is actually a dual y-axis so we have an axis on both sides so I will show you how to do that so if you go to over here on recharts we're just going to use Simple line chart and actually a better one for our example is going to be a biaxial chart this chart basically has two y-axis over here you can see we have two y-axis over here and we also are using line charts now I'm not going to copy and paste this because if I go back I'm going to be actually reusing well what I had over here so I'm just going to copy everything from the box header I'm going to go down and then paste it over here and then what I'm going to do is I'm actually going to change the area ones to line and we're going to modify a few things and then over here we're going to go to x-axis we have data key this is going to be the same but the y-axis we're going to have to add a few things we're just going to add y-axis ID and we're going to say this one is going to be on the left side so we're going to have a y axis on the left side and then we can just get rid of we can just say we don't need an axis line so we're just going to save false over here so we don't actually need the line for this one and then I'm going to say tick line Styles fine we don't need a domain and I'm just going to copy the y-axis paste it over here and this one is going to be right and the orientation we need to set the orientation for the white act y-axis and we're just going to say this is going to be on the right side so we want to make sure all the elements are aligned to the right correct side so we have that we also have our tool tip but we need to import line and I don't think yeah there's too many options so we're just going to import it manually up here so I'm going to say line like so I'm going to get rid of Cartesian grid because we're most likely not going to use that so up here we're going to go back down apologize for all the scrolling I know you guys might be typing you guys might be trying to figure what I'm trying to do so over here we actually don't need any of the definitions so I'm just going to get rid of all the linear gradient this one does not have any kind of gradient so we can just completely get rid of that and in actual I did make a mistake and then we actually need the Cartesian grid I think yeah I realized there is a Cartesian grid like so I'm going to say vertical is equal to false so we only have horizontal lines and we are going to give it a stroke of palette dot gray 800 so we want the color to be very like dark so it's kind of like subtle in the background as we you can see and then again I need to import Cartesian grid so over here I'm going to go up here Cartesian grid make sure that's in there then we scroll down I can save it let's actually see what we have we have this we do that we are passing in Revenue expenses but this is going to be different because we want different information for this one this is going to be profit and revenue so we're going to make sure we format that and for the lines we're going to be changing this up so I'm just going to get rid of all of this I'm going to say y axis ID is going to be left and the reason why you need to set a y-axis ID for a particular line is because you're going to choose which y-axis this line is referring to so the left axis represents these values for this left one and I'm going to say type is going to be monotone and the data key is going to be profit now we have not set this data format just like we did with Revenue expenses we still haven't done this for the profit and revenue which is the name of this one we haven't done that yet which I will do in a little bit and I'm going to say palette dot tertiary 500 and I'm going to copy all of this for the second line and make a few modifications I'm going to say this one is going to be right this one is going to have a revenue and we are going to change this color to be primary Main like so and also I want a legend for this one so I'm going to add a legend and this is going to have a height of 20 with a wrapper style so this is how you can modify the margin for this particular one it's all in the dock sometimes it's kind of inconsistent is the only thing so you have to make sure that what you're doing is actually reflected in the actual UI so over here I'm gonna oh yeah I spelled tertiary wrong over here that's why it's yelling at me and then Legend is going to be coming up from here so I'm going to say Legend like so and then here I am not going to specify the width and the height because we don't need to and I'm going to say this is going to be a line chart instead so this one's going to be a line chart not area chart or sorry this is the wrong one I apologize so if you go down to the second one this should be line chart and basically it make sure you don't get rid of the width and the height for the first one so if you go down over here we are going to change this to revenue profit it's just something we haven't created yet and preemptively I am just going to say this is top of 20. right of zero this is something I've already tested that looks good this is just me playing with the margins after the fact so we have title and we're going to say profit and Revenue and we're going to just keep that the same whatever and we are missing a few things that's why we're grabbing this particular problem this should be line chart at the bottom over here that's why we have a problem in line chart I think I already imported actually no I didn't line chart like so and then from here we actually need to identify profit expense Revenue profit sorry Revenue profit variable and that is going to be another thing we format so I'm just going to erase that console log and I'm going to copy all of this I'm going to say Revenue profit and the only thing we really need to do is go over here and do profits and we do Revenue minus expenses so that's how you calculate profit so that's why we don't actually have a profit value and now as you can see we finally have our chart showing up all right anyways I restarted my entire vs code my es length was going haywire and it was telling me type problems that I wasn't actually having but anyways we have Revenue profit we have name revenue and profit as a reminder these basically align with the lines and these are like the names that we need to identify to correspond with the correct part of recharge so if I go back down to the second box over here we can see that this one has profit this one has Revenue because this is the data key and then we also have name for the x-axis so that is the month and then profit revenue is the legend and then right here the y-axis is going to represent over here on the left side it's going to represent the profit value because it's aligning with this one and then the revenue one is going to align with the right y-axis so Revenue the value Revenue values is going to be on the right now if you take a look if you see some of the long JavaScript numbers that's because of the rounding error in JavaScript if you're doing some calculations and that's because of the subtraction that we had to do so we want to make sure we can just do something like dot two fixed we can do something like that to cut to the second decimal places and we can do that and that will prevent us from having that or you can do floor or ceiling depending on which estimation you want but it's not a big deal all right and now the final chart that's going to be on Row one if you open this up is going to be the bar chart which shows the revenue month by month basically for each month like this so we're just going to have all of this laid out for a bar chart so I'm going to close this out refresh it and I'm going to go back to our recharts page and I'm just going to find where the bar chart is and what I'm looking for is a simple bar chart and I'm going to go over here you can see we have our bar charts it's kind of like dual ones but we just want one for each month so I'm just going to go over here I'm going to just copy this this time and go back to my code and go all the way down to our final grid area chart so I'm going to paste this over here and we are going to have our bar chart I'm also going to go up here copy our box header and let's actually write that particular code and here I'm going to say Revenue month by month and this is just going to be a graph representing month by month so I'm just going to actually just copy this because I'm lazy but you can just type this in month by month and then from here I'm just going to copy this because I'm lazy and I'm just going to paste it into the subtitle over here sure that's gone and over here we have a responsive container we need to find bar chart and we need to import bar so if I go all the way up I'm going to import those so bar chart and then I'm going to import bar as well and then we'll have what we need so I'm going to save that and over here I'm going to set this to be 17 15. negative 5 and then 58 like so we're going to keep the width and the height and then we're going to change this to revenue instead because it's only Revenue values and this is something we have not formatted yet so we're going to identify that we're going to keep the Cartesian grid except we're just going to change this to vertical to be false so we only have horizontal so if you see this we only have horizontal and then I'm going to say stroke is going to be palette dot Gray 800. so the gray color is going to be the horizontal line and then we're going to set the x-axis to be name and we are going to set the axis line to be false with the tick line to be false as well and we're going to set the style to be font size of 10 pixel like we did before I'm going to save that and over here in the y-axis I'm going to copy everything over and just modify a few things again and I'm just going to get rid of data key name we're going to have a tool tip but we don't need a bar or we don't need the legend and all I need is going to be one bar and we're going to set this to be Revenue and These Bars again have a linear gradient so we can use the same linear gradient that we've done before so if I go back up all the way I'm going to copy one of these and scroll down all the way again and right above Cartesian grid I'm going to identify definitions with defs sure it's closed correctly and this is going to be color UV actually we can we need to change that to revenue and we're going to keep the same opacity I'm going to change this to 0.8 and this should go down and we are going to fill this with URL #color Revenue like so so that will fill our bar charts correctly and with that we have everything set up for our bar chart except we just need to format Revenue which we can do again so I'm going to scroll up I'm going to go over here I'm going to copy everything from revenue expenses I'm going to paste it up here and we only need Revenue this time so I'm just going to erase that get rid of expenses as well and change this to revenue I'm going to get rid of props because we're not typing anything over here I'm going to save it and let me just double check we have no errors over here seems like responsive container oh I did make a mistake by the way the Box header should be outside the responsive container over here so that is why this was error showing it's still showing because my computer is lagging I don't know why for whatever reason anyways let's go to our current APP and as you can see we have our bar chart perfect a lot of this is very redundant a lot of this kind of follows the same pattern and they have reusable components for each piece of the chart so this is a different way a different approach with neither charts neither charts just have one component that represents the entire chart recharge has like composable components for parts of the chart I like both ways I mean this this is kind of cool I would say it kind of separates out and doesn't have this one massive component so in a way it's pretty cool and with that we pretty much have our first row set up so if I open this up we have our entire first row and everything is working we have the hover effects we have all of these axis and line setup we have the names everything is very good and we just need to continue on to row two so the next section is going to be row two with these three tables and we're going to have the regular expenses and revenue and kpis and information like we did before but we're also going to have product prices and we're going to create this eighth endpoint to give us our prices and expenses all right so from here we're gonna go to our backend now we're going to close everything over here and I'm just going to close these guys and go to our index.js file and in here I'm going to make a route over here under the route section and it's going to be app dot use slash product comma product and by the way we could probably have put all of this in like one folder but it doesn't really matter we're just going to keep it separate just so I can show you how you would structure your routes if you need something more robust so from here I'm going to import product routes from dot slash routes slash product.js and don't forget the dot Js I'm just going to move this up here and we're also going to import product from dot slash models slash product dot JS like so and then from here I'm going to go and go to our routes directory or routes folder and I'm going to create a new file I'm going to call this products Dot product singular actually product JS so it basically aligns with this guy you can click over it just to make sure it's working and in here I'm going to go to our kpi.js file I'm just going to copy everything just because it'll be a lot easier we can just adjust this as we go so I'm going to grab both of these guys I'm going to do products like that instead instead of this being a kpi we should select all of these kpis and we're going to just select with product like that we haven't created this particular model so let's actually do that actually let me change this before I forget so we're going to have all of this set up now we just need to set the models so I'm going to create a new file over here I'm going to create product.js and remember it should be singular for this one and like before let me close this like before I'm going to go to kpi.js I'm going to grab everything and I'm just going to paste it into product.js this will make our lives easier when we're doing this so the only one I only need one schema for this particular one so I'm just going to remove month and day schema and over here I'm going to grab the kpi schema I'm going to call this product schema so I grabbed both of them and over here I'm going to change this to product actually I'm going to grab let's keep that let's actually grab all the kpis and call this product instead all right and then from here I'm going to get rid of most of these and we only need a few things so I'm going to say price expense and the last one is going to be transactions so price and expense are going to be the same because they're both currency transactions is going to be in Array so I'm going to have an array like so and I'm going to call this mongoose schema dot types I'm going to call this object ID I'm going to reference this to be equal to transaction and I'm going to save that so right here what this is actually doing is referring to the transaction object we haven't created this yet but this four transaction schema object so we have references to each transaction that's relevant to this particular product so you have references of all the transactions related to this particular product and this is how you make relationships between different models and schemes and you do that because sometimes you need to grab all the transactions for a particular product and you want to keep track of all the IDS relevant to that and because we're creating this we're actually going to have to create the transaction object so we're going to do that real quick and it's going to be pretty much exactly the same with just different keys so we're going to open this up I'm going to create a model called transaction.js and over here I'm going to place this over here I'm going to call this transaction schema and then I'm going to grab all the product as well and this should be transaction make sure your singular singular uh what naming is correct make sure you have that consistent and in this one we're going to have a buyer amount and then product IDs so we have a type and we're going to keep this the same but this time the product ID is going to reference the products so they're just basically referencing each other with the IDS so now we have the transactions and it shows which product IDs is relevant to this particular transaction so in this case in the real life example what this means is that every transaction you're going to have someone the name of the buyer the amount and then how many products the person has bought and which products they are so we have a track of those so we are referencing both of these scenarios now in a real life example you probably have more information for both of these but for now just to keep it simple we're going to have these and just to refer back this is a key performance indicator this is the transaction this is our products so these two are basically relating to each other like I mentioned so product IDs refer to the ID of the product same with the transaction so it's referring to the transaction so this is way this is the information we're getting to use in this particular model and the other one as well so let's go back and refer to the product and then from here let's go to the product JS router and we have all the models we have the model set up and all we need is product.find and this gives us our list of products so all the products in here are going to be sent back to the front end so we have all of this basically set up we're not going to do anything fancy with the routers for this but we're just going to keep it like that if you ever need to do any modifications sometimes the data you're saving might not be what you want for the front end that's where you will have much more logic over here and you would do what they call data transformation or modifying data so it fits your needs and then from here we're going to go back to index.js because right now we have our routes we have our product but we do not have information that's seeding into the database so we have no product information so again we can go back to data.js and we can see products and this is the object and mock data that we can insert into our database and we're going to be doing the same thing as we did before so over here back to the index.js we're gonna import the products as well along with the model of the product and we're going to go down and we can just go down over here and we can insert product like so and then I want to insert products make sure it's plural for this case we're going to insert our products into the product database so let's open up our terminal and I'm going to save it just once and let's make sure everything has no errors and it looked like it worked and once I've done that I'm going to comment this out all right once we have inserted we can go now to back to mongodb and we're going to check if our data has been inserted so if we go back to database Collections and you can go into the product section and you're going to see we have query results 1 to 20 of many so that means we have a lot of products all inserted and perfectly aligned so we have the price so if you see and again let me just reiterate with the currency you see one two two one you don't see any decimals but this is actually twelve dollars and 21 cents so that's how the currency is being saved so this is six dollars 82 cents so anytime we insert it we're multiplying by 100 and when we grab out of it we're dividing by a hundred either way we have our information perfectly fine and now we can finally work on the front end to grab that data so over here we're going to go back close the server and go to the client I'm actually going to close all of these tabs so I don't have them visible and I'm going to go to the state and go to the API and now by the way once you have all of this set up it's so easy to make another API call and I'll show you how easy this is once you have the typescript we'll add the type soon but first we can just copy this entire thing and paste it over here so this is for get request you do build.query something like this if you're doing like a post call or anything that changes data in the back end where you update or delete you're going to do build.mutation there is documentation for this in the Redux toolkit guide so make sure you look at those so when you do read requests like get kpis and then get products all you have to do is to build that query and it's pretty relatively straightforward and then once we have that we can just say use get products and as you can see it kind of already shows get products query like that now we do need to change some of the queries over here so I'm going to call this product let me actually make sure so if you go back we can check the routes by going over here which is product over here and then we go here product route so slash products like this so so if you go back here that's what this particular thing aligns to so we're going to say products and over here we're going to say products and add the particular tag type now just as a reminder this is basically saving this is where it's saving the information so once you get the kpis it's going to be saved in the tag type of kpis once you get information about products you can save that information into products now there's oh make sure you spell products correctly so you have that and also just to note there are some very cool things with Redux toolkit query is that anytime you have this information and you do let's say we do delete product and we do some build query we can say in the build query we can say like invalidate something like this you have some information you can do invalidate tag like this products if you have done a lot of front-end work before with full stack you have to realize when you get the products you get the full list of the products but when you delete it what happens is you have to delete it in the database but you also have to delete it in the front end and it's kind of a hassle because you have to either tell your backend team to tell you hey I need the updated list of the products so either your backend team will have to send you the correct information or you have to do that yourself or you can just you know like completely modify the particular products and find the correct one and delete them now you might think that's not too big of a hassle but it kind of is so instead of that Redux toolkit query can give you gives you an option this is not the right syntax but it gives you the option so that when you delete something in the product section you don't have to worry about getting the updated list it'll automatically recall the products list anytime you call this right here on any kind of query so if I wanted to even in this case I can just say invalidate tag so anytime get kpis gets called we can just say we want products information to be updated too so we can do weird stuff like that not necessary for kpis but when you like delete something you need the updated list of Products that come back from the back end so that's why you would do something like this and it's very very useful because it automatically does it it's very convenient anyways let's go back and I want to go to the types over here and I'm going to change I'm going to copy all of this and we're just going to say get products response like so and then the get products response we're going to have most of these basically the same and we're just going to change what we need because according to the products we have a price and then we have it expense and then we also have transactions and transactions includes an array of object IDs which are a string I like that and then we also have and I think I missed this for the other typing is the timestamps so the timestamps includes created at and updated that so I think I realized right here we should have added this for get kpis response so now we have get products response and in here I'm going to change this to get products response and make sure you import that all right so now we have that saved we can actually use this particular query in our code so now if I go back I can go to components or actually scenes we'll go to dashboard row two and in here I'm going to say const data and I'm going to grab use get products query and we're going to use intellisense to grab that and over here we're just going to grab this information and we are going to console log it to just check if we are getting back the data so let's open this let's open this open our terminal and as you can see we are now officially getting our data correctly perfect so we have created that expense ID price transaction update of that and these two extra all right so with that let's actually close this Dev tools and let's look at what the first chart is going to look like it's going to it's just going to be operational versus non-operational expenses so it looks pretty much identical to this there's a few things that are different doesn't have a legend but most of it is going to be the same so we're just going to go back to our Row one let's go back let's go back to row one on our pages let me close all of these out to keep it neat and we want to go to the second chart over here and I'm going to copy and paste everything from our grid area B and I'm going to place them with the D1 and just change that back to D over here I'm going to change this to or I'm going to make sure we're importing that let's see if okay intellisense decided to work today so line chart is all common we have Cartesian grid over here oops x-axis same with y-axis let's make sure that's imported so I'm just making sure everything is imported correctly okay that is the wrong one don't make sure you have tooltip coming from recharts not Material UI like so I'm going to save that so we're going to have that entire list and we're seeing nothing because there's an error we don't have some of these Imports coming in so we're just gonna wait for that make sure line comes in as well and we also need to set the palette as well so we're going to go up here we're going to say palette and we're going to say use theme and we're going to grab this from mui material so we have our palette we have this color we also want to make sure we have the same text over here and this is going to be operational versus non-operational expenses say that and then I'm going to get rid of the subtitle and then a lot of this will be pretty much okay but we do need to modify a few things so over here we're going to have a data key for the left one is going to be non-operational expenses and on the right side it's going to be operational expenses like so we have a line line Legend actually we don't need the legends so I'm going to get rid of the legend we have y-axis y-axis over here we want this orientation to be right and then left and this orientation should be left as well we have name tick line Style we're going to keep this particularly the same you can go up here this is also going to be the same so now we just need to format our data properly so I can call this operational expenses and I'm going to change this width to height we don't need a hard-coded value for that and we can just go up here and we can Define and we can Define operational expenses and we're going to pass and use memo and actually it might be just easier to just go up to row one and we're just going to copy let's just copy this one doesn't really matter let's just replace it and I'm going to call this operational expenses we need to make sure use memo is imported like so and with data if you take a look again it's formatting to get products response so monthly data knows to grab from get products response as well oh and that is because operational expenses is not going to be in the sorry it's not in the use get products query it's going to come from hold on we'll fix this as we go so we're going to get this from use get kpis query so it's going to come from the old one we'll we'll use this particular query in a little bit but first we're going to have this data over here and we're actually going to call this operational data so it distinguishes the name so you have this particular data and we're going to call this product data and this one's going to call operational data so I'm going to just replace this like so and now if you take a look operational data now has the get kpis response object which includes the monthly data which we can grab from month revenue and expenses so over here one more reminder if we go to types this will be representing what this particular object is so we don't have to type it if you didn't have that it's typescript is going to yell at you all right and then from here we're going to keep the month substring but we're going to change this up right here so I'm going to call this operational operational expenses and we're putting this in quotes because we have a space in here and we want to identify this as a string and we're going to say operational expenses and we want to change this to month operational expenses same with none operational expenses over here and we have non-operational expenses and we're going to pass in non-operational expenses over here and we want to change the data to operational data okay and from here we're going to make sure we have this aligned over there and okay and I believe I spelled that incorrectly that should be plural yeah that should be plural and everything is good let's make sure we'll have any es linting errors we're going to save it let's make sure there's no errors over here and we're going to open it up into our current application I'm going to refresh it and we're going to see we have our operational and non-operational expenses over here which is perfectly aligned with what we expected so perfect and then from here we're going to go to our next table which is campaigns and targets so this one's going to be a little different we're actually just going to hard code the values for this one but if you have extra data you can use the pie chart to make this happen all right so since the next chart is going to consist of a pie chart so we're going to go to recharge again and we're going to see we're going to try to find a pie chart so we can go down we're going to do something like this there's a lot of fancy pie charts if you want but we're going to keep ours pretty simple so let's actually look at this and this is the particular one that we're going to be using so this particular pie chart we're just going to have this a little more thicker and we're just going to have probably no space in between so we're going to be using that and so I'm just going to go over here I'm going to copy this pie chart and we're going to replace not replace but put it inside our dashboard box over here let me save it so it formats it but we need to import let's see okay intellisense this is deciding to work so we have pi over here and we need our cell placed over here and then everything else looks pretty good so now we need to make some modifications so we do have two pie charts because they displayed that actually so we can just get rid of one of the pie charts so all we have is this pie chart out here and we are going to set this to be pretty small I'm going to set this to 110 by 100 and you can configure what you want to do on on Mouse enter so anytime you hover over it something will happen but we're not going to deal with that so in here let me save this let me put this on new lines because I want to set the margin so if I go up I'm going to grab the margin over here from the line chart and then just modify it afterwards so I'm going to place it here top is going to be zero right is going to be negative 10. left is going to be positive 10. and bottom is going to be zero forgive my very slow intellisense I don't know why it's so slow nowadays all right and then over here I'm going to change a few settings we don't need cxcy which is basically the positioning of it the data we will change this to Pi data which we have not created yet and then inner radius is going to be 18 38 and again this is something I already determined beforehand but anyways I'm going to change the fill because we will change the fill by the cell colors and a data key will be value and again Pi data should be what we map to like so we're going to have entry and then index we're going to keep the key just like that but we want to change the fill to be Pi colors which is another array that we are going to create these are all just ways for us to manage what this is going to look like and we'll do that in a little bit so once we have that we pretty much have most of what we need for the pie chart so over here I'm going to go up go to the top section and we're going to identify the pi colors so this is how you set up the pie chart we're going to set Pi colors I'm going to set this to palette dot primary 800 I'm going to set this to palette dot primary 300 for the second one and this should be plural as well I'm going to get rid of these props and I'm going to say const Pi data and this is going to be an array of objects so I'm going to call this group a set this a value of 600 and then copy this to be 400. so if you have data these are the settings that you would you would put the values into here if you wanted to insert the data into these guys but for now this is just going to be hard-coded for just the pie chart and once we have that let's actually double check we don't have any errors and over here aha we got our pie chart now it does seem to have a little bit of a border and let's see why that is oh and that's because we can set this or we can change this to stroke equals none it actually looks pretty cool with this border but we can just remove that easily with the stroke all right and then from here we have in the final build we have like the header again and we have some text over here so essentially we're going to need to use flexbox to align this so we're going to have this box this box and this box all doing space between maybe with some margin on the right and we're just going to put a bunch of text like this so it's just a bunch of styling and settings so the first thing I want to do is I'm going to add the Box header and I'm going to set the title to be campaigns and targets and I'm going to set that side text to be plus four percent and I'm going to close this and over here in this pie chart I'm going to set this to flex between and I'm going to import that I'm going to say margin top with the 0.25 REM and a gap of 1.5 REM and a padding right of one REM and we're going to have all of this encased around our pie chart and then below this we're going to have our box and we are going to say margin left is equal to negative 0.7 REM Lex basis to be 40 percent and it seems like we didn't import this yet we haven't so let's say box it's going to come from mui material and flex base is going to be 40 just FYI if you guys don't know what Flex basis is is that when you're when you have a child element inside a flex box which is right here this is a flex this is basically the width instead of doing with you do with 40 we're doing Flex basis 40 so Flex basis is a way of setting the width but it is much more aligned with how flexbox works so it tries to become forty percent but if it gets too squished it's going to adjust as needed as the flexbox determines so it's much more it's a better version of width is what you would say in when you are using flexbox so instead of using width over here you want to use flex spaces all right and then we have a text aligned over here I'm going to say typography we're going to import that and I'm going to say Target sales I'm going to say variant of H5 and below this I'm going to say typography I'm going to give this a margin of 0.3 REM top and bottom 0 on the left give this a variant of H3 with a color of palette dot primary 300. I'm going to close this out I'm going to say 83. so these are hard coded values but you can set these to whatever you want and I'm going to say typography variant of H6 I'm going to say Finance goals oops goals of the campaign I really can't type today that is desired like that I'm going to save that or make get rid of the space so we have that information right here and we are still missing one more box and we're just gonna copy this entire thing again actually and we're just going to modify it as we go so instead of getting the margin left and the text align Center I'm just going to get rid of those I'm going to keep this to be losses in Revenue I'm going to change this one to be a variant of H6 and we're going to say losses are down 25 percent this one is going to be margin top of 0.4 REM ient of H5 and I'm going to call this profit margins I'm going to replace this or copy this over here and I'm going to say variant is equal to H6 and I'm going to say margins are up by 30 percent from last month and there you go we now have our texts all placed over here it's a little bit of hassle to write all of this but the typography helps us set up the variants and we just have to put the text inside all right and then from here I'm going to go and I'm going to look at the final product or final application and we can see we have products and expenses we have our scatter plot so this is called a scatter plot and we have price and expense and we have actually formatted into a dollar signs over here for this one so I'm adding that format formatting as well as the price is going to be in dollars over here same with on the bottom as well so we want to use this particular chart and we're going to insert them over here so I'm going to go back to our recharts I'm going to go to our simple scatter chart and we can basically use this information so I can again copy all of this and we can paste it into our code so inside dashboard box grid area F we're going to paste this I'm going to call this scatter short and we're going to import that and we're going to import scatter as well and then from here I'm going to add a box header like so I'm going to say title is equal to product prices versus expenses I'm going to call this side text and this is going to be plus four plus four percent like so and we will have our scatter chart but we want to format our data we want to do a few things so The Stroke of the Cartesian grid so the stroke in the back we're going to have this to be a gray color again and we need to modify a few things for x-axis so this is going to be type of number let's actually format each of these put it on a new line makes it easier to see it and then we have a data key and the data key for the x-axis is going to be price so how much it's going to cost for the user and the name is also going to be price so the data key represents what we are saving into the data whereas the name of the price is going to be what it represents so that's the text you see in this tooltip over here and then over here I'm going to say axis line is going to be false like we did before I just don't like the axis same with the tick line we don't want that and then we're also going to do style of font size 10 pixel I kind of like the fonts to be small Which is my styling preference because it kind of makes it look kind of professional and you can fit a lot more information but anyways we have this tick formatter so this tick formatter is basically going to grab the number we have on the ticks for the x-axis and we can reformat that data into a format that we want so for example in our case we want that dollar sign so what we do is we're going to add a template string and we're just going to say we grab the current value so for example this one would be 50 . we're going to pass that in over here 50 and we're going to add a dollar sign in front so that gives us a 50 so this formats are tick via the tooltip over here or not tooltip on the axis over here so that's how we set those and then from here the next thing we're going to do is we're going to put this as y-axis and I can just get rid of this one I'm going to since we have everything copied I'm going to change the price to be expense like so and we can keep everything else the same and right now we don't have the information yet because we need to set the data over here but before we do that we still need to modify our tooltip and we're also going to have a formatter over here which is going to be the same exact function that we were just using but this is going to be for formatter of here so price colon dollar sign so that's again what we're basically configuring right here so I'm going to replace that again and in this one we also have a z-axis so the reason why we have a z-axis can represent like sometimes you can make three-dimensional charts or three what was it three axis charts instead by changing the value of what it looks like so this is going to actually determine how big those dots can be but in our case I want it to be just one value and I just kind of want it to be smaller than the default so this is how you can change the size of the dots so we have a type and a range intellisense will get rid of that I hope all right so we have scatter chart we have box header and then we have responsive container and it seems like oh yeah again I made the same mistake the Box header should not be in the responsive container it should be outside so you can save that and you won't have an error and the last thing we kind of need to set is going to be the scatter and we just we're just going to call this product expense ratio and then the data is going to be product expense data and then the fill is going to be palette dot tertiary 500. so this will determine the color of the dots the data is going to be the data formatted data that we need to create right now so I'm going to go back up all the way and we are probably just going to copy everything over here and instead we're going to use product expenses or product expense data so I'm going to call this product expense data and this here should be called product data make sure you're modifying all three of these and in this case we don't have monthly data we're just going to map it out and the values we're going to grab is going to be underscore ID price and expense we basically need the ID for mentioning which ID represents which data so that's why we have the ID underscore ID and then price is going to reflect price expense is going to reflect expense save that let's actually see if we have any errors and it doesn't seem like we do however the formatting the position of the table is a little off so let's actually fix that so we're going to go back down and let's actually see I believe the height and the margins are kind of messed up yeah so the height should be a hundred percent and for whatever reason I thought I'd change the margin but I guess I didn't so we're going to change this to 40 or 25 the bottom should be 40 and the left should be zero so I'm going to save it and voila we have our perfectly aligned product prices and expenses it feels like on the left it's a little yeah for some reason I yeah the left margin is a little off to me so that's why I changed it to be a little wide there you go there you go we have row two all set up and complete perfect with Scatter Plots we have line charts we have bar charts we have line area charts and so I'm so and so forth all right now that we have row two finished now we're going to do Row three so now Row three is going to be slightly different because we actually have scrollable tables over here and we're just listing our products as well as listing our orders which is the transaction data and we're also going to have a few expenses breakdown by category from kpis and just information over here so what we're going to do is we're going to use data grid to create these tables and we're also going to have to create we already have the products we need to create the transactions API so we're going to do that first and then we'll set up the UI for this so we're going to close this down I'm going to close all of these and I'm going to go to our backend first and in here I'm going to go to index.js all right from here in our routes we are in our index.js file from our server folder directory and I'm going to go to the route section I'm going to write slash transaction comma transaction routes like we did before and we're going to go up here I'm going to do import transaction routes and make sure you're getting the singular versus plural correct in your typing and this is going to be routes plural transaction dot Js I'm going to hit comma and over here I'm going to import transaction which is the model from dot slash models slash transaction .js and if you remember from our models we have transaction over here this is the model that we have and we want to make sure we import that and also in our data we're going to have transactions as well from our data.js if you go down you can see transactions let's do const transaction and you'll be able to find the transaction over here so we have ID amount and the buyer and then the product IDs so that will be our information and now let's actually create the route so I'm going to go over here go to our routes and create a new file and I'm going to call this transaction dot JS and it's going to be singular and over here and again I'm going to just copy everything from kpi and then paste it and we are going to change this from let's actually if you hit this and then this will match like the full word it needs to be match the full word and match the correct you know casing so we can just grab the particular ones right here so we're not grabbing the kpis over here so it's easier to modify so I'm going to change that to transaction and over here once we hit kpis with these guys we can just change the ones we want so we have transaction.find however transactions is actually a pretty big list and we want to limit the amount that we're grabbing from the back end so and plus on the front end we don't need that many we're just going to show the 50 latest transactions because maybe in the real life scenario you might have like thousands of tens of thousands of transaction you don't want to bring all of those because that's going to slow down the computer and you're going to slow down your server as well and people are going to have lagging and latency issues so you want to make sure you have limits on that and we're going to limit this to 50 and then create it on and if you do negative one that means you're sorting by the latest so this is how you can grab and filter the transaction information based on the latest transaction that occurred so I'm going to save that so now we have our transaction route what we need to do next is like we did before is basically insert our transactions so we're just going to grab this and put transaction singular and then transactions plural like so I'm going to save that I'm going to make sure we saved it I'm going to just turn this off again because I already saved it once now we're going to go back to our mongodb and I'm going to refresh this particular database and once we see we have our transactions and we have our transaction data perfect we have the buyer the amount and the product IDs so everything is working as expected so let's go back and now we can close our backend and then we can go back to our files and we can go to the front and we're going to go to state API and again like I mentioned before this should be very simple so we're just going to grab all of this so we're just going to say get transactions and we're going to change this to get transactions response and the product over here should get rid of that we can manipulate both of these and we can say transaction so transaction slash transactions and we can change this to transactions plural and we can paste transactions over here all right and then from here I'm going to copy this over our types and we just haven't created this yet but we will so I'm going to go to this file hopefully I'm not going too fast that you're not be able to follow along but a lot of this is very similar to what we were doing before so I am just going to copy the get products response I'm going to paste it over here I'm going to call this get transactions response and we're just going to change a few things to align with what we had so I'm going to change price to buyer and I'm going to change expense to amount and then I'm going to change transactions to product IDs so now we have everything as expected with the current get transactions response and we are now ready to use it except we do need to put it over here so we're going to say use get transactions query and I'm going to copy that I'm going to save it so now we have our get trans get transactions API and you can see how convenient this really is Redux toolkit query is very nice so I'm going to close all of this and I'm going to go back and go to my scenes go to row 3. and over here I'm going to say const data I'm going to call this transactions data and I'm going to say use get transactions query and we're going to grab that and we are going to console log this just to make sure everything works as expected so I'm going to open this up in our current application and then we're going to open up our terminal and as you can see we have an array of 50 and we have our information and as you can see it will organize this in the proper time but it seems like the time difference is not that much so 4 43 44 94412 so it's going to go backwards from there so perfect everything's working as expected so now we just need to create these particular tables and we're going to start with list of products first so we need to grab the products query first oops I didn't mean to close that so let's actually re-close it yeah just FYI just a reminder this is the completed app 5174 this is the non-complete that 5173 so let's actually move this over and in here we are now going to grab the get products query as well so we're going to say get const data colon product data and is equal to use get products query I'm actually going to change transactions to be singular because that's the convention I've been using so I'm going to get rid of the plural and also I'm going to make sure we get the kpis as well because we're going to be needing that for the last few widgets so I'm going to call this kpi data and I'm going to use use get kpis query as well make sure that gets imported so we now have all three of our queries all aligned perfectly and we can use the data as we need and just to note we are using Redux toolkit query so basically if you have used get kpis query I know I'm calling this calling it over here as well so I'm calling it in multiple locations even though all of these are on the same page so you would think hey maybe we're calling the API endpoint unnecessarily however Redux toolkit query allows us to not have to deal with that so you can call this multiple times in any location and Redux toolkit query will make sure you only call it once if the information is already there and we only need to re-update that information when we set another API call to invalidate that particular tag so invalidation means just recalling that information just to get the updated information from the back end you always want to keep the front end information and data to be in synced with the backend data or else people will be seeing something seeing a list of data that's outdated so you want to make sure everything's updated but either way don't mean to Sidetrack but basically if you can call this multiple times you in multiple locations very convenient so you don't have to pass in data everywhere and just make sure you call it once you can just use it multiple times and you'll see that only one network call is basically being made anytime so if I go to network and I refresh this page we're going to see three Network calls for three different things so if I refresh it we have kpis products and transactions even though I'm calling use get kpis query in multiple components on the same page we only are calling that once so you don't have to worry about multiple calling it anytime and you can simply use it as if you're just sharing data across your application which makes it very very convenient so I'm going to close that and we have basically our data so now we just need to set up our basic table as well now if you watch my videos before we do our table I want to talk about data grid which is from Material UI but yeah if you watch my videos you'll know how much I love this particular table because it has so much functionality and I have been in a situation where I created my own table where it was reusable maybe in like 10 to 20 different places and I can tell you it is not easy it is a lot of work a lot of code so writing your own table is not as simple as you would expect and it's a big hassle to maintain it but material UI essentially did everything that I was doing plus more functionality because I mean they're basically making money off this so creating your own table versus using a pre-made table that's very easy to use why would you create your own table it's so much easier to just use an existing table modify it as needed and I can guarantee you I've seen so many different companies or different teams try to build their own component library and they spent decades on it like literal decades they have a whole team dedicated towards such I will say it it is not a good use of money and time the only reason why those things end up being approved is because some of the non-technical people who are in charge don't understand how long those you know building your own component library takes and I'm saying this from experience because I've seen this multiple times and it's just consumed so much of a team's time whereas if I just I typically just use material UI for a lot of Enterprise level applications for internal use and you know what it just does the job way better and I can customize it a lot of people think you can't customize component libraries but you can you can do it to a significant degree like if you want less opinionated styling like material UI or if you material UI has like opinionated styling in a bit you can use headless components there's several ones like Daisy UI you can use those ones if you would like I never tried those but those are unimpined unimpinated styling so you can use those components and create your own styling from there and you can use the same functionality it's way it's big time saber if you use these pre-made component libraries but I like material UI because it had just nothing beats material UI in terms of functionality it is by far the most extensive breadth of scope and especially with the data grid there is a paid version but the free version is good enough for your use case anyways don't mean to be a material before I show I I'm not being paid by them would be nice but I am not being paid but it's just from my own experience I've had good experiences with this particular table um either way so let's actually start coding this out so you can use the data grid documentation they have lots and lots of examples so you can use it in multiple different ways without any hassle so I'm going to go up I'm going to import actually we can just go into our section with the dashboard box and we can just import data grid directly so I'm going to do that I'm going to do data grid from mui X data grid so you got to make sure you have that correctly it does have some required pops but before that let's set up the box header which we need to import as well so box header over here and this has a few required properties but we just need Title with list of products and let me go back to completed application to show you what we're building Let me refresh we're going to go down we're going to see list of products and we are going to see side text is equal to it's going to be product data comma dot length and I'll cover what this really is but basically it's going to grab the number of products and we are going to grab the length of it and display how many products we actually have so right now we don't have the product data and with our data grid I'm going to create a box around it and a nice way of styling data grid is that you can create a box around data grid and then Target the classes inside data grid from above and let me show you what I mean but let's before that let's set this to margin top of 0.5 REM because it'll give us a little margin at the top we're going to do a padding of 0 from the top and bottom 0.5 REM left and right and then the height of 75 percent and in the SX which is a styling you can put the Styles over here but you can also put the styles for SX when you're using the Box component but we can Target specific classes of data grid and just to let you know how this could possibly work is that if you go over here we can click elements and figure out over here we can figure out what these classes represent so now when you take a look at Material UI the one downside is that it is the class naming is kind of a hassle but once you get used to it it's actually not that big of a deal like I used to complain about it but once I got used to it I was like oh it's actually not that bad so if you take a look we're going to go over here we're going to copy we're going to select one of these and we're actually going to go over here and we can see this is our table right here our table is represented by this section you're going to see all these classes but what you want to do is be able to identify which section represents what so over here this represents the entire let's let's open this up so I can see better if you look at this this is going to represent the entire table and you have a list of classes over here now generally you want to avoid modifying the root because you're modifying the root of each like material you y class name but you want to check what these other ones are looking at this one's a little too this one has too many extensions to it so you don't want to affect those but we can go to something like this we can see the main and we see column headers so if I wanted to affect column headers we can just grab this particular one and then affect it this is just extra additional styling so you want to avoid those ones that have kind of like a weird number with CSS you just want to affect the class name that our targeting column headers and then you have column headers inner if you want to Target that and then we can keep going and we can see that this one probably is not something you want to affect and let's see resize triggers we probably don't want to look at those so if we go back we have this particular column I'm trying to figure out where the rows are and as you can see if you go over here you can see this is the data grid cell so if you want to affect the cell you would change that do the cell all of these have different ones you can change the virtual scroller content which represents like the background things like that so you want to make sure you know which ones to Target so after that I'm going to close it and I'm just going to change this as we go because I've already modified the classes and I only needed to Target the correct ones so the way to do this for example we do and mui data grid and we're going to Target the root because we're going to affect the entire data Grid in this case so we want to affect the entire data grid and we're just going to change the color to be palette dot Gray 300. and by the way the way this selected this selection works is that we're just doing and Dot mui datagrid dot or Dash root so what this and represents is going to be targeting a class in the child component so we're essentially targeting the class over here because data grid cannot you can't really the target itself like that so you want to create a box around the data grid and you can modify the class right below it so it's very nice and convenient to do something like this and here I'm going to say border is going to be none we don't want a border by default it comes with a border and then from here I am just going to copy this actually let's copy this entire line so we have let's copy this like that and then we have mui data grid cell and we want to modify those and you know what before we actually change this before we change this I want to do I want to do something I want to get the data so we can see what the changes are so I'm going to start by importing the Box because we didn't have that and then we're also going to add the palettes over here so I'm going to say const palettes is equal to use theme like so and it seems like I didn't import use theme as well so mui material make sure you import that so I'm going to save that and then from here we want to create columns so data grid requires some props the props that we basically need is going to include rows which is going to be like the data itself and then columns which is going to represent what these particularly each one represents so rows is basically the data we want and product columns or columns is going to be the column information of how we set up each column so I will show you so product columns will be our columns which we haven't created same with product data we also want to make sure our data exists otherwise we give an empty array otherwise data grid is going to error out if you don't have anything so up here I'm going to go and start writing our product columns first so I'm going to say product columns and let me remove this console log we don't need that product columns is going to be an array and we're going to have an array of objects so we're going to start with the field underscore ID so that represents this first ID column and then we're going to have a header name is going to be the ID so essentially I'm grabbing from the data like the product data information this particular field I'm labeling it labeling it the ID and we're giving it a flex of one so that's how much it would take of the space from left to right so that's what these each of these represents this grabs where the data property name is this is the name of the column and this is like the space it takes so I'm going to just grab this over here I'm going to paste it over here I'm going to call this expense this one and this one should be expense and flex should be 0.5 because this one takes a little bit less space and what we also want to do is we're going to do render cell so now if you remember we want to render out with the number or like the money sign so the way we do this is we're going to create a template string like this we're going to say params.value and I'm going to put the dollar sign like that so that will convert our string of maybe our number from 5.97 with the dollar sign and it's a string and because params we also we need typescript so material UI data grid provides us the type for this params so you need to figure out where to get this which is the grid cell params from mui data grid so they provide the typing for that and that should work my intellisense is slow again so it's going to take a while and the last one we're going to set the price this this is going to be Capital price we're going to keep the flex to be 0.5 and over here we're going to have the same grid cell params and everything else will be the same I'm going to save that so now we have our product columns we have our product data product columns and we can pass that in to our data grid and for now we're not finished with the data grid but I just want to show you what we have so far we essentially have this particular table so we have a footer we have our individual items we have our header so now the height is not correct we still have a footer that we do not want and there's a few IDs and I believe there should be an error over here yeah we have actually let's refresh it okay we actually don't need to worry about that but let's move this I'm going to change the header height to be 25 so it's going to be a little bit taller the row height is going to be smaller from what it is the default so it's going to be scrunched up a little bit I'm going to say hide further and this is going to be true and now we have a little more space and Heather height seems like it is not cooperating I'm not exactly sure why maybe hmm let me see how to fix that all right so I figured it out it seems like react data grid since has changed the API so it's going to look like column Heather height instead so they changed the naming of it so it should be column header height instead so I do that this is a little bit smaller on the top and we now have our linting error gone away and then also if you take a look at this versus our final product we have some styling that's different like the lines are much more subtle and our bar is different and the background is a little bit different so we're going to be modifying those we don't have this underline bar and then once we hover over this we shouldn't see that those lines as much so over here I'm going to copy and paste this and I'm going to call this mui data grid cell and this should instead be border bottom and we are going to say one pixel solid and we're going to make this a lighter color or actually a darker color so it's not as visible I'm going to say important sometimes you have to put the important because it doesn't override it properly and then over here I'm going to say column headers as well so we're changing both this border at the top of the column headers and the cell for each one so once I save it we should see all of these become lighter and then also we want a column separator we want to modify those so that should be column separator and we are going to just hide this one so I'm going to remove the border and call this visibility to be hidden so now when we this we have no column header separation perfect all right now if you noticed right now the this uh what was it the scroll scroll bar is not in tune with the rest of the web app so we want to modify that and the only way to do this is we're going to modify the entire you know scroll bars we have to modify those so we're going to go back we're going to go to index.css and we're actually going to Target this from a global aspect there might be a way to Target it locally but I am not exactly sure on how that's possible so what we're going to do first is we're going to set this webkit scroll bar we're going to set this width to be 10 pixel and then from here I'm going to set webkit actually let's just grab this right here and we're going to say track so this is going to be the track section so we're going to set the background to be a very specific color so we're going to say 24 24 27 which is one of the colors we've particularly chosen but these are the colors that look nice so I'm going to get this to be a thumb and we're going to set the background to be 48494e make sure we have semicolons over here and spell background correctly and the last one is going to be track and it's going to be when we hover over it and we want the background to be the same like so by now we can see our scroll bar has now updated so if I scroll over it we get this color and maybe that's not the correct color to be honest so maybe if I just change that a little bit it'll look a little different yeah maybe yeah I think this one actually should be darker save it yeah a little bit subtle a little bit highlight kind of nice but yeah so essentially this is how you change your scroll bars we have the track we have the thumb which is that little thing the track is the background and then the scroll bar width is going to be determining how wide this is so we wanted it to be the consistent with the styling of the website and there you go that is our table we have made a very small table and it's very simple to set up once we have the product columns and we can fit our data easily into this and we are going to be doing the same for transactions so it's going to be the same process majority of the same styling so let's make this super easy so we're just going to grab the box header and we're going to paste it into dashboard Box 2 or into grid area H I'm going to save it we're going to have the same exact thing as we did before but now we can just simply modify it for the next section so here I'm going to go up and I'm going to change recent or a list of products to recent orders and again I'm going to change this to transaction data length and this would be latest transactions and over here on the below we're just going to keep all the styling pretty much the same however we need to change some of the margins because this is like a taller table we're going to give it a modern top of one in a height of 80 percent instead of 70. I'm going to go down I'm going to keep these two the same we're going to set height for their true but instead we're going to change the product data and product columns to transaction data transaction columns and it seems like we do have an error because transaction columns probably doesn't exist and that is most likely true but we do have transaction data so all we need is a transaction columns so I'm going to copy the entire products column I'm going to remove this and call this transactions or transaction singular columns and the ID is going to be the same the buyer will be different so we're going to say buyer this should be Capital buyer and we're going to have we're just I configure this specifically this is going to be a flex of 0.67 because that's like the perfect space and I'm going to remove the render cell for buyer I'm going to keep the price with the flex actually I'm going to change this amount and I'm going to change the Flex to be 0.35 because I want it to kind of fit very neatly and then finally I'm going to change the last one and these are going to be the product IDs and we want to see how many they bought like how many products they bought so what I'm going to do is grab the params set the value to be the length of the param so params dot value dot length so that determines how many items they buy how many different products they bought and once we have that all our data should be perfect except our buyer is not configured correctly so let's actually see why that's happening it seems like for some reason it's yelling parameter okay let's ignore that let's deal with the buyer first so what we're going to do is we're going to go the transaction data to see why our buyer is showing up as zero so I'm going to open this up I'm going to refresh and we are going to see transaction we have buyer of zero for some reason okay so maybe I believe something happened while grabbing the information so let me just see what's happening all right so I debug this and just by the way debugging is something you will always have to do there's always going to be some kind of issue so you're going to just gonna have to track it down so the way I track this down so we have buyer to be zero so what could be the problem so if you take a look we're grabbing information we're just we're not really modifying the data on the front end so it has to be because of the back end so if we go back to our back end we can see maybe it's in the route the transaction however we're not modifying the data we're just trying we're limiting to 50 so it won't affect a buyer so the next logical step is to look at the model to see if anything's wrong with that and as you can see buyer is set to a currency which is not correct so maybe you caught that earlier I certainly didn't I think I was rushing but anyways this should be a type of string and we are going to say required to be true because now if you look at our data and we look at transactions buyer is a string not like a currency type so that is the reason why all the buyers are zero so making sure you understand how to debug things is very useful like that just try to track it down that's it that's as simple as that when you debug sometimes I know easier said than done anyways let's go back to fix our data issues we're going to go over here we want because our information is now screwed up we want to drop our database let's make sure everything is there yeah we want to drop our database and then we also want to insert all of our information because if we drop our database we're going to lose all the information however because we have seed data and this is not important information we can do this very easily but if you have real data you're going to have to save your data and then reinsert everything it is a big pain so you have to have a process for that but right here we're just going to drop our data we're going to save it and all of it's going to happen I'm going to comment all of this out so we don't drop it again and we can go to our Cloud let's make sure everything is back to normal all right so now we have a buyer to be a string we have a products section everything looks good there kpis should only have one object perfect so now we have the proper data so let's actually see our transaction data let's refresh and we can see that we have our buyer perfect we have the buyer now and it's listed over here and it is as expected okay so right here it's stating that grid cell params params is unknown so instead we're going to modify this and we're gonna say this is a typescript thing we can say this is an array we know for sure this is an array of string and we can tell typescript that this is the correct type usually it's supposed to be able to figure this out and I guess there is like a new update and kind of change this but now it should know that we are dealing the params.value is going to be dealing with an array of strings that's why we have a list and we are just going to represent the count from there and we can save it now typescript won't be mad at us and with that we have our tables fully complete very simple box data grid you just need to set the columns and match it to the correct field in the OR correct key in your data and you have it all set up and we have a very clean looking table and it's very simple and again data grid is awesome anyways so if we go back to our final application or final application we have expenses breakdown by category and the final like little text over here so we're gonna make those modifications so over here I'm going to go down to the I section and we're going to use the pie chart again so in this example we're just going to create three pie charts so first I'm going to go back to row two and let me close this up go over here I'm going to find our pie chart and we're going to be using this like we did before and we are going to create three pie charts over here so if you see there's three of them lined up right next to each other and we want that to happen for us so what I want to do first I'm going to create a box header and I'm going to set the title to be expenses expense break down by category and I'm going to set the side text to be plus four percent like so then from here I'm going to set the flex between as well and make sure you import that and we're going to set margin top of 0.5 REM get a gap of 0.5 REM a padding of 0 and 1 REM and text aligned to be Center like so and I'm going to paste in our box I'm going to paste in our pie chart inside there as well like so I'm going to import recharts like that as well as Pi and also sell so now that we have this information we need to configure the data we'll make some modifications we don't need any margins for this particular one we have inner radius 18 now the radius is going to be 5 in this case just a little bit of modification and I'm going to change this to Pi data Pi colors is fine we want a little bit of a typography right below our box so in this box example we are going to have a typography make sure you import that we have variant of H5 and I'm going to pass in data of 0 5 or 0 dot name once we Loop through so I'm going to change this to actually data because I'm going to just call this data and we're going to pass pie chart data into here so I'm going to have a loop with a pie chart data and we're going to map our data section and we are going to render out the following inside there so all of this all of this from the box it's going to be rendered inside here and in our box we're going to have a key and we're going to set this to be data zero dot name and we're going to pass in I and I will show you how this will look like so if I go back up we are going to configure our data for the pie chart so I'm going to say pie chart data so now basically all we're doing is we're going to go through our kpi data and we're just grabbing let's go over here and get kpi's response we're basically going through grabbing the expenses by category and we're going to cycle through this and paste this number for each of the pie chart so that's what we're going to essentially do right here but either way we want use memo we're going to import that and we're going to say if kpi data exists so we need to wait for the data to happen like we usually do we're going to set the total expenses to be equal to the kpi data 0 because it's there's like an array of objects but we only have one object we're going to set the total expenses to be this particular value and we are going to return object.entries so we get the keys and the value and we're going to grab the expenses by category so we're getting both the keys and the value from this and we're going to map through each key and the value so I'm going to move that to another line and I'm going to return in Array so I'm basically just looping through the expense by categories expense by categories and grabbing each key and the value of each particular property and value and I'm going to pass this in to name as key value as a value like so and then we also need another object because this is how the format of a pie chart needs is that they have two basic objects and we just are putting those here and we're going to set the key this should be curly braces of total like this and we are going to set the value to be total expenses minus the value so this represents the unhighlighted part and this represents the highlighted section so that's why you kind of need two objects in this particular section and it seems like we are kind of missing something oh yeah so I think it's just because I don't have a second parameter in here so we only want this to happen anytime kpi data kpi data re-renders or changes so we only want this to happen when that changes so I think it's okay I think since my intellisense is lack lagging I cannot tell if we have an error and if everything is okay so let's actually refresh it and it does seem like we do have an error and it's because of something else because Pi colors is not identified so we added Pi colors I just didn't I just didn't add it so I'm going to add that so pi colors up here I'm going to set palette dot primary 800 comma primary or sorry palette stop let's do this palette.primary 500. and we should be able to see R values now and there you go we have salaries supplies Services all spaced out and we can see our expenses break down by those perfect now you can put labels on it for now I'm not going to do that this is pretty simple we've already done it multiple times there's no reason for me to go super in depth and then the last one is pretty simple we just have this particular box that just represents a line section like this and it's just filled with a certain percentage and I just wanted to show you how that's kind of done it's very simple we actually don't need recharge for this so we're just going to be using box to configure this so let's do this very quickly so in here I'm going to copy the Box header so we can paste it down here and we'll have a box header and we're going to say overall summary summary and explanation data and then this could be plus 14 or 15 percent and over here I can say we have a box and we're going to close it and we're going to have another box inside there as well because this will represent the inner box and what I'm going to set this is going to be the height to be 15 pixel we're going to have a margin of 1.25 REM 1 REM 0.5 for REM and one REM I'm going to set the background color to be palettes primary 800 so a dark darkish green and then we have border radius to be one REM to give us like that rounded corners and then over here I'm going to set the height to be 15 pixel as well I'm also going to copy these guys over here and change the color to 600 and we're going to set the width to be 40 percent and let's save it and let's actually see this we have our bar so this is pretty simple so if you ever wanted your data you wanted the percentage you can show that percentage just by passing some data in here instead so very simple to get that thing and then we're just going to give a typography let's say margin of zero and one REM with the variant of H6 and in this typography I'm just going to copy all of this over here just for convenience sake now you can just put whatever text this is just gibberish text so you can just put whatever text you want and then we should see that in our final so there we go that is Row three and that is pretty much our entire dashboard right here so we have this entire dashboard page we have operational profit revenue revenue by month by month all of this and everything is basically working as expected we can go down we have responsive layout it doesn't respond right away but if we refresh we'll get the proper layout for this and that is the dashboard now with the dashboard completed let's actually remove this console log in Row three here we can actually do some of the fun stuff so I'm going to open this up I'm going to show you we have predictions so right now we have a list of all the actual Revenue data points on this particular line and we actually have something called a regression line so what I want to do in this video I want to introduce a little bit of machine learning now I know when you think of machine learning you think of math you think of Science and all these research papers and all this complicated aspects to it but as someone who's been learning machine learning a little bit on the side I can tell you machine learning in general it can be very complicated but also can be very simple so what I want to teach you is a little bit about machine learning and show you it's actually not that bad and because of the way software engineering is going to be headed and all the machine learning and all the AI coming in taking the World by storm we basically should get a little bit of understanding what machine learning actually is as software engineer because it's going to impact us more and more so it's important to just get a little bit of an understanding in a head start and I want to bringing in very very slowly and it will be easy to learn so this is what's called a regression line now like machine learning like software engineering machine learning is filled with a lot of fancy fuzz words but if you take a look regression line is just What's called the best fit line that's a better term for regression line basically it just means a line that best fits all the data points so it's basically going here determining through some mathematical formulas I'm not going to go into the mathematical formulas this is if you know how to use that formula you can calculate what this line should look like and once you have this you can use this to predict future future values and future data points using this particular line so if I click over here I have a button that says show predicted revenue for next year and this is going to be a continuation of our line for next year up here so predictive Revenue in January is going to be twenty thousand twenty one thousand all the way and so forth so this in a simple case like this this is actually a good predictor of how much it'll be making if assuming the growth is similar so I mean obviously there's a lot of variables to any kind of business and there's a lot of potential like problems that may arise but if assuming the growth is steady just like this and we have data points that fit a line perfectly like this we can easily create this predicted Revenue graph to get like a machine learning model to predict what the next year is Revenue will be so it's very simple and I'll show you and I'll go walk you through on how to do this and I just want to get you guys a little bit of an introduction on machine learning because I think it's very valuable to try and get it at least an understanding of what this is as software Engineers because it's going to impact this more and more and I want you guys to fully pay attention to what's going on anyways for our page so let's get out of Row three and we're gonna go and we're going to go to our prediction page so now if you remember we have a predictions route and we are going to add a predictions component over here so I'm going to say predictions like so and we haven't created this component yet I'm going to import it so predictions from at slash scenes slash predictions I'm going to save that we're going to go over to our predictions folder create a new file and I'm going to call this index.js index.tsx sorry I point that I thought I was using regular JavaScript but I'm using touch so I'm gonna do TS RAF c e and I'm going to say predictions like so all right so the first thing we're going to get started is just gonna set up some of the default things so like palettes and we're going to pass in use theme with mui slash material to get the colors I'm going to set a state and we're going to call this is predictions and set is predictions and this one is pretty simple so I'm going to do use state from react make sure you import that and I'm going to start with this being false so let me close this so you have more space all this is going to do is this is going to check it seems like I didn't do the uh like the gap in responsive layout I think I missed that so it's a little too close to each other but either way right here this is going to show you this is going to determine the state of this button so I can click it on and off and this is what's going to control that all right so from here I'm going to go to the next line I'm going to say const data and I'm going to say kpi data like so and I'm going to say we are going to grab use get kpis query from the API file and then what I'm going to do first is I'm going to set this layout we're going to use a dashboard box and this is just going to be one big layout and we are just going to have a bunch of elements that are going to be displayed as we go along so let me get rid of this div and we are going to grab the dashboard box because it has all the styling that we wanted from before so if you remember that's going to give us like this big old box let's go to predictions so right now we don't have it being displayed we have predictions page and let me see we are on the predictions and right now let's see okay so it seems like we have an error over here so if you are seeing this this is like the old value because I erased it I'm going to just restart the server and let's see if that works okay there we go so right now you may not see anything we just have this weird line and that's basically just a shadow we just don't have a height for the dashboard box but let's do that we're going to go over here we're going to set the width to be a hundred percent I'm going to set the height to be a hundred percent I'm going to set the padding to be one REM oops on REM and I'm going to set the Overflow to be hidden so we don't see any leftover spilling and as you can see now we have the box as we want and then in here I'm going to create the title except I'm going to just before I used to use box header but this one is going to be slightly different so I'm just going to create my own now it's possible again this is react you can make this reusable you can make the Box header reusable but sometimes it's it's nice to just have it separate you don't want everything to be too coupled is that the term that they're talking about when they think about hey if you try to make everything reusable or use a function that everything is basically using then you make everything tightly coupled together that means you make one change on that function and you're affecting like 50 different components for example then you're gonna have some problems when you really want to tweak something very individually now there are ways around it but I honestly I think sometimes people just over complicate things you can just keep things simple and as someone who's like led a team you It's always important just to keep things simple instead of trying to over complicate it with a lot of abstractions abstractions can be very problematic a lot of people just seem to put a blind eye to like abstracting out everything you shouldn't always do that and I cannot iterate that enough because I don't see I don't see a lot of experienced Engineers do that enough they just try to abstract out everything and then they try to make everything look cool but it's also very complicated and hard to read so honestly I suggest the simplicity anyways enough about my rant here I have a box we're going to create a typography over here this is going to be Revenue and predictions over here I'm going to save it I'm going to move this over here so we see revenues and predictions I'm going to say typography over here we're going to give it a variant of H6 and in here I'm going to say charted revenue and predicted Revenue based on a simple linear regression model and that's the term for this so this is a basic simple linear regression model because it's basically just a line that is going to best fit the data points that are being displayed on this particular chart now there are like more complicated ones like polynomial regression model and other various forms I can't recall off the top of my head but these are very basic machine learning like you would be surprised because this is like this is a basic math this is not even sophisticated machine learning so you have something that can actually just predict values because you just created a line that best fit all the data points that's it it's very simple obviously it's not chat GPT or dolly or um mid-journey those are much more sophisticated models and they're called Deep learning but these are basic machine learning that it's good to know if you want to learn into it anyways we're going to create this button and this is going to come from material UI so let's make sure we use intellisense for that and I'm going to do set is predictions and I'm going to make sure we flip the is predictions value like so I'm going to make sure we close that and we're going to do some styling as well and as usual my intellisense is lagging again I don't know why it's so slow could be that I have a million things open all right anyways so I have SX like this I'm going to say pallor or color palette dot Gray 900. I'm going to do BG color palette dot Gray 700. I'm going to set this as box Shadow so this is just going to be essentially this button right here and I'm going to do 0.1 REM zero point one REM so 0.1 REM and 0.1 REM I'm going to do rgba with zero comma zero comma zero comma zero point four something like that and in here think this needs to be background Dash color sorry it needs to be account case background color like that I'm going to say show predicted Revenue [Music] for next year and I am going to put a gap between this unlike my final build so I'm going to do zero point let's say three REM [Music] and it seems like we do oh there's a missing comma that's why it's yelling at me okay and there you go we have our state so it looks a little small so I'm just going to add more maybe one even one is fine so we're going to have a bit of a space in between so that that looks pretty good all right and then from here we're going to be adding our line chart so I'm going to go back I'm going to close this app and we can go to let's say Row one and we can grab a line chart that we have I'm going to search it up and we have our line chart over here we're just going to copy this um from responsive container yeah starting from there I'm going to close this and below our Flex between I'm going to add our responsive container with everything in between so we will be able to create our chart via this and I'm going to make sure we import everything that we need from recharts we have a Cartesian grid and I believe we don't have a vertical for that one I'm going to import x-axis y-axis tooltip from recharge not Material UI Legend yeah we need legend for this one we need our line from recharts and I believe that should be good let me see save it we are going to error out because this doesn't exist so we're going to say we're going to call this formatted data we don't need width or height because this is a responsive container we have margin I'm going to be setting these manually right here so 75 20 with node negative bottom of 80. okay we have a Cartesian grid we're going to keep the stroke um we also want a stroke Dash array and I'm going to say three three so you can set up your own custom version of the stroke and in our case we're going to have like a little stroke stroke dashes instead of regular lines and then from here you can take a look the legend is actually on the top so all we have to do for that is we can go to the legend we're just going to remove everything we don't want the same starting for that we're just going to say vertical align and we're going to set this to the top section so that I'll show you let's make sure it's all on one line so that will move our Legend to the top and right now we won't be able to see it because we don't have the formatted data but we will shortly so another thing I want to add is going to be these labels right here for this particular chart and that's pretty simple so let's actually do this we're gonna make sure it's no longer self-closing so I'm going to add a closing X axis and we are going to add a label component from recharts and this is what will allow us to add those titles for our axes so we're going to have a value of month we're going to offset it so that just moves it by negative five and we're going to do position and we're going to say inside bottom and we're going to close this so that will give us our label on the left side and we are going to do the same thing for the y-axis and we also have two y-axis let's get a rid of one because this is just single axis we don't need a y-axis ID and we're just going to make this non non-self-closing because we want to put the label in between so I'm going to do label over here and this one is going to be Revenue in USD I'm going to have an offset of negative 5 and if you notice this is not horizontal it's not written horizontally so we have to set the orientation or sorry angle to be negative 90. so that's why it's like horizontally positioned like that and by doing that we can also do inside left so that will set the position so that means just like the inside of this section and that's where it's being positioned so we have that and also I'm just going to tell you ahead of time right here let me move this because it's kind of hard to see so we're starting from 12 000 because there's a lot of empty space on the bottom so usually when you create these charts you can eliminate some of the bottom so you can get rid of unnecessary space so in this case I could do y-axis and we can do domain and we can pass in 12 000. and then 26 000 as well and I'm going to say axis line I'm going to pass in stroke width and we're going to give it a zero inside I'm going to give it a style of font size we can keep the tick lines but we also want to do tick formatter because I want this to have a dollar sign so we're going to do this create a callback function put a dollar sign and put the V inside so we get this for our y-axis and then let's configure our lines so the data key let's get rid of these y-axis IDs over here and we can say data key is equal to actual Revenue so that is going to be the green line or green dots and then the regression line are going to be like an actual line so we're going to say this one is going to have a stroke of primary dot Main but a stroke width of zero because we do that we have we don't really have a line going and that's what we kind of want for this data plotting and then from here I'm going to set the dot to be stroke width of 5. so we're adding dots for our line so that's how you can create this particular line then we also need a regression line so this one is going to represent our regression line and I'll cover how we are going to be setting up the data but for this one I'm just going to have a custom color I could have added it to our theme but it's kind of lazy for this one I'm just going to add the color directly and we're going to have a DOT of false so this one is actually the line that best fits here and then finally I'm going to say is predictions and we are going to create a regression line if his predictions is true so I'm just going to copy this line over here and I'm going to get rid of stroke or sorry the dot and then over here with the stroke I'm going to set palette dot secondary 500 for this particular color and we are going to set this and to be called predicted Revenue I'm going to save that I'm going to go up here we're going to have width of 100 height of 100 and formatted data so for a formatted data I'm going to go up here and I'm going to do some logic that will format the data properly so I'm going to set formatted data we're going to do use memo I'm going to import that so I'm going to pass this in with the function like that I'm going to have an array and make sure we update Based on kpi data over here now if kpi data does not exist we're going to return an empty empty an array so we want to format the data to be always at least an array so it doesn't error out if you don't have an array it's going to have problems anyways so from here we're going to create the month data we're just going to separate this out into a variable to make our lives easier because it's kind of ugly when you do something like this I'm going to say monthly data so basically grabbing the monthly data from our kpi data and then we're going to format it in a proper way so I'm going to say month data.map and I'm going to grab month Revenue and expenses and I'm going to grab the index as well and then from here we're going to return the index and the revenue so we have our formatted data to be in the format of an array of arrays that include just the index and the revenue so the reason why we're formatting it this way is because of what we're going to be using which is the regression library and what they want is the x value and then the Y value so in our case we're just going to use the index and that actually represents if you like take a look here that represents the month so January represents zero February represents 1 March so on and so forth and the revenue is the revenue for each month so we need to format this so that we can pass it into this particular Library which is regression JS and then provides a nice little function that will allow us to use regression and we just have to pass it in like this so regression dot linear so that's what we're trying to do we're trying to format it to make it look exactly like that so I'm going to call this formatted and we are going to pass in Array data point like so and data point should we do it correctly it should be coming from actually we could just let's write this in manually basically we can grab data point from regression so this is basically just a a format that regression takes so we need to use this particular type so we can pass that in correctly to the linear formula and the linear formula will be done something like this so we have a regression line and we can say regression dot linear and we're going to pass in formatted if we didn't add this particular array and we didn't type it in this particular way regression.linear would have rejected it so even if I just remove this we try to do implicit I believe it will try and tell me differently but my linting is not my limiting but my oh yeah my linting is kind of like slow so cannot find name regression actually so we probably need to import regression first so import regression from regression so make sure you do that and we'll just wait for to see what's happening with that and then we're gonna we're gonna return we're going to return month data and I'm going to pass in month and then Revenue and then I as a number so that's the index so we're going to grab this I'm going to have a return object or return or a callback function and I'm going to return an object from there and then from here I'm going to say name is going to be month and then actual Revenue will be the revenue value and the regression line oops there should be a colon so this is basically creating our lines so right now we're basically creating our lines so actual revenue is just going to be the revenue values so that's pretty simple but the regression line we're going to have to use the library so we're going to use regression line and we're going to say points and we're going to pass in the current index so the current month so this is the current month right here like this current point is going to be the current month and then we also want to grab the second value which is the revenue so it's going to grab points I so for example January it's going to grab the revenue after that so that's what this is actually representing and we cycled through this for every single month so each of these objects represents a data point which is let's say January and then we get the actual revenue for January and then we get the regression line point for January so that revenue for January and then finally we're going to do the predicted Revenue like so we're going to say regression line dot predict and the way we do this is going to be I Plus 12. so bear with me but this is basically essentially representing next year so I starts with zero but we are going to increase it to 12 so we start at the next year prediction and we are going to give the revenue value for that one so we're predicting this is going to be the next year starting from zero and we are going to grab the revenue value for that so that's how you would use predict to predict future values even though I like I 12 13 14 15 they don't exist in the current formatted data we can use it to predict the future values so this is how you can use a regression line to grab the next set of values now for some reason I thought I remember before it used to yell at me if I didn't include that but generally it's better to explicitly type whatever you need for typescript so it's very good to just keep that and actually month and revenue we're not really using over here so we can just get rid of that but hopefully this makes sense so every single one of these is a data point we have January and then we're going to get the actual revenue for January regression line is going to grab the point for best fit point for that particular line and then the predictive Revenue we can use predict to predict next year's by trying to go for the 13th point which is going to be January of next year and that's how we get the predicted Revenue all right so hopefully that isn't too tricky it's pretty simple it's just once you use this basic library then you can actually use predictive Revenue if you wanted to get into the math regression line it's actually not that complicated they do have some averaging functions and standard deviations that you are required to know to make your own regression line but honestly even if you learn those mathematical formulas I don't know how much that actually helps you understand machine learning is just predicting it it's all about averages um that's what machine learning is it's just averaging all the time and it's trying to predict the next value with as much accuracy as possible and it's a lot of statistics and probability things like that that's how you get to the point and with having said that and I believe everything should be pretty good apparently this is yelling at me and it seems like I have not installed a package myself so we're going to get rid of that I'm going to turn off our server for the front end and I'm going to do npmi regression so that's how we install this guy over here we're also going to have to install the types for regression because in typescript for certain packages you need to install the typings so we're going to do at types slash regression and with that we should technically have our packages pretty much ready so I'm going to run npm run Dev and let's just see if this will work out sure I wish there was more space close this out and as you can see we have our line it does re-render if you do if you change this because it's responsive and I click show predictive revenue and then we have our line I think this is actually if I do over here this is the final project we have a dashed array so actually let's let's mix this into a dashed array real quick over here so we have month actual Revenue regression line I just want this to be a dashed line for the predicted Revenue so the way to do this instead of changing it to type of monotone we can do stroke Dash array that's how you get the Strokes instead just like the background so there you go we have now our predicted Revenue we have our regular line and then we have our site we have our actual revenue and then we have our regression line so again the regression line you can think of this as a continuation for the predicted Revenue so essentially this regression line is extending to the next year and that's how you get predictive Revenue very very simple a lot of machine learning is applications of algorithms that already exist now you can learn machine learning you can learn all the math to learn the basis and the foundation of why those math work for machine learning but I highly suggest you shouldn't start with that because that's generally for people who want to create their new algorithm they do they're doing research into trying to build the next optimized machine learning but a lot of progress is being made by using existing algorithms chat gbt for example is just a very simple common machine learning algorithm deep learning machine learning algorithm that they're using but they are formatting the data they're using the data and they're training it with a lot of specialized help and making sure the data is correct which is majority of the time machine learning but implementing algorithms and doing the machine learning yourself is actually not that bad all right anyways let's let's see if everything is working yeah so let me go over here let me get rid of the type props and get rid of this and we should be good with this particular page now with that we have our completed application we have our dashboard with a lot of fancy charts and then we have predictions that show predicted Revenue via machine learning so now that we have our application completed we are going to deploy our application both front end and back end so we're going to deploy our backend onto fly.io so let's go to that so fly.io is a place where we can run a server free it just does have limits and you do have to insert your credit card that's the only catch so you have to make sure you're under the limits however unlike the other free options for things like render.com or Railway they have a tendency to the server shuts down and when you want to re up the server they're going to take like 10 minutes for it to come back so if you wanted people to see your portfolio it's not always going to be up and it's going to take some time and people are going to be like why is it not running so you fly.io is always going to be running so we want to try fly.io you just have to make sure you don't get charged so first thing we're going to do is we're going to grab Brew install fly CTL so actually if that's if you're on Mac if you're on Linux and windows these have different commands so install to install that for me I'm going to use the Mac OS I'm going to use Brew install fly CTL I'm gonna run it in this particular terminal and once we have that installed we're going to go actually into our server folder you need to make sure you're in the server folder for the next part so the first thing is we're going to log into fly and you can go to this particular link and we can do fly auth sign up or fly auth login so I've already have it signed up but you're going to just click this it's going to open up it's going to open up this page but since I already have this signed in I have continuous Edward Rowe but otherwise you have that to create an account and I created my account with GitHub so it's up to you now after you logged in the next thing we're going to do is we're going to launch our app with fly CTL so I'm going to go over here I'm going to write fly CTL and then launch and what we're going to have is going to it's going to detect that it's a node.js app and what we're going to do for the app name is we're going to just leave it blink and then choose wherever is closest to you this is closest for me and I'm not going to set up a postgresql database we don't want it up stash redis database and we don't want to create or we do want to create a Docker ignore and what I like to deploy now now before you do this I want you to go back to mongodb and you can see the network address I deleted everything I'm only going to do add IP address and I add I added allow access from anywhere you don't see this right now because it's already here so this includes all the IP address so anyone can connect to this database basically from anywhere now you can restrict it to our specific URL but for now we don't have that so I'm going to go back and I'm going to say would you like to deploy now and I'm going to say yes I'm going to say yes over here and we're going to build an image and this might take a while all right so if you have this problem where it says fail to start remote Builder heartbeat feel I'm not exactly sure I was trying to figure out from fly.io forums of why this is happening I did find an alternative option and that is to run fly deploy dash dash local only however if you're gonna run it like this we're gonna deploy our image or Docker image it's going to be building on your own computer and to do that you're going to need Docker and I want you to install Docker onto your desktop now I already have this installed so I'm going to open that up and I'm going to run it so make sure you install this on your computer alright and so this is Docker I have it installed I have it running so once you have that installed we're going to go back and we are going to run this command fly deploy Dash local dash only and everything works as expected we're going to see everything basically running as expected and this may take quite some time depending on your computer all right with that now you may have gotten an error of abort so this is actually expected I know what the issue is so if you go to rough night or whatever whatever your app is generated name we can go over here and we can actually go to monitoring and we can see what's happening right here this is the logs that's happening this is basically what you would see in your terminal when your server is running but we're getting the UI param to open the eye must be a string but we got undefined so all that means is that we have environment variables right here that does not exist in this particular location because we didn't push it up or we don't want to push it up anyways and we want to have the Monger URL be added directly so the way to do that is you can go over here and we can set fly CTL secrets and then we can set our environment variables so I'm going to do this and actually what we also need is that we need to change this to Port 8080. and the reason for that is because of this right here the port 8080 is over here and so we're going to also go to client and we're going to change that as well and we're going to change localhost to be 80 80. so I'm going to save that and what I'm going to do is I'm going to paste oops paste fly CTL secret set I'm going to set Port is equal to 8080. and I think hopefully we can string this on on the same one so I basically you know it's a little hard to see what's going on let me close this essentially I copied this entire line for manga URL I'm going to copy this and I'm going to paste it over here and now we're going to deploy this and we're going to see if we can see the secrets that we have added so we can just refresh this page and we can see nice we have URL and digest so what this is doing is making sure that your URL is not actually visible here so they are hashing it so you can't really see what's going on and we also hash the port as well so we have our secrets up here and and with that actually now that we added the secrets we should be able to go to our link over here we can see error because we don't really have any routes over there but if you take a look we have a route at kpi kpis so if we do slash kpi slash kpis now we get our kpi response so everything with our server is fully running we have our information over here and everything works as expected I'm going to close that and so now we do have our backend perfectly running with our host name now that we have the backend setup we want to deploy our server or a front end sorry and the way we're going to do this is we first need to create a repository on GitHub so that's how versatile is going to work so I'm going to do my name I'm going to call this finance app I'm going to set this to private for now but it will be public when I update this video I'm going to create this Repository and once we have this we're going to get a list of instructions but we can just go out we want to make sure we're outside the server and I'm going to actually push the entire repo with both client and server even though we only need the client for the Versa for me in my case I want to show you guys the entire application I want the reboot to be together so I'm going to push both of them up but for your case you can probably just push the client so you can go into the client instead of what I'm about to do I'm going to do git init and I'm going to do git commit or actually sorry git add so it added everything I'm going to do git commit M we're going to say first commit and I'm going to say git we're not going to set the branch to be main so we're just going to keep that I already had added this remote origin so that's why I'm getting the error but you're probably not going to and then from here I'm going to get push origin mastered not origin Main and then once I have that we're going to see our reboot over here now with this repo we're going to go to versa now make sure you sign up for viscel versel is a very nice place where you can host your your application for especially for front end and we can just do add new and we're going to do project and you're going to make sure you are connected to your own git repository so make sure you do that and then once you have this we have GitHub repo I'm going to set import and I'm just going to do read directory we're going to edit I'm going to do clients over here and I'm going to do build and output this is okay npm run build output directory we're going to keep everything the same the only thing we need to change is really the client since we have an environment variable over here I want to do this to be Vite base URL and the value is going to be our backend hostname so in this case it was HTTP localhost 8080 but in this case let me close this we're going to put this is our host name so make sure it's your host name not my server or else it won't work and all I'm going to do is I'm going to hit deploy and we should just wait for this to finish so for mine we have it completely finished so if I open this up we have our dashboard but no information that means something with our server is incorrect so if I take a look over here kpis products transactions they are not going to the right URL so it's kind of just defaulting to this current URL and so if we go back it took me a while to figure this one out because there was I was making a silly mistake so if you go back to your finance app and we go to settings we go to environment variables and what we want is we want the Vite base URL and what we had was the hostname over here but you actually need https colon slash so make sure you have that and you make sure you have it for all your environments once you save it which is for me it's already saved once you have that and you have wait for it to rebuild or make sure everything is perfectly fine now you can click on deployment over here and you can click on the link and now you should be able to see everything on your server and we have our entire server completely running with our dashboard information and it's being hosted onto our application and we can go to revenue and predictions and we can show predicted revenue for this particular situation so we have all of this and everything looks very good with that our complete Finance dashboard is now fully complete we have gone through quite a bit and I'm so glad you were able to go through the entire application with me we've gone through grabbing information from our database putting models adding data setting up our backend and then we also did our front end we set up our charts we formatted the data we made sure everything is aligned I went through layout I went through API calls I went through covering all of the different various styling challenges you might encounter we also even went through predictions and we went through this particular line and I talked about machine learning and how we can predict revenue for the following year using this and we also went through the deploying our application on versel for the front end and fly.io for our back end and I'm glad you're able to go through this entire application most people do not so congratulations on your achievement and with that please like comment and subscribe if you like this content I hope you stick with me if you have any requests or questions or anything I have a Discord or if you just want to leave a comment below and ask me for any future videos you can leave in the comments below please I will see you next time

Channel: EdRoh

Views: 70,748

Keywords: EdRoh, react, redux, redux toolkit, typescript, node, mongodb react, machine learning, material ui

Id: uoJ0Tv-BFcQ

Length: 323min 37sec (19417 seconds)

Published: Wed Mar 22 2023