React Responsive Admin Dashboard with Source Code | Build Your Own Admin Panel in React JS

hello everyone welcome back to coded YouTube channel in this video we will create admin dashboard using react.js so this is the dashboard that we will create in this video okay this is the sidebar the heater and the cards and the charts that you has created this is fully responsive let's check it now these are the charts so this is the admin dashboard that we will create okay the sidebar the heater and also the cards and the charts you can add other links also like products list of products categories and customers but I hope this is just this test mode a simple and very easy just in a few minutes you will create it so let's get started first of all we will create our react app so just come here to the react this is the folder which I have opened so now I will move to this folder in the terminal and I will create a act up using with JS okay let's write npm create it at the latest it will create our react app using which is uh yeah why so project name that is admin panel enter and package name the same and let's see we are using react and we are using JavaScript and our project has created now let's move CD admin panel and after that npm install it will install all the dependencies that has installed so now let's run it npm run new so it will run our server our react server so let's move to this URL and let's check it see this is our react app so now I will remove this default code just come here to the admin panel inside is our C inside hub.j6 let's remove all this code and also remove these two and remove all this code also I will delete this one yeah so this is our react app a clean app so now we will start our coding before sorting the coding we should install a few packages which are in need we need to install them like recharge and icons just come here and let's create a new terminal and inside this I will move to the CD admin panel and after that I will install NTM install recharge recharge is used to create charts and react icons yeah I will install these two packages yeah those these two has installed let's check them and just come here to the react icons and react charts for the designing I'm using pure CSS I will share the code all code video uh your whole Link in the description description for the source code so let's remove this also first of all I will create three components the first one would be the header.jsx rfce react function component export and second one would be sidebar .jsx dot yes sorry sidebar.jsx and third one would be oh after creating this so now let's create our layout for the layout I will move to the after G6 is the size of code and in the up.jsx I'll just try it and create a new container and I will assign a class name to this last name great container so I will add some code for our layout some code for the body and for this great container the CSS code okay let's come here to the upload CSS so for the CSS code I will not write it directly because it will take too much time I will share the code with you and I will just I have already written I showed you I pause the video for the CSS code so this is for our body okay let's see it our body will take black color and it looks like this and this is for our great container or this one okay or this great container this code I display grid then we have four columns inside that the first one sidebar then three header at the top okay then sidebar then three Mains component I will show you it right now okay you will write something inside our components so let's first of all import our all three components inside this either in the sidebar and also the home now right now we didn't apply anything and this so the home component has not imported so let's import it import home from let's let's show so before it was not imported so let's stick it now so it looks like this okay we will later specify the areas okay here in the cssv I will Define these areas so later we will Define them so right now it is okay now we will start our sidebar coding so before sidebar let's move to right first of all the header because that will take just a 2-3 minutes time in the heater we have used a few icons so let's first of all import them from react icons the first one is the BS fail Bill okay this one I will just copy the name of the so these are the icons which I have imported so now let's write our coding this is header with us let's assign a class name to this that is heater and inside this we have RDU compo element and let's assign a class name this is per menu icon we would like to just show our sidebar and smaller devices so then we will use this icon so let's use this PS justify we will use this icon for that and let's assign a class name to this that is the icon and after that I another do element and we will assign a class name to this class name header lift okay in the left side which we have the header here there we have a search button so let's import the search icon and assign a class name to this that is icon we have another development and let's assign a class name to this that is header right and here we'll just use two three icons FB is fill bill and the second one is the BS fill envelope the third one is BS person Circle and let's assign a class name to this last name that is icon let's save it so this was the header code so now let's write the CSS code for this okay this is the heater and heater this is going to be light here so I have added this course for the icons these are icon Styles but for the header I have added this code okay just these a few lines for header a great area header and the height and a line atom justify content box Shadow display by default the menu icon is the display none but whenever we came to the smaller devices that will be displayed so this was the hidden part now we will move to the sidebar part okay we will light code for sidebar come here so for the sidebar let's change this element to our side and let's remove this and here I will add a new element inside that another name last name this is sidebar title with a sidebar title and the second one last name would be sidebar brand and here I will add the ID is equal to sidebar and inside this we will have for example in icon and after that a name so to add the icon we will use again import the react icons so import I will import a BS card 3 from react icons okay from react icons so now I will use that here ps card 3 and assign a class name to this that would be icon and after that I will use here write just a name like shop sharp or yeah I just tried sharp something you can write a name here okay whatever you want you can write that and when another icon for just to close the sidebar back and small smaller devices for that I will light span another class name here icon close icon here I will just try it in x this is the header icon okay this was just the the first step first in the top part of our sidebar so now I will just create a UL list inside that we will have a list let's add class names to that last name that is sidebar list it has ended to this I will add a class name that is sidebar list item and inside this list we will have a encode tag and we can make it in react to using link react Auto down but I will not fulfill that part right now we will just try it inside it in icon right now we will use BS cart 3 icon because we have already imported that another icon and this is dashboard with us let's assign a class name to this icon same to this item we will create another items also we will just change the icon and this name for them let's copy this one and we will paste it there one two three four five and six so now let's change the name of name the first one is the dashboard with us and the second one is products the third one is categories and the fourth one is customers fifth one inventory force in sitting and sitting so now I will change the icon for them let's save it and check it how it looks like so it looks like this okay we didn't apply CSS right now we will apply CSS later on this so this was our header that we have created I have imported these icons see these are the icons so now I will use one by one theme okay this is for the dashboard let's copy this then paste it here the second one is for products State here third one is for categories for customers and this one for inventory for reports copy this in this is for the city here we have wrote it and let's check it yeah it looks like okay the icons are okay but we will apply CSS now on this so let's move to the CSS part so this is the CSS code that we have applied this is for the sidebar for the first one inside bar title and after the sidebar title span sidebar brand sidebar list sidebar list item and it's over on sidebar list item and then on the anchor tag and sidebar responsive okay for the responsiveness of the sidebar so this was the sidebar part so let's check it right now see it looks like this now okay the shop and this is these are the list items so now let's add our home um a page okay home component so add code for that just come here to the home.j6 so for the home let's change it to the main and and inside main we will just create a div element and we will just write H3 this is the dashboard with us dashboard okay let's add classes to this class name this is main container then Arrow key spinning is okay and class name to this Main title and after that let's start create another view element and inside it we will create four cards right now it's a class name to this that is main card cards Main cards and add class name to this card inner and after that we will just take an H3 tag and products products like yeah products we can write that in capitals later after that we will create an icon we should have an icon okay but right now we didn't import the icons and let's import that before importing the icons I will write here for example how many products we have if you 300 okay we have these products in our stock and here I will add in icon so let's first of all import the icons we will come to the sidebar and we will copy this one paste it in the home component we will use let's remove this one which icons we will use so we will use these four icons I have imported them so let's use the first one which is BS fill R2 and it's assign a class name please that is icon and this is card icon with us card icon and also let's set up it in another view which is class name card let's paste it here so now let's copy the same code we would like to apply and four cards we have four cards in our dashboard copy this one and paste it here okay and the second one is for the first one was for products and the second one is for the categories [Music] and we will change the icon also let's copy this one and we will paste it here how many categories we have for example 12. let's copy this code again the due the card one paste it here again so now it is for customers and let's copy the code this icon copy this one and paste it here again copy this code paste it here how many customers we have for example 33 and the fourth one is for for example alerts alerts let's copy this one return these are our cars that we we have wrote okay card icon this is just change it so after these cards uh we didn't apply scissors right now it looks like this so after these cards we will apply um charts on this okay we will just create our charts now just come here create another view sorry sign a class name charts so now we will create our charts here okay to create charts simply we will come here to the recharge whenever we come to the recharge.org to the examples here we have a lot of examples we can easily create the just we will change this data okay just change the data and we will apply a newer data the data that you have right now we will copy this simple this is to create these okay first we will create bar chart let's come here like okay we will like to create this simple bar chart and we will copy let's first of all copy the data and let's copy the data we have copied the data and let's paste it on the top just paste it here yeah we have this data right now cause data and now let's apply it so to apply it we will use this response View copy this code simple code and paste it here that is okay now so now we will import these charts okay in these cards so to import them again just come here and we will copy this line paste it here okay and also for the second charts let's again come here the second chart would be line chart with us yeah let's create this one so we have already the data let's copy just the code of our charts copy this and just come here to the down paste it here this is our line chart but let's copy something for this also that we would like to import like line chart and line other things are already imported comma paste them here okay save it so now let's go and just use the CSS let's come here the cases for this main part our home part okay so this is for the main container this CSS code and main title and Main cards then for the card and cart first shield blue color then orange thin green then red color for another card card inner and Cardinal thin Far Card icons then for the charts so let's check it now how it looks like see it looks like this okay you applied that and it looks like this right now so it is not too responsive so now let's just make it responsive okay so let's see it is not responsive so to make it responsive we will light code for that right now so first of all whenever we make it on smaller devices it should be displayed and okay this sidebar and we should display an icon here and we should let's stick it okay whenever we make it resize it so it should be displayed none so let's first of all do it so this is the CSS code for ok for smaller devices then 992 uh pixel okay for that this is the media query that we wrote okay this code this is the CSS code for that see that I'll display none and this icon has displayed okay so now whenever we just press this icon so we should display that back the sidebar so for that that icon is in here with us okay so whenever we press this icon where is that this is okay whenever we replace this icon so we should display the sidebar so let's come here to the object G6 here we will just create a function so to call it from this header first we will create a variable const open sidebar toggle sit open sidebar token is equal to use state by default that is false with us let's create a function now const open sidebar so here we will just call sit open sidebar toggle function this one okay and we will change the video of this we will just write not open sidebar toggle okay if that was false it will change the true if that was to it will change to the false so now let's pass this function to this reader open sidebar is equal to Edward so whenever we hit press so let's come here to the heater and we will just distract that here one side bar and on this one whenever we click on this one and click open sidebar so when we call that function okay this one so we should just change and display the sidebar so to display the sidebar just come here to the sidebar enter this sidebar we will just pass now this open sidebar toggle is equal to just come here to the sidebar and distract that copy this and come here and paste it here and here come here to the side and let's add a class name add this open side vertical was true then we will add a class name here so here I will add a class sidebar responsive else we should add nothing okay so we have already added the sidebar responsive code in CSS so let's check it see this is the CSS code display inline and position absolute Z index has means the display over the charts so let's check it now let's press this button see that has displayed and let's Design This icon so that icon is on the sidebar yeah I can close icon just come here we'll add some code for the close icon Dot close icon and the color should be read and margin left should be like 20 pixel margin top 10 pixel or make it 30. see it looks like this right now okay let's start cursor pointer cursor pointer so now whenever we press the second we should close it back so for that let's add coming to the sidebar and this we will call that function again so let's just pause this function to the sidebar also copy this and paste it here copy this same just come here to the sidebar and let's we have this and whenever we click on this on click let's save it and let's check it now so that has not applied right now so yeah on click we should do per call open sidebar and let's save it we didn't save it see that has closed back and this is not responsiveness so let's add some CSS code for that so this is the code for a smaller than 768 pixel this is the code and this is the code for smaller devices mobiles so let's save it and now we will check it come here see it looks like this right now see so this was all about react admin dispute I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel thanks for watching

Channel: Code With Yousaf

Views: 131,418

Keywords: react admin dashboard, react admin panel, react admin, admin dashboard, admin dashboard design, react, responsive admin dashboard, react dashboard, xtreme react admin lite, admin panel design, responsive admin dashboard menu layout, responsive admin panel, responsive admin dashboard page html css, react admin template, admin dashboard html, admin panel in react js, react project, build a dashboard in react js, vuexy react admin dashboard design, admin dashboard react

Id: pWd29MtFGJA

Length: 34min 10sec (2050 seconds)

Published: Mon Jul 31 2023