React Admin Panel Tutorial | React Admin Dashboard Template Design

hello my friends today we are gonna design this beautiful admin dashboard using react this is the home page we will have different widgets here and right after we are gonna show a progress bar component and this interactive chart and we are gonna add a custom table here let's check out the list pages we will use an amazing data table that we can select our items sort them or filter them and here we will be able to delete items or display a single item using this button in this project you are gonna see how easy to create different pages using functional components and also you are gonna learn how to add a dark mode option for your websites it's an amazing project for your portfolio and a great admin dashboard for our feature projects and finally we are gonna deploy this dashboard using a hosting service to do that we will be using hostinger one of the most popular hosting providers and the sponsor of this video it's really cheap really fast i've been using their services for a long time and i could say i never had a single issue you can deploy a hundred websites you will have more than enough storage and the best thing is you are gonna get a free domain and a free ssl certificate at this price it's amazing you can choose any time period here and if you use the link in the description below or lamadev coupon code here you're gonna get an extra discount after choosing your payment methods and entering your information it will be ready for deploying your websites if you are ready let's design this beautiful dashboard and deploy it here okay i created my folder here it's just an empty folder and i'm going to create my react app to do that i'm going to open my console by the way guys if you want to learn about us code shortcuts like this terminal like this sidebar or any other awesome shortcuts you can check the card on the top right there's an awesome video for that okay i'm gonna create my react app to do that i will write mpx create react app and i'm going to install inside this folder so i'll write dot and enter during this process let's check out our font family in this project we are gonna use this font family nunito it's a really nice font family as you can see only thing usual too is choosing all those styles here and copying this link here i'll copy this as you can see it's ready i'll go to index.html and i'm gonna paste my link here like that let's close here and i'm gonna delete some unnecessary lines here like here here here logo we don't need that and those comments and this link react admin app and i'm gonna delete here okay it's cleaner right now but how we are gonna use this font firmly but before let's see what's inside our app.js this is the main.js file when we run our application it's gonna work as you can see there are some codes here let's start our application and see i'll say yeah and start or npm start if you are using npm and it's opening a new tab here and it's going to show my application by the way guys if you are already a follower of lamadev i know we are doing same things again and again but don't worry there are some new things for you you are going to improve your design skills you are going to learn new styles you are going to learn react router dom the new version and some other things like scss our application is here let's come here and delete everything and i'm just gonna write normal dev okay as you can see there are some default css styles here that because it's in the middle of the screen let's delete them you don't need icon we don't need any logo this file robots let's delete them in the source file we don't need that we don't need test this css logo we are going to create our own css files let's select them and let's select those imports here and inside index.js we deleted this file this css and i'm going to clean here okay let's see so what i'm gonna do is changing my font family to do that we are gonna need this css line i will copy and inside index.html i'm going to create here a new style style and for all documents for all the websites i'm going to apply this font firmly let's check as you can see it has changed and by the way there is a space here and here by default there is a padding in our application to prevent this i will write margin zero like that okay awesome let's close here and this index.js and let's decide which pages we are gonna need firstly we are gonna have a login page we are gonna have a home page and in the menu bar when we click on users it's gonna show our user lists when we click on products it's gonna show us products list basically we are gonna need some pages let's create i will say pages first page will be login page and let's create second one it's going to be home page list page and we are going to be able to see our single products or single users so i'm going to create a single page and finally i'm going to create new page which we can add new user or product okay let's create our home.js first i'll say home.js or you can use jsx i'm using jsx that because it's really easy to handle html elements inside jsx so let's create our function i'm gonna use these shortcuts if you want to learn more about those shortcuts we escort shortcuts you can check the card on the right top there's an awesome video for that also and by the way i was using underscore ref ce but i don't know why it's not showing up okay anyway i'm gonna handle that later i don't wanna waste your time that's because when you use underscore it doesn't import this react component we don't need that but anyway it can stay and i'm gonna create my css file but in this application we are not going to use pure css we are going to use sas to do that i'm going to open new terminal here and i will say yarn add or npm install and sass why we are using sas because i just want to do something different and it's really easy to handle your css files you can write nested css files so you don't have to worry about your class names and it's really easy to handle global variables and functions you're gonna see all of them if you're a front-end developer or full-stack developer you should definitely learn sas don't worry it's not a different framework or doesn't have different syntax it's just like css so what i'm gonna do is creating here ss file i will say home dot scss and we are going to use this css file here i will say import home.scss let's come here and give a class name i will just say home and if i say home and background color for example this color and if i use this home component here like that let's see okay as you can see purple is here what's the awesome thing about scss if you write here for example h1 class name let's say title instead of writing this title here you can basically move it inside home because it's the child of home div here as you can see it's nested inside our html file we can do the same thing here we can write nested and i will say color white as you can see it works like that okay let's delete here i will just leave as home and i'm gonna do the same thing for other pages here list.jazz list.s css login.js login.css i'm going to stop the video and come back later okay i created all my pages as you can see list login new there's nothing different i just created my functions okay but how we are gonna change pages inside our application we see our home page but if i want to go to login page for example or users page as you can see it's still home page that because inside our app.js we use only this home page but how we are gonna do this dynamic it's really easy let's write here yarn add or npm install react router dom you here okay let's install and i'm going to show you how to use it so if you search for react router dom let's choose the latest version and let's read the documentation i will say installation we have already installed that let's check overview as you can see we can use router like that we are gonna just import some react radio dom components and after we are gonna use it like that i'm gonna show you don't worry about that firstly i'm gonna import those components and here i'm just gonna paste it let's delete all those woods here and let's decide which components we are gonna use firstly we are gonna have home page to do that inside roots component i'm going to create a new route and our path will be just main path which is just slash and i'm going to close here i'm going to go to home page and as you can see it's here if i write here anything else and if i go that path as you can see it's here and also you can use nested threads how we are gonna do this instead of writing here element you can come here and create new route and you can say index here and after that element and it's exactly the same thing as we did before we are going to use this path and our index component will be home so if i create here another route and let's say path login and my element will be login page of course we should just import this component like that basically it's gonna use this main path and after this slash whenever we write login it's gonna go to this component let's see our home page as you can see if i write login it's going to go to login page perfect so let's create others i'm going to use users and i'm not going to use any element here i'm going to write it as a nested route for index i'm gonna use my list component this page like that let's create other paths i will say path and here we can use any parameter like user id and i'm gonna change it as single page and one more our path will be new and element will be new page let's import them list single page and new page of course they are going to be lowercase and let's see i'm gonna go to users page first as you can see it's calling my list page but if i write here any parameter any user id it doesn't matter what you are writing here as you can see we are in the single page you can change here any username sorry user id it's gonna always call this single page and if i write here new as you can see it's not taking this as a user id that because we defined here new path and in the previous version it was not working like that you had to write exact key but in this version it's much more easier and let's create another route let's say products it's gonna call list again but don't worry they are same pages but we are gonna show different lists we are gonna pass our data let's say product id and new will be new products product id new product perfect i hope you understood how it works there is nothing complex after a couple of example you are gonna understand better that's all for our app jazz let's take care of our home page i'm going to open my home jsx and let's see what we are going to create before creating anything for the home page let's go to home page by the way okay let's create our common components the sidebar and the number they are not going to be only in the home page we are going to use them in every pages so let's create that components first i'm gonna open my sidebar here and let's close pages and create component folder i'll say components and inside we are gonna have sidebar and navbar let's create our css and js files i'm going to say netbar.jsx naught bar dot s css i will do the same thing for here sidebar jsx sidebar as css okay let's create our function class name will be now power and i'm going to import my css file here now bar dot scss i'm going to do the same thing for sidebar let's close here and it's going to be sidebar of course lowercase let's write it here i will say sidebar i'm gonna import from my components let's close this and as you can see it's here perfect so let's take care of cyper i'm gonna close here and inside this sidebar let me show you what we are going to create firstly we are going to have our logo and then we are going to have our menu list and finally we are going to create here another div which includes our color options light mode and dark mode to do that i'm going to create three lists here top center and bottom it's going to include logo list color options okay perfect firstly i'm going to create my logo i will say span.logo it's going to be lama admin like that and inside center i'm going to create a list it's going to be ul and let's say li maybe span and dashboard and i'm going to create other allies like that okay we are going to give some styles for them but before let's create our home container here to do that we are going to go to home page and i'm going to create here home container let's say container as you can see our container is not here it's underneath our middle to prevent this what i'm gonna do is using flexbox i'm gonna make them horizontal remember this is our main do and inside it includes two children sidebar and home container if i make this flexbox let's go to css i will say display flex and right now they are horizontal perfect and i can arrange their sizes using flexbox what i mean by that let's write here container and background color will be let's say light blue and for the sidebar i will say background color light coral as you can see they don't have any custom size what i'm gonna do is writing here flags one and for the container i will say flags too and as you can see our container is twice bigger than our menu bar here if i increase this as you can see one unit three units if i say 10 for example it's gonna be much bigger let's make this six okay it's better like that and i'm gonna delete those background colors okay so i can close this home page for now and take care of my elements we have topd here and inside we have logo so i'm gonna come here and say top let's give height 50 pixels like that but how i'm gonna center this item it's really easy again i'm gonna use display flex and if i say align item center it's gonna center vertically and if i say justify content center it's gonna center horizontally also let me show you i'm gonna say background color and as you can see it's in the middle of our top component top d and what about this logo i'm writing here because its parent is top component i can write this like that i will say font size 20 pixels and font weight will be bold and let's change text color and i'm going to use this purple color like that and i'm going to give some hr here after topper i will say hr as you can see there is a line right now but i can't change it it's really sharp it's inside our sidebar remember it's not in the top bar so i'm gonna write it here hr first the height will be zero and border will be 0.5 pixels solid and light gray okay it's still sharp maybe something like that okay it's better right now by the way i can give some border for this sidebar also let's copy this and for sidebar i'm gonna paste it but this time it's gonna be on the right side like that but as you can see it's ending here that because we don't have any height i will say minimum height a hundredth vh like that as you can see it contains all screen and it looks better let's give background color it's going to be white why i'm giving this that because we are going to have dark mode here when we change this color it's going to be black when we change again it's going to be white what about this center after hr i'll say center and i'm gonna give some padding left it's gonna be 20 pixels okay it's too much maybe 10 okay and i want to delete those list styles to do that remember we have ul inside center and this style will be no and if you are using ql it has custom margin and padding to prevent this i will just say padding 0 margin 0 and yeah i'm going to have only 10 pixels here which we gave for center div perfect so what i'm going to do now i want to change those texts that because we are not going to have only text here we are going to have some icons to do that we are going to be using material ui if you search for material ui icons there are tons of icons and also we are gonna use its tables here as you can see basic table some data tables and it's awesome we are going to use it later let's come back these icons but how we are going to use material icons if you watched my material ui tutorial it was version 4 but they upgraded to version 5 and also they changed their names it's only m ui right now so there are some changes of course i'm gonna make another tutorial for this version but for now i'm just gonna show you how to install it and how to use icons and this table let's come here i will say installation and i'm going to use yarn so i will just copy here and inside my terminal i'm gonna paste it i'm not gonna enter yet that because we are gonna install also material ui icons so i will come here as you can see svg icons i need to install this also i will paste here and i'm gonna enter it's gonna take a while and after that we will be able to use those icons firstly let's search for dashboard okay this is nice i'm gonna just copy this icon let's shrink this here and i will come here i will paste it like that after css and i'm gonna use this before this text like that let's come here and check perfect i will do the same thing for others it's going to be users products orders let's create more stats notifications system health logs settings profile and logout and i'm gonna find other icons here for example for user you can choose any of them you can choose outlined versions for example this one or anything you should is using this component so i'm gonna do for others i don't wanna waste time again it's gonna take a while and after that we'll continue okay i created all those icons and what i'm gonna do is adding some additional titles here for example for this dashboard list item we are gonna write here a title for these lists we are gonna add other title for these settings for this user profile and lookout you will see what i mean by that i will go to this ally and before this ally i will just say p tag and let's say title oops let's say and for those lists i will say lists and maybe here let's say useful links or just useful and here maybe service and finally user okay it's much better of course we are going to give some style for them by the way guys i added a class name for those icons as you can see it's just icon and let's take care of them i will open my sidebar here and inside this list firstly i'm gonna say title i will say font size time pixels font weight bold color let's say this gray color like that i will say margin top 15 pixels it's gonna give margin here and maybe a little bit for bottom margin bottom just five okay perfect and what about this ally as you can see they are horizontal but they are not vertically centered to do that we are going to use again display flex i will go to ally and oops display flex align item center and as you can see they are centered i'm going to give some padding for this ally let's say 5 like that and i will say cursor pointer so we are going to change our cursor that we can click and when i hover over this list item i'm going to change its color to do that we can use and and hover here and i'm going to say background color and it's going to be this white and this purple color let's see okay perfect so what about those icons we can change their colors also it's inside ally remember i'm gonna say icon first the font size will be a little bit smaller and color will be this color by the way guys we can create some global style file and use those colors as a variable but we are going to do this later don't worry we are going to use dark mode and light mode and you are going to understand how we are going to use them like that for this pen remember it includes our texts like dashboard users and some others i will say font size 13 font weight will be a little bit bold and color will be gray color like that maybe margin here margin left 10 pixels okay perfect it looks really nice and let's take care of these bottom side color options so what i'm gonna do is creating here two divs and they are gonna include our colors black and light color you're gonna understand better right now i'm gonna create color option and second one and if you want you can create more more color options let's try let's see first our center is starting here and ending here so i'm gonna create my bottom here let's say display flex again and i'm gonna give some margin okay there is nothing inside we can see right now but let's create our color options 20 high 20 i'm gonna give some border radius five pixels and i'm gonna give border let's say one pixel solid and our purple color here and again cursor pointer we are going to be able to click them and after that let's give different color for each option to do that we are going to use and child and for the first child of course it's going to be and here and for the first one i will say background color let's say white smoke and for others i'm gonna duplicate this for second child and third child let's say something dark maybe dark blue as you can see there here of course i can use some margin between them let's say margin five okay perfect you can give more example or you can delete this blue it depends on you but in this project we are gonna use only light and dark mods so i'm just gonna use two of them okay awesome it looks pretty good so let's take care of navbar and after we are gonna finish our common components and we will be able to take care of our container i'm going to close everything here and again if you want to learn more about vs code shortcuts just watch my other video and i'm going to open components narrowbar and by css okay let's close again inside the number i'm going to create a wrapper that because i'm going to give some padding and i don't want to destroy this nerve container by the way our nerve is not here i forgot writing this inside our home page let's come here home page inside home container i'm gonna say navbar and after home stuff home container let's import this number okay perfect it's here so inside this number i created a wrapper and inside this dropper we are gonna have two items first one will be our search bar here and second one will be on the right side and it's gonna include our icons let's do that i'm gonna create a search view here and inside i'm just going to create input and let's give placeholder search and it's going to include an icon again you can go to material ui and choose your icon but i've already chosen it's going to be this one and i'm going to paste it here let's see okay perfect of course we are gonna use display flags but they can stay for now and we can handle our other icons after this search bar i'm gonna create items here and i'm going to write each item here let's write here our icon and it's going to be language option like that let's see okay perfect this is our first item and i'm gonna create other icons let's import them i'm gonna duplicate this but this time it's gonna be just one icon let's copy and paste them like that and i'm gonna duplicate this and change icons here here let's delete this and we are going to add user avatar later but for now they are going to be like that before adding any additional things inside those icons let's make them horizontal so i'm going to close here and open my bar here i'm gonna give a height for this 50 pixels i'm gonna give border bottom remember we gave for sidebar it's gonna be exactly the same border like that and i'm gonna center my wrapper line item center and i will say font size 14 pixels and color will be gray something like that let's see okay it looks weird that because our wrapper is not display flex so it's not horizontal let's come here and say wrapper display flex and also items will be let's see okay perfect so let's center them i'm gonna center this wrapper align item center by the way we forgot padding here i was going to give padding okay perfect but what i want to see is this search bar in the left side and those icons in the right side to do that i'm going to use justify content and space between it didn't work that because we don't have any width i'm gonna show you like that background color this purple as you can see it's ending here but if i say with a hundred percent it's gonna contain all our nail bar here and it's gonna move those items here let's delete this perfect remember in justify content we can just center them in this case they are going to be in the center of wrapper but in our case we are going to separate them like that let's enter those items also i will come here and for search bar display flags align item center and i'm going to give some border solid and light gray like that i can give some padding and we can see better okay like that i'm doing this border that because i'm gonna delete this input border let's come here and say input i will say border none as you can see it disappeared but if i click here we are going to see this outline to prevent this i'm going to write here outline none also and i'm gonna give background color and it's gonna be transparent i'm doing this that because in the dark mode if i don't give transparent it's gonna be still white let me show you i'm gonna say background color let's say black and if i don't write this as you can see it's black but our input is still white if i do that it's gonna be black also perfect and this search text is i don't know it's really big to prevent this i'm gonna use placeholder here we can change placeholder also and font size let's say 12 like that awesome so what about those icons i will say align item center and for each item again display flex align item center in this case they are going to be centered vertically and i'm going to give some margin like that and i can make those icons smaller to do that i'm gonna give some class name here class name let's say just icon i'm gonna copy this here here like that let's choose this icon font size let's say 20 pixels like that so let's create here user author i'm going to create one more item that is going to include an image so let's delete here and add our image i just choosed a random image from pixels you can choose your author or whatever and class name will be avatar let's see our water is here of course there is no style i'm going to come here and water let's make this smaller high 30 and i'm going to make this circle and there is one more thing we can add here a counter for these notifications and messages so let's come here for this modification and for this bubble message i'm gonna add one more view and let's say for example one i'm gonna duplicate this and move it here let's say two let's take this class name and i will say these 15 pixels height will be the same and background color will be red as you can see let's make this circle 50 percent and text color will be white those numbers will be white like that of course we can center them you know what we are going to do align item center justify content center and we are going to center them vertically and horizontally but those numbers are really big let's say font size 10 and font weight maybe bold okay perfect but how i'm gonna move those here this is our item and i'm going to move those numbers on top and right somewhere here to do that we are going to change its position i will say position absolute in this case we can give any position here i will say top 0 and write 0 we are going to change time later i'm just going to show you right now and as you can see they are going somewhere there that because we didn't make our item position relative you should always remember that if you are using position absolute the parent should be position relative so if i go to parent and if i say position relative and as you can see let me make this clear background color let's say yellow and as you can see this is our item and this corner position is top zero and write 0 but it doesn't look good instead of 0 let's say minus 5 minus 5 and as you can see it's perfect right now let's select this color okay awesome it looks pretty good so we finish our sidebar and now bar and we can focus on our home container so let's create four small widgets here to do that i'm gonna open my home page and after this number let's create widgets container and inside we are gonna have four widgets so i can create new component here widget let's create jsx file css file and i'm gonna open by the way it's gonna be scss of course let's say function and import our css file let's give class name okay so i'm gonna call this here four of them of course we are gonna pass our props here but for now let's take care of our design what i'm gonna do is splitting this widget container into two pieces first one will be left second one will be right left right and let's see okay as you can see they are vertical to prevent this we are gonna be using flexbox so if i go to home page and css remember we have widgets container i'm gonna make this display flex like that by the way i can give padding for this padding 20 and i'm gonna give some space between all those items to do that you can go to widgets and say margin right 20 pixels like that but also if you are using flexbox you can basically come here and say gap 20 pixels it's exactly the same thing as you can see there's a space here here and here perfect so i'm gonna close here and i'm gonna make each item flexbox also for each widget it's gonna be horizontal of course you can give some width here like that but if you do that it might cause some problems the screen size might be different for each device to prevent this just give here flex one using flex is always better than custom width okay let's give some padding for each item and i'm gonna separate those items remember how we are doing this justify contains space between this is our container and first item on the left side second item on the right side perfect but we cannot see exactly this component you can give here a background color border color you can give box shadow which is my favorite i'm gonna copy my code and paste here i'm gonna show you how you can do this don't worry and as you can see it looks much much better to do that you can search for box shadow generator on google and if you do that you're gonna see some options here like shift down shift right spread and blur only thing you should do is copying this code and paste for your css okay maybe for the radius here border radius 10 pixels okay perfect let's give some height like that and let's write our actual texts for the left side we are gonna have three items our title and number here and finally a link let's close this sidebar and i will say span title let's say users maybe uppercase okay and second one will be let's say connor any number here and finally see all the users it's going to be our link you can say link and for the right site i'm going to write some percentage here and finally on the right bottom we are gonna add our icon for the user it's gonna be user icon for orders maybe shopping cart icon it's gonna be like that let's do this for the right side i will say percentage 20 percent for example but also i'm gonna add an icon here which shows if it's positive or negative material ui icons and search for app for example and we can use this one let's import and use it and finally after this percentage we are gonna add our actual icon i'm just gonna copy and paste that i'm not gonna search for it it's exactly the same icon which we have used for our menu and i'm gonna give class name icon okay let's take this here as you can see title are number and link but they are horizontal in this case let's make them vertical i will say left side and also right side is going to be display flex but flex direction will be column in this case it's going to be vertical and if i say just y content space between we are gonna separate them like that perfect let's take care of those items first one will be title i'll save one page bold font size will be a little bit smaller and color will be gray but it's too dark i think something like this is better okay perfect what about this number font size 28 and font weight will be thinner like that and finally for the link font size 12 and i'm gonna give border bottom one pixel solid and gray okay perfect all users but it's overflowing our width is bigger than what we expected so if i write here with maximum content it's going to be ending where our text ends which is here okay so what about this percentage let's take this do and firstly i'm gonna align them like that let's say font size 14. it's gonna be smaller okay so what i'm gonna do is making them green for the positive numbers red for negative numbers to do that we can use another class name here let's say positive i'm gonna say positive and color will be green and for the negative one it's gonna be red okay it's not here that's because i didn't save okay as you can see it's green if i make this negative it's gonna be red perfect of course we are gonna change them dynamically after fetching our data but for now it's just a design don't forget and what about this icon font size will be 18 i will give some padding because i'm gonna give background color i'm going to give this color and border radius let's say five pixels but i just want to align this item here so i will say align not items remember items just aligning all children but aligns have just aligns the actual item so if i say flex and it's gonna go to end of to item of course this background color is not going to be this one we are going to change it but for now i just wanted to show you so we can delete this because for each item it will be different for users for example red orders yellow earnings green something like that that's how we are gonna decide that if you remember we are calling our widgets like that and right now i'm gonna give a prop let's say type and we are gonna write here something for the first one it's gonna be user second one order earnings and balance okay let's take them here as a prop by the way i can close here i will say type so according to this type we are gonna decide which title which link which icon we are gonna use here let's do that here i will say let data it's going to include title and if it's money we are going to add here a dollar sign it's going to include our link and our icon so basically we are gonna change it that's why we are using flat in this case we can use if else block or switch case block let's say switch case and we are gonna look inside our type and we are gonna check it and our first case will be user which means if our type is user what i'm gonna do i'm gonna change data i will say title will be users i'm gonna check if it's money or not for this case it's gonna be false because it's user counter and link is going to be see all users and icon will be some material ui icon which is person outlined and don't forget our class name here icon there's a warning here that because we didn't use a default case let's make this to prevent this error if it's default i'm just gonna break okay for other cases we are gonna need other icons i'm just gonna copy paste them and let's copy here for order for earnings and balance let's change them for order it's going to be orders view all orders and icon will be shopping card outlined icon and this one earning is money will be true let's say view net earnings and icon will be what was name monetization let's paste here and finally balance it's gonna be true again let's say see two tails and finally this one will be our icon okay right now we have data we don't need them anymore instead we are gonna write here data.title i'm gonna write here a condition first and i will say if data. is money just right here at dollar sign and also i'm gonna write here the amount but we don't have any amount that because we are not fetching any data we don't have any db but for now i will say temporary let's write here amount and 100 for example and i will do the same thing for percentage let's say difference or percentage it's going to be 20. they are for the design part in the next tutorials when we fetch any data we are gonna change them there is our amount okay here it's gonna be data dot link is gonna be difference and finally data dot icon right now let's see what we have okay something is wrong okay there is a typo here right now everything works perfectly as you can see for those icons we can give some color and background color to do that i will say style here color will be crimson like that and also background color and it's gonna be this color it's a red color but as you can see i just decrease this opacity let's see something like that and i'm gonna do the same thing for others for shopping carts as you can see it's gonna be this golden color why i wrote down like that okay like that and finally this one and it's gonna be purple let's see okay it looks pretty nice so underneath those widgets i'm gonna create a container here which includes two chats first one will be our daily earnings and second one will be a little bit bigger and it's gonna show us our earnings which are made in the previous six months let's do that i'm gonna close them and open my homepage oops not css okay i will come here and say charts container and inside we are gonna have two components let's open our sidebar and create two components first one will be future chart and normal chart let's create here our jsx scss and i will do the same thing for chart okay let's create functions chart css like that okay i can close here i will say featured i will close here also and create my function class name will be featured and i'm gonna import my css okay let's call them here first one will be featured and chart okay it's not here let's import manually okay let's see okay what i'm gonna do is giving same style as we did here for this widgets component to do that i'm gonna open my css and i'm gonna add here charts like that as you can see we have some paddings but i can't change this top heading it's too much i think so i can come here and for charts change the padding for top and bottom 5 pixels left and right 20 pixels okay it's much better firstly let's separate them as remember it was display flex so i can do the same thing as we always do i'm gonna separate them featured css and let's say flex two and for chart component let's say flags five and i'm gonna give same box shadow here let's see maybe it's too small compared to charts maybe i can decrease that i don't know maybe three okay it's better let's close everything and open again firstly i'm gonna give a padding and after that we can create our html elements so what we are gonna have here remember the introduction we are gonna have a title here and i'm gonna add a vertical menu icon and after that we are gonna have a circular progress bar here which shows us how much money we have made today and finally we are gonna have three items we chose our target last week revenue and last month revenue let's do that for title and icon i'm gonna create a div and for others it's going to be bottom let's write here a title total revenue and after that it's going to be an icon of course component like that but i want to make this smaller to do that you can give a class name and arrange the font size but also you can write here directly font size small like that let's make this top display flags and we are going to separate them align item center just justify content space between and font color will be gray like that let's decrease this font size i will say title font size 16 and font weight will be 500 like that so what about bottom firstly we are going to have our progress bar firstly i'm going to make a container for that let's see featured bar or chart whatever you say and inside this i'm gonna create a progress bar to do that i was going to use pure svg but i decided that using a library might be easier here because it's gonna take so much time to explain you everything about svg but if you wanna learn more about switches if you wanna design your charts your animations using svg you can check the description in the below i have an awesome course for that but for this example we are gonna use a library to do that i'm gonna open my terminal and say yarn add react circular progress bar it's a really lightweight progress bar it's really easy to use and it's ready let's take this here and import our circular progress bar here only thing i should do is write in here my bar component and inside i'm going to say value is going to be 70 percent and i can write here any text and it's going to be 70 let's see what we have as you can see it looks empty that because i forgot importing its css file let's come here and import that and let's see right now okay perfect you can arrange this stroke width by the way let's say stroke with one for example we are gonna change it as you can see it's really thin right now if i say five it's gonna be enough okay perfect of course it's really big but we are gonna handle that but before let's write here our details i'm gonna open p tag it's gonna be title and i'm gonna say total sales made today and one more it's gonna be a month let's say 420 and amount and one more it's gonna be description and i'm gonna write here some description like that let's see right now firstly i'm gonna center them and after i'm gonna resize this chart container let's open up featured css and inside bottom i'm going to say padding to any display flex of course flex direction will be column it's going to be vertical and align item center justify content center and they are going to be centered like that i can give some gap 15 pixels like that and let's resize this remember featured chart it's our container i'm gonna say a hundred a hundred and it's going to be smaller perfect what about this title i'll say font weight 500 and color will be gray this amount font size will be bigger like that for the description it's going to be thinner font size 12 and color again gray but as you can see it's not centered to prevent this you can write your text align center and it's gonna look better like that what about those items which i have mentioned we are gonna have three items here target last week and last month let's create that after this p tag i'm gonna say summary and inside three items let's create first one and then we can duplicate i will say item title it's going to be target and item result result amount let's say 12k and of course again we are gonna use down or up buttons like that and it's gonna show us if we are behind to target or not so basically i'm gonna import down and up icons let's use this one for example and font size again small like that of course it's going to be display flex let's give style i will say summary display flags align item center just file content space between of course we cannot see right now because we didn't duplicate this okay did i say center no it's space between that because as i mentioned before we don't have width if i give it as you can see it's going to separate them okay and for each item inside summary i will say text align center like that and item title inside font size 14 color will be gray perfect and item result remember we have item result which includes our icon and our amount item result display flex align item center i can give some margin and decrease font size okay it's much better and finally again i'm gonna use positive and negative one oops it's gonna be like that color will be green and the negative one is gonna be red let's try as you can see it's green let's make this positive and this one negative like that of course we should change their icons because they are positive like that and their titles last week and month you can change the numbers also but for now it's enough it looks amazing let's take care of our chart let's close them and open chart component and it's css file like that okay let's decide which chart we are going to use i will search for a couple of react charts i found reactv's from uber there is a new it looks pretty good too recharge i think it's the easiest one and react charges too all those libraries are awesome but if you check for their documentation you are gonna see they're a little bit complicated compared to recharge not that much of course we can handle that but i don't think we are gonna need those libraries let's check here as you can see there are many options here but we are not going to use them and we chart is the same so i decided to use wechat it's really really easy to use if you check for api as you can see we can use this area chart it looks awesome only thing we should do is giving our data here inside our components and defining our data key you are going to understand better right now let's install our library i will say yarn add we charts as you can see it's really lightweight it didn't take that much time and let's see how we are gonna use it i'm gonna come here and click on examples and we are gonna use simple area chat and here this is how we are gonna use it firstly we are gonna import those components like that by the way i'm gonna close here we are gonna take care of this later and after we are gonna have a data of course we are gonna change it don't worry about that let's write it here and finally we are gonna use this area chart i'm gonna delete this and paste here let's see okay it's here but it's not exactly what i want i just want to import linear gradient one let's check here okay we are gonna use this one i will copy and i'm gonna change here i'm gonna save and okay it's much much better and as you can see we have two data here but we are gonna use just one of them as you can see it includes their names and also variables here but we are gonna just use one of them so basically i'm gonna delete this and i'm gonna write my own data and it's gonna include our month names january february march just for six months and their total numbers let's write here a title by the way i will say last six months revenue or user number or whatever you want and what i'm gonna do is as you can see this is the second one i'm gonna delete this we are gonna use just one id is color uv we can change it let's say total in this case we should change it here and the important thing is our area this is how we are showing this chart this area will be our total number to do that i'm gonna delete this data key it's not gonna be uv anymore it's gonna be total which is our total here of course it's uppercase and i don't need this second one let's see i saved and it's here and of course it looks pretty weird it's going to infinite i think let's comment this out and check where the problem is otherwise it's going to crash okay there's a height here and it's a hundred percent i'm gonna delete this or at least i should give any number here let's say a hundred and it's going to be really small like that but the awesome thing is you can give here an aspect ratio i'll say aspect let's say two and one it means if it is 100 pixels the height will be the half of the width which is 50 pixels let's see as you can see it's much much better by the way i'm gonna give the same box shadow here and padding let's open our css file and i'm gonna make all colors gray it's gonna be gray like that and also i can give some margin here let's say title margin bottom 20 pixels like that so what we can do here firstly i don't want this y-axis i can delete that only thing i should do is coming here and deleting y-axis okay it's much better and i want to change those colors to gray for x-axis if i say color can i apply this let's see okay it's not color maybe stroke i'm not checking to documentation but maybe i should but it applied okay if you want to learn more about this chart you can just check examples and check the documentation but for now it looks pretty good as you can see january february it shows every month here but maybe i can change this grid color it's here let's give class name it's going to be chart grid and i'm going to give a stroke it's gonna be light gray but lighter like that okay it's much better why i'm using this in this sense as well that because when we create our dark mode we are going to change it inside our css file otherwise i could do the same thing here writing stroke and writing this color but we are gonna change it in the dark mode okay perfect there is one more thing we should create inside our homepage and it's our table we are gonna create underneath those charts and we are going to show the last orders or last users whatever you want to do that let's create a table component i will close them and i'm going to open my home page first and after these charts let's create list container and inside let's say this title first and after we are going to create our component i will say latest transactions before creating our component i will write here list and as always our box shadow and padding and of course as i said we are gonna use a global css and we won't have to write them again and again but just wait and you are gonna learn it of course it's not list it's this container okay perfect let's change this title also and create the component list title font page 500 color will be gray margin bottom let's say 15 pixels okay house let's create our table i'm gonna go to components table table jsx and css my function quickly and finally class name let's close everything and open again and this sidebar okay we are ready let's see first of course we didn't add inside homepage after this title i'm gonna call my table okay let's see it's here so what i'm gonna do is going to material ui okay this one is icons i'm gonna go to table let's search for it okay it's here as you can see we are gonna use this basic table let's see what's inside our code we are gonna need to import some components here and after that we are gonna have some data of course we are not gonna use any groceries we are gonna use our own data and after that we are gonna apply them firstly i just wanna copy and paste my data and i'm gonna show you what we are gonna use i'm just gonna copy and paste and as you can see there are some products here they have id product title image the customer who buys this item transaction date amounts payment methods and status like that we are going to use this data so let's import our table components i'm just gonna copy here and paste here of course we can use html table but it's really really easy to use if you don't want to use material ui you can check my pizza ordering application tutorial i just use their pure html and after we are going to have rows we already have and we are going to use them like that and i'm going to explain everything right now let's actually delete this class name was table but we can write it here doesn't matter class name will be table okay as you can see there are gonna be our titles those titles here we are gonna change them let's see what we are gonna have we are gonna have tracking id title image all of those values basically i can copy and paste my table cells like that as you can see id name customer date everything is here additionally i just added here a class name which is table style we are going to make some changes inside style and here as you can see there is some material style here we don't need that let's delete so what's this key basically it's the unit key of our data elements as you can see our unique key will be transaction id so i can come here and say dot id and after that we can start changing our cells first one will be remember tracking id i'm gonna change it by the way i can delete them and second one will be products because it includes our product name customer date amount methods and status by the way i don't want to align them anywhere i'm going to light this and also we are going to need class name like that let's see what we have i'm gonna go to my app and there is a problem here table has already been declared ah okay we are using table here and also component name is table let's change it it's gonna be list for example and list and it's here perfect so i'm gonna make some changes here firstly i don't wanna just show here product name also i wanna show its image to do that i'm gonna come here and as you can see this is our product cell what i'm gonna do is returning a div here let's say cell wrapper and inside we are going to have image and source will be row dot image this image and after that row.product which is product name as you can see they are really big let's change them i'm going to open my css file and side wrapper it's going to be display flex align item center and for each image 32 height 32 and it's going to be 50 percent and i'm gonna give margin between this image and its title by the way 32 okay it's not covering all this border only thing i shall do is writing here object hit and cover like that awesome so we are gonna have one more change and it's gonna be our status for approved transactions it's gonna be green for pending it's gonna be yellow let's do that i will come here for this status let's delete here and create s pen and its class name will be status but at the same time its class name will be our status value for each item for example it's going to be status and pending status and approved status and pending like that to do that let's cover this with curly brackets and we are going to change it like that and dollar sign and draw dot status and finally i can write here row.status so according to these status we can change their colors let's come here i will say status i will give some padding because we are going to change background colors i will give some border radius 5 pixels and for approved color will be green and background color will be green but its opposite will be really really low i will do the same thing for pending color will be golden roads and background color will be again something yellow but opacity will be that low let's see as you can see they are green and they are yellow perfect so it's a nice home page i think we finished our home page let's take care of our users products orders or any other lists here okay i'm gonna close them open my sidebar and list page what i'm going to do is giving a class name and it's going to be list and inside this list i'm gonna do exactly the same thing as i did for home page so i'm gonna call my sidebar here and after that we are gonna have this container and inside this container we are gonna have our navar and after that we are gonna create our data table component but for now let's say data table and i'm gonna import my components import sidebar from components sidebar and sidebar i will do the same thing for nabar okay let's see of course i should make this display flex and give flag 6 for this container that because remember we have a sidebar here so exactly the same thing let's say display flex i'm going to make sure that it's a hundred percent and after that this container is gonna be flag six let's close here and let's see what we have i'm gonna open up users and perfect let's create our data table component and after that we are going to import material ui data table let's close pages and all those components okay let's create new one [Music] function and css i will create this in advance and let's create function let's import our css file here okay it's ready of course class name okay so let's install material ui data table i'm going to open up table page again but we are not going to use basic one we are going to use data table as you can see we can select any of our rows or we can sort them like that as you can see it's really useful and also there is a custom pagination here so we don't have to worry about anything material ui is the one of the best option let's see what we are going to have there is one more library here we are going to use it and after that we are going to create our columns rows and we are going to use this component it's that easy you are going to see right now let's open terminal again and i will say yarn add data grid so let's import this by the way i'm going to import all columns and rows after that we are going to change them like that let's close here and i'm going to use this data grid let's see but before we should import this table here of course i'm gonna call my component and that's all let's see i'm gonna close here okay it looks empty that because we didn't give any height i think let's try i'm not sure that's the reason or not let's give here actually height 500 for example ah okay that's the reason maybe let's say 600 and i'm gonna give some padding okay awesome as you can see it looks pretty good we don't need to arrange any option here it's gonna sort like that so let's check how it works i'm gonna come here and close my sidebar okay as you can see we have rows and columns here rows basically represents our data as you can see each row will be different user like that and column will be what we are going to show in our data table first one will be id header name is upper case id as you can see and its width is 70 pixels and as you can see it's here 70 pixels header id and it represents id which is inside our rows those ids exactly the same thing for others field first name which is those first names and header name will be first name and it's here and it's bit and as you can see you can combine any properties inside your rows you can do this using value getter it takes a parameter here and for each row take the first name which is john for example or if there is no name just write an empty string and combine this with last name which is small cersei lannister jamie lannister let's see it works like that and also instead of value getter here you can use render set it's going to take again prompts and we can return whatever we want let's say return any html element here i'm gonna say span params dot row and let's say last name [Music] and i'm gonna create here one more span and h for example maybe p tag of course we cannot use multiple html elements like that must have one parent element it should be a d here as a parent or basically you can just write react fragments like that and let's see as you can see snow 35 perfect it's important that because for the users we are not going to use only their names we are going to use their avatars basically we can return any image here and after their names of course we are not going to use this data instead we are gonna create our own in this design part we are not fetching any data so we should do this in our application in the next tutorials we are gonna fetch from any db don't worry about that but for now let's create a source here i will say data table source or whatever you want i just created quickly i didn't change that much thing as you can see it's still jon snow i just added an image all images are the same as i said i didn't want to waste any time you can give different names different images we are gonna use it as you can see its name is user rose we can export this and also i'm gonna use usual columns otherwise here will be really messy i don't wanna put them here let's put it here i'm going to say export const user columns and first one will be exactly the same thing it's going to be id oops we don't need that okay and second one will be user column i'm going to apply render cell and show their image and names let's do that i'll say field name user let's give header name it's going to be user let's give a width 230 and i will say render cell i'm gonna take the params [Music] and return something here let's say cell with image of course i cannot do this like that instead i'm gonna create like that and give a class name okay and inside we are gonna have an image let's close here and i'm gonna give class name is gonna be cell image and source will be params.row.image which is here and there's a warning here that because we didn't use any alt let's say alt avatar or you can just leave it empty and after that we are gonna use image sorry their names just use it here palms row and username and it's in here let's try this actually i'm gonna import this and this so let's delete them okay i will say import user columns user rows data table source so i'm gonna give it here and give it here and let's check as you can see id works user works also but we cannot see their images let's take care of this i'm gonna come here and say cell with table is going to be display flex of course they are going to be horizontal and i will say align item center and after that cell image let's say 32 height 32 and it's going to be circle i will give object fit it's going to be color and i'm going to give a margin between this image and username let's say 20 pixels let's see right now okay it didn't apply something is wrong oh why i said table is going to be image okay perfect it works i hope you understood how it works let's take care of others i'm gonna come here and create other one field will be email header name will be email and it will be the same 230. okay they are here oh i added some numbers here it's not exactly the same okay and the other one i'm gonna actually copy and paste this h h and it's gonna be some other of course it's just a number like that and finally they are to have a status here let's check as you can see active passive and pending we are going to use them let's say status header name will be status 160 and we are going to return again a cell render return and let's say due and class name will be cell with status and it's going to be params.status like that perfect but i want to give some other styles for those status remember for the home page we are using that kind of styles we are going to do the same thing here to do that remember what we are doing we are giving a status class name but also we are going to use their values what i mean by that is going to be solid status but also it's going to be params dot row dot stitches let's use it here i'll say salvage status let's give some padding and i'm going to use border radius 5 pixels and for each item each different class names we are going to use different colors first one will be what was the name active passive and panning okay i'll say active and green color we did this before remember it's a green color but reduced opacity and text color will be green and pending will be yellow and finally passive will be red let's see okay they are not here let's check this class name oh i said soul render it's gonna be render cell okay perfect and we are gonna add one more thing here and it's gonna be our actions that we can display those users or we can delete them but i'm not gonna put this inside our columns that because we are gonna use it in every data table it doesn't matter whether it's users or products or orders or others we are gonna always use them so i'm gonna create inside my data table component let's create here i will say const action column and i will say field is going to be action of course inside an object header name let's say action again i'm gonna give a bit 200 and render cell we are not going to take any parameters here that because we are not going to use any row elements we are going to return something else here i will say return and it's going to be a d first [Music] i will say class name cell action is going to be the parent and inside another do class name will be view button view and delete button okay so how i'm gonna add this action column to my user columns it's really easy we are just gonna use concat method and we are going to add our action column and as you can see they are here if you don't know how count card works let's say const a one two three cons b four five six and if i say a dot concat b it's gonna give us the combined array so let's give some style for them also remember our class names cell action view button and delete button i'm going to come here and say cell action display flex align item center and i'm gonna give a gap between them let's say 15 pixels and for the view button let's give some padding from top and bottom left and right i'm gonna give both the radius five pixels and text color will be let's say dark blue and what i'm gonna do is giving either a background color or border but we already gave background color here so i think it's better giving a border let's say border one pixel solid or dot whatever you want and dark blue but i'm gonna decrease this opacity something like that let's see okay perfect so let's do the same thing for the light button i'm gonna copy this delayed button and i will say crimson and i'm just going to copy and paste my color it's exactly the same thing as you can see and by the way i can give cursor pointer and awesome it looks pretty good by the way guys you can increase your row number here let's come here and instead of five rows i will say nine rows per page let's see as you can see it shows nine rows if i go to another page as you can see this is the last user perfect it's that easy we can sort them we can select them and we can use view and delete buttons so let's create single page we have already created but let's give some elements inside i'm going to go to any number here any user number as you can see this is our single page and again i'm going to give my sidebar number and single container and after that we are going to display our items so let's close everything here and open up single page and single css let's give class name quickly single and i'm going to import my sidebar single container and now bar and finally my container let's import them components sidebar and sidebar and now bar okay that because we didn't give our styles it's going to be display flex with a hundred percent and single container is gonna be flag six okay so i'm gonna split this component again first one will be top second one will be bottom and inside top we are gonna have user information here it's gonna be left side and for the right side we can add any chart or something let's try i'm gonna come here and i will say top bottom and inside top i will say left and right inside left let's add a title i will say information it's gonna be user information and we are gonna add here our item i'm not using specific class name like user or product because they are gonna be common class names we are going to use it for users products or any other single pages firstly we are going to have item image let's say item image let's put here an image every image and i'm gonna add item details but maybe let's make this command out let's type this top inside this container i will say top let's give some heading i'll say display flex that because as i said it's going to be user information and our chart here is going to be a little bit bigger and let's give some gap between them and after that i will say left which is our user information it's going to be 1 and right side will be flags 2 because chart will be bigger and after that let's give our padding and box shadows as we always do and let's see and inside this component i'm gonna add here the item image let's do that i'm gonna open again and after that image we are gonna have some details let's do it right now like that and we are gonna handle this image as you can see there is a beautiful woman here but it's really big oops i went back okay i will say item display flex they are going to be horizontal and i'm going to give gap between them between this image and details text okay let's resize this image item image a hundreds hide a hundred let's make this circle and object fit cover okay perfect so what i want to do is adding here an edit button let's do that it's going to be position absolute so i can write this underneath left side i'm going to say edit button it's going to be just edit let's take this class name and come back here i will say edit button position absolute top zero write zero but if i do that as you can see it's not here it's here that because we didn't give position relative for parent okay it's here perfect let's give some padding i'm gonna increase sorry decrease this font size and color will be our purple color here and background color will be this color but let's change the opacity something like that and cursor pointer like that also maybe some border radius for here i will say border radius zero five zero zero oops wrong side it's here so this one is five this one is zero okay perfect so what about these details i'm gonna come here and create details firstly i'm gonna add the username or item name so let's say h1 item name or title it's going to be jane doe and after that we are going to have different items which is email jane doe gmail.com her age her address country something like that so let's create new div i will say detail item now first spam will be item key and let's say email and second one will be the actual email chained all gmail.com and it's going to be itunes value i will do the same thing for oops other things like phone let's change here like that i hope it doesn't belong anyone maybe let's make this like that okay and address actually i'm just gonna copy paste this and country will be let's say usa okay perfect and let's give some style for them inside item i will say details remember this is our container and inside we have item title which is john doe sorry chain door i'm going to give some margin between this and other details so it's going to be time pixels and color will be this gray color like that and the tail item let's give margin bottom for each item like that maybe font size 14 smaller like that and finally item key maybe font bait bold color gray and item value frontway 300 like that maybe before this key i can give margin right maybe too much okay perfect this title looks really big what was the name let's check okay it's just title it's inside our left container but i'm gonna use the same title inside right container also or maybe inside bottom so basically i'm not gonna write it inside left container instead let's write it here font size will be 16 color will be light gray and i'm gonna give some space margin bottom 20 pixels okay it looks pretty good and let's add here our chart it's going to be really easy that because we already have chart component only thing i should do is coming here and calling my chart component okay it's not coming out here we should import charts as you can see it's really big here what we can do is let's open our chart component as you remember we have aspect here but instead of giving this here i can take as a prop aspect and i can use it here aspect equals aspect in this case only thing i should do coming here and giving my probe and it's gonna be three and one it was two but i changed it it's going to be smaller like that it's much better and also i can change this title let's take this as a probe also user transactions or spending last six months i'm gonna go to chart again and instead of this title i'm gonna take this here and it's gonna be title user spending's last six months perfect but if you do that let's go to the home page as you can see it's going to infinity let's go to home page and for this chart i'm gonna give title it's gonna be the previous title and aspect will be two and one let's do this again okay perfect it's exactly the same chart let's come back it looks pretty nice and of course after db we are gonna fetch our data and show them here and what about this bottom we can add our table remember by the way we don't need here y-axis i can delete and let's close this and for bottom i'm gonna add my table but what was the name let's check table components but its name was different okay list so i will call list and i'm going to import this here lists from table and tail of course we are going to give some padding here and title let's copy this title and for bottom i'm going to paste it here and i will say last transactions okay here let's take this bottom and okay it's not our style single scss and i will come here and say bottom padding will be 20. actually we are gonna use exactly the same borders those shadows and paddings okay but as you can see there is no space here let's give some margin margin 20 like that but this space is too much maybe 10 from top and bottom and too many from right and left perfect of course it's strange for now because those customer names are different but we are gonna handle don't worry by the way as you can see there is a box shadow here sidebar ah that because it's bottom also it means we missed something okay single container ah okay it ends here we should cover this and this title also okay perfect it's gonna take only this button inside our container so we finished our single page also what about add new item page okay let's open new page here new and jsx and i'm gonna import sidebar and nurbar here of course there is a class name first it's gonna be new and first sidebar and after that let's create new container as we always do and finally never and let's write here test and i'm gonna import my components import sidebar from components sidebar and sidebars like that of course we didn't give any style let's give i will say new with a hundred percent display flex and if container will be flagged 6. i'm going to go to users and new okay firstly i'm gonna create here a container which includes our title it's gonna say add new user or products or any other lists i'm gonna close my sidebar and i'm gonna come here and let's say top and bottom inside top we are gonna add h1 tag and it's gonna say add new user of course we are gonna change it later and inside bottom we are gonna have two container left and right container inside left container we are gonna add an image and inside right container we are going to create our form which includes our inputs let's say left right like that let's give heading and box shadow for this container for top container i will say top like that okay but we don't have any margin here let's give margin what about this right side actually i'm gonna do the same thing i can write it here i will say bottom like that let's make this display flex i'm gonna write it here okay and what about their sizes for the left side i'm gonna give one unit for the right side it's gonna be two units so we can use flex flex one flex two i will come here and say left flex one right flex two let's change this title by the way we can write it here twice title or just h1 okay just h1 we didn't give any class name i will say color light gray and let's decrease this font size it's too big okay perfect so what i'm gonna do is adding an image for this left side at the beginning it's gonna be an empty image what i mean by that let's create here image i'm gonna paste my url let's see okay as you can see no image that's because we are going to create here a form and after adding an image we are gonna pass that url here and we are gonna see our user image or product image let's come here and i will say image it's gonna be a hundred pixels and i will make it circle and object fit cover like that but i can center this item basically i can come here and say text align center okay so what about right side i'm gonna create form first let's come here i will say form and each input is going to include a label so basically we can write here any container let's say input container or form input it's the most common usage and inside this let's create a label i will say username and after that i'm gonna create input which is text and placeholder will be let's say john doe but it's a username not name and surname let's say lowercase john doe like that maybe and another view i'm gonna say name and surname it's gonna be text again let's say john doe email type will be email john doe at gmail.com [Music] we can give phone number let's make it text again like that it's gonna be password type will be password and let's delete this placeholder and two more it's gonna be address and country they're gonna be text and we are gonna give placeholder for the first one let's give our address and usa okay as you can see there here labels and inputs and finally let's create a send button like that so what about image input as you realize all of them are text but when we choose any image it's not going to be text it's going to be file let's create another input here and for the label we are not going to use any text instead we are going to use an icon let's import this here we are going to use it let's create our icon component and type will be file of course there is no placeholder okay it's here as you can see this is our icon and we can choose any file by clicking here but i don't like choosing file like that it doesn't look professional instead i'm gonna make this invisible but whenever we click on this icon we will be able to choose any file to do that i'm going to use html for attribute and we can give any id here let's say file if you do that you should give here an id and it should be the same name file basically it means this label and this input are connected and if i click here as you can see we can choose any file in this case i can make this invisible to do that i will give here a style and i will say display no we can give a class name here and we can make it cursor pointer and also maybe we can give here a text it looks naked i think so let's write here image okay it's better i think let's give here a class name it's gonna be icon okay let's take care of them inside right i will say form and it's gonna be display flex right now as you can see it's overflowing to prevent this i can write here flex wrap it's gonna be wrap it means if items doesn't fit in this container in this right container it's gonna move them in the second line or a third line okay i will give gap between them let's say 20 pixels of course it looks pretty ugly but if i give wheat for each item i will say form input and which will be 40 percent and i'm gonna give vid for those inputs also i will say input with a hundred percent and right now as you can see it contains all our input container here which is form input and let's get rid of those borders firstly i'm gonna give some padding and i will say border it's going to be long and i'm going to give just border bottom let's say one pixel solid and gray okay it's much better right now let's center this item if you remember it's our label and it contains our text and this icon i can make it display flex i will say label display flags align item center and let's give a gap then pixels okay and for this icon i will say cursor pointer like that perfect what about this button i'm gonna move it here to do that we are gonna give a width for that i will come here and i will say button 150 pixels as you can see it moved here and let's give some padding get rid of this border and change colors padding time pixels i will say borderline and background color will be until i really like this color and font color will be white like that let's increase this font weight i'll say cursor pointer and i'm gonna give some margin between this button and those inputs so i will say margin top 10 pixels okay so we can change their position for this form you can give space between or space around let's try i will say justify content space between and as you can see it's on the end of the container but it doesn't look good let's say space around in this case it's going to give some space from here and here and it looks better i think if you want to you can increase this gap like that so as you wish just play around here but as i said we are gonna have different new pages different page for each list here for new user we are gonna see this page but for the product for example we are not gonna need name surname phone or any other input here we are gonna add our product title product price its stock information so basically writing them like that is not a good idea what we can do we can create here new source i'm gonna come here and say new file let's say form source and i'm gonna paste my data as you can see we are gonna have an array here which includes our input label input type and its placeholder like that and also we are going to have product inputs title description category price and stock information so if i go to app.js and for those new pages i will say inputs equals user inputs from form source i will import this and i'm going to do the same thing for product i will say input it's gonna be product inputs like that and also if you remember we have a title here and we can change it i will say title add new user and for this one title will be add new products like that and of course you don't have to give them as a prop you can basically detect this parameter and according to this parameter you can decide whether it's a user page or product page but it's not only two pages as you can see we can have more pages here so instead of writing here switch case block and decide its title or form inputs i think it's a better idea okay let's use them here i will say inputs and title and instead of this text i will say title let's delete those inputs we are going to have just one and we are going to use map here i will say inputs dot map for each input write a form input and here it's going to be input dot label here input dot type and finally input dot placeholder okay but don't forget if you are using map you have to give here a unique key and it's gonna be input dot id that's why we are using different ids for each items here as you can see it's exactly the same page if i go to products different inputs but there's a problem with their labels ah okay okay perfect and for the users okay it works so we almost finished our page we are gonna add here in which actually we can do this right now how we are gonna do this if we choose any image i wanna show it here to do that let's create use state here i will say const file and set file it's gonna be use state and at the beginning it's gonna be an empty string okay it's here and i'm gonna put on change method for this input i will say own change and whenever we change this input which means whenever we choose any image put that image into file variable here so i will say set file it's going to be event target files but we are going to take just one image so i will use the first file like that let me show you i will say console.log and file i'm gonna open my console let's choose an image okay i just added here an image and as you can see it shows us our file here jordan.png and its information here and what i'm gonna do is creating a new url and changing this image source let's do that i'm gonna delete here for this image i'm gonna use a condition let's copy this url and i'm gonna say if there is a file url create object url this is how we are creating new url using local image and i'm gonna pass here my file if there is no file just use the previous one so if we don't choose any image it's gonna show us the previous image and as you can see it's already here it's not a user in much but anyway it's just a demonstration okay i hope you understood and we finished this page also and what else we can do as you can see we don't have any links here when i click here it's not going anywhere and this logo maybe we can add our links let's close them and open sidebar to link our items here we are not going to use anchor tag instead we are going to use real cloud or dome link so i will say import link from react radar here by the way guys if it looks really messy for you can basically use those icons like that i will say import from material ui and icons material and don't choose any icon here instead right time here like person outline icon and this one and others but in this case you are gonna import all those icons but if you use them like that you're gonna import them one by one it depends on you okay let's close this sidebar and use our link firstly i'm gonna use it here i will say link and i'm gonna cover my logo and i will say to home page let's see okay as you can see there's a style here and when i click it's going to go to home page we can delete this style i will say style text decoration and it's going to be known of course column here there is no underline anymore and let's add them for users users and products i'm gonna copy this line and for this ally let's cover and i'm gonna change my link here it's gonna be users let's do the same thing for product products i'm gonna click users page i'm gonna click here products page and home page perfect and we can do the same thing for our table here as you can see we cannot click here let's open up our table okay as you can see it's here i'm gonna cover this with link of course we should import from react router dom and i'm gonna use here users and let's say test i'm not writing this dynamic that because we don't have a real data for now but in the next tutorials we are gonna handle that right now i'm gonna click and it's going to single page and by the way we can add here add new user button maybe here a title let's come here as you can see we don't have any title i'm gonna say data table title and it's gonna include a title and add button let's say add new user and i'm gonna use a link and it's gonna say add new and it's gonna go to users.new okay they are here let's give some style and separate them i'm gonna move this button here and of course i should give some class name here i will say class it's gonna be link and here i will say table title and it's going to be with a hundred percent that because we are going to separate them and font size let's say 24 color will be gray and i'm going to give some margin between those titles and this table let's say margin bottom and it's going to be display flex align item center and justify content space between okay right now they are separated so let's give some style for this button i will say link i will say text decoration none in this case we don't need this style here color will be green maybe font size smaller i will say font weight smaller like that and let's give some border i will say one pixel solid and green again finally let's give some padding border radius maybe five pixels and cursor pointer okay it's much better and when i click this button it's gonna go to the new page so let's handle this dark mode when i click here or here our application background will be black i'm gonna close them and what i'm gonna do is creating here a style folder let's go to the source and it's gonna be style and insight let's say dark dot scss oops 2s and i'm going to open my app.js and import this style here which means it's going to apply for all those pages and components so i will say import style and dark dot scss so what i'm gonna do is adding here another class name which is dark by the way let's make this lowercase and when it's dark we are gonna change some styles here let's say dot app and if it's dark let's make this background color this dark color as you can see it's black right now if i delete this dark class name it's gonna be white again like that of course we are gonna make this dynamic when we click those items it's gonna change automatically but for now let's do this manually and change our styles and for font colors i'm gonna use this color this gray color like that they are more visible right now and if you remember we have chat grid class name chart css and as you can see our stroke is this color but i'm gonna change it let's come here and dot chart grid it's gonna be this color and as you can see it looks better and what else here as you can see our table is still white i will say table remember it's our main container for this table i'm gonna say background color these dark color like that but we cannot see our table cells let's go to table jsx and as you can see we have table sales here and their class names are table cell we can change it basically i will say table cell and color will be gray like that it's much better you can change them for yourself by the way they are in different color maybe one one one i don't know which one is better darker or previous one anyway it can stay and what about our nail bar i'm gonna change color it's gonna be this gray color and they are more visible right now and let's change this border color it's gonna be softer a little bit okay it's better and maybe this search bar border i will say search and border color will be gray okay perfect and as you can see our sidebar is still white let's come here and say sidebar background color will be again our dark color and border color will be again a little bit softer like that let's change those colors and this hover effect first one will be top and logo it was purple but this time it's gonna be this gray color okay let's change this hr board color is gonna be soft dark perfect and for ul and li i'm gonna say hover and background color will be this soft color it was purple but this time it's gray it looks better and what about those icons it's inside our ally remember i will say icon and color will be is color like that and we've finished our home page i think let's visit our users and as you can see they are not visible and buttons it's like a website from 2004 let's take care of this data table i will come here and say data table and let's see what's inside okay we have data grid here we can give class name type grid and if you remember we have here action column and we have our buttons view button and delete button we are going to change them let's come here and i will say data grid color will be gray like that and we can delete those borders let's say borderline okay it's better and what about those buttons i will say edit button and also delay it button and i'm going to make them gray and i'm gonna delete their borders but this color is still same okay it's view button not edit button okay perfect but the status colors look a little bit sharp we can change them also as you remember we have a data table source here and we are returning this class name cell with status we can use it maybe the same color here like that and right now it's much better and if you don't want them all gray of course you can change their colors but for me it's totally okay i will not waste time what else we can do we can go to the new page and as you can see all those inputs are white i will say for each input make their background color transparent so everything is ready but how we are going to change our dark mods so let's close them and open fpgas first thing you might think is creating here a use state let's say const dark mode and set dark mode let's create our view state at the beginning it's going to be false and you can write here any condition let's say if it's a dark mode right here app and dark if it's not just right app but in this case to set our dark mode we should pass this probe for our sidebar and narrowbar because we are going to change them here but our sidebar and number are not here we have to set this here and here and for users for new page and other page and in this case for example for the home page we should take this prop and pass as a prop for sidebar and navbar again and we should do this for every pages and as you can see it's not a good idea we are not going to use use state here it's not efficient but what we are going to do that's the light here and this use state and what i'm gonna do is using react context api to do that i'm gonna create here context folder and i'm gonna create my context file and reducer file if you don't know anything about context api basically it allows us to reach data from any component basically we are gonna have dark mode variable and toggle function for changing its color and we will be able to reach that variable and function from everywhere inside this app so inside sidebar we can call that function toggle dart mode or we can use it for the narrowbar we can toggle it by using this button but how we are gonna use it let's create our dark mode context and dark mode reducer and firstly we are gonna have an initial state so i will say const state and it's going to be our dark mode we are going to use this variable everywhere at the beginning it's going to be false and we are going to create our dark mode context and it's going to be export we are going to reach it everywhere so let's say const dark mode context and we are going to be using create context methods here create context and as you can see it's coming from react and i'm going to pass here my initial state like that and after that to reach this data everywhere we should have a context provider export const dark mode context provider or whatever you say oops context and we are gonna take here children that's because we are gonna wrap our application with this provider and these children will be basically our application you are gonna understand better right now and what we are gonna need here we are gonna need a reducer which includes our functions what functions we are gonna need as i said we can use toggle but as you can see we have two options here whenever i click this button it should be only light mode and whenever i click this button it's gonna be dark mode and for this button for example we can toggle light and dark mode if it's light it's gonna be dark if it's dark it's gonna be light basically we are gonna have three functions so let's say const dark mode reducer and we are gonna have our state remember it includes our dark mode here we are gonna change it inside this reducer and we are gonna have actions which we are gonna dispatch i know it's confusing for some of you if you don't know anything about context but i recommend you to check documentation of react and after that it's gonna be easier for you and i'm gonna use switch case method here and i will say action.type basically it represents our function name which is light dark or toggle let's write our cases first case will be light remember for this button i will say return dark mode is false and for the other one i will say if our action is dark let's turn our state to true basically it's gonna be dark mode and one more case and it's gonna be toggle and as i said if it's true it's gonna be false if it's false it's gonna be true basically i can say state dot dark mode it's gonna look inside our dark mode in our state if it's false it's gonna be true if it's true it's gonna be false and it's warning us that because we don't have default case let's say default and it's not going to do anything it's going to just return our state okay let's export this i will say export default it's gonna be dark mode reducer so we can use it here so we are gonna use use reducer hook and it's gonna return us our state which is dark mode and this patch function which we are gonna dispatch our functions here for example if i dispatch this type it's gonna give us light mode and others will be the same we can dispatch this or dispatch this and i will say use reducer and we are going to pass here our reducer which is dark mode reducer here and our initial state and after that let's return our context provider what i'm gonna do is write in here dark mode context dodge provider and i'm gonna pass here children which is gonna be our application and which values we are going to use i will say value and we will be able to use our dark mode which comes from our state and dark mode and also we are gonna use this patch method like that there is a typo here children okay so how we are gonna use this provider let's open up our index.js as you can see this is our application and we are going to wrap this application with our provider like that let's import this okay perfect in this case our application will be able to reach all data which we provide here dark mode and dispatch function but we can change our dark mode let's try i'm gonna open app.js again and we are gonna use our context i will say const and what we are gonna need dark mode or dispatch we are gonna need dark mode because we are gonna use it here in our class name so i will say dark mode [Music] and it's going to be use context hook and we are going to write here our context which is tag mode context okay let's use it here i'll say if it's dark mode use app and dark if it's not just use app and as you can see it's still white but if i change here for example at the beginning it's gonna be dark mode and as you can see it's dark perfect let's turn back and right now we are gonna use this patch for our sidebar and now bar and we will be able to change this dark mode let's open up sidebar and i will do the same thing i'm gonna call my context like that i'm gonna import this and use context hook okay but this time as i said we are gonna use this patch and i will come here for the first item i'm gonna use onclick method and we are gonna use this patch here and type will be light let's do the same thing for other color which is dark color i will say on click dispatch and this time it's gonna be dark basically we are gonna dispatch our reducer functions here let's try okay it's white i'm gonna click here and it's gonna be dark if i click here it's gonna be white perfect and what about this one let's copy this again and open up number i'm gonna import them context and our hook okay again we are going to use this patch where is our icon okay it's here and i'm gonna say on click and this patch type will be toggle let's see i'm gonna click as you can see it's dark when i click one more it's gonna be light and it's really important if you are a react developer you should definitely know how to use reducer why it's needed first just learn context api and then watch my redux toolkit tutorial and everything will be easier for you okay what else we can do okay we don't need anything here maybe we can delete some rows here it's really easy we are just gonna use use statehook and we are gonna filter our items let's do that actually and it's gonna be easier for the next tutorials i'm gonna open my table here and as you remember we are using user rows here from our fake data but what i'm going to do is creating here a use state let's say data set data and it's going to be use state and at the beginning it's going to be user row and instead of u0 we can use our data here is gonna change that because we are still using user rows as you can see but what i'm gonna do is when i click this button we are gonna change our data using set method and we are gonna filter our items let's do that i will come here there is our delete button here i will say on click method and i'm going to create a function let's say handle delete and i'm gonna pass my item id if you remember we can use here params and if i say params.row is gonna give us our item and if i say id it's gonna give me its id and let's create this function i will say const handle delete and it's id and only thing i should do is setting my data again and take the actual data and filter that and check each items and if item id doesn't equal our id here it's gonna give us a new data we are gonna see the rest of those items let's do that i will click and as you can see it's not here anymore i'm gonna keep deleting perfect it works and what else it's okay i think it works properly and that's all okay we finished our project if i forgot something just let me know in the comments i'm gonna update the github repository if i don't don't worry we are gonna use this admin dashboard in our future projects so let's deploy our application to do that we are gonna need index.html and our static files so how we are gonna do this let's open our terminal and we should build our application to do that i will write here npm run and build and i'm gonna enter it's gonna take a while during this process let's open our hostinger panel after login process you are gonna see this h panel and i'm gonna click here by hostings as you can see i have two hostings i'm gonna deploy it here i'm gonna click and as you can see there are many options here what i'm gonna do is clicking file manager and here you are gonna see your main folder we are gonna upload files inside this folder let's click as you can see it's empty for now okay it's ready as you can see there is a build folder here and inside we have an index.html and our css and javascript files what i'm gonna do is selecting those files and move into my public html i'm gonna open my main folder and i'm gonna open build folder select them and move into my age panel like that it's processing and it's gonna take a while as you can see it was just five seconds it's really fast and let's check out our domain namadev.net and as you can see it's here let's check our functionalities users page okay perfect it works and as you realize our website is totally secure right now because we have an ssl certificate okay awesome it's that easy and what else you can do in your h panel you can choose sub domains let's say admin dot lambda.net and i'm going to create a subdomain let's say you have an another application here and you want to create an admin panel let's check again this file manager our main folder and inside as you can see we have our subdomain main folder here basically you can delete this default file and you can drag and drop your files here and after that you will be able to see your project in your sub domain it's that easy okay we finished our project i hope you liked it if you learned something new today please like the video and subscribe to the channel and if you want to support lamadev you can use the link in the description below and don't forget to follow lama dev social media accounts and that's all i hope i will see you in the next tutorial goodbye

Channel: Lama Dev

Views: 431,011

Keywords: react admin, react admin panel, react admin dashboard, admin dashboard design, admin panel design, react website, react website tutorial, react design tutorial, react admin theme, admin dashboard, react, react.js, react app, react project, react hooks, react ui design, react for beginners, react tutorial, react full course, react router dom 6, mui 5, material ui 5, react chart, react from scratch, lama dev, learn react.js, html css admin panel, admin dashboard html, sass

Id: yKV1IGahXqA

Length: 184min 17sec (11057 seconds)

Published: Wed Mar 09 2022