React Admin Dashboard Tutorial | React Responsive Admin Panel | React Project | Intellipaat

[Music] hello everyone this is R mhani from intellipath today in this video tutorial we are going to create amazing dashboard which shows a realtime data from the database so here on the screen you can see the UI of our particular dashboard we are going to create over here you can see there is one line graph one py graph on the change of the month you can change the data actual data of your py graph so this data is basically coming from a backend API uh we will learn how to create a backend API as well so on refresh you can see the data is again getting refreshed for that particular element over here you can see we have a list for the users you can scroll down the view and um all of this data that Revenue transaction likes and total users all the datas are coming from the back end here you can see we have our side menu bar and I have just created the dummy menu over here we don't have any links to this menus but uh basically we are going to focus on create how to use the graph inside a react application and how to create API using our nodejs if we talk about this UI this UI is completely responsive let me just show you so here you can see the mobile view of our particular application you can see the menu is is converted into a toggle hamburger button and all the data is perfectly aligned over here you can see your list is working fine your graph is showing over here and your today's schedule list okay so this is the application we are going to create this button also toggles like this and uh you can see this UI is looking very beautiful inside a phone application as well so without further Ado let's get started and create this this particular project but before that we will be needing few things inside our application to create this particular project starting with the nodejs so if you will go to your Chrome browser and write for node js download and click on the first link you can see over here there are so many uh node versions uh download according to your system configuration right now what I'm using over here is uh window Windows installer 64bit okay because uh that's what my uh system is and uh I'll be using vs code as my ID so you can just uh open a tab and write vs code download and uh if you click on the first link and from here you can download the vs code so you can use whatever ID you like but I personally prefer using vs code because uh it has lot more functionalities than any other ID is out there okay so make sure you have no downloaded because because we will be using nodejs uh as our backend and also we will be using react to create this particular project so you will be requiring nodejs all the time okay so download nodejs and vs code now after doing that first of all we will be start by creating a react application so to do that I'll move to another folder and inside that folder we will create a react application so here I'm inside one of my folder and I'll be creating my react application over here so uh open Terminal in this particular folder wherever you want to uh create your react application okay so I am inside my desktop in telepath react projects okay so you can create one folder and inside that particular folder you can create your react application so to create react application there is one command npx create react app and name of your application so right now I'm using dashboard as a name of my application because we are going to create the admin dashboard right and hit enter so make sure you have a stable internet connection with you because uh this command will be downloading a node modules and uh will be creating a react application for you so it will be needing a internet connection over here okay now you can see our node module is downloaded uh so we will move to that particular folder and it has created a react application for us and name of our react application is dashboard so we will move to our dashboard folder so write CD dashboard and hit enter now we will open vs code inside this particular folder so we will open this folder inside vs code so write code dot so this command Comm will open a vs code for you you can see over here it has launched vs code for us uh inside our this particular folder okay now I'll be using telin CSS uh to style all of my components so let's move ahead and download Telvin CSS okay so I'll open a new terminal over here and I'll open one Chrome tab and I'll write telin CSS for react and you can see the first link that is a telin CSS documentary so here you can see how to create uh your uh telin projects uh you can see this is creating a react application for us but we have already created react application so we don't need to uh run this command again but we want to install telin so we will directly execute this two commands so I'm just copying this down and running that particular code Inside by vs code terminal so this will also take a while and it will create a telin config.js file for you so I'll open my uh config file and and if you move back to a documentary you can see here uh there is some import to do inside our telin config CSS okay so copy that particular code and uh we will paste that code inside our telin config like this now if you see over here it has also given some index. CSS command so I'm copying this down and I'll paste this inside my index. CSS I'm removing all this uh pre-built uh CSS also and I'm just pasting my telin commands Okay now after doing this much uh let's try to run our application so to run react application you have to write npm Run start so you can see your react application has been launched successfully and uh you can see C template for our react so what I'll do now over here is I'll go to my uh app.js and uh I'll delete all the command inside my app.js so I'm removing all this code and instead of this I'm just creating one more uh Dev over here and inside that I'm writing writing hello to ENT Parts new video okay now uh let's check whether our uh telin is working or not so I'm giving some commands over here first of all I'm uh removing this import now let's check whether our telin is working or not so let's say we give our class name text is equal to double XEL font let's say we make it bald and um text red 500 now let's move ahead and look at the output whether our telin is working or not so over here you can see uh our telin is successfully imported and it's working right so now let's begin with the creation of our particular project so I'll move to my vs code again and uh first of all what I'll be doing I'll be uh creating one components folder so inside my SRC I'll create one more folder named components components inside this component uh one thing we will be creating that is dashboard dashboard. JS then uh another file will be our menu so let's create menu.js over here then for uh let me show you so uh this particular uh card is another component so we will create one more component over there so let's move ahead and do that so I'm moving back to my vs code and uh inside my components folder I'm creating one more file as top product card now this was the folder structure for our front end part but we will also be needing some backend folder structure right so let's create one more folder over here as backend all right and inside this back end I'll be having my uh data inside my db. Js I'll show you what kind of data I have return inside my Js file Json file but uh you have to write your own data according to your own requirements okay so for now I have taken some dummy datas and inside this I'll be creating an index.js file and uh we also be needing a node modules over here right so let's open one more terminal if you click on this plus sign and this will give you a new terminal Okay so so let's move to our backend file first backend folder so let's say CD backend and over here right npmi so this will download node modules for you okay so we want uh package Json package log Json and node modules over here okay so over here you you can see uh it has downloaded node modules for us now we will be using Json server right so we will be needing Json server as well so write npm I Json server one more thing we will be needing over here that is exos so write npm I exos so you can use fetch as well but uh right now I'm using exos and Promises uh if you wish you can use fetch. G data uh that will work just is fine but uh I feel exhaust is a better way to uh retrieve the data okay so this were all the requirements part and if we move to our front end there we will be needing a chartjs library right because we are using so many charts so that chart is coming from chartjs library so if I just show you if you open a new tab inside your Chrome and search for Char JS like this and uh if you open this npmjs here you can see how to use this chartjs okay so uh all the documentaries how you can retrieve the data and everything how to change exis size everything you will be getting over here so I'll be just copying this down and uh pasting over inside my dashboard folder okay so this is dashboard folder not a backend folder make sure you uh install this inside your front end folder now I guess we are all set with our uh folder structure I'll just quickly uh show you guys how I have created my backend directories okay so uh if you look at over here uh I have created one folder named as backend and inside that back end I have db. Json so this db. Json contains all of my Json data right so I'll show you what kind of data I have toen uh so here I have uh took the data as a students and inside that I have an image a name email address and some text or you can say the image okay so after that I have a card data um that you can see over here this data okay I'll show you yeah so this data is also coming from the back end so this is this card data over here this is card data which you can see and uh and then this is the data for my uh pie chart I'll show you over here so this is the labels for my pie chart this is the month data so there are 12 datas inside my pie chart data okay because uh there are 12 months and data is distributed evenly for all the months and whenever you are using a python CH make sure your sum of the data is always equal to 100 okay so if you just uh Summit all it will be equal to 100 for all the months okay so these are the labels for my uh pie chart these are the colors I am using for my pie chart uh this is the H Color and and then I have the data for that particular month okay so inside month also you can see uh this was the data for my January month this is the data for my February month and so on okay so this is how you can create your Json data now after pie chart after pie chart's data we have our line graph data okay so line graph data is based on our week labels so labels data set and everything okay for our py chart so this is how you can create your own Json file and uh we will create API out of this using Json server okay so let's move ahead and start by creating our routes okay so let's move to our index.js first and start by creating our back end okay so we will be creating our back end with Json server so first of all Let's uh create one constant variable of Json server name is equal to you can see the suggestion over here require Jon server okay so I'm uh writing commonjs over here because this is my nodejs file and when I'll be working on react I'll be using module JS okay so uh we have created our server.js now what we have to do we have to create a server so to create server we will create one variable name is server and by using predefined U function that is create function for our Json server we will create our server so let's say create and over here there will be a slash between this okay now by using do create function you will be able to create your Json server okay now uh whenever we are creating a server we also will be needing some routers right so first of all we will be fetching some data so my data is already in my uh db. Json we have already talked about that right so what we will do over here we will create one router router so let's say const router is equal to Json server Json server is name of my Json server which I have created on my first variable okay on my first line so uh Json server dot router and now inside this we have to pass the path of our data so my data is inside my data folder so let's say do/ data slash inside data I have DB do Json so this is my data file now we also have to create with middleware right so to handle a requested response so we will create one more variable as a middle bear and uh dot we will use defaults okay now after that we will fetch our data so let's say const data is equal to require and again we will give the path of our data so let's say back/ dat SL db. Json okay now we will give one port to run this server on so let's say con Port is equal to process dot port and uh let's say we give 8,000 okay you can use 8,000 8080 or 5,000 whatever you like but generally we use uh 8080 and 8,000 for our backend files and 3,000 is for our front end files or you can say react files okay now we will uh use server. use we will make use of our middleware and uh after that we will use our server dot use Json server and body parcel so uh whatever the data we will be getting will be in form of our Json file right so we will store that by using body parser like this now let's start by creating a end points so first of all uh we will create an endpoint to get all the data we have so if you look at this my uh db. Json file uh there are lots of data lots of different categories of data right so I'll be creating one endpoint that can fetch all the data inside my server that particular endpoint okay so whenever I'll be uh passing the API call to that particular uh endpoint all the data will be printed inside my console okay so first of all let's create that function so for that what I'll be using server doget so we don't have to uh pass any data to our back end we just have to fetch our data right so for that uh we will use get so get to get data and now let's say we make endpoint as all data comma request inside round bracket request comma response and I don't think we need to uh write next over here okay now we also have to uh write what kind of data it will be uh sending us to okay so first of all um we will be having this table data so for that I'll be creating endpoint as table do data dot student so inside my database the ID is student so that's why student over here then similarly I have a line graph so I'll be creating one endpoint as line graph here this will be uh table not to be enabled like this and over here we also have to write uh request. send because this we will be sending to back end right like this now inside this we will pass all of our end points so first we will start with uh table data then we have line graph data is dot data dot uh name of the data inside our database so after student uh we have pie chart over here and at the end we have our line graph right so we will move to our end you can see over here we have our line graph so I'll be just copying this down and pasting it over here to make sure that I I won't be making any mistake okay now after line graph we have card data colon data Dot card data okay so here it is showing error because it's not DOT it's colon okay so basically what we are doing over here is we are passing the value to table as uh whatever the data is stored inside my database okay so the data stored in my database is student and is the name of my variable which I have just created okay I hope that is clear to you uh similarly we will do for the pie chart and for pie chart initially we will pass zero because uh I want first of all uh January to show then after that uh uh February as in uh one and so on okay so for by default I'm keeping zero that is uh January data now uh this was our one API uh now we have to create another apis for our different different now let's create other endpoints for our particular datas okay so let's say a server doget and let's create one endpoint first uh so for my line graph my endpoint will be line graph like this request response and uh okay now we will send request. send whatever the data we have fetch inside my all data right so that was line graph data make sure this and this spelling is same okay so uh we will be fetching data once but we will be updating data whenever uh the particular component is loaded or you can say you can uh use this as a different different end points okay like this now similarly I'll create for my all of the other servers so let's say uh server. getet uh first of all Let's uh create for our card data so here it will go card data like this and over here card data column card data similarly we will paste it one more time and uh now we have here py graph I guess it's pie chart right at the top we have imported as pie chart so pie chart and uh over here as well this will be a pie chart and uh similarly here let's paste it one more time over here and now it's for pie chart but uh the things will be little different when it comes to pie chart because uh we are uh passing single data for the first time and then according to whatever the month we will be uh you know choosing I want my data to change if I'll show you uh over here uh see whenever I be uh you know changing the month my data is getting changed okay the server is not running but we want that right uh whenever I'm selecting some other month this data should be uh reloaded and the data should be changed right so we will try to achieve that so for that what I'll be doing over here first uh I'll be creating endo as usual but when I we will be uh passing the response I'll be storing the data inside my new data new data is equal to data do py chart. find so here what I'm doing I'm um finding the data whatever the data inside my uh particular database and and whatever the data will be matching with my particular month that data I'll be returning to this end point okay return data do month triple equals to request parms month like this now after this we will create for our table also so I'm copying this down and I'm pasting it over here and uh over here this will be a table so table is basically uh whatever the user data you are getting that is my table okay and over here you have to change let's first uh create table and then we will again change the uh pie chart okay and name inside my database is student and over here it will be uh pie chart pie chart and we will directly assign data to this particular pie chart okay so we don't need to write data doline graph again okay because we have already uh return return that over here right so we only have to assign this new data to this py chart so let's do that new data like this okay so we have successfully created our all the end points now what we have to do over here we have to uh write one function to generate our P graph so let's say function Pi data generator repeat now what we have to do over here is we have to create a server right so we have to use a router and uh inside that we will uh use our router like this now we also have to um listen this port somewhere right so let's say server do listen and uh we have already given the port number over here so we will make use of that particular variable and inside my uh round braces and over here I'm also uh giving one console uh notation because um I want to know when my uh server is running right so log Json server is running like this so this is how we have created our back end completely okay so this are this is all the routes where we can get the data so if we will check this on a uh Postman uh let me just move to my uh backend file first so over here I guess we have opened our backend file yes so we have opened our back end over here let's try to run this back end so let's say node index .js so here we will be uh running this index.js file particularly okay so and this is the node file so that's why I'm using node index.js uh npm Run start will not work over here uh to make that work you have to write uh different code inside your package.json so let's try to run this server so you can see your server is running completely fine now let's check uh inside our Postman so what is Postman basically if you just move to your browser and uh search for Postman you can see over here it is the API testing platform so you can create your API and then you can test that particular API onto your Postman so you can download this Postman software inside your uh system I already have downloaded uh log to it and then you can create your API so if I'll just show you my Postman inside my system so let me just uh close this first and search for Postman over here so you can see uh the postman is launched over here now let's try to uh fetch the data so now let's try to fetch the data so uh over here you can uh open a new tab like this and uh inside this new tab make sure this is a get request okay so if you have uh used this before you can see the suggestion coming over here so uh let's get uh HTTP 8,000 because our server is running on 8,000 Port okay so I have selected this 8,000 inside my Postman over here and now you have to write your end point so my first end point is get all data right so so this is my get request and over here I'll write just slash all data now click on send so you can see you have got all the datas over here it says the status is okay 200 okay so that means our uh request is successfully fulfilled so if I just uh show you in my raw format you can see over here the whole uh Json data is return inside this file okay so this contains your all the data which includes your student table data your py graph data your chart graph data cards data everything okay so whatever the data you have written over here all the data is over here now if you uh check this out okay so if you uh check this out you can see over here there is only one data for our November month and uh there are no other data because what we have done uh in our all data is we have just fledged the zero value of the that particular pie chart data so that's why it is giving you only January month data we have successfully completed with our backend uh I hope uh you have created all the back end alongside with me now we will uh start building our front end application so first of all uh let me um close my backend file first so yeah now um we will start with our dashboard so let's say RFC and uh we will also make use of this dashboard inside our app.js okay so right now I'm removing all this classes first and uh inside this I'm using my dashboard like this it um we are using vs code so it is auto importing over here in your case if it's not Auto importing make sure you import your components first okay now let's start by creating our uh component uh first of all we will uh create our dashboard view okay so uh let me first uh just create all of this as a functional components so that I can just uh make them uh use inside my dashboard and later I'll write the functionalities for that particular part okay so uh first of all let's give some background over here so let's say class uh name U BG here I'm taking blue 300 and uh let's make height as a 100% first so that my whole screen is covered okay 100% and uh inside this first of all we will be having our menu right so here I'm leaving the space for my menu make sure it is imported so uh here you can see it is not imported so we will import it manually so let's say import menu from back/ menu right now after menu we have this uh header on top of our project so if I'll just show you over here you can see this is the uh header right so uh this is our left hand side part and uh on right hand side uh we have all of these components right so we will start by creating on a you know linear direction we will start from our dashboard then we will create CS then we will create this map and user list and at the end we will create our py graph and our uh today's uh schedule list okay so first of all we will start by dashboard so let's do that I'll be creating one more div over here like this and um let's give this div some class name um I want my um you know Navar to be uh responsive as well so let's say LG for LG should be 28 for small device uh padding lefts should be let's give four over here padding rights should be seven uh for small device um margin left should be 64 now let's create one more div inside this and U let's get this div also a class name let's say P2 LG and this is my uh with okay so with for my top menu bar so I want that U menu bar to cover 90% whenever my display is in the large format okay so uh let's do that so here inside this bracket you can pass your manual values like this after that uh we will also uh want to align this in the center so let's align Center you can see the suggestions coming over here after that we will create one more div inside this and uh You Must Be Wondering uh why so many divs right so this is just to uh make my code uh very clean okay so I'll be keeping all my Styles and different different dips so that uh I can figure out wherever uh you know uh my UI gets wrong so that's why I'm creating more devs over here colum now okay uh we also have to give Gap over here so LG colon Gap and let's give gap of five I guess that should be uh okay now after that we will uh create a grid of three so first we will have our uh you know at the beginning we have our dashboard uh let me show you see if you uh see this we have our dashboard over here at the very left hand side and all the other components we have is on the right hand side so that's why I'm keeping my uh dashboard first at the item start and this all will be at my item end okay so let's do that and create one more grid over here so let's say give class name grid justify item start you can see over here right now inside this we will have have our span class name um I just want to make my font bold okay like this and inside this we will write dashboard you can write anything you want okay I'm using dashboard over here now outside this div we will uh create one more uh grid and uh this grid will hold our uh search bar and those two icons we have okay so that was at the uh grid end right so let's do that let's say grid justify end and uh uh let's give U margin bottom of 1 okay uh if you will uh feel like we need more margin we will add that later now uh let's create the display Flex first now first of all we have our uh search text field right so let's say input to create our text field and uh the type will be text you can skip this part okay because uh we are not going to make it functional so we don't need it much please holder you can just write Place holder over there as search search and uh let's give some functionalities to it let's say rounded l LG so what this will do this will only uh curve my one part of my uh text field okay and uh height will be 2 RM okay we also have to give padding over here nice now let's check the output what we are getting over here okay so here you can see uh we have a menu over here we have dashboard over here and and a search functionality over here so I guess uh this is looking fine as of now so you can see we have given the only um left side is rounded so this is only rounded from the left hand part and this part is straight now we want one icon over here a search icon and U uh one emoji icon and one Bell icon over here so let's get that okay so for that I'll be using uh react icon so I'll show you uh if you just uh go to browser and write write for raft icons and this folder you can see uh I'll just download this dependency first and uh I'll show you the icon page okay and uh let it get downloaded I'll show you uh icon pages so here are all the icons you can use inside your react application by just downloading react icons inside your folder you can search for any icon you want let's say search and uh you can see there are so many options you can pick whatever you like um I have used a CI search so let's just uh give one icon over here okay so let's align that icon first so let's create one div and inside this div I'll be having my icon source so let's say CI uh search and uh it's not Auto imported so let me just import it okay okay we will just go to the document over here and we will search for c i search here you can see this icon uh you can just directly copy this uh import statement from here and directly paste it over here you don't need to write this okay now uh if I'll show you the output we have this icon over here let's fix this this okay okay so over here let's give some uh class name I want it to be Flex item to be Center Center justify Center so that it will be in the middle of that particular box height of this box will be uh 2 RM so this is my uh you know calculative data you can uh change according to your requirement so this will be 2 RM after that let's make uh one side of this is rounded LG and background will be white so so let's go to output and check for the results so you can see uh this is still in the top I don't want that let's fix that okay so this will be item Center okay now let's go back okay now you can see uh we have perfect search bar over here now let's move back to our vs code after that we want uh one icon of Bell so let's say uh Dev and inside this I'm using bi Bell and uh I'll import this um and over here here I want bi happy alt so happy alt is a image and bi Bell is a um Bell icon okay so if we will go over here and search for bi Bell you can see this Bell I'll just copy this down and I'll import it over here and from that same Library I want bi happy okay now let me show you the output first so here you can see we have this two teeny tiny icons but we have to fix this first so let's do that um over here I'm writing class name as uh let's give the padding two and padding left as four so that there is some space between two icons okay and similarly it goes here ping two and pl is equal to 4 now if I'll just show you you can see this is perfectly aligned now let me just format my code first I'm using prettier to format my code okay outside this div now we will start creating our menus okay so let's first check what we uh all need to create our uh cards so over here you can see uh this are four cards and I have uh one text over here some data which is coming from back end and uh one icon over here okay so let's do this first so let's create first card over here let's say Dev and uh class name Flex H is equal to 32 rounded double XEL and uh background will be let's keep orange 100 okay because that was a light orange so I guess this will be the exit match for that particular template now inside this I'll be having one more div and uh I'll make the position relative because I want uh that icon to be top of this particular box right so that's why I'll be uh making this box as relative so let's say class name relative and uh pedding let's give three with we will give 100% inside this uh we'll create one more Dev and uh over here I'll be using BS tag let's give some class names over here uh let's make this as absolute right is equal to 5 top is equal to 4 now we also have to import this icon So This is BS right yeah this is BS so we have to import this so let's say contr d BS tags and we will be importing that from BS Library like this now let's move back after this tag uh repeat after this tag uh we will uh write our data okay so let's say div over here let's say class name and uh let's make our data also absolute absolute and uh bottom will be four and text will be at left now let's write up the tag inside this first of all we have our total transaction so let's say total trans transaction transaction and uh after that we will have one more uh P tag over here and uh uh let's give a class name for this particular P tag over here uh here we will be having a data from our back end okay so we will make our uh backend calls we will uh write our use effect hook but before that uh right now I'm just creating a front end over here so we will uh put anything data over here and then we will update that when we will create a use effects book okay 2 Excel and inside this we will be having card data um from a transaction but right now the card data is not defined so I'm what I'm doing over here is I'm commenting here down that is here we have to write a data from card data and right now I'll be taking random values so just like this we have four um you know uh three more uh cards with us so what I'll be doing I'll be just copy pasting this uh three more times okay and we will start by uh you know let's first check the output first so here you can see uh the output is not what we actually wanted right so we wanted three boxes in um colon format but um this is not what we expected so let's fix this uh so to fix this what we will do we will create one more uh you know uh div over here and we will wrap this inside our grid okay so let me just move to my top and I'll be creating one more div over here and uh let's give uh div some classes so let's say class name we will create one grid uh in my large screen my grid will be um having a columns 4 and for my small screen there will be two columns calls is equal to two and u for SM RW is equal to uh two Gap will be of eight and uh let's give gap of X is equal to 8 okay over here and uh gap for y will be let's keep it four and margin bottom will be three now what I'll be doing I'll be just cutting my end of this dip and I'll be pasting it at the very end okay you can see okay over here let's let's paste it now if I'll just show you the output you can see uh this is perfectly aligned now but still the data is not uh coming on top of this particular cards but my cards is placed perfectly okay now let's try to fix this as well so if you can see over here uh I have written a relative spelling wrong over here it is r e l a t i v okay so let me just fix it at all four positions like this and if I'll just show you the output over here you can see uh the data from card data the comment is also coming and the data is also coming okay uh uh we have to fix this for this one as well so let's do that okay so uh let me just remove this and put this inside my comment okay now let me show you the output okay so you can see uh our card is perfectly aligned if I'll just show you uh the actual output and this output see uh my cards are aligned properly but uh you can see that there are different colors and this icons are different for everybody so we have already imported this Tex we have to uh bring this folder this thumbs up and this user one as well right so let's do that and let's change these colors as well so first of all uh we have is for our orange color so I'll just move to the top first and U one by one we will uh change the color for everybody so uh first of all we will have our green then we have orange and here we have wallet icon okay so let's uh bring that let's say wallet two now I guess this is done uh this is also done we have already used tags over here and the color is also orange now after orange and green uh next we have is red and uh for that we have thumbs up icon so let's bring that thumbs up icon fa a r thumbs up so this is basic icon name you can directly find that in particular documentary okay um I have already uh created this project so I know what are the icons I'm using over here and uh okay why this is giving you the error why it is so let's uh just check that uh okay here you can see uh there are two fa icons so we can directly down load this and we will make use use of this I'll change this one as well okay so we have our thumbs up icon and uh last one we have is indigo color so over here I'll be writing Indigo 100 go 100 and uh the icon we have used is uh AI out line User Group delete so I'll just copy this uh I'll paste it over here like this and here we'll be having icons okay so let's look at the output first so here there is some problem okay okay let's search for this icon inside our library only okay I'll be just copying this import okay okay I have to paste the name over here first so here you can see uh the icon which I have used so I'll import this icon so this is the same icon okay which I have used uh just that uh we have made error and importing it fine I'll copy this as well and uh we have to uh paste it over here instead of this now again we will format this particular code now let's look at our uh output first so here you can see uh this part is looking perfectly fine uh with our actual uh pre-created project so you can see uh all the colors are matching all the alignment is matching and everything is looking perfect right just the thing is we have to uh render this data whenever we will be using our uh use effect hook and we will be fetching the data from our API okay but right now uh this is looking good now um how about if we uh make this uh blue color uh of screen right so that uh we can see the whole uh screen in a blue color now you can see see both of this are same uh whenever we will be adding the data uh this will move uh upwards okay after that we will be creating two cards first for our line graph and another one is for our user history so the user history data is coming from the back end as well as the line graph data is coming from the back end so first of all I'll create one div inside that particular div I'll be creating two more cards okay so let's create a div over here here and uh let's give some class names over here so let's say class name uh let's make it Flex Flex wrap because we want it to be responsive for all type of screen and just if I center now inside this I'll be creating one more div uh now let's give this div a class name so let's say class name and uh let's make this display flx ping let's give three height 72 you can uh adjust this values according to your screen and your requirements okay uh margin bottom will be four border border and Border will be black if you have looked at the output final output we have created so there we had given this very thin black B right so I'm using that over here and uh let's give withth is equal to 100% so whenever my screen will be on small devices at that time I want only single diff to show on my screen okay and apart from that whenever my uh device is in the large screen so whenever I'm looking my website on the large screen at that point of time I want my uh you know two cards to show at the same time so that's why I'm making my width as 100% And then for my large devices I'm setting my width is equal to 49% so here I'm leaving 1% for The Gap okay and display will be round Excel uh let's make it two Excel and background of this card will be white now after that I'm creating one more over here and inside this div I'm giving some classes so let's say style and uh let's uh hard code the height I want 15 RM of height and width will be 100% okay so I have written inline CSS over here to write inline CSS uh we basically follow a object notation okay so for writing objects we have to write two curly braces and inside those curly braces we give our object a key and the value for that particular object okay now inside this div I'll be creating one more div and inside this div we will write a header for our that particular card okay so let's give some class names over here let's say class name and uh font of our class will be bold because I want my heading to be in a very bold letters okay and heading will be activities activities after that we will create one more div over here and U let's give some class name to this particular div so in this div we will be storing all of our data okay so let's make this div is a flex Flex wrap because I want my context to be in a wrap format also whenever I'm changing my screen sizes okay so make sure you write this uh Flex wrap to make it responsive and outside this we will write few Styles so let's say Styles inside double curly braces I'm making my display Flex hardc corely because uh let's say for some reason my Telvin didn't work out so that's why I'm writing Flex over [Music] here and I'm aligning all the item to Center okay now let's create one more div over here and uh let's give this div some class name so once we will look at the output you will get the idea what we are doing right now okay so right now let's just code this first so this div is basically for our refresh button so uh if you have noticed in the final output we had this teeny tiny uh refresh button on top of our line graph right so for that I'm creating this particular diff and this will be at very top right position inside my you know that particular card so inside this we will create one button and on click of this button there will be some function so we will create that function when we will uh you know join the back end with it but right now I'm just writing the function name and everything so uh let's create the function as well make a function call okay now over here I'm giving one uh icon so the icon which I had use was MD outline refresh Okay so so o will be Capital over here [Music] yeah okay let's uh move to the top and create this particular function okay cons name of the function which was refresh and uh right now I'm making only empty function okay we will uh add the functionalities when we will add the back in so here I'm creating this function because we uh don't get any error messages okay now let's move back now after this uh let's add the data to our particular Dev but first of all Let's uh format this document okay after this I'll be creating a canvas so whenever we are dealing with the charts we have to create a canvas to put data inside it okay so let's create one canvas over here like this and uh let's give some class names to our particular canvas I'm giving a height is equal to 10 and after the height I'll be giving it a ID so that I can uh put data inside it okay so let's give ID as activity activity SL chart so I'll be creating one more D for our user data but uh that data will be you know the length of how many users I have so I'll be creating that Dynamic component so how much long our list will be that many elements will be added to that particular div okay so for that we have to make a conditional rendering so first of all write student student data okay so we will import the student data later but right now let's just write uh because otherwise it will give us an error so let's say length and we don't want it to render when the data is empty okay so at that point it will be just blank Dev now let's write some class names over here so let's say class name similarly for this one we will make our with as 100% at the beginning and according to the screen size we will change it okay so for the LG again this also will be uh withd will be 49 percentage now let's set the height that is 72 MB is equal to 2 and let's also give some padding as to scroll because uh there is a long list of users okay so that's why I'm making scroll smooth and um let's also change some scroll property so let's say scroll bar scroll bar/ track and color of our or tracker will be blue 100 okay let's keep it blue 100 okay and uh scroll bar Thum will [Music] be scroll bar thumb will be blue 200 and let me wrap this okay first okay now now let's also make the scroll bar very very thin so for that let's say scroll bar scroll bar is equal to thin so to implement the scroll bar properties we will install one package for that particular module okay so it is uh something Telvin scroll bar and we will install this in a while okay so right now let me just finish this part and uh I'm making my overflow x hidden because I don't want it to overflow from my div withd okay and margin is equal to one let's also give some border B black and rounded Excel and background will be right now after that we will be taking the data from whatever the database it is coming from okay so we will map that particular data and we will store that inside our table okay so let's do that over here I'm on opening and closing my curly brackets and inside this I'll be writing student data student data do map and inside this the key so let's say student students and then we will write a arrow function over here something like this and inside this we will return a table so for so that Dr and let's also give TD and inside this I'll be creating a div so let's give this div some class name so let's say class name because there will be uh four components I guess one will be the user image uh name email address and whatever the domain they are belonging to okay so that's why there are four things in this so for that uh let's wrap them inside this particular D so let's item Center and over here I'll be creating one more div and U let's give this div some class names like this and let's make width is equal to 10 height also 10 and flex shrink sh Str zero because I don't want my data to be shrink margin is equal to three and for the small devices my margin right will be three only margin rate okay now after that we will be creating one more uh image so let's say class name and I want my image to be full rounded so you can see the option over here rounded full so click that and now let's give this div some SRC so SRC basically will be the image which we are getting from the back end so we have M student over here so let's say student student do image now over here I'm also uh giving some you know Styles so let's say with 40 and uh height Also let's give 40 and Alternate image will be let's say let's give a student name okay so let's say a student dot name like this now after this we have a name column so let's create one more de for that and over here I'll be writing some class name so let's say class [Music] name let's keep our font as medium X as gray 800 and over here I'll be uh writing the names of the student so let's say student it will be students do name like this now over here we will be uh creating one more TD so let's say DD and let's give some class names over here class name let's give padding as to whes space as no RP and one more Dev over here some class name over here and inside this let's see text as left and uh this will be storing the names of the student so let's say student dot name at gmail address so you can see over here I'm just making use of my uh name and uh after that I'll be just adding at gmail.com so you can uh take your email addresses from your backend as well but right now I'm just doing this okay because we have already given the dummy data and we don't need to make it more precise than this now this is done after this we will create one more TD to Store The Domain okay so over here again I'll be um writing a class name P2 wh space is equal to no wrap and inside this I'll be creating one more div class name Flex item Center justify let's keep it Center okay now after that we will create one more div and and inside that we will store the text whatever we are getting or you can say U that is basically our image okay so for that I'll be creating one more div and um let's give this div some properties so let's say class name and U we will set the width as 10 height is equal to 10 and flex shrink zero margin right is equal to to two and for small devisers my margin right is equal to three now after that I have image over here and uh let me just make this image as a self closing okay I don't need this okay now after this uh we will give this image some properties as rounded full because I want this in a circle if you want it in a square you can leave it as it is now let's give this uh image uh SRC so let's say SRC and inside my database I have just uh take my SRC as a student. text so let's say it's student do text now after this we also have to set the height and width of our particular image so let's say width 40 height also 40 now for alternate we will again make use of our student name like this now after doing this much we have to create create two more cards one is for our you know pie chart and another one is for our today's schedule so today's schedule we will be hardcoding the data and everything but uh for the uh you know that particular pie chart we will be creating one more component and we'll be writing the code over there to use that we have to uh you know make use of that particular component inside my dashboard so let's do that let's say Dev and over here let's give it some class name so I'm making use of a grid and for large I'll be having two columns so let's say calls two and GAP will be three again inside this we will create one more div and inside that we will be holding our top product card data or you can see that particular component class name and over here I'm making the displays Flex items on Center justify Center rounded to Excel and background will be white and height will be 48 now after this I'll be rendering the data inside this particular component so let's say chart chart and make sure you write the name of your component right okay card and uh and inside this we'll be passing our chart as a prop okay so you must be knowing how to uh pass the prop inside your under component like this uh make sure the top product component is imported in your you know particular page now inside this I'll be creating one more uh you know card because we also want to store our today's schedule so let's create that here I'm creating one div and let's give this div some Flex round it to excel background let's make it white height 48 padding is equal to 5 let's create one more Dev let's give this do some class name let's make ping as six for small devices and for large devices let's make it three okay now let's create one more Dev over here class name for small device display will be flex and inline block height will be nine and for small device the it will be justify Center sorry justify in between now inside this I'll be creating one more div to store my heading so let's say div and let's give this div some class name so let's say class name for large devices my text Will be large so LG and for small devices my text will be small font will be bald for both the devices and U text will be green let's make it 900 okay and heading will be today's schedule outside this div we will be creating one UL which is a list unordered list okay and uh let's give this list some class name let's say class name and uh I'm just uh giving a space over here so space y will be two now inside this we will be have our list so for that I'll be creating divs over here and let's give a class name to this particular div so let's say class name let's make displ block text left and um height will be full let's also give border on one side okay four and Border will be green now after that we will uh write one Spen tag over here and inside this Spen tag we we will add our data so this data is hardcoded so we have to write it whatever the data you want to write you can write it but first of all let's give some class name so let's say font medium medium text small margin left two and uh text will be SL 100 now after that start the data so here I'm writing meeting with suppliers suppliers okay that's [Music] it then after that I'm taking one more P tag over here you can use pantago or whatever you like okay you can also use div as well but right now I'm using P tag so let's say class name text size will be extra small font will be medium and uh margin left will be two and T color will be gray 300 and inside this we will write a time so let's say 14 0 0 25 works right now after that I'll be giving one BR so to have another line okay and we will add the location so let's say art sunet road so you can also take this data from the backend uh it's is that you have to create a data in your back end and then you can easily add those data over here after that I'll be creating one more uh Li and I want all the things to be same so what I'm doing over here is I'm just copying this particular Li and I'm pasting it over here okay and we will make few changes first of all I want a border as blue this border is basically the line you have like seen on the right hand side of my schedule okay now every other thing will be same I'm not also changing the text as well if you like you can change the text as well okay and I don't think it's that necessary to change the text over here and with that we have created a dashboard overview so let's just try to run this but I guess there will be error because we haven't uh connected the data so let's first do connect it with the database and then we will try to run this okay so for that we will be making use of a use effect hook and U we will be making API calls for that so let's move at the very top and over here over here first of all there are few things to be imported over here so let's say import top products product card topu card okay now over here I'll be making use of our use State hook to manage the states okay so let's say const and uh first of all we have chart comma set chart we will create separate function for each of these so you don't have to worry about that we will learn how to uh do that as well and uh initially I'm setting it as a null because I don't want any chart to be created when my data is not present then constant line chart comma set line chart and uh again doe State and null so initially the data will be empty okay it will be null but when we will get the data from the database at that time we will set the data okay similarly we will do for the student data so let's say student data comma set student data and again uh for student data we will keep keep it as empty ER because we are storing the data inside our array format okay after student data we have our card data so let's add that so let's say card data comma Set Card data and uh for card data as well we will be storing it in uh object format so we will not make it null but we will initialize the empty object over here after that we will add some options so this options is basically the labels you see or you can say that the uh whatever the axis you are seeing at the bottom of your chart this is for that okay so let's create one options variable over here and inside this we will make it responsive true call true then maintain aspect ratio s true as false then let's make a scale so let's say scales colum inside this scales object we will write y AIS axis and uh inside aray format we will create a object inside this and let's say X column begin at zero colum true and step size 100 okay so this is basically for our graphs now over here we will make use of our use effect so you can see the option over here it will auto imported okay and uh inside use effect now we will uh call the back Ender so we have to give a URL over here so let's say const API URL is equal to whatever your API URL is so in my case it is HTTP colon SL Local Host because I have been using the Local Host API okay so let's say Local Host 8,000 SL all data now what we will do we will make use of our exos and uh by using exos we will try to get the data from our API so let's say let new chart and exhaust exhaust. get evi URL now basically when we are using exos it returns a promise to us so for that we also have to make use of our then so let's say then and whatever we are getting in return is a response so we will store it in a variable named response now after that we will create one aror function over here like this and inside this we will handle the data so first of all we will start by setting the data uh let's set set the data for a student so let's say set student data and inside this we will response dot data. table so in my back end my this data is stored in a table so table is a name of my variable and over there this data is stol similarly we will do for our card data response do data do card data so name of my variable inside my database is also a card data so card data or you can check it over here so if I'll just show you our backend file which we created index.js file here you can see this is all my data okay so you can make use of this particular datas inside your particular component so over here this D will be capital and again so next one we have is chart so let's say set chart and the chart is basically for our pie chart okay so let's say response dot data. py chart now after that what we will do we will create one more uh constant over here and uh name of my constant is CTX is equal to document. get element by ID and U we want to feel this data inside my that particular ID right so let's say my ID name was [Music] activities activities SL chart. getet contacts and uh I'll keep it 2D we will initialize the new chart so let's say new chart is equal to new space chart inside that we will pass this data so let's say CTX comma we will give this chart of properties so first of all the type of this particular chart will be line so let's say line then data colum response respon response dot data dot line chart so name of this uh line chart data was line graph data you can change this name according to the uh name you have used whenever you are creating your backend or whenever uh you were creating your database and whatever the name was written over there you can change this uh dot name after that okay and uh we'll also have some options over there so let's options find an options and over here we will also pass this options like this now after this we will set a line chart so let's say set line chart to new chart now we also have to uh write a cleanup function because we are going to refresh this particular chart so whenever I'm clicking the refresh I want it that my particular chart which I have created earlier got destroyed okay then and then only it will generate a new chart for me right so for that but what I'm doing over here is I'm creating one destroy function so let's create that so let's say return new chart do destroy now in case there is some error whenever we are using this particular API call so in that case I'll write just dot cache and uh cach block obviously uh accept some error so inside this name of my error variable that is that will be error and uh not writing directly like this now over here we will console whatever the error is so let's say console dot error and U error message will be exhaust error and whatever the error had occurred over there okay now let's modify this refresh function okay so here inside this we have to make all the API calls for our line chart again because the data will be destroyed and we have to create a new line chart so for that we will give our API URL again so let's say HTTP okay uh or else you can just copy it down from the top so we will copy this part this particular part and inside this I just want for whatever the data is for my line graph okay so let's copy the whole thing over here so I'm copying this whole part and pasting it over here so on drift fresh what we are doing is we are just you know making the same API call over again okay so here I don't need this data to be updated when I refresh that particular component I just want to refresh whatever the data was in my line chart and this is for pie chart so I'll remove this as well I guess this particular part is uh completed let's try to run this so I'm opening new terminal over here and uh I also have to write command in my back and terminal as well so here somewhere we had our back end terminal right okay cannot see it so let's first move to back end so let's say CD and uh node this will start our backend server okay so our backend server is running now let's try to run this and let's try to debug the code wherever we are getting the error okay now you can see we have a few errors over here let's uh try to import our exos so let's say import exos and it will import the exos now only one error will left that is import chart so let's say import so I'll try to rerun this again so you can see after rerunning it is working just fine and you can see all the data coming from the back end over here okay so you can see over here that is one error as it is destroyed whenever we are refreshing it okay so we are not getting the line CH data over here we will try to fix this part okay so let's just do that I'll be moving back to my vs code and let's try to figure out what is the error happening over here and why our code is bringing whenever we are trying to refresh okay so let's try to understand what is this saying first so first of all uh you can say that uh reading destroyed because on refresh there is some URL issue or there is some on click issue over here okay okay let's try to fix this part so there was the small error uh one was I have not return that uh from the API I just want the line graph data so I'll be fetching the line graph data over here not the all data and one more thing there won't be any spaces in my get element by ID name okay so make sure you do that right and let's look at the output and one more thing I have also given the data in my card so if I'll just show you over here see I have uh fetched the data from my back end and I have given it to the all card so card data do total revenue for the revenue card and similarly for your transaction card for total likes card and for total user card okay now let's move to our output and let's see what we got so here you can see uh this is working just fine now what we have to do is we just have to create this top product card over here and we have to create a side menu over here okay so I guess this is looking very beautiful but one more thing if you have noticed over here in the final product and this you can see we have added some scroll by properties but it is not actually uh you know implemented so for that we have to install one uh module so let me just show you so let's say telin scroll bar and you can see this npmjs scroll bar so here I'm just copying this down and moving to my vs code inside my new terminal I'm just pasting this command okay so if you read this particular documentation you will see over here there are some required plugins okay okay so we have used this uh complete list of utilities and you can read this but we have to add this particular plugin inside our telin config.js okay so I'm copying this required plugin and moving to my vs code and inside my telin config I'm pasting this inside this plugin now let's move back to our output now you can see the difference between our scroll bar so scroll bar thumb is in a different color this is very thin and looking very aesthetic right now what we have to do we have to create this particular top product card so we have already sent the data in our product card using a props now we will see how to create this and how to you know change the data whenever your month is getting changed so let's move ahead and do that so let's move back to our vs code and inside this I'll be opening my top card. JS okay so here I'm letting everything as it is just removing the stop product card now inside this particular function I'll be creating my back end side by side for this one okay because now you know how to create a front end and you have the uh little overview about it so you know how to create back end as well so I'll be doing it side by side so first of all I'm starting with the back end part so so let's say const again we will be using U state so let's say chart comma set chart is equal to UE State and uh we know that we are getting this particular charts from our back end so let's write charts over here and we have already passed the data of our charts from our other component which was dashboard right so we just have to use that particular prop so you if you don't want to write props is equal to and everything so you can just uh write it inside your function inside curly braces whatever the prop name you want to give so here I'm using charts as my prop name and that particular prop data is going over here which is coming from the back end I hope this part is clear to you I don't want you to guys get confused over here and um I hope this is clear to you now let's move ahead and create one more Us St so let's say select so for our you know P chart the data is getting changed when the month is getting changed so for that we also have to keep track of what month we are in so for that I'm creating one more use state so let's say selected month comma set selected month months and over here also it will be months okay now again we will be using use State and on the starting we want it to be January so if you know uh the indexing start from the zero so first of all we will keep it at January that is at index zero and similarly at index one we will be having February and so on so whenever the options are getting changed we will change this particular selected month accordingly okay now after this uh we also have to create one constant variable able to store our API URL so this is the same API URL we have used earlier so HTTP colon Local Host colon 8,000 so 8,000 is basically the port we have our back end in okay slash py chart now after this we have constant months so I'm creating one you know array to store all the months so starting with the January December okay after months we have constant options is equal to responsive uh this is similar to what we have done for our line chart okay responsive will make it true we will write maintain as prao as false now after that we will create our use effect so let's say use effect this is also similar to what we have already done okay so let's first give one consol stat over here I guess we don't need consoles anymore part okay so let's create one variable over here let's a con CTX is equal to document dot get element by ID and uh in this case we will be creating the element with the ID top product chart dot get context context and this will be in 2D again now const new chart is equal to new chart and inside that we will again pass CTX comma type of the chart that will be pie chart comma data data will be chart comma options will be options now we also have to import this chart and we also have to import the ex okay so let's do that first so over here at the very top I'm writing import exos from exos and uh over here import chart and again this will be Auto now what we have to do is we have to set chart as new chart and we also have to destroy this particular chart whenever we are uh you know changing the month so for that we also have to destroy chart so let's say new chart do destroy now after this we will create one more uh function to change the month so for that we have to keep track of what month we are in and on change of whatever the month is getting Chang on that we will use this particular function to keep track so let's say handle month change month change is equal to inside this we will pass event now let's say set selected month also we have to pass that particular month into int because in the database we have stored in format of 0 1 2 and 3 okay right now then will pass it at event. Target do value you will get all these things what we are writing over here whenever we are you know uh create this particular front end for this particular part so let's say let API is equal to API URL plus months now inside this we will pass event dot Target do value outside this we will make use of our exos to get that particular month's API so let's say ex. API and uh as we all know that API request using exos return the promise so we also have to make use of then so dot then and whatever we get in return is response we'll again create Arrow function over here and um this part is now similar to what we have already done so first of all we will destroy the chart because our month is getting Chang change so we want that particular old chart to get destroyed now again we will create one constant and name of CTX whatever the name you want to write you can write that get element by ID and over here let's say top products slash chart then write get context and we want this particular chart also in 2D so let's say 2D this will be do get context okay now we'll create one more variable over here like this and the name of the variable will be new chart and we will assign that particular new chart to new chart and inside the new chart we will pass this particular variable we have just created comma type of our particular chart so the type of the chart is pi then data so data is basically whatever we got in response so response. data py chart comma we will pass the options now we will also set the chart as a new chart now after doing this much we also have to you know clean up the chart we have created so let's say return new chart do destroy this will make sure that our new chart variable is empty okay again after that in case our exhaust request didn't work in that case we also have to cat the error so let's say error now inside this particular uh cach block we will write console do log and the error message so let's say exos error comma error no now we are done with the API calling and everything so we will move to our front end part so let's do that so over here let's say class name class name and U let's say card over here and we will give a styling to this okay so we will be writing an inline style over here starting with the height height I'm giving 9 RM over here so you can change height and everything according to your requirements okay then width will be 20 RM no inside this I'll be creating one more Dev so let's say Dev and we do don't need this uh terminal over here right now okay so I'm just closing it and let's give this div some class name so let's say class name so this is the header part and uh so let's just give header over here and now after this let's say display colum Flex justify content space between so this is basically our header part so we also have to give span over here inside this we will write whatever the heading we have so let's say top products let's give some styling to this particular text so let's say font will be bald and for the large screen we will be having text as small and for small screen for the small screen text will be extra small on very same line of ver we have return the heading we also want this drop- down box uh and where you can select whatever the option for the month you want to select okay so for that I'm creating one select tag so I see select like this and let's give some class names over here inside this I'll keep my text as extra small font as thin and text will be slate 700 so this is basically almost black color but grayish type okay now value will be selected month now on change we have already created the function what will happen on change okay so for that we have created handle month change function so we will call that that we'll also give some Styles over here let's say margin margin right all in 0.5 RM you can change this according to your requirements okay now after that inside we also have to write some options so let's say options value equal to Zer and uh text will be January and similarly we will do for all of the other months so the only difference will be is one at uh February 3 at two at march three at April and so on so let me just quickly do that so I have completed this particular part and now what we will do we will create a canvas over here so we have already created canvas for our line graph but now it's time for our py graph so let's say class name over here we will make Flex in line so there is no option so I'll write it in line like this and we also have to give ID over here and make sure to give same ID whatever you have used whenever you are making API call okay so let's say product product/ chart so this was the ID which I had given you write whatever you had given over there okay and over here I'll say withd is equal to 100% comma height will be 100% too or let's say height as 90% okay so we have we have successfully uh created our top product card so now let's move to okay so here it is seeing that use effect is not defined so let's import our use effect over here and giv a comma and let's say use effect H like this okay we have imported the use effect but I don't know why it is showing the error so let's just try to rerun this particular code so that we can uh get the idea where we are getting the error okay so let's say npm Run start our back end is already running so we don't have to worry about that and in the browser I'm just closing this tag now let's move ahead and look at the output so over here you can see this is working just fine we have completed all the parts now we just have to create this menu bar okay so let's also check uh by changing the months let's see the data is changing or not so you can see the data is changing whenever you are changing the month and this part is also looking uh fine and it's working good now let's focus on creating this menu bar and before that uh you can see the screen is not perfectly aligned so for that what we have to do is we have to you know uh make our margin padding and everything at zero uh in our index. CSS okay so let's move to our vs code and over here I'll be writing some codes now over here uh we will write universal code so just give star and cly bracket now let's make margin a zero similarly we will do for our pedding now let's check the output so now you can see uh this is looking good now let's move ahead and create our menu menu okay so inside my menu uh if you have looked at the menu menu was completely responsive so for the mobile view I had just a button and on click of that button the menu was popping off right so for that we have to create one function to keep track of whether our menu is open or not so for that let's create one function over here before our return statement okay so let's handle handle toggle sidebar and just like this over here we will set show sidebar as not equal to show Side Bar okay we also have to create this variable so I'll be making use of my Q State hook so let's say const so Set Side Bar and and uh initially we will keep it as false now this was about our toggle button now let's move to the main part so let's a button first of all we'll create the button and on click of the button uh handle toggle sidebar will be called okay okay after that we will give some class name to this particular button so let's say class name first of all we'll make it in line Flex item Center P2 mt2 Tex t as text Gray 500 now background will be black so let's say black then rounded let's Give It 2 XEL I guess for small displays I want it to be hidden and H BG G and Focus ring should be two and focus ring color will be Gray now inside this I already have an SVG you can uh use any icon you like okay so I'm just pasting whatever the SVG I have coped so here I'm pasting the SVG and uh now we will create the aside inside this I'm also giving get some ID so let's say default default cyber now we also have to give some class names over here so let's say class name and uh we will give the styling using telin CSS but in a dynamic form so you can give a dynamic styling using curly braces and btics Okay so so we'll make use of this back T now I'll start writing let's a fix top three for large devices left will be 4 my Z will be 40 width will be 64 height will be let's give 95% and transition transform now after that we will give an dollar sign over here and then we will write uh show sidebar is a question mark if the show Side bar is true in that case what we will do we will transform this so let's say minus translate translate from X full okay otherwise for small devices we will say Translate Side bar so we have successfully created now we will create one more Dev over here and uh whenever we will be clicking on this particular div the sidebar will be closing as well so let's do that so let's say class name height will be full PX will be 3 py will be four rounded 2XL overflow hidden and background will be black black and on click handle toggle sidebar okay now inside this we will uh start creating our you know the tags whatever we wanted to put so let's say Dev over here so first one was the company name so I'm doing that heading will be five Flex justify Center or let's say start okay doesn't really matter and over here let's say span also give some class names over here so first one was text text white font bold text 3el and uh we also have to write in telepath over here which is our company name now I'll be creating one UL tag over here like this and uh let's let's give this UL tag some styling so let's say class name and what I'm giving over here is just a space from my y AIS that will be three and font will be medium medium and uh padding from left will be four and flex will be chome like this now inside this I'll be having my list so this is the list we will be copying for all the components so let's say class name over here we will be making display Flex item Center Center padding will be two text will be of gray 900 rounded 2 Excel or let's make the text it's white color Okay so let's say white and uh and I also wanted uh to change the background when we are hovering over it so let's say hover BG and uh let's make the background as gray let's keep it 300 okay or let's give 400 fine now inside this I'll be having one icon and one span tag inside the span tag I'll be writing all the options okay so I have already uh have some of the icons imported and whatever the list I want to add so I'll just quickly add that and I'll show you okay so I have pasted uh all the you know list which I had with me so you can see I have took this icons and this is the list so I have copied this how many list I wanted and I have pasted okay and with that uh we have completed our menu section as well so now let's move to output and let's see the final output for this so you can see over here we have successfully completed our dashboard and it is looking very beautiful now it's time to push it on our GitHub so let's do that so I am inside my GitHub and I have clicked on new repository and now we will be creating a new repository over here so let's give our repository some name so let's say react Rea dashboard dashboard and um click on create repository over here okay now before pushing this project to our repository what we will do we will uh you know um remove our no modules first because it will be very heavy otherwise so I'll just move to my project over here and I'll remove all the non modules from this so let's remove this and we will also remove this no modules okay so we have removed our nod modules now and um what we will do over here is we will open a new terminal over here and I'll be taking this on the side and from here we will start copying this command one by one so let's say we copy this and paste it over here then we will init the G repository like this and and I don't think we need to add read me file so let's say get. add like this and then we will commit whatever uh the repository then we will add the branch over here name Branch then we'll copy this paste it over here and we will push this after a few minutes uh your project will be pushed on GitHub now let's refresh our repository and you can see your project is already deployed and it has already created a readme file but I don't think this readme file is appropriate so uh let it be okay and with that we have successfully pushed all of our code to GitHub and you can see we have created this beautiful project in this video we have learned how to manage the front end how to create Json server how to manage API request how to fetch the data from the back end and how to create this beautiful UI as well so if you guys like the video do like share and don't forget to subscribe to intellipath YouTube channel I'll see you guys in next video with amazing react project till then keep creating those projects thank you so much just a quick info guys intellipath offers a fullstack developer course which enable you to learn text from both front end and backend through this course you will gain hands-on experience with the skills and Technologies such as SQL Java data structure JavaScript HTML CSS nodes JS and react under the guidance of industrial professionals with this course we have already helped thousands of professional in successful career transition you can check out the testimonial on our Achievers Channel whose link is given in the description below without a doubt this course can set your careers to New Height so visit the course page link given in the description and take the first step towards the career growth with the fullstack developer course

Channel: Intellipaat

Views: 8,659

Keywords: React Admin Dashboard Tutorial, React Responsive Admin Panel, React Project, React Admin Dashboard, React Admin Panel, React Admin, Admin Dashboard, Admin Dashboard Design, React, Responsive Admin Dashboard, React Dashboard, Admin Panel Design, Responsive Admin Dashboard Menu Layout, Responsive Admin Panel, Responsive Admin Dashboard Page Html CSS, Admin Dashboard Html, Admin Panel In React JS, Build A Dashboard In React JS, Admin Dashboard React, Intellipaat

Id: AeCX1sbXLMQ

Length: 153min 26sec (9206 seconds)

Published: Fri Dec 22 2023