React Admin Dashboard Tutorial | React Admin Panel Design Course for Beginners

hello my friends today we are gonna create this professional admin panel design using react.js this is our dashboard there are small widgets here showing some sales information here is the analytic chart that shows us our active users per month and two more widgets new members and less transactions when i click users the user list shows up it's a really useful data grid here you can select them cancel and select all and sort them by clicking any title here i can delete them if i click this edit button it opens the user page we can see here user information and we can update any of them and here is the create button i can create new user here and the same things for the products on the single product page you can reach the sales analytics information and edit form and don't forget it's just a design we are not connected to any db and for the feature projects we are gonna use this admin panel we are gonna create a shopping application netflix application and for all we are gonna be using this design and create our own crude operations so i hope you will enjoy if you want to see more projects like this you can subscribe to the channel and like the video so if you are ready let's get started so this is our main folder inside this folder i'm gonna create my react application i will say mpx create react app and i'm gonna install inside this folder i will say dot and enter so during installation let's come here inside the browser so we are gonna use two libraries one of them will be material icons so you can write any icons here and choose any of them and add your website so second one will be recharge it's a really useful charting library we are gonna use this firstly let's install this material ui so i'm gonna use material icons i will copy this and here it's ready by the way i will say yarn add or if you are using npm npm install and i'm gonna paste it and additionally i should use material core also i will copy and paste and we are not going to use only material icons later let's write your table data table so we are going to be using this data table it's really useful so you can short them select them it's really easy to use so okay we installed them and right now i'm going to install this recharge so i will copy this and paste it so it's gonna install these three libraries i'm gonna enter and wait okay right now i can clean my application this icon any logo we don't need them you don't have to delete but i wanna see here clean a little bit and inside source i will delete this css files logo and test files okay right now i'm going to clean inside my html file as you can see we have logo here and some json file here we don't need them let's clear and here okay so i'm gonna change this title let's say admin app and i'm going to delete this icon okay right now let's find our font family i'm going to write here onstartgoogle.com and inside search input i'm gonna write source sense okay we are gonna use this you can also download this family and put inside your application but it's not needed we can use this google phone cdn so i'm gonna choose my family here we don't need this italic things so bolt one 700 maybe 9 okay so i can copy this and paste inside my index file i will copy this and here let's paste here okay so right now i can go to index file index.js here so as you can see we have index.css let's delete and this report that okay so index app.js finally after cleaning here will be done and inside this okay let's write here hello and see so i'm gonna start my application i will say yarn start or npm start okay as you can see it's still in default font family so i'm gonna change this let's come here and css rules i will copy this and i'm gonna create a style you can create a style file that i tend to use inside this index file so i'm gonna create style here you don't need to create any css file because it's just two lines of codes so i'm gonna choose my document and inside my family i will save as you can see it has changed so i can delete these spaces to do that i will say margin 0 ok perfect so i can close this index file and this js okay so what i'm gonna do firstly i'm gonna create a top bar here so let's create component folder here i will say components and inside my top bar folder and inside this folder i'm going to create my js file and css file topar. the jsx by the way you can use js here but i highly recommend to use jsx that because we will be able to use our html elements inside this jsx okay so let's create our component i will say rfc it's a shortcut for react applications so how you can use this let's come here extensions and here this is my extension you can download this and activate and after that you can use all of these shortcuts okay let's close and here i will say top bar so how i'm gonna use this top bar component let's come here so i can delete hello and i will say top bar i'm gonna import this component as you can see this is our path so let's see as you can see okay perfect it's here so let's close here so let's delete this class name okay so i can close this and take care of my top bar here so what i'm gonna do firstly i'm gonna split this top bar and left side will contain my logo here my website name and here we are gonna add some icons and profile picture so let's do that i'm gonna give class name here let's say top bar and inside this div i'm gonna create a wrapper let's say topper ropper and inside let's split this first one will be top left and second one will be top right and inside let's write something left right if i do that as you can see they are not in the same row so there are couple methods but my recommendation is using flexbox i will come here and create css file let's say top.css by the way i know some of you say while you are using css you can use sas or just material ui or style components but for the beginners believe me it's the best option in the future after our beginner tutorials we are gonna use all of them don't worry so i will import my css file import inside same folder and top bar css okay so i can use these class names i will say top bar this is our main deal as you remember i will say with a hundred percent and let's say height 50 pixels and background color will be white so inside dropper top bar wrapper height will be a hundred percent which is 50 pixels here because it's child of this topper so it's gonna be 50 pixels so i will give some padding from top and bottom 0 pixel and left and right 20 pixels so i will say display flex okay we couldn't apply it that because my mistake here wrapper okay right now as you can see they are in the same row so how can i split them i will say align item center it's going to center them vertically and i will say justify content space between as you can see this is in the left side and this is right if i say here for example space around it gives some spaces here if you say space evenly as you can see this this and these spaces are the same so let's turn back space between perfect so let's create our logo you can use any image but i prefer using text here i didn't prepare any logo so i will say spam and class name will be logo and i will say lama admin let's come here firstly i will say font fade bold and font size 30 pixels and i'm gonna say color dark blue and i'm gonna give cursor pointer perfect it's really minimal we don't need any image so let's create something inside this right side firstly i'm gonna create three icons here but before i'm gonna wrap them i will say top bar icons or icon container and here i can create my icons let's come here inside material and icons okay firstly i'm gonna create notification this one is good so how i'm gonna import this let's click as you can see you can import this like that but there is one more way and it's easier i think you can delete this icon text and just take this notifications so let's copy and paste and i'll show you so instead of like this i will delete and here and if i cover this with curly brackets i can use it easily because we are going to use multiple icons here instead of writing them like that for each icons first way is much better okay let's write here this component i will say notifications none so let's see here as you can see it's here so what i'm gonna do is i think here is some small batch it's gonna indicate our notification number how many notifications do we have so let's change this actually i will say icon container and here i'm gonna create a small span i will say span and class name will be top icon patch so let's write here just two so i'm gonna open my css actually i will split this frame click this button it's gonna split okay so i will copy this container and i'm gonna make this position relative so why i'm using relative that because i'm gonna make this oops it's gonna be patch that because i'm gonna make this badge position absolute let's see okay so i can give position right now if i say top minus 5 and write 5 and let's see background color here oops okay i didn't save here okay as you can see we just gave some position you can play around here for example zero as you can see it's a little bit down right now minus five is perfect i think so let's give some style i will say color white and i'm gonna give border radius it's gonna be circle something like that but as you can see it's not circle that because we didn't give any width and height i would say 15 pixels okay right now we have other problem that because our number is not centered i can use display flex and center this align item center just y content center okay perfect but it's really big let's give font size i'll say 10 pixels we can change this position but before i'm gonna create other icon here let's copy this two times and second one will be language this one i will copy this name and here and third one will be settings this one okay let's use them it's gonna be language and settings okay they are vertical right now because we didn't use display flex for this right side i will copy this and before this icon and container i will say top right display flags and i will center them vertically okay nice so i can delete this patch here because inside settings we don't need i will come here and for these containers i will say cursor pointer and i can give margin right okay nice now you can change color let's say five five five okay better i can move this patch to a little bit right so let's say zero okay it's better right right now i can create here my profile picture after these settings i will create image and it's gonna be top avatar so inside this you can create an image folder but i prefer using from link i don't want to waste time because i don't have any image okay it's here oops wrong point okay so i can change this avatar i will save it 30 sorry 40 height 40 and i will say all the radius 50 percent okay perfect i can give cursor pointer also okay nice you can reduce these numbers as you wish so we completed our top bar but one more thing let's come here inside appdress so let's write something here test and i will duplicate this okay right now i can scroll but when i scroll as you can see it's going to up so how can i fix this i will come here to top bar i will say position sticky so i'm gonna indicate my position and it's gonna be top zero so it's gonna stay always in the top zero let's see i'm scrolling perfect it's always there so i'm going to do one more thing i will say set index 999. so this means it's going to be over every elements inside this application so if we create here some other components it's never gonna be over this topper okay perfect so we finished our topper i will close them and here let's create another component i will create new folder and it's going to be sidebar sidebar dot jsx and sidebar.css okay let's create function rfc and my css file and my class name so let's come here and delete these tests and right now i can call my sidebar component but i will do one more thing that because we are gonna split this under top bar first one will be our sidebar here and second one will be our other pages so this top bar and sidebar will be fixed they will never be changed we are gonna only change here so what i will say let's create here add view and it's gonna be container and this is what i was telling you i can't use this like that that because it's not just sex file it was good example for the understand i think so you should write here manually it's going to be class name so if you want to use these shortcuts you should change this into jsx file i'm not doing because if you do that you have to restart your application so it's not that important so what i will say i'm gonna create my sidebar here sidebar as you can see it's imported here and here let's write something other pages so as we did before how i'm going to split this let's create css file here i will say app.css and here import this css file okay right now i can use this container i will say display flex okay so how i'm going to give sizes for this sidebar and other pages so for now let's create another do it's going to be temporary we are not going to use this oops and i will say class name others for now so what i want is i want to give a width for this sidebar if it's one unit for example like here and other pages will be four units so it's going to be four times bigger than this sidebar if i come here inside sidebar and as you remember this is our main container i will copy this and i will say flex one it's gonna be one unit and if i come here and say others it was other or others okay others i will say flex for and i'm gonna give background color and we can see better as you can see sidebar is one unit and other page is four if i make this for example 10 it's going to be 10 times bigger than this sidebar so i'm going to change this it's going to be four okay perfect so i think you understood here i can delete this we don't need it and these pages also we are gonna create our own pages here later okay let's take care of this sidebar so again i'm gonna create wrapper here and it's going to be some small title like dashboard quick menu or something like that and inside them i will create some lists so let's do that i can close here and inside sidebar i will say sidebar wrapper so i'm gonna create three menu here sidebar menu and inside this menu firstly i'm gonna create my title it's going to be sidebar title let's say dashboard and then i'm going to create a list ul sidebar list and inside list item sidebar list item so what i'm going to add inside this list item firstly i'm going to add an icon let's come here line style so i will use this i will copy and here let's create your material icons from material icons i can use this and additionally i'm gonna write a text here it's gonna be home let's see okay as you can see this is our title icon and our text let's create other items i will copy this second one will be analytics and here let's say sales of course i'm going to change these icons let's come here timeline this one and third one will be trending up this one okay let's change them timeline and trending up let's see okay nice so let's give some background and some height for this menu i will come here actually i will split this again let's close them if i make this bigger let's check i don't know which one is better it's really big i think let me know in the comments if you wanna see bigger i can change in the next tutorial okay anyway so what i will say here i want to make this full screen but if i say 100 vh here it's gonna overflow that's because our top bar is 50 pixels here so i can use call grade i will say height calculate and i will say 100 vh minus 50 pixels we can see anything let's give background color dark blue we are going to change this okay it was mistake deleting this app.js other container let's take this back and app css i will delete this background color okay as you can see it's right now a hundred percent if i delete this and write 100 vh as you can see it's overflowing okay i will make this sticky again because it's gonna stay here in any case and i'm gonna indicate my position top 50. that because it's under this top bar it's gonna start from here so even if we scroll the page it's gonna be stay here perfect so let's change this color i wanna make this really light something like that okay perfect so i can give some padding for this dropper here i will say padding 20 pixels and i'm going to change text color it's going to be 5 5 5 okay nice so i will say sidebar menu it's going to be margin bottom time pixels that because if i duplicate this as you can see there is a space here okay so what can i do more i can change this sidebar title i will save font size 13 pixels and i'm gonna change the color it's gonna be really light gray maybe a little bit darker okay nice so let's change this list i don't want any dots there i will say sidebar list and this style will be none and i'm going to change padding okay perfect i can give some padding inside this list list item i will copy this and i will say padding 5 pixels and cursor pointer something like that so how i'm gonna center these items i will make this display flex perfect so i can give some border radius that because when we hover them or click them we are going to change the color so i will say border radius it's going to be 10 pixels so when i make this active or when i hover this over so i'm gonna change background color so let's copy this background color and it's gonna be darker i will change it like this and i'm gonna make this home active let's see okay it's different home it should be this one okay something like that maybe a little bit lighter okay nice so what else i can do i can give some margin here and make this icon smaller to do that i'm gonna add here class name it's gonna be sidebar icon i will copy this and for others these are not important i can delete them and i will say sidebar icon and i will say margin right 5 pixels and font size will be 20 pixels but as you can see they are still in same size if you want to change material icon size you can write here important okay perfect so we created our first menu here let's create other ones i will choose this and duplicate okay so let's change this titles it's gonna be quick menu by the way you can create another component and you can call it sidebar menu you don't have to write them again and again but for now it's totally okay if i split every components here into small pieces this tutorial will be five hours or something so we don't need them so i will say notifications and finally let's say stuff okay so i can change them quickly i will choose my icons here and create other menus [Music] okay i completed it looks really nice so in this case we finished our menu also let's create something for here so it's gonna be our page so i can create here other folder let's close this so it's going to be pages so which pages we are going to have first one will be our home page it's going to include our widgets here sales some analytics and here we are gonna create a chart and after that maybe new users we can show here quick users something like that and when we click this we are gonna see our user lists and when we click these products we are gonna see our product lists and we are gonna have new user page new product page something like that but for now i'm gonna create a home page here it's enough for now i will say home and let's create our css and jsx file oops jsx and one more on those css okay let's create here our function i will delete this and import my home css and let's write here class name and home oh okay so let's go to the app.js right now we don't need these others instead i'm gonna call my home component sorry home page okay by the way let's delete this other css also okay so what i will do is making this homepage flex4 so i will come here and my home flex will be four okay perfect there will be some info our sales information revenue information and cost information so let's create another component here i will say featured info info.jsx info and css so i can close this sidebar app.js and i will open this and create my function and my css file featured info.css and class name will be featured there will be three items let's create another div here and it's gonna be featured item so what we are going to add inside this item firstly we will have title sales for example and then our price our rate let's just write and you can understand right now i'm gonna create s pen here and class name will be future title i will say revenue and after that i'm gonna create another container it's gonna be money container that because our price and rate will be in the same row so i will say featured money container let's say and inside another span and featured money so let's write some price here and one more money rate and i will say minus 11 and after that i'm gonna add here an icon if it's minus it's gonna be down arrow if it's positive it's going to be up arrow so let's write here down this one i will copy this name and import this name and from material ui and icons so i can use this i'm going to use this inside this pen i'll say arrow and finally another span and it's going to be featured subtitle or something like that let's say sub and i will say compared to last month okay so i can use this inside homepage i will come here and and call my component here featured info okay let's see okay perfect it's gonna be our first item so let's create others i will come here and duplicate this it's gonna be sales let's change here and here it's still minus and here let's say cost i will change here doesn't matter actually and this time it's not going to be downward it's going to be upward if you're right here you can still import as you can see from material ui it's here let's see and it's going to be positive of course and i will say let's say two okay something like that so let's split this css file here and close this menu okay i'll shrink this a little bit okay perfect so i can write everything inside my css file right now firstly let's copy this container and it's gonna be it a hundred percent and i will make this flexbox and i'm gonna split every element inside it's gonna be a space between so for each item i will say flex 1 so they will be in the same size i will give some margin from top and bottom and left and right and i will give padding perfect i will give border radius that because we are gonna use box shadow and finally i will say cursor pointer okay we can't see anything that because we don't have any bulk shadow to do that you don't have to memorize any box shadow property so you can write your box shadow generator and let's choose this one and here you can arrange whatever you want right to left down and up you can spread this and some blur you can arrange them by yourself and copy this properties and paste but i don't want to arrange from scratch i will just copy mine and paste here let's see right now as you can see perfect by the way i can give some margin for this container let's come here for app css for this container i will give margin top 10 pixels okay so much better so let's take care of inside items i will close this and here i will copy this title and i'm gonna say font size 20 pixels and for this container it includes our money here and this arrow i can center them but firstly i'm gonna give some margin 10 pixels zero pixel and here display flags and align item center okay they are centered but this container is not centered so we will take care of this but before let's change this font size of this money i will say font size 30 and font weight will be a little bit bold like this okay let's come here this rate container i will make this centered align item center and i will give margin left okay we have margin right now and we centered them perfect so i can give some class name for these icons let's do that i will say class name it's going to be featured icon and additionally i'm going to add here negative let's copy this and here and here this time it's going to be positive or you can just leave this blank it will be positive so let's copy this and here i will say font size 14 is going to be a little bit smaller and i will give margin left and color will be green it's going to be positive fun if i write here negative and color will be red okay perfect so i can change this subtitle let's copy this here and i will say font size 15 and color will be gray perfect it looks really nice so we finished our featured info right now we can use recharge here let's open this here recharge.org and here if you open quite here you can find examples you can play around these charts you can see everything here but i'm not going to deep dive into these red charts we are gonna just use basic one this simple line chart it's really interesting website by the way it's not responsive at all okay anyway before starting let's create another component here i will close this i will close all of them actually and here i will say chart and new file chart.jsx and css file okay i can create my function rfc and my css file here chart dot css and class name will be chart let's write here something and call inside our homepage after this featured info i will say chart here i will import oops okay we have mistake with this css let's come here okay i forgot our folder here okay perfect it's here right now i can give some padding and margin and i'm gonna use again same box shadow here let's do that i will come here and for chart margin 20 padding 20 and let's come here featured info css i will copy this and paste here okay perfect so i can create some title here i will close this and here i will say h3 and class name will be chart title and let's say sales analytics and i'm gonna give margin here for bottom i will say margin bottom 20 pixels okay right now i can create my simple line chart let's copy this and paste here and this data for now let's paste here and after this h3 i can create my chart let's see here firstly as you can see we are creating responsive container that because even if we shrink or expand our page it's gonna be responsive so let's give our width here it's gonna be a hundred percent and one more thing here i can indicate any height for example 300 pixels 400 pixels but you can do one more thing here writing here aspect and it's going to be for one so that means basically if the width four units the height will be one unit so if it's 400 pixels it's gonna be a hundred pixels okay right now i can create my line chart here i will not give any width and height because i indicated here so let's create so inside this line chart i will indicate my data and it's going to be this data so if i save and look at here we can't see anything because we didn't indicate our lines x axis y axis anything so let's create them firstly i'm going to create my x-axis and here its name will be this name inside our data so i will say data key it's going to be name so you can give anything inside this data for example in our project it's gonna be our months october november december anything it's gonna be our months for now it's just an example don't worry about them we will delete this okay i will give here stock and it's going to be color of these names so let's say 5 5 5 0 bt it's going to be our color 4 here okay if you want to you can create y-axis also if you write your y-axis as you can see it's here it's going to show our sales for example a thousand two thousand three thousand but if we do that it's gonna look a little bit uglier i don't wanna do that so i'm gonna delete this y-axis you can write here whatever you want so let's create our line most important part so type will be it's going to be monotone and we should indicate our data k here let's say sales or we can use users actually let's write active user and i will change here it's going to be user analytics or you can write whatever you want i will copy this stroke and paste here i don't want to change the color as you can see we can't see anything that because our data k is active user here but we don't have any active user inside our data let's change them let's change this uv for example i will choose all of them and i will say active user let's see as you can see it's here perfect so i can delete this pb and amt i will delete them actually let's delete this and we can multiply this and name will be january so i will duplicate this 2 3 4 5 6 7 8 9 10 l ok let's change them september october november and one more and december so i can change these numbers let's see as you can see it looks really nice our mounts and our line but if you realized we can't see our details here when i hover so how i'm gonna see this let's come here i will say tool tip right now when i hover as you can see i can see my active users so what else i can do it looks really naked i can add here some grit so i will say cartesian grid okay but it looks a little bit strange so i can change this stroke and dash arrays i will say stroke and this color will be really really light gray e0d fdf something like that it's really light but i want to separate these tertiaries they are really close right now i will say stroke dash array and it's going to be 5 and 5. okay perfect right now it looks really nice it's that easy you don't have to invent anything from scratch just use this library it's really tiny it's really useful and as i said you can check this all charts here for example but i can't show you that because of this page it's really strange but if you click to this sandbox button you can see a full screen here so you can play around them you can learn more but for now it's totally enough and it looks nice and by the way we are not gonna use this chart only inside our homepage it's gonna be reusable components so we can use this inside maybe our users and products so what i will do i can take some properties here as props for example this title for example this data so what i will do i will come here and choose my props by the way you can delete them they are not going to use y-axis and what's legend by the way let's come here if i write here legend as you can see it shows us which property we are using here it's our active user but we are using tooltip here so we don't need this i can delete from here okay so which properties i'm gonna use here i will say title it's gonna be this title second one is our data we are not going to use this data here and third one will be data key our name here active user now fourth one let's say grid so i will say here if we have grid here we can use this cartesian grid let's say grid okay so what i will do i will go to the home page and here i'm gonna pass my props but before let's copy this data and here instead of writing inside our home page i'm going to create here a demi data let's write here dummy data and i will paste this here so i can export export const and let's say user data so i can import this here let's say import user data from our dummy data dummy data okay firstly i'm gonna pass this pro it's gonna be our data second one will be our title what was our title user analytics i think okay third one will be great because i wanna see those grids and fourth one what was that let's check here data key so it's gonna be active users by the way i didn't change inside our chart so i will say it's gonna be our title and data will be data okay and grid is here promoting our data key i will delete this and paste okay perfect let's check as you can see it's totally the same so let's change this title for example as you can see perfect right now it's reusable we are gonna use this inside our products also so we created our featured info and our chart here so let's create our new users and there some informations here so what i will do let's close them let's create your due and class name will be home widget let's say widgets so i will come here in the css i will copy this and it's going to be flexbox display flex and i will give margin 20 pixels okay so let's create our first component here it's gonna be small widget and second one will be large one so i will create new folder and let's say widget small new file widget small and jsx small and css so i will copy this and paste this time it's going to be large g and inside lg css and lg jsx okay let's close them and open this jsx and small one okay let's create our function and my css file widgets large sorry small and css and class name will be widget small i will say small i will do the same thing for large one i will say lg and here large so i can write them inside our home page inside this widget steve i will say widget small and feature patch okay let's see okay we forgot again this folder this slash here and here okay they are here right now i can give them flex let's come here small css widget small and it's gonna be flex one and for large one widget large it's gonna be flex too let's see right now as you can see it's one unit it's two units right now i can give our box shadow again to do that let's come here and copy this for large one and also smaller i will give paddings 20 for this also okay perfect so i can give margin here for small one let's come here and margin right i will say 20 pixels okay perfect right now i can close them this large one and home okay we can take care of this small one right now so there will be a user list new users firstly i'm gonna give my title here let's say span um widget small i can copy this actually and title let's say new joy member members and after that i can create my list i will say ul and visit small list and inside this my allies with a small list item so what it's gonna include it's gonna include our user profile picture and name and job title and after that i'm gonna add a button let's do that i'll say image it's gonna be widget small image and for source i will copy my link and paste here so after this image i'm going to create another container it's going to include our username and job title so i will say widget small and let's say user and firstly span which is small username let's say anna color and one more it's gonna be a job title software engineer so i will say user title okay so after this container we are gonna have button it's gonna be we just small button and inside this button i'm gonna add an icon let's come here and i will say display okay it's not display maybe visible okay this visibility i will copy this here import from our material ui and icons okay i can use this icon component i will say visibility and additionally i'm gonna write here my text it's gonna be display okay let's see oops it's really huge but as you can see our image username title m button so i will duplicate this item there will be five users two three four five okay let's close this and open in another frame here okay firstly i'm gonna arrange this title widget small title i will say font size 32 pixels and font weight will be bold and before everything let's arrange this image because it's really huge we can't see anything because of this image i will save it 40 height 40 and border radius will be 50 and i will say object width cover okay i will copy this list i don't wanna any margin or padding and this style will be none it's gonna delete those dots like that perfect but it's not circle oh okay nice so i can make this container display flex i will come here for this item i will say display flex align item center and justify content will be space between something like that so i can give some margin here i will say margin from top and bottom 20 pixels i don't want any for right and left perfect and for this user container i want to put this username and this title in this same column to do that let's copy this where is user here i will make this display flex but this time flex direction will be column like that awesome let's choose this username font weight bolt 600 and for title font weight will be really thin like this and for this button i will copy and paste here it's going to be display flex and align item center and i don't want any border none and border radius let's say 5 pixels or 10 let's see first okay 10 is ok i will give some padding from top and bottom and from right and left okay i can change background color it's going to be e e e f cell and color will be text color will be gray something like 555 and cursor will be pointer okay yes i can split this icon and display text to do that i will give here let's choose all these visibilities and here i will say class name and it's going to be widget small icon oops small okay i can copy and here i will say font size maybe 16 and i will separate them margin right five pixels okay something is wrong widget small icon that's right here important and i can see this margin also let's refresh okay oh i didn't save here okay okay perfect maybe i can change this font size it's really big let's make 22 okay it's better i think so we finished this one let's take care of this large one i'm gonna open widget large here and my css file okay so firstly i'm gonna do the same thing for title let's say it was h3 i think and i'm gonna say widget large and title i will copy this and i will say latest transactions and after that i'm going to create a table that before let's write here our title it's going to be font size 2 again and font paid 600 i will save here and let's see okay right now i'm going to create a table here it's going to include our customer and transaction date transaction amount and it's going to be status here so let's do that i'm going to create table i can shrink this for now i will say table and class name will be widget large table i'm going to create tr and class name widget large tr and inside this i can create my titles first one will be th and let's say widget large th and i will say customer and three more this one will be date and amount and status okay they are our titles right now i can create our items inside so what i will say i will create another tr here widget large tr and inside i'm gonna create each items it's gonna be td class name will be widget large let's say user is going to include our image and username by the way if you don't know anything about table you can go to the developer.mozilla.org or w3school or whatever and you can just explore about five minutes or something it's not that complex okay so inside my user let's say image it's gonna be widget large image and i'm gonna copy my profile picture here my user avatar inside source okay so one more thing it's gonna be username so let's say span name and it's gonna be let's say susan carroll and by the way i know writing these class names again and again can be annoying but for the beginning it's the best option in the future as i said before we are gonna use style components material ui and it's gonna be more advanced okay what else we are gonna have we did customer here we have date amount and stats so i'm gonna create another tt here it's gonna be widget large date let's say 2nd june 20 21 i will duplicate this it's going to be amount let's say 122 dollars i will change this it's gonna be amount and one more thing it's gonna be status and i will write here a button but if i create like this it's not going to be efficient that because we are going to have three different buttons it's going to be approved declined or pending so what i will do let's come here and create a small component here it's going to be const button it's going to be our new component and here i'm going to take prop it's going to be type it can be approach declined or pending and i will say return let's create here a button and name will be this type you're gonna understand better right now don't worry so class name i will say widget large button and additionally i'm gonna add my type so i will cover this and i'll say type so what we did here we are gonna call our button here button and i'm gonna indicate my type which type it will be it will be approved so it's gonna look at here type will be approved and its class name will be widget large button and additionally approved and we are gonna write here approved also so if i duplicate this for example let's take this and i will write two three four and first one is approved let's make this declined and make this pending it can be approved also so if we save and see as you can see the all buttons are same so let's make this image smaller and we can see better i will copy this image it's going to be width 40 height 40 border radius and object width cover okay as you can see they all are same let's come here and copy this button i will say padding 5 pixels and 7 pixels and let's delete this border and i will give border radius 10 pixels okay there is something wrong that because we didn't give here space they are joining each other so i will say like that okay perfect so what i will do i will take this button again and i'm gonna say if it's approved background color will be light green so i will paste my custom color okay so two more if it's declined or if it's pending i will paste them also so let's see right now as you can see uproot is green declined red and pending is blue perfect so i can change text colors also i will say color darker green let's copy this and change them also it's gonna be darker red and it's gonna be darker blue so as you can see it's much much better okay so let's take care of this table i will come here and for table i will go to the image and here i will make this a hundred percent with a hundred percent so how i'm gonna increase this space border spacing and it's gonna be 20 pixels as you can see it's much better but they are centered as you can see i wanna align them to left so i will copy this th and here i'm gonna say text align it's gonna be left perfect so let's center this user i will copy this and here i'm gonna center this image and username align item center perfect i can increase this font weight maybe here from trade 600 let's come here inside image maybe i can say my gene write 10 okay it's better so i will decrease this text rates from traits what was the name date and amount i will say comma and amount font rate will be 300 okay perfect so it looks really nice our new members latest transactions and our chart and our small widgets here so we finished our homepage it looks really nice of course you can add additional things here and other chart maybe under these users or to-do list or whatever you want but it's totally enough for now i'm gonna create another page for users right now so let's create here i will close this and um and here inside pages i'm going to create user list and my jsx file and css file user list and user list css i will create my function and here import my css file and my class name will be user list so what we did here remember this was for x1 and this was flex 4. i will do the same thing i will come here user list likes will be 4. so how i'm going to use this user page to do that i'm going to install one more library here i will say yarn add react router tool so let's check this out i'm gonna search for it and here so it basically allows us to change our pages according to our url so how we are gonna do this firstly we are gonna create our router and here as you can see we can switch between our pages for example then the root which is our url here is about it's gonna call our about component or page when it's user it's gonna call this user's component it's really easy and additionally we have links here when we click something inside for example when i click this i want to go to users page to do that we are gonna use this link it's similar to anchor tag inside html but a little bit different we are gonna use two here we are gonna indicate our url so i will copy this and i'm gonna open my app.js here let's paste oops import okay so we are not gonna use link here i can delete this firstly i'm gonna wrap my application with this router it's not gonna be deep anymore it's gonna be router our top bar will be the same our sidebar will be the same we are not changing them so i can use this switch here i will open and close i can move this here and then i'm gonna use this route i will move this also okay so what i'm gonna say here as you can see we can indicate our path i will say path if it's main url which is just slash it's going to be home page i will copy this and paste again i will say if it's users we are gonna go to user list i will import this here okay so let's try it's going to be some error here it's our home page again this css i have some problem with this css file okay this is our homepage when i write here users as you can see we are still in the homepage that because our application looks into this path and it sees this slash and it says okay this is home page but actually it's not it's our users page so what i'll do here i'm gonna write exact if i do that as you can see it's empty it's our user list perfect so i can close this right now what i'm gonna do i'm gonna add material data grid here so let's come here and i'm gonna write table here as you can see some different tables you can use any of them but in this tutorial we are gonna use this data table so let's come here open the code as you can see we need this library i'm gonna install i'll say yarn add data grid and after that let's check what we have here we are defining our columns id first name last name h whatever and after that we are gonna have our rows each row includes id last name first name everything inside these columns and finally we are gonna call this data grid so let's do that i will copy this for now we are gonna change them and here so let's import this data grid and finally i'm going to call this data grid and here let's delete this we don't need it so everything looks okay let's check here okay perfect as you can see by last name age we can select them perfect so let's change these items i will come here and let's delete them and here i will say username that's right here john small it's john really i thought it's john okay i watched this eighth season but i didn't notice okay let's delete them and here i'm gonna add avatar and i'm gonna paste here some link and after that i'm gonna add email john gmail.com and status will be active and let's say transaction how much did you pay for us let's say 120 okay so i can copy this and paste couple times let's change ids to three i'm not gonna change username or other things it can be just jon snow let's say 9 okay 10. if i do that we can't see anything that because our rows and columns are not same let's come here for id it's going to be id and we change here it's going to be user name and header name will be let's say user this time we can see this username and it's gonna be email and header name let's say email and status we can delete this it's not going to be number and finally let's delete this and last thing will be transaction and i can write here transaction maybe a volume let's see okay oh i wrote home oh okay let's change this it looks strange okay by the way you can arrange this width here for example for transaction let's change this 160 for status it can be 120 let's check okay we can see this id maybe we can increase this okay it's here for email and username let's make them 200 okay perfect right now i'm gonna show you something different of course you can use them directly but also you can render different outputs for example you might need to add here user profile picture or here green dot for passive you can add red one something like that what i mean is you can create your own column rule here so how i'm gonna do this for example for username i'm gonna change this i will say user and this time i'm gonna add here render cell so it's gonna take parameters and it's gonna return something different what i want to return it's gonna be do for example and inside this div i'm gonna add my image and its source will be what was our profile picture let's check here as you can see it's avatar we can use this so how i'm going to use this i will say params and rows and avatar okay we have warning here that because we forgot adding here alt can be empty and additionally next to this image i'm gonna write my username and it's params and row and it's our username let's check by the way it's going to be row not rows i will save and let's check but it looks strange that because we didn't give any style and it doesn't fit inside this cell so what i will do here i can give my style you can create inside this css also let's do that actually i will say class name i will say user list user okay it's strange but it doesn't matter and it's gonna be display flex align item center and for this image let's give class name user list image i will copy this and here bit 32 i32 for the radius oops 50 percent and object with cover and i'm gonna give margin right that because i wanna give space between this image and username okay let's see as you can see it looks perfect so what else i can add here i can add actions and i can add my edit and delete buttons let's do that i will come here and after transactions i'm gonna add one more field it's gonna be fields and i'm gonna say action and header name let's say action and bit it's gonna be 150 and i can render myself i will say render cell it's gonna be params i'm gonna return something different what i'm gonna return it's going to be edit button and delete button so let's create here button and user list edits and one more but this time i'm not gonna create button i'm gonna create material icon let's go to the icons i'll say delete and this one is good i will copy and paste here import delete outline from material ui icons so i can add this here after this button if i add this like that slate outline as you can see there is an error that because we can't use multiple components here like that it should be some parent you can create here do or basically you can open react fragments here and close here it's basically same thing like there but it's not up here when we open the source okay let's see i will come here as you can see they are here so i can give class name for this also let's copy this and paste here and it's going to be delete let's arrange them i will paste this here and border will be known i will give border radius it's going to be 10 pixels and padding 5 pixels 10 pixels and background color 3 bb something green like this i can change text color it's going to be white i will give cursor pointer and i will give margin right for delay button okay so when i click this as you can see it's selecting here to prevent this i can go to the data grid here and here and inside i can say disable collection on click okay let's take back i'm clicking as you can see it's not changing but i can select here perfect so i can change this color also that was the name let's copy this color will be red and cursor pointer okay perfect so what else i can do i can maybe increase this item number let's come here user list and here page size as you can see you can change this let's say 8 okay perfect i can go to another page here have some so we've finished this page i want to click this and go to the single user page how i'm going to do this as i said before here we are gonna use these links let's do that actually i can add this inside my dummy data it looks really messy here i will open and i'm gonna say export const user rows so i can import this let's close and here i will say import user rows from dummy data and i'm gonna pass this as data as rows let's check okay it's still here let's use this link this is our edit button i'm gonna create here link and close and cover this as you can see it's from react router dom so i can indicate my path here my url i will say user and this user's id so how i'm gonna do this i can cover this with curly brackets and i will say plus remember how we are using these params i will say params and row and id let's check as you can see pay attention on the left bottom user one two three so when i click this we are going to use your tree perfect so right now i can create single user page we can update this also but before by the way i forgot this when i click this delete button i want to remove this item inside our array let's come here well i will say i'm gonna use your statehook here const it's gonna be our data and set data and i will say use statehook as you can see it's from react so what i will say it's gonna be user rows here so this time we are not gonna use user rows inside our data grid we are gonna use our state okay it's exactly the same thing nothing has changed but why we are using this that because we can set this data whatever we want for example when we click this delete button we can set this data using this function and we can delete this related user so let's do that i will come here for this delayed i'm gonna say one click so when i click this it's gonna call a function which is handled late and it's gonna pass our user id i'm gonna do the same thing i will say params and row and id so we don't have any function like that let's create before these columns i will create const handle delete and it's gonna take our id user id which we passed and here i'm gonna set my data again in the initial state it was our user rows from dummy data and this time what i will do i will say take this data and filter this and for each item inside make a condition here if item dot id not equal this id it's gonna set our new data so what i mean here let's open here dom data this is our user rows here our initial state when we pass here our user id for example i'm clicking third one it's gonna pass this user id which is 3 here inside this function so it's going to take this here this is going to be 3 and we are going to set our data we are going to filter our initial state which is user rows so it's going to look at every item so if this items id is 3 it's not going to return this so it's going to look for example here is id is 3 no okay it can stay is id is three no okay stay id is three yes so it's gonna remove so filter is working like that so let's give space here and save so let's check here i'm trying to delete as you can see it's relating if you don't recognize because of username you can look here id i'm deleting eight and it's going and deleting 10 it's going norovs perfect but if i refresh the page it's gonna come back that because we are not saving anywhere but it works perfectly so i can create our update user page i will click this and it's gonna open up here let's do that i'm going to create another page it's going to be user page it's going to show our single user but at the same time we are going to able to update our user so let's create user jsx user css i will close them okay so i will create my function it's going to be my css file here and div class name user uh user so let's do the same thing this is our main container here i will say flags for nothing has changed because we didn't indicate router so let's come here i will duplicate this and this time it's going to be user and additionally i'm going to write here column and user id so this means basically look at this path and after this user it can be anything any number any string and it's going to be our user id so here it's not gonna be user list anymore it's gonna be our user i will save let's check here as you can see it's here perfect so i can give padding here let's close this and i will split this screen and close here okay i will say padding 20 pixels so i can add here my title but before i'm going to create a container that because we have title here and create new user button so it's going to be display flex so let's create this deal i will say user title container and inside my h1 my title it's gonna be edit user i forgot class name user title and after that let's create a button user add button oops and i'm gonna say create okay i will copy this and here is gonna be display flags align item center and i'm gonna separate them just fire content space between let's see oh i forgot again saving i will save here and let's check okay this is our title and button perfect so let's arrange this create button this name i will save with 80 pixels and border none oops no and padding 5 pixels background color let's say teal and border radius will be 5 pixels and cursor pointer okay let's change this color color white and font size maybe a little bit bigger 16 okay nice so i can create here user container and we are gonna create two widgets here first one will be our display user we are gonna see all informations about user and here i'm gonna create a form and we are gonna able to update our user okay i will say user container and inside this let's say user show or display and one more it's gonna be user update so what i'm gonna do i'm gonna take this and make display flags and for show and update i will say flex one and padding20 and i'm gonna add our box shadow let's come here for this small widget for example i can copy this and paste here so i will copy this and paste again this time it's going to be user update this time it's going to be full x2 but i can give margin here let's say margin left 20 okay by the way i can give margin here also for this container margin top 20 okay perfect let's come here and inside show i will close here firstly i'm gonna create my profile picture username user job title and after that any other account details so to do that i'm gonna create two more div here let's say user show top and bottom and here it's gonna be my image user show image and i'm gonna copy and paste my image okay and after that i'm gonna create another two that because it's gonna include our username and user job title so let's say user show top title and it's going to be spam user show username let's say in a packer and it's going to be software engineer and i will say user title let's shrink this a little bit okay so let's check here there is a peaceful girl here and username and job title so what i'm gonna do i'm gonna make this container display flex i will copy this top it's gonna be display flex and align item center and use the show image let's say with 40 height 40 border radius 50 and object with color as you can see they are in the same row so let's do this for extraction desktop title i will say display flex and flex direction will be column oops okay perfect maybe space here margin left okay so i will increase this font weight and reduce for this one username contradict 600 for user title font weight 300 okay helps so right now i can write here user information inside this button i'm going to create a span here and it's going to be user show title and it's going to be account details i'm going to use an icon and let's check here i will say perm identity i will copy this and let's import as you can see from material ui icons okay so right now i will create my username let's say span user show info title and back 99 so i can give class name for this also class name user show icon so let's see okay this is our title and this is our item with this icon okay so i can wrap this with a container let's say user show info i will move this here okay so i can duplicate this item and it's gonna be maybe birthday and here number and email and here let's say address new your usa okay so i can change this icons it's gonna be calendar today let's import and from android mail outline and location searching okay let's see perfect so let's change this styles i will come here and for this title first i will paste here i'll say font size 14 pixels and font weight will be 600 and color it's gonna be light gray but darker something like this maybe okay let's see okay but i can give margin here for this bottom i will say margin top 20 pixels okay nice so let's take care of this info display flags align item center and i'm gonna give margin for top and bottom and color will be four four four perfect now for this icon i can make them a little bit smaller font size 16. we can't see it let's write important okay nice for these titles let's copy i will say margin f10 okay nice but this username and birthday is our account details but these three are our contact details let's add one more title here before this number here it's gonna be contact details okay it's much better so we've finished our show widget let's take care of this edit one inside this update i will say span and user update title and it's gonna be edits and after that i'm gonna create a form user update form there will be no action for now and inside i'm gonna separate it's gonna be left and right side one of them will include our information and second one is our profile picture so let's do this [Music] user updates i will copy this actually and left and right and inside this let's create our label and inputs but i'm gonna wrap them let's say user update item and firstly i'm gonna say label there is no html4 and i'm gonna say username and after that i'm going to create an input type will be text and placeholder what was the name and back let's copy this and let's say class name user update input okay right now i can copy this and create other inputs for full name for email phone others and email and address okay i will say full name let's copy this name here and email inside placeholder i'm gonna paste and others found here and finally address new york usa okay let's see perfect and for the right side there will be our avatar here and some button to upload new one and here finally we are gonna create our update button so this is our write do and inside i should create new one for this image and button let's do that user update upload let's create here an image it's going to be my custom image here and class name user update image and after that i'm gonna say input is gonna be file i can use an icon instead of this choose file button so that's right here publish we are going to use this so how i'm going to use i will say label and html4 will be our input id let's write here id so this means basically this is file this is file so it's gonna take reference to this input so inside i'm gonna create this publish this icon from material ui okay let's see as you can see if i click this it's still opening our file so if i make this display none we are not going to see this anymore let's write here i will say style and display it's gonna be no okay perfect so if i click this it's opening my file perfect so let's make this image smaller i will save it hundreds height a hundred but the radius will be 10 it's not going to be circle anymore and object fit cover and i will give margin left 20 pixels oops it's gonna be right because our icon is in the right okay perfect something like that right now let's make this container display flex and separate them i will come here and for this form i'll say display flick and justify content will be space between okay perfect but i can give margin here margin top 20. okay let's change this edit this title i will say font size 24 pixels and font weight will be 600 okay and for these items each item i will copy and after this form i will say display flags flags direction will be column and for each margin each top margin is going to be 10 pixels okay so let's change those labels i will use this again this time i can choose every label inside this update item you can give also class name doesn't matter i just want to show you everything i will say margin bottom 5 pixels and font size let's say 40. okay nice and for this inputs you can do the same thing but you can use class name also like this i don't want any border and i will save it 250 oops i forgot mom but i will say border button i just want a border only on the bottom one pixel solid and gray okay perfect maybe i can give height here it can be higher okay so it looks really nice let's take care of this right side i will come here for the right side it's gonna be display flex again but flex direction will be column because because we have button here or i forgot let's write here after this div i'm going to create a button i will say user updates button and i will say update okay perfect so i can separate them just for content space between it's gonna be here perfect so for this uploads container display flex again and align item center they are going to be centered like this i can give cursor for this icon but we didn't give any class name let's give it's gonna be user updates and icon after this image i'll say cursor pointer and finally for this button it's going to be powder none okay board will reduce first five pixels and border none and i will get padding cursor pointer of course and background color will be our main color dark blue and text color will be white oops right and font weight boulder awesome it looks really really professional you are lucky that you are watching glamadev nobody designs something like that on youtube okay so we finish this page also i can do one more thing when i click this create button we can go to another page which is add user so let's come here for this add button this create button i'm gonna add link remember how we are using i will import from react router dom okay i will cover this and i'm gonna say to where it's gonna go let's say nave user let's see i'm clicking and we are going to new user perfect so let's create this page i can close this for pages i'm gonna create new user page [Music] inside this folder my js file new user dot jsx oops why i said new page is going to be user okay and new user css let's create our function rfc and css file here and it's going to be new user again i will make this flags for again don't forget this it's really important so let's go to the app.js and indicate our new route i will duplicate this and path will be new user and we are gonna call our new user component [Music] i will save and it's here perfect so firstly let's create our title i will close this and here i can separate them okay oops not here here i will create h1 tag and i can say new user title it's going to be nav user and after that i can create form and new user form there is no action and i can create form items so what i will say i'll say new user form item or just item and label firstly it's gonna be user name and input let's say placeholder john i will copy and paste this it's going to be full name let's say john smith and email is going to be email here not text and let's say john gmail.com and i'm gonna say password type will be password also we should hide this and what else phone and address from let's write here something one two three four five six seven eight and finally address i will say new york usa again let's see so let's add something different not only these inputs maybe we can use gender and active let's say new item but this time it's going to be gender radio and there is no placeholder name will be gender and id will be may and value will be mail also so i can add label for this mail let's say label html4 will be mail but we are using react so you can use here for like that so i can duplicate this for female and others female other if you are a lgbt activist i'm sorry i can't write every gender here okay it was not funny i'm sorry i'll say female and other actually let's make them capital and other and by the way i can wrap this with a container let's say new user gender i will take this here okay let's see okay we can't see them that because it's not our text it should be here and it should be lowercase okay i remember right now and female other right now it looks properly let's create one more thing and it's going to be our active buttons so new div here and i will copy this it's going to be active so this time we are going to use select here and class name will be new user select and name let's say active and id active so inside this i can write my options option one it's gonna be yes and second one will be no so i will say value it's gonna be yes and for this one it's gonna be no so let's see as you can see we have a select button here and we can choose yes or no we finished here let's come to css file and arrange our items firstly let's look what we have here you have form i will say display flex if i do that as you can see they are in the same row what i will do here flex wrap is going to be wrap as you can see if it doesn't fit here it's gonna move these additional items in the other line so what i mean you will understand better right now if i choose this item and if i make this vid for 400 pixels for example as you can see 12 of them here and third one is 1000 feet here so it's automatically moves to other line and this is same also if i make this browser smaller and shrink like this as you can see it's automatically moving to other side upper line okay so what else i can do let's move this here and i will say display flags and flex direction will be column i will say margin top 10 margin right 20. something like this so let's take care of these labels i will use this item again and i will say label margin bottom let's say 10 pixels font size 14 pixels 48 600 and color will be gray okay maybe lighter okay it looks good and for these inputs i will do the same thing i will choose all inputs here i will say height 20 padding stand so i can change this border and give border radius one pixel solid and gray and border radius will be five pixels okay nice so i can change this user gender input let's choose this like this input so what i will say i will give margin top here margin top 15. for label margin will be 10 font size 18 and color will be 555 okay nice and what about this select let's choose this new user select i will say height 40 and border reduce it's going to be 5 again perfect so what about button we didn't add any button here let's add before this one i will say button and it's going to be new user button and i will say create let's take this i'll say with 200s borderline and background color will be our main color again dark blue and text color will be white okay i forgot again saving okay i will give padding seven down from right hand left and i can make this bolder and i'm gonna give border radius 10 pixels i can give margin top and cursor pointer let's say 30 and cursor pointer okay it looks really nice so we've finished this page also what else we can do we can go to the product by the way we didn't add here link let's add here i will close this and open my sidebar and for this user here i'm gonna add link let's import this and i'm gonna say two users and this one let's cover this and it's gonna go to products let's see as you can see it's acting like anchor text it has its own style so how i'm gonna get rid of this you can add here class name let's say class name link because it's gonna be always same it's independent from any component so i can write this inside app.js so it's gonna cover every component here let's say link what i will say it's going to be text decoration will be none i don't want any underline here like this and additionally i'm going to change this color color will be inherit so it's gonna take this from its own parent perfect so it's totally the same thing right now so when i click users it's going to users page when i click products it's going to products page so we don't have any let's create and here and here okay i can create product list product list jsx and product list css so let's create this function and i'm gonna import my css file and class name will be product list let's say list i'm gonna go to the app jazz and let's copy this actually all of them we are gonna be doing same thing so it's gonna be products let's copy this products and products id and new product and here okay so i can change this and we are going to change this tool later let's say product list okay i can see my list here we didn't give full x4 let's give i will copy this and here it's gonna be flex four okay perfect so it's going to be the same thing with users so you might ask me why you are duplicating this component if it's the same thing so it's hard to share this component that because our rendering these columns this delayed function everything is different if we pass everything there is no sense to share this component that's why i am duplicating this we are going to change everything inside so let's copy this and paste here of course let's copy them and and paste here this time it's not going to be user rows it's going to be product growths we are going to change them let's open our dummy data as you can see it's our user rows i will copy this and paste here this time it's going to be products rose so let's change this username we are not going to use username it's gonna be name and i will change this i will say apple airpods and for avatar it's gonna be image and this link let's choose this and change and email is gonna be stock and let's say actually it's going to be number 123 status will be the same and this time it's going to be price okay that's all so i can call this right now again let's create use state const data set data it's gonna be use statehook now okay i already import and here it's gonna be product draws okay so i'm gonna open user list again and handle delete will be the same and i'm gonna write my columns it's gonna be different of course but let's try it for now okay so what i'm gonna do it's gonna be product and header name product is going to be product and product list image and this time it's not going to be avatar it's going to be image and this is going to be name and here there is no email it's going to be stock let's make this capital letter and status will be the same and this is gonna be price let's delete this okay and for this actions it's going to be product and id again product list edit product list delete as you can see it's strange we didn't give any css here let's open this user list css and let's copy and paste them products they are okay and what else this image of course i should make this display flex what was our div name product list user but it's not going to be user let's say item display flags align item center okay so when i delete this it's deleting awesome when i edit this it's going to product and this product id but as you can see we see here user page that because in the app js our root is user so we are gonna change this that because we don't have any page let's create here i will say product it's going to be product.jsx product.css and rfc css file here [Music] and class name and here of course for x4 so right now i can change it it's gonna be products okay again this css file okay let's see as you can see we are in the product page so what i'm gonna do here again i'm gonna add title and button so i'm gonna create title container so let's say product title container and inside there will be h1 product title and i will say product and one more it's going to be button and product add button and i'm gonna say create okay of course it's gonna be link here that because we are gonna redirect when we click this button let's import this from react router dom and it's gonna be two slash and new product let's see so i can make this display flex but before i can give margin for this main container let's separate this and close this okay so i will say padding 20. okay right now let's close this here and for this container it's going to be display flex align item center justify content space between like that and for this button i'm not gonna change this title i'm going to change the button with 80 let's say border none and padding will be 5. background color teal and text color will be white and border radius 5 pixels radius and font size let's say 16 and finally cursor pointer perfect right now i'm gonna add something different here i wanna add here one chart it's gonna show our last three months sales and here this product information and finally under them it's gonna be update form okay let's do that i can close this for now and after this div i'm gonna create product top and bottom product top and bottom and inside this product top it's going to be a product top left and right it's going to be our chart and this is going to be our info right so let's create our chart inside remember our chart component it was reusable i'm going gonna import this oops i can't import let's import manually import charge from components and chart and chart okay if i do that we can't see anything that because we didn't send any data so let's open our tom data as you remember so what i will do is creating my product data i will copy this and paste here this time it's going to be just 3 months one two three i can delete them and it's gonna be product data and this time not active users it's gonna be sales so i can use this i will copy and i will call this here import dummy data okay so let's send this as data i will say data equals product data so what else we are sending remember data key is going to be sales and one more title it's gonna be let's say sales performance okay i'm not sending grit here because i don't want to any grit let's see as you can see january february and march and it's showing our sales but it's really big let's create our right side here i will say product info and top and product info and bottom that's because top will include our image product image and name and bottom will include our id sales active or passive in stock or not other informations so let's create here image and it's gonna be it's gonna be product info image and i'm gonna paste here my image and after that product name i will say span amp product name it's gonna be apple airpods okay for the bottom tips for each item i will say product info item and first one will be our key product info key it's gonna be let's say id and other will be our value one two three okay so i can duplicate this for sales active and in stock let's change them sales let's make this higher and active i will say yes and in stock it's gonna be no in stock okay let's see our image name id and others i forgot colon here okay so before creating this button let's take care of this css file i will open my css and inside new tab okay so what we have here product top so it's gonna be display flex but they should be in same size so how i'm gonna do this i'm gonna take this left and right and make them same size left and right it's gonna be flex one and for right side i'm gonna give border shadow sorry box shadow but before let's say padding 20 and margin 20 and let's open one file here and i'm gonna copy this shadows okay i will save and we can see because of this image let's make this smaller what was the class name info image it's bh40 height 40 border radius and object fit okay perfect they're in same size right now so let's take care of this container let's come here and this info top it's going to be display flex align item center and for this name let's make this folder on face600 and for this info button i will say margin top 10 pixels and for each item i'm going to save it 150 and display flex and justify content will be space between like this perfect i can change this keys or values i can change them font weights let's say 300 okay i have some maybe some margin here where is this image margin right 20 okay perfect so i can create edit container here right now oh why i didn't close here okay anyway so for this product button i will do the same thing let's actually copy here it's going to be product button here so let's close here and we are going to open again so i'm going to create a form here i will say form and product form no action and inside this form again i'm gonna split this into two pieces first one will be information second one will be our upload image container so let's do that i will say product form left and right and inside left i'm gonna create my inputs let's say label and product name [Music] and input it's going to be text placeholder let's say apple airpods so other label here it's going to be in stock so i'm going to create select here name will be in stock and id will be in stock again and options and option one will be yes value yes and one more it's gonna be no oops no okay so one more it's gonna be active yes more again but i'm gonna change here active and id active and for the right side let's create a container i will say products upload and i'm gonna create image here i will say product upload image and i'm gonna paste my link here and after that it's gonna be our button to do that i'm gonna create label and four will be file and inside let's create material icon it's gonna be publish and after i can create my input file input type will be file and id will be file so i'm gonna make this display now so style display it's gonna be no so one more thing after this div i'm gonna create button product button or here and i will say update okay let's open css file product css and i'm gonna split okay i will copy this form it's going to be display flags and just file content space between for the left side it's going to be display flex again and flex direction will be column like this and for this label i will paste this again and label i will say margin bottom 10 pixels and color will be gray and for input i will do the same thing margin bottom 10 pixels border will be none and padding let's say five pixels and i will give border bottom one pixel solid and gray let's see okay so what about this select let's choose this select inside this form left i will say margin bottom 10 also okay and for the right side let's make this image first where is our class name here i will paste this and i'm gonna say with a hundred height a hundred it's not gonna be circle it's gonna be for the radius 10 pixels and object bit color margin right to any okay nice so this container let's come here and choose right container i will say display flex flex direction column that because we have update button here we are gonna take this here column like this and if i say justify content space between we are gonna separate them perfect actually i can say maybe space around let's try okay it's better so for this container i will say display flex again and align item center it's gonna be centered and finally for this button known and i will give padding here for the radius let's say 5 pixels and background color dark blue font color will be white font weight bold and cursor pointer okay nice so we finished our product page also we have here chart information and update form and i click products and edit here we can reach them so when i click this we are gonna go to new product but it's showing new user here that because we don't have any page let's create this new folder new product i'll say new product of course jsx and my css file so let's create our function rfc and i'm gonna indicate my new product css this time i'm not gonna forget this and class name will be new product so let's create inside our app.js instead of name user i'm gonna call new product let's see right now i'm gonna give for the x4 new product and it's gonna be flex four okay so we are gonna do the same thing so i'm not gonna write them again so i will just copy and paste and let's close here as you can see we have image again label input file and name stock active our options and button everything will be the same there is nothing new here so inside the css i'm gonna paste my css file here as you can see form item label and button i didn't write one by one that because there is nothing different here i'm sure you can do this by yourself you can find this inside our github repository also so we finished our new product page so let's come here our home page new members latest transactions and our chart here and i click users it's showing our old users here i can delete them and edit and i can see my user and i can edit this i can create new one and for products it's the same perfect so i can add link here also let's go to the sidebar component and for home i will say link and i will move this inside this link and my url to is gonna be just main url of course don't forget our class name our global class name is link so i'm clicking so we are going to home page perfect so we finished this project it was our design part and in the future when we create a shopping application movie streaming application we are gonna enhance this panel we are gonna add our functions we will fetch users products and any other documents from db and we will add new ones update and delete them so create your dashboard and stay tuned and if you learned something new today please like the video and don't forget to follow lamadev social media accounts join our discord server facebook group and instagram so that's all thanks for watching and i'll see you in the next tutorial goodbye [Music] you

Channel: Lama Dev

Views: 150,423

Rating: 4.9867196 out of 5

Keywords: react admin, react admin panel, react admin dashboard, admin dashboard design, admin panel design, react website, react website tutorial, react design tutorial, react design, react ui, 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, react chart tutorial, react chart, react from scratch, lama dev, learn react.js, html css admin panel, admin dashboard html

Id: aTPkos3LKi8

Length: 170min 57sec (10257 seconds)

Published: Wed Jun 02 2021