Build and Deploy Responsive Dashboard with Next.js and Shadcn UI Components #nextjs

hello and welcome back to the channel in this today's video we are going to build this responsive dashboard using Nexus and San UI and in this video we will learn how we can use set UI components in our Nexus projects for example if you will see there here I've used a set CN UI sidebar and here I have implemented a extra feature when a user will click on that button so this will close or open that sidebar like that and here I have also created these card components and uh this graph and I have taken all this UI reference from SN official website like this this is SN and uh this is my UI but in this video we will learn how we can create this from scratch and here I have also created some extra pages so in this video you will also learn how to use data table component of set CN UI and here I have also added a some pagination like when a user will click on that next button so this will go to the next page and when I will click on that previous button so this will show us a previous data and and there's a order page and on that order page we are showing some data and for the settings page here we have created a settings page and obviously this build is fully responsive if I will check this UI in mile like this as you can see there when I have pressed F well so now all this data come in a single column and uh this will look like this and when I will go to the tab so this will look like this and uh when I will go to the desktop so this will look like this so in this video we will learn how to create a highly responsive components with Nexus tailn CSS and set CN UI components so let's get started so to create this dashboard so first of all we need to install nextjs so we will go to the browser and search for nextjs and uh we will go to that official website and here we will get the command to install nextjs so I will just simply click on that command so the command is npx create next app at the latest and after that go to the place where you want to create your next CHS project so in that case I want to create my next CH project project in that place so here I will create a new folder with control shift n and I will give that folder name like uh set CN dashboard and after that go inside that folder and click on that search bar and here we will type CMD and after that press enter so CMD will open for that location now we will paste our Command and now we will add dot so with the help of dot we don't have to create a another folder because we have already created a folder for our project and after that just press enter so now this will ask us a few questions like would you like to use typ script or something like es link ta CSS so what we will do now we will just press enter enter and install all the default options so just press enter enter enter like that so now our next CH project is successfully installed so now let's open this project NBS code so to open our project invs code here we will type code dot so this will open the terminal invs code and after that to run our project here we will type npm Run tab and press enter so now this will open my project on Local Host 3001 so let's just copy this address so I accidentally close my server so let's again run npm run Dave and go to your browser and search for local host code 3001 but in your case this will open your project in Port 3000 here on my port 3000 my previous project is running so that's why we got this project on Port 3001 so now let's go to the code so first of all we will configure sh CN UI so go to the browser and search for sh CN here we are on the official website and uh go to that SN and click on that get started and go to the installation section and here we want to install for NEX and here they have given the command how we can install this s UI in our nexs project so here we have already installed uh nexs with typ script es lint and aen CSS now this is the second command that we have to use so I will just copy this one and come to my code so again press control J and open a new terminal just click on that add button and paste your command there like that and press enter so now again this will ask a few questions like they have given that example so now this will ask these questions so for now I will just press enter yes so would you like to use default styling enter yes would you like to use base color slate enter yes so now this is asking us like where is your global. CSS file so if I will check there so my global. CSS file is inside the source inside the source we have app folder inside that app folder we have our global. CSS file so here here what I will do I will add this location by pressing Tab and here I will add a SRC so now my location is correct and here I will press enter and here now this is asking us like would you like to use CSS variable so I will press enter are you using a custom tail so here we are not using any like prefix example tww so I will just press enter and uh now this is asking us where is your Tailwind config.js located so in our case our Tailwind doc config GS file is there so the location is correct so I will press Tab and enter now this is asking us configure the input allies or components would you like to use this one so I will press Tab and enter and for the utils I will again press Tab and enter so are you using react servers yes so we are using a nexts so on that we will use a server components also so I will press on yes and again just press y so now our set CN UI is configured successfully so let's minimize this and and go to the browser and see the output so there is my app and now this is looking like this and now we have to create it like this one so let's go to the code and there first of all we will go to the app folder and inside that app folder we will go to the page. ESX and from there we will remove all these files and for now I will just add div and inside that div here I will write like this is homepage and let's save your code and see the output so now here we are just only getting a homepage and if you will see the final output so here what we need to do so on that first of all we have to create a layout for this whole container and after that we have to create this side nav bar and uh this is the homepage our dashboard page and after that here we have to create users orders and settings page so first of all we have to create this our side naar component and before that first of all we have to create a layout so let's minimize this and go to your code and go to this layout TSX file and before we move further let's also install another Library so if you will see there bottom there here we are getting a screen Xcel so this will tell us like currently which screen we are on so with the help of this we can easily create a responsive UI so let's go to the browser and search for Tailwind screen debug and go to that first website of GitHub and there you will get the installation command for Tailwind debug screens so I will just copy it from there and come to my code and press crl J and install this Library like that that and again see there how they are configuring this here what we need to do we need to configure this plugin in our T.C config.js so I will copy this requir thing from there and now go to your code now go to this tailin doc config.js so here we got our two files for T.C config.js but uh we don't need this previous one this is the new file that is created by SN UI so we don't need this previous one so I will delete this file and now again come to this Tailwind Doc config.js and here we need to add our plug-in so here I will add a comma and paste my required Tailwind debug screens and after that go to that layout. ESX and here what we need to do here we use a CN function and if you will see there on our source folder here we got a live folder and inside that Library folder we have our utils dots file and inside that utils we have our CN function so inside that CN function what they are doing they are using a two library that is first one is tailin merge and second one is clsx so with the help of tailin merge we can merge all the CSS classes and with the help of clsx we can pass a conditional classes so so with the help of CN function we can do both so that's why they have created this CN function and we got this folder with the help of set CN UI so what I will do I will copy this one and come to my layout. ESX and here we need to use our CN function and now this one and also let's import our CN so here we have imported our CN function and after that here we are passing our default class name and in that case we are passing a font inter do class name and add a comma and after that we have to add our debug screen classes conditionally so first of all let's add this and after that we will see what will be the output for this so here we will write debug screens now you can see that we are also getting a proper SS for our ebug screens now we need to add a condition so what will be the condition so here we will write process. EnV do node admir and equals to so this should be equal to development and if this will be equals to development so this will show this see the final output so this will show this screen Excel and when we will deploy our application so this won't show and one thing I forgot to tell you that we will also deploy this application on versal so when our application is deployed then this won't show so that's why we have added this condition when our application environment is equals to development then we have to show this debug screens and otherwise we don't have to apply this debug screens now let's add some default classes that we need in our layout so here we need a minimum height of screen and WID should be full and BG white and text black and this will be the flex and let's save this and see the output so nothing is changed because we haven't added anything yet so here first of all we have to add our side bar and after that on our right hand side we have have to add our main page so what we will do so we will wrap up our children with div so this will act as a main page and let's also add some class names for this div so this will be padding of eight and width will be full and here for example let's write our sidebar let's take a paragraph and here let's trite a sidebar like that and let's save this so now you can see that we got our sidebar there and here we are getting our homepage and if I will add a border there so maybe you can see that let's add a class name so let's add a border there so now you can see that this is our sidebar and this is our homepage so here we are getting our homepage with the help of this children and this is our homepage so now we have to create our sidebar component so for that what we will do so we will go to the browser and go to that se chain official website and there go to the homepage and uh there if you will see there we need to use this sidebar in our code so here I will click on that GitHub page so what we will do so we will copy the code from there so let's see how we can do that so we here we have opened the code for our s CN UI after that just press dot so with the help of dot this will open the vs code on that browser or that repository and after that if you will see their final output so click on that mail now you will get the exact address for this page so just copy this one and come there and and after that let's press contrl p and paste it there and find out this text so if you will see there so here we getting our examples mail so we need this page. TSX so let's click on that one and inside that they are just rendering that male component so again let's check the address for that mail component so here they are getting the mail component from their component mail so this is the components and uh this is the mail. TSX and inside that we got our nav so this is the nav bar so this is the side nav that they are rendering if you will see there this is the inbox drafts and see the output so this is the inbox draft and sent so what we need to do we need to use this nav so let's see from where they are importing this nav so if you will see there so again from the mail and components and nav so here is the nav component so here I will just copy all the code from there and come to my code and here I will create a UI folder and inside that UI folder here we will create na. TSX and after that we will paste our all of our nav code and now we are getting errors so if you will see there so they are using the button component of their s and UI so again let's go to the browser and here search for button and we got our button component so first of all let's install this button component so let's copy the command from there and come to your code and trust control J and paste your npm command there so see there on my left hand side new file is created with button. TSX and on that button. TSX we have our all of our button component so now let's give the exact location for this button so let's remove this and here let's add a slash and uh this should be like components and inside that we have our UI and this is correct now this is correct so we are not getting any error and we have to also install another component that is tool tip so let's again go to the browser and search for there tool tip and again copy this npm command from there come to your code and install this tool tip also and here we again got a tool tip. TSX file and now give the exact location for our tool tip so here I will copy it above from there till UI and now we are not getting any errors so everything is fine there so let's save this and now let's again go to the browser and uh go to the code and see how they are using this so we have to go to this components and mail. TSX so they are using this component something like that so what I will do I will copy it from there like this one and now we have to create our sidebar. DX component so here I will create a new file in my component folder with the name of sidebar. PSX and here I will just create a sample for with Ds RFC and inside that here we will paste our nav component like this one and let's import this nav component like this one and again go to the browser and see there so is collapsible means we want to open is our sidebar is open or close so we can control this with the help of US state and button and these are the icons they are importing these icons from loid icons so for now let's just copy these icons from there and paste it there here and for now let's add a false so here we are not getting any errors so let's save this and let's just give this name like side naar and let's also change our file name so I will give this side naar like that and let's copy this component and import this component in layout. TSX so where is our layout. TSX in our app folder and go to that layout. DSX and we need our sidebar in that place so for now let's comment this one and input our sidebar like that and see the output so here we are getting error so we have to make our nav component in client component so let's again go to the browser and search for nav component and here our component is already in the client component so we have to convert this side nowar into a client component so here we will write use client and let's save and now you can see that we got our sidebar there so everything is fine there so what we need to do now if you will see there what I have done there I have replaced the icon and level for our sidebar like for the dashboard I'm am using this icon for the user I'm using user icons like this so here we just have to only change the data so let's go to the code again and before we change our data first of all we have to configure our nav component so in this nav component we have to also add a new property that is called hraf so why we are adding hraf so if you will see there final output when I will H over that so here on the bottom here we are getting the page of that link suppose if I will go to the user page so with the help of that link tag we are redirecting to link page so that's why here we are adding HF property and after that what we need to do here in the place of HF we have to pass that link so here we will write link. HF like that and copy this one and also replace on that place and after that come to that side now bar and uh now we are getting an error like HF is missing and we have to also replace all this data with our data so now we will use this data here I have replaced my data with this data for the title here I have passed a title and for the HF I have passed the SL for homepage and for user space I have created a new route with SL users for orders for orders page and for settings settings page and now let's also import these icons so we will import these icons from Lucid react icons so now we don't need these icons so first of all let's remove these icons and now let's import these icons so let's just copy these icons and add a comma and paste it there so this will import it from Lucid react let's also copy this one and and now let's save your code and see the output so now here you can see that we got our icons like that and if you will see the final output so here we are also getting a border on our right hand side and this icon so with the help of this icon we we can collapse our sidebar like that so let's go to the sidebar component again and here we will create a one US state hook so here I will write user State Snippets and here we will take a variable with the name of is collapsed collapsed and uh that is collapsed and here we will also import a user state from react so let's copy this one and import this user state from react like that and here we will write use State and by default we will make it false it means our sidebar will be open by default so let's save this one and we will copy this is collapsed from this place and replace it with false like this one and if you will see the final output so here by default our sidebar is closed and if I will make it true there so here we are getting error like uh tool tip must be used within tool tip provider so let's go to the code on our nav bar here we are using a tool tip and this tool tip is not W up with our tool tip provider so here what we will do we will wrap up our whole Navar with tooltip provider so let's let's just write tool T provider like that and cut this and wrap up our whole nav component with this tool tap provider and let's press control space and import this tool tip provider and let's save this and now you can see that we got our sidebar like this and this is collapsed let's again come to the side Navar component and here first of all let's give the class name for our side navbar component so we will add these class names that is relative minimum width will be 80 pixel and we are passing a b right and padding x 3 and padding bottom 10 and padding top 24 and let's save this and see the output so here we are getting a padding top of 24 and uh we are also getting a border right and now let's make it false so this sidebar will be open so this will look like this and now let's add this button so to add this button here we will use a button component and here we will pass a variant and variant will be secondary and on that button here we will pass our icon so our icon will be this and from where we will get this icon here we can import this icon from Lucid icons and if you don't know what is the name of this icon so just go to the browser and search for this icon so I will go to the browser and search for Lucid icons and go to their official website and there you can search your icon so suppose in that case I want to search a right icon so here I will just write right from there you can get your icon so for that you have to click on that icon and uh click on that copy GSX and after that come to your code and paste your icon like that so this icon and this icon this is the same and after that you will import your icon like this one so let's save this code and uh see the output so this is our icon and now what we need to do we have to update our button component here we will add around it full and addding two so our button will look like something this and uh now what we need need to do we have to place our button in that place so here what we will do we will add another div and uh we will make our button absolute so for that here let's add a class name and uh here we will pass a absolute class name and after that we will Define this position so we want to make it from right minus 20 pixel and uh from Top 7 so let's save this and see the so now we got our button on that place now what we need to do now we have to create a tole function so that when the user will click on that button so this will toggle the collapse so let's go to the code and here we will create a function with the name of toal sidebar and on that toal sidebar function we will toal our sidebar so here I will just copy this variable that is is collapsed and uh when the user will call that function so this will store the opposite of that value whatever the value for example if this value is true so with the help of this not operator this will convert into a false and if this is true so this will convert into a false so let's copy this function and here we will call this function on that on click so let's add on click there and paste your function like that and let's save your code and now you can see that when I'm clicking on that button so our sidebar is collapsing and working perfectly fine and here's the one issue for example if I will click on that user page so we are on the user page but you can see that this user is not active so for that we have to again go to our nav component and we have to update our nav component something like that like when we are on the user page this page show us as active page so let's go to the code again and go to our nav component and on that nav component we have to import a use path from next navigation so here I will just write use path and I got automatic station so I will just press enter and let's remove this one and use this use path hook and we have to use this use path hook on our nav component so here I will just write uh use path like that and we will use this use path hook there so let's give this variable name like path name like that and after that copy that path name and here on our button variants in the place of Link do variant we will make a condition like uh if our link. HF so here we will write link do HF is equals to equals to path name so what we need to do we have to show that this page is active here we will pass a default style and if this condition is false so here we will show us a button variant of ghost like this and when I will save this code and see the output so nothing is changed because we have to also change this on that place so here we are using this two times because this link will show us on two times first time when it is collapsed and when this is not collapsed so we have added there when it collapsed like when I will check the output and when this is collap colled so now you can see that our user page is active so now let's again go to the code and make this active when our sidebar is not collapsed so what I will do I will just copy this one and here when this is not collapsed I will replace this variant from the above so let's replace this one and paste it there like that and let's save this and now you can see that on which page I'm clicking that page is active and here we are also getting that 404 this page is not found because in actually we haven't created this page so first of all let's create these pages so let's go to the code again and first of all let's create this users page so what we will do we will go to that app folder and inside that app folder here we will create a users and inside that user we will create a page. PSX and here we will just write sample format like that and here I will write users page let's copy this one and paste it there and my when I will save this and see the output and when I will go to the user space and when I will go to that users page so you can see that we are on the users page we are not getting any error for the users page and whatever content we have written there we are getting as output there so like the users I have created there orders page and settings page and if we will see our output so now let's go to the orders page so here this is our orders page and this is our settings page so here our sidebar is completed but uh there is one problem if I will go to the Mobile screen so what we need to do we have to make some conditions like this sidebar should be collapsed because now you can see that this UI is breaking and not looking good so let's go to the code again and go to that side nowar component and here we will use a condition something like that when our width is less than something approximately 600 pixel so we will make our sidebar collapse so for that we will use another library that is called use window size so let's go to the browser and search for use window size npm and there you will get that first library that is react hook Windows size and first of all let's install this so for that go to the code and install this library and after installing let's go to the browser and see how they are using so here we just only need a width so what we will do I will just copy the import code from there and uh paste it there and we just only need a use window width and other than we don't need this so I will just copy this one and here I will paste it like that and let's remove these two with the help of this variable we will get the current size of our width so here I will create another variable like this will check that so this variable will check that currently we are on the mobile or not so for that here I will create one variable mobile width and here I will add a condition like this width should be less than 768 pixel and before that let's copy this one and see the output here what we are getting so here I will just add this like width and paste it there and see the output there so currently we are getting a 894 pixel and when I resize this so now you can see that we got 712 pixel and now we are getting 494 pixel so let's go to the code again so with the help of this variable we can check that currently we are on the mobile or not so this will return us a two if our width is less than 786 pixel it means we are on the mobile and if our width is greater than 7 68 pixel so it means we are not on the mobile screens this will also include a tablet screen so what we need to do here I will just copy this variable and here we have to make a condition like if this condition is true so it means our sidebar will be collapsed so here I will always pass true otherwise we have to pass this is collapsed and uh collapsed means our sidebar is closed and uh let's copy this condition again and we have to also copy this condition and uh we have to also use this condition on that place so first of all let's remove this one and add a cly bracket there and add a no operator there it means this D will only show when we are not on the mobile so here we will use end operator and after that put thatly bracket there and let's save your code and see the output so now you can see that we are not getting our button that we use for collapse our sidebar so when I will go to the desktop screen so our UI will look like this and we can also collapse our sidebar with the help of this button like this and suppose our sidebar is open and when I will go to the Mobile screen so let's go so now you have seen there our sidebar is automatically collapsed with the help of this condition here we have passed so here we have successfully completed our site naar using shn nexs and tailin CSS so now let's save everything and close all these files and come to the main page or homepage come to the homepage of our app so this is our homepage and here we have to create our dashboard so let's go to the UI and see the final output so now here we have to create our first of all this dashboard page so here we have our page title and after that we have our cards so first of all let's create a component for our page title so let's go to the code and here we will go to our component folder and we will create a file for our page title component that is Page title. TSX and just write TS RFC like that so here we have to create new typ first one is that will contain title and second is that will contain our class names and here we have to use H1 tag for our titles we can use any tag but uh I'm using H1 tag and on the place of thisly braet let's import our title there and last name and now we have to pass their title and let's add a class name and now let's add a default class name there so we have to add a text to XEL and F semi bold and now we have to pass the CN function so that we can pass our class name prop so let's copy this one from there and add a color jacket and add a CM function there let's import with the help of control space and enter and uh we will pass our default classes and now let's add a class name there so here we have completed our page title component so let's copy this one and come to our page and here we will import our page title with the help of control space and now here just press control space so you will get the session for your page title and let's again go to the page title and if you will see there on that type I have added a question mark there so question mark means this is conditional it means this is not mandatory to pass this prop and now let's again go to the page title and here we have to pass a dashboard text so let's I will just copy it from there and paste it there and see the final output so let's go to the dashboard page so here you can see that we got our dashboard and homepage there so we don't need a home page there and if you will see the final output there so here you can see that our UI is in the form of columns like this is the column one and this is column two and this is the first column so let's go to the code so here we will give this flex and here we will write this Flex call we will also give the gap of five let's also give the width will be full and let's save your code so nothing is changed so first of all what we need to do first of all we have to create this card component so let's go to your code and and uh here we will create our card component so here just click on that plus button and now we will create our card component so just write card. DSX like that and write DS RFC and let's again check the final output so now we have to create a props for our card component so before we create a component for our card component let's take a look of what will be the props for our card component so this is our label and this is icon and uh this is amount section and this is description so if you will see carefully so this pattern is following on this one this one and this one so what we will do we will create four props first one is label icon and amount prop and description prop so let's go to the code and here we will create these props and for the icons here we are using a lucid icon type so from where we will get this Lucid icon type so let's just press control space and press enter so you can see that we are importing our Lucid icon from Lucid react and uh let's copy this card props from there and uh replace with this props and add a props there like that and uh let's see the final output again and if you will see here so we are getting this we are getting this container with this border and Shadow and if you will see there carefully so here we are using this container on that card component also and on that graph also and on this sales section also so what we will do we will create a separate component for this container and after that here we will use this container on that card component on that graph component and on that sales component so let's go to the code and here on that place we will create another component with the name of card content so we have to also export this component so what we will do we will we will use a export keyword also there so I will write export function card content and after that just use a return keyword and after that just use a simple div there and on that div we will use a class name and let's just pass a default class name so this will be the flex and it will be pull and flex call and GAP will be three and rounded Xcel and uh border padding pip and we have to also add a shadow so this is a shadow and uh now let's make it autoc close and remove this extra part and uh now what we need to do we will make this component highly reusable so for that here we have to also add a class name and on click props all the props that this day will contain so here we will just write props and uh now after that here we will write react dot HTML attributes and let's remove this HTML from the start and here we will write HTML Dev element like that and this will be like that and now we are not getting any error so whatever the tag is there you have to use that element in that case here we are using a div element so that's why here we are passing a HTML div element like that and if you are using a paragraph tag so just add a p there and write there stml P element like that and uh now what we will do there we will add a curly bracket there and here we will use a spread operators so with the help of this spread operators we can easily access all of our props we will see it later and now we have to also pass extra class names like if someone wants to update this component or or something like that so again for that here we will use our CN function there and paste your default classes there and add a props do class name there now you can also see that we are getting a proper soltion for our class name so here we have completed our card component so let's copy this card component and uh replace it with this one and inside that card component if you will see their final output so first of all we have this row so this will contain this label and icon so let's add a section tag there and inside that section tag firstly we have our label and after that we have our ion so for the label I will use a paragraph tag and inside that paragraph tag I will pass text as and props do LEL like that here we got a props from there and we are getting a label from this place and we have given the type for our level that is a string and now we have to use our icons so for the icon here let's see carefully how we will use our icons so here we will write props do icon like that and this will be Auto close like that so whatever the icon we will pass from our component so this will render on that place and uh we can also add a class name there so here we will pass some classes so let's add a class name there and here we will give this height will be four width will be four and text color will be text gr 400 and uh now we have to add our amount section so for that here I will create another section like that and uh for the amount so this is a heading or something like that so for that here let's use a h2 tag and inside that S2 tag will we will pass our amount so I will just write props do amount like that and add your class names so here we will use a text to Exel font semi board and if you will see this one so inside that section we have our this amount and this description so here we will use a class name and we will make it Flex call so for that here we will use a flex and flex call and after that let's also add a gap one and after that for the description here we will use our paragraph tag and here just write props do description like that and uh let's also style our description so for that here we will pass a text of extra small so for the extra small we will use XS so this will apply the font size of 12 pixel after that let's also change the text color so here we will write text Gray 500 like that and now and now we have completed our card component but one thing is left there on that section tag if you will see there these two elements are on the final output are side by side so again here we will pass a flex justify between and also give some Gap and let's save your code and come to your main page and on that place we have to show our cards but before that we have to create a data for our cards so here I have created a data for our cards and on that data if you will see there here I have added a for label total revenue and amount description and for Icon I'm using this icon and we will import this icon from Lucid icons so let's just press control space and click on that one and we will import these icons from Lucid icons so let's just copy this icon and here we'll write import cly bracket and from here we have to import so we have to it from Lucid react and P icon like that so copy this users also you can so you can pass any icon or any data according to your need but this is a sample data so so this sample data I have created by myself so let's also add this credit card data here credit card icon there this activity also and paste it there like that and we have to also give the type for our card data so let's go to the card component and here if you will see there I'm already exporting this card props and we will use the type for that card data this card props so let's just copy this one and uh come to your main page and paste it like that so let's go to the card again so this is showing us a single data and if you will come to the main page so here we have added a square so square bracket means here we are passing a array so this is the array of this object so let's import this type and now our error is gone and now we have to map our data on that place so for that first of all let's create a section there and let's style our section so before that first of all let's see the final output and if I will press F12 so we are on the mobile screen so you can see that currently here we are getting a single column for these cards so let's go to the UI and here we will use a grid and on that grid let's pass a of full and by default this will be the grid calls one and GAP will be four and GAP X will be 8 and we will also also add a transition all so that when our data is changing from row to column so this will show in a form of animations and when our UI will come on the SM screen so here let's add SM and here we will show our data in two columns so for that here we will write grid calls 2 and when our UI come to the Excel screen so here we will show a grid calls 4 and let's save this now we have to map our data here so let's add a curly bracket there and uh this is our card data so let's copy this card data from there and paste it there and now here we will use a map to map our data and inside that we will use Arrow function and now here we have to use our card component so let's copy this card component from there and import this on that place and press control space so this will import that card component and uh this is showing that our keys properties missing so on that map first parameter is data so I will denote that data to D and second is index so for the index I will denote it with I and let's add a key there and pass I and we have to also pass other props so that's why this is showing us errors so let's PR control space and add amount description icon and label so for the amount here we'll use D do amount for the description here we will use a t do description for the icon here we will use the same T do icon like that and uh for the label D do label like that and let's save your code and see our final output so now you can see that we got our data so if you will check the code again here currently we are on the mobile screen so that's why we are getting this single column and when we will come to the SM screen so this will convert our columns into two columns so check it there currently we are on the mobile screen so that's why here we are getting a single column and currently we are on the SM screen so that's why we are getting this two columns and after that we have passed the condition when we are on the when we are on the Excel screen so this will go to the four columns so let's close this inspect element and now you can see that we are on the Excel screen so that's why we are getting this into the four columns like this and here we have successfully completed our card component and we are also showing this in a proper UI and now let's see what we need to create next so see the final output there and here we have to create another section this is second this will be the second row and inside that second row we have our two data or two sections that is overview section and this recent sales section so first of all let's create a section and after that we will create this graph or chart bar charts comp component so here let's add a section tag there and add a class name for this section tag so here we will pass a grid and by default this will be the grid calls one means on the mobile screens this will show us on the column one and let's add a gap of four and transition all and on the LG screen we will make our grid columns to like that and first of all we have to show this graph so if you will see there carefully so our graph is inside that container that component we have created previously the name of that component is card content let's see on the card component here we have created this card content so let's copy this one and go to your page and paste it there like that and let's also import this one and suppose I'm just writing any any text there and uh see the final output so now you can see that we got our text like this and after that here we are also getting a border so we are getting a border with help of this component that is card content and inside that we have to create this output so first of all let's add this overview text so for that here I will add a paragraph tag and inside that just simply write overview and add a class name for this one this will be pring four and font semi bold like this let's remove this unknown text save this and uh see the output so we got our overview and now let's create a bar chart component so again let's go to that component folder and here we will create a bar chart. TSX and just simply write tsfc so this will create a sample component for us and this will be the bar chart so let's copy this one and let's also rename this file so to create our bar chart we will use another library that is called three charts so let's go to the browser and uh search for three charts npm and go to that npm website and click on that npmi click on that copy button and come to your code and install this library and after that if you will see the final output there here you can see that our bar chart is fully responsive so for that what we will do we will import responsive container from recharge Library so first of all let's write import and curly bracket and from where we have to import we have to import it from recharts and what we need to import so we need to import a responsive container so here I will just write responsive container and copy this responsive container from there and replace it with that D like that and inside that responsive container we have to pass a width and height so for the width we will pass a 100% width so here I will just write 100% And for the height we will give the 350 height and inside that responsive container we have to use a bar graph here we have to use a bar chart so we will import our bar chart from from T charts here I will write bar chart and add a comma so if you will see there we have already created a component with the name of bar chart so we will import this component with the different name so here we so here we can change the name of our component and uh here I will give that component name like bar graph like that and we are importing our bar chart component as bar graph so this will act as same so let's copy this one and paste it there like that and inside that we have to configure our x-axis and y axis and uh before that we have to also pass our data so there is our data props and inside that data we have to pass our data so for the data I'm going to use this data you can pass any data or you can create your own data so here I have created a data with two properties there's a name and total so on the total I'm just getting a random number with this math. blor method and for the name I have added there like January February something like that so let's collapse this and uh here on the place of data we will pass this data and now we have to configure our xaxis and y axis so for the x-axis we will also import our x-axis from our three charts so you can import your xaxis like that and uh now let's add a x-axis and make it Auto close and now you have to also import a y axis so here I will just write Y and now you can see that we got automatic solation and uh now let's make it their uh y- axis and let's save your code and see the final output so here we have to also import this component in our main page so let's copy this one and uh import our component on that place like that and let's save your code and see the output so here we got an error so what we need to do so we have to convert this barjat component into a client component so let's go to the code and here we will write use client like that and let's save your code and uh now our error is gone but uh here we're not getting any data so let's go to the the code and configure our x-axis and y axis so here for the x-axis here we will use a data key and on that data key what we need to pass so if you will see there so we want our x-axis should be denote with this property with that name property so here I will write that name and uh for the tick line we won't want tick line so we will make this false and for the AIS line we will also make this false so for the Stu we will pass some color that is # 8888 like that and uh we will also make this font size so just write font size and make it 12 pixel so let's save this and see the output so here we got a January February but uh right now we are not getting any data because we haven't configured for y axis so let's just copy this one and uh paste it on that place and for the data key we don't need this one so let's remove this one so we have to also add our another component that is this bar so first of all let's import our bar from this three charts so I will just write bar like that and uh after that here just write bar and on that bar we will make a data key we will pass this data key that is total so let's add a total there and after that here we can also configure a border radius for our bar so for that here we will use a radius props and uh with the help of this array we can configure our four sides of radius so here we can pass 4 comma 4 comma 0 comma 0 this radius and uh let's just save your code and see the output so now you can see that we got our graph like this and uh one thing is also if you will see their final output so here on our amount we are getting a dollar symbol there but on that place we are not getting a dollar symbol let's see how we can add a additional text there so for that here we'll use a tick form Dr and inside that we will pass a function and uh this will be the value so this will contain the value and after that here we will use a backx and after that we can style our value that we want so in that place we will pass a value like that and here I have added a two times dollar because one time is to pass out JavaScript and second time to show this variable so let's save this and see the output so now you can see that we got our dollar symbol there like that so here we have also successfully completed our bar chart section so now let's see the final output and now we have to create this recent sales section so let's come to the code and on that main page and on that section we have to again use this card content component like that and on that first of all let's write these text so for that here I have simply created one paragraph tag and on that second paragraph tag I have added this you made a 265 sales this month and on that I have just added a simple text SM text gra 400 and let's save this and uh see the output so now you can see that we got our text now let's see how to create this component and uh we will also create this component only one time and after that we will map this using a data so let's go to the code again and on that component folder here we will create another component with the name of sales card sales card. TSX and let's just simply write TS RFC and press enter so this will create a sample format component for us and uh if you will see their final output so what we have here so first of all we have our icon and uh this username email ID and amount so basically we need these three props that is name email and sale amount so what we will do so we won't pass this outar icon from our props so what we will do for now we will use another third party library and on that Library we just have to pass the name of our icon and uh this will automatically gives us a AAR for our name so first of all let's create this comp component and here let's copy this sales props and replace with this props on that da we have to pass these classes that is flex Flex W justify between and GAP three so let's see the final output why we are doing this so here you can see that our all content will be justified between and here we are also passing some Gap and uh when this will come to the Mobile screen so see there carefully when I will go to the Mobile screen our amount is automatically on the second line so this is happening with the help of text W now let's create a section and on that section we have our image and uh this name and email ID so let's add a class name there this will be the flex justify between and G three so this container will contain two elements like uh first one is image and this is right hand side so for the image let's take a div there and inside that da we will use our IMG and for now so and for now let's disable p and now let's style our image tack so for our image we will give the height of 12 width of 12 and uh this will be the rounded full and we are passing a BG gray 100 and padding one so see the final output and on that final output if you will see there so here we are getting a BG gray something like that and uh this is also rounded full so that's why we are passing this rounded full and BG grade and here we have passed height of 12 so 12 means height will be 48 pixel and width will be 48 pixel and on that IMG here you have to also pass a height so here we will pass a height of 200 and here we will pass a width of 200 and height of 200 and again we are getting this error so let's disable this by clicking on that one and here for the alt we will just pass this AAR because here we will use AAR image and uh there comes our main part for our alar image let's go to the browser and here we will use here we will use these altars and uh let's go to their official website so this name is Dice beer so let's click on that dice beer and here you can use any icon that you want here they have given lots of Icon so I have configured these icons according to my need so you can configure your icons from there so like I want to use these types of icons so I have just click on that option and after that you will get your icons like that and if you want to use this icon so simply just click on that how to use click on that place and here you can use your IC like that just copy this one and add your image address so for now let's see there I will just copy it from there and come to my code and paste it there but here what we need to do we have to change the icon for every users so here on the place of this name we will pass this conditionally we can pass any name that we want so this will render accordingly so here we will use a back so cut this code and use a colly bracket there and after that here we will use a dollar symbol to pass our to pass our jav JavaScript and on that place here we have to pass a name so here we will use a props and after that here we will write props do name so now we have created a UI for our alar image now let's create a UI for this name and email ID so for that here again I will use another dip and on that dip we have a paragraph so this will contain a name so here just write props do name and on that another D this will contain an email ID so here we will write props do email like that and uh this will be the text SM and let's add a class name there so this will be the text small so that's why here we are using a text SM and for our email ID here we will use some classes so first of all let's add and after that I will explain you what is the use of these classes so here we are just simply passing a text gr 400 and uh if you will see there here we have passed text ellipse and overflow hidden and white space no app and after that width will be 120 pixel and on the SM screens we are passing over with auto so let's see the final output and uh here if we will go to the mobile screens so now you can see that here we are getting our emails like dot dot dot dot dot so we are getting this with the help of this text ellipse so here on the SM screens we are making our width size will be 120 pixel and after that here we are also passing white space no W app so with the help of this white space no WRA this will come into the single line and after that here we are Al passing overflow hidden so overflow will be hidden and on the place of hidden with the help of this text ellipse this will show this triple dot like that so that's why we have added these classes and now our name and email ID section is done now we have to also add a section for this amount so here we will use a paragraph tag and inside that here we will just write props do sale amount like that like that and now we have completed our sales card component so let's just copy this sales card component and come to the main page and now we have to render our sales card component on that place so let's just import this one and uh before we render this on that place first of all let's create a data for this sales card component so here I have created a data for our sales card component so on that data we just have a name email ID and sale amount so if you will see there so name is like Olivia Martin and email ID and amount so all these data is following same pattern and after that here we are passing the type of data that is sales prop and uh we will get this sales prop from this our sales card component so let's just press control space and import this sales prop and use this user sales data and now we have to map our component so here we will write user sales data do map and here we will use Arrow function and inside that Arrow function we have to get two parameters first one is data so for the data we will use D and for the index we will use I and now let's add a key key props there and on that key you will pass I and uh let's press control space so there is a email ID name and sale amount so on the place of email we will pass d. email on the place of name d. name and uh on the place of sale amount D do sale amount let's save all of our code and uh see our final output so now you can see that our final output is looking something like this this is not good so we have forgot to add a class name there so let's go to that container and add a class name there and inside that we will add a blackx call and this will be the justify between and here we have to also add a gap four and now let's save this and now we got a equal space but this is not okay on single component so let's go to that sales component and here one thing is wrong we have to add this paragraph tag outside of this section so let's save this now and uh see the output so now you can see that our UI is looking proper good and and here we have successfully completed our dashboard page and if we will check this UI for mobile so let's go for the mobile and now you can see that this is also looking good for the mobile and this dashboard page is highly responsive so here we have successfully completed our dashboard UI page so now we have to create a users page so let's check the final output and there is our users page so in that page we are rendering a table so basically this is a data table so we will go to the Google and search for S CN data table and after that click on that first link and there you will get the data table example so let's see how we can use this data table so first of all we have to install table component so I will copy the command from here and come to your code and paste your command like that so now our table is installed so let's go to the UI and see there so here we have our table component but now we need a data table component so let's again go to the browser and see now we have to install this TCH react table Library so just click on that copy button and we want to install through npm so click on that npm and uh come to your code and install this react table and now this package is also installed now let's see what's they are doing so there they have given one example how we can use this so now we have to create our data table component so I will copy this whole code from there and come to my code and on that component folder we will create our data table component so here I will just write datat table. ESX and after that paste your whole command there and here we are not getting any error and now let's see what we need to do next and uh here we can use our data table like this they have given the example so let's close all these files and save it and we have to go to the users page here we have to use our data table component so for now I will just copy it from there and uh paste it there like that and now let's import our data table on that place and now we have to create a columns and data for our data table so for the columns and uh data here so here they have given the example for this data so for now I will just copy it from there like that and uh paste it there and this is our data so our data is done now we have to create a columns so on that place they have created The Columns so what we will do I will just copy that column from there and uh paste it on that place like that and uh now we are getting error like uh this column Dev so we have to import this column def column definition from 10 St react table and now we are not getting any error and here we are getting error because here we have defined our types two time so let's remove this one and now we are not getting any error and here we have successfully created the UI for our data table and before that let's also get the title for our users page so here we will use a page title component so this is our page title component and let's convert into a component and here we will pass our title and here we will pass users and let's also give the space between this page title and data table so let's go to the page. TSX and here we will copy the class name from there we will copy this class name from there and again go to the users page and add this class name there and let's say this and uh see the users page so now here you can see that we got one example for our data now what we need to do we have to update our data according to our Mees so let's go to the code so let's see the final output and if you will see there so here we are getting a and so here on the users page we are getting a users image and users name and after that just email and last order and Method so let's go to the code and update your table from this and update your table like this and here we have created a four columns according to our needs that is name email last order and Method and let's save this and see our output so here we got our columns but uh we are not getting our data because this data is not matching with this column so now let's also create a data for our columns and here we are using this payment type so let's also update our payment type so the type will be this and here we are using four columns that is name email last order and method and uh if you will see the data so on that data here we are also passing name email ID last order and Method and let's save this and see the final output so if you will see there so here we got our data and columns in a proper form and uh but there's a one problem here we are not getting a user image so let's see how we can update our users image so let's go to the code again and uh if you will see there we have to update our we have to add a users image in a First Column so so the First Column name is this name so add a comma there and uh here we will use a cell prop and inside that cell prop we will use Arrow function and uh this will destructure us a row so here we will return a us a return and if I will just write div and here if I will write something like uh row. get value and which value we want so we want name value so here I will write name and suppose I will just write their name like that and let's save this so here we are getting error so we have to convert this page into a client component so here let's write use client and now our ARR is gone so if you will see there here we getting a name name name name and the user's name so what we need to do so we have to somehow add the users image there so if you will see there I'm using that image API that we have used previously and on the place of name we are just passing that name that we will get from the data and uh after that here I'm just entering a username and on that place here I have just given a flex Gap 2 and items Center so let's save your code and see the final output so now here you can see that we got our user image and username and here if you will see there so here here we are rendering lots of data so we also need a pagination on that place so for that what we will do we will again go to that setan UI and here we will find out the pagination so just scroll down there and uh there you will get that how they have implemented a pagination on that data table so this is our data table component and inside that component they have imported this get pagination model so here what we will do we will also copy this line and uh go to our code and we have to go to our data table component and uh here we have to import this one like that and press control space so this will import it from D react table like that and this one is the same that we have that we have imported and after that what we need to do we just have to copy this code from there and uh come to your react table and here we will create another div and after that I will just remove this one and copy this again and here we will paste our code like that and here we have to import our button component so let's just press control space and enter so now save your code and see the output so now you can see that we got a button there go to the next page and when I will click on that next page so so we are on the next page of this pagination and uh when I will click on that previous page so we are on the previous page of our of our users page so here we have completed our users page so now let's create orders page so for the orders page we will do the same so let's remove this one and copy this whole users page so I will copy it from there and uh come to my orders page and here I will replace everything from this and here I will just write and here we have to also change the page title like orders and now we have to update our columns and data so for the columns we will use these columns that is order status last order and Method if you will see the final output there so there are these four columns that we have created there and uh if you will see carefully so here we are getting a different color different colors for our pending processing and complete so here we will add a condition like uh if we will get a pending so we will make our background color this red color and if our status is equals to processing so we will show here orange color and if this is equals to complete so we will make this background green so let's see how we can do that so we have to update this on a status so here we will again use a cell and inside that here again we will use Arrow function and we have to return so here I will take a one Dave and here we have to D structure a row from there and here we have to write row. get value and which value we want so we want the status so I will copy it from there and uh paste it there so before we make a conditions for our background color so let's add a data for this table so this is our columns and this is our data so here I have replaced my data and here we are getting an error because these data is not matching with our types so now let's create a new type for this data so this will be our new type for this data that is order status last order and Method so these are the basically columns and uh these are will be the string type and uh here we are just simply passing on that place and for now I have created all these sample data with chat GTP and when I will save my code and see the output so let's go to the orders page so now you can see that we got our orders and uh here pagination is also working there because we have applied a pagination on our global data table component so that's why this pation will apply all over the component and now let's change the background color for this status so here we'll come to the columns and here we will use a class name on that place and here we have to pass our background color conditionally so that that's why we will use a CN function so let's import our CN function there and by default we will pass these class names that is font medium with bit wding X4 wding Y2 and rounded LG and after that add a comma there and pass your conditional classes like that like if this row value equals to pending so we will show their red color and if our status value equals to processing so we will show this orange color and if this is equals to completed so we will show green color like that and uh let let's save your code and uh see the output so now here you can see that we got a different colors for our status also and our pagination is also working and uh obviously this is also a responsive like this and now we have just left with our settings page so let's go to that UI and here we have only two columns so let's go to the page so here I will copy all this code from there and uh come to our settings page and uh paste it there like that and uh give this page name settings and here we have to also replace this orders with settings like that and now we have to update our columns and data so now in that case we just only need two columns The Columns will be this category and value and uh we have to also create a different type for our settings page so this will be the type for our settings page that is category and value so that's why here we have passed a category and value so these are the two columns and now we have to also update our data according to our settings so this is our settings data so now let's save this one and now you can see that we got our settings data and if I will go to the ERS page so this is our orders page and uh this is our users page and this is our dashboard page and this whole UI is mobile responsive like that and here we have successfully completed our whole dashboard page using stui and nexts now it's time to deploy our application on versal so let's go to the code and first of all we have to deploy our application on GitHub so here we will commit our code so for now I'm just giving a DOT and before that let's save your all code and uh here I'm just pressing on that commit button and click on that publish and I want to make my repository public so here I will click on that public repository so now go to your GitHub account so here you can see that we got our project here San dashboard and now we have to deploy this repo on verel so open the new tab and here just search for verel and uh click on that first link and after that click on that add new and click on that project and select your project from that place so now we have to select this our this setan dashboard so I will just click on that import button and uh now just click on that deoy so this will take a few minutes first of all this will take some time in building our application and after that deployment summary and this running checks and after that this will assign your domains so let's wait and here if you will see there so we got an error so what is the error see there so here we are getting error on our ERS page and what is the error that does not match with the required types of next data is not valid export field so let's go to the orders page so here we will go to our orders page and uh see there what is what's wrong so let's try to remove this export from our columns and uh from our data also and here before we deploy our application let's try to build our application there so if there is something error so we will get our error on that place so here we will write another command that is npm run build so this will build our application locally so if there is any error so this will show on that place so before we make our build let's first of all let's close this let's cancel this build and uh we have to close our server so so I will press contrl C there and uh terminate my server like that and now here we have to write again this command so go to that terminal and again run npm run build and here we are again getting error on orders page so let's check the code again so here now I got what was the error so here we are exporting our columns and uh data so we don't have to export it from there and also these are the variables that is locating above of that variable so what I will do I will cut these code from there and uh paste top of that function on that place and uh let's save your code and now we have to do it same for that settings page and users page so let's do it again so here I will copy all this thing from there cut this from there and uh paste it there and we don't have to use export there and there also and there also and save this file and uh go to the users page and for the users and for the users page we have to do it for the same so let's remove this export and cut this code from there and cut this columns and data and type from there and paste it there and save your code and now again run this command that is npm run build and press enter and our build is successful so now we will add another commit like fix build issue and press control enter and click on that sync changes so now we have successfully committed our code to online so this commit will go to that GitHub and now again go to that personel so go there and uh go to that homepage and check that set dashboard again and now here you can see that we are getting our commit there so this build is in the process so this will take a time and we can also check this build process by clicking on that so now here you can see that our build is successful now click on that button so this will redirect us to our new page and here you can see that we got our dashboard there and let's check this so this is our users page and this is our orders page and this is our settings page and our sidebar is also working fine and uh let's check it for mobile and on the mobile this will look like this so now we have completed our dashboard and we have also downloaded our application on verite and if you are new to my channel so you can check out my my other videos also I've uploaded so many videos regarding next year's ta CSS and typers script and if you found this video helpful so don't forget to like share and subscribe my channel for more content like this until then I will see you in next one d

Channel: react with utkarsh

Views: 17,628

Keywords: React JS, Tailwind CSS, Nextjs, react with utkarsh, Next.js, TypeScript, Shadcn UI, Responsive UI, Web Development, Frontend Development, UI Design, Dashboard Design, JavaScript, CSS, React, User Interface, Web Components, Web Design, Frontend Frameworks, Application Development, UI Components, HTML, Mobile-Friendly, Frontend Engineering, Progressive Web Apps (PWAs), Design Systems, Frontend Tools, Interactive UI, Modern Web Development, Development Tutorials, Cross-platform UI

Id: l_I9CewUMRg

Length: 76min 33sec (4593 seconds)

Published: Mon Jan 08 2024