How To Create a Dashboard using Nextjs 14 & Shadcn UI Tutorial

hey guys and in this video we're going to be creating a dashboard on nextjs now this is my starter kit website and I'm going to show you what our dashboard is going to look like when I click on get started here I see this beautiful dashboard now the information is placeholder information but I have the Home tab projects Finance setting and one thing you'll notice is every time I'm on a different tab the URL changes right which is fantastic and this is what we're going to build and I'm going to show you how simply this can be done with very minimal code now one thing I need you to understand before we get into it is that the sidebar and the navbar are um shared shared UI like this will not change the only thing that changes about the sidebar is what tab is highlighted depending on the URL depending on what uh slasher on so slome like SL dashboard home lights up slash dasboard SL projects projects light up etc etc so this is what we're going to be building one thing you will need is shaten um and nextjs obviously I already have a fresh install ready to go and all that I have is on my main page I have this uh toggle to do between light mode and dark mode we'll do light mode for now and I have a button that will forward me to slash dashboard think of this is a beautiful homepage kind of like my starter kit here but um we're just going to have a button here and then when I click on it it should take me to the dashboard but I haven't made anything yet which is why it is empty so let's go back let's do dark mode all right so let's create our dashboard so I'm going to create new file type in dashboard page. TSX what this does is it'll create a folder dashboard and then page. TSX and then I'm going to use RFC to create a react functional component we'll call this dashboard page and then if I save this and I go to dashboard I see dashboard page that is beautiful now one thing that we're going to have to do is we're going to create a layout. TSX and the reason why we have to create the layout. TSX is so that we can have the sidebar and the Navar be shared amongst the different routes right so in order for us to do this we're going to have to use layout. TSX and for Simplicity sake I'm just going to copy paste the existing one paste it here but I will be removing all this stuff right here I will change this to dashboard layout uh we'll remove the global. CSS and then we'll remove this font stuff as well just clean it up this is all we need now what we're going to do is we're going to write some J SX so let's do div and in the div we're going to do class name grid Min height screen withth full and then we're going to do large viewport grid calls 280 pixel 1fr all right and then now there's two things we have to create we have to create um we have to create our dashboard sidebar and then we have to create our dashboard nav right so let's do the sidebar first so we're going to do dashboard sidebar let's do sidebar right and let's create this component so what I'm going to do is under the dashboard folder I'm going to create new file and I'm going to do bracket open components and I'm going to do slash dashboard sidebar. TSX so what this does is it creates a a folder with uh brackets and the brackets essentially are saying this isn't a route right so I I don't usually put components that are going to be used in a specific folder once um in the components folder I'll just create like an inner component folder just for Simplicity sake and it just makes things easier to find later down so we're going to do RFC again we have dashboard sidebar and we're going to make sure this is important properly so we get rid of the errors and we're going to save this and we are going to do one thing we're going to make this a client component and I'll explain why in a second let's go back to our thing all right okay no errors we're good to go so now we're going to work on our sidebar now our sidebar again is going to require a little bit of um jsx I'm going to copy paste it here instead of writing this whole thing out and boring you guys uh but I'm going to explain exactly line by line how this works so the first div um large uh LG block hidden border R height full so basically this when it's a large viewport so large meaning uh greater than 10 1024 pixels um this sidebar will show but if it's less than 1024 pixels this is Default hidden right and the reason why this is the case is for example in this dashboard when I make the screen smaller notice how the sidebar disappears because the assumption is the person's now on tablet or mobile and you should probably have some sort of uh drop down like that or sheet I think that's what it's called in shat CN uh cuz it just makes for a better user experience so that's what this does and then this is just organizing uh setting the height all that type of stuff so let me import um next link and then this clsx is a very important uh import essentially what this does is this allows you to I believe it's conditionally render CSS so if I do uh clsx react a lightweight utility driver used to manage applications of CSS classes so basically you can use it to uh render specific classes based on a condition you set and I'm going to show you that condition in a second let me just import um I'll just do add all missing Imports some of them are oh I need to install Lucid react which is um an icon uh Library one of the best ones in my opinion one part I want to show you is how I use the clsx uh utility uh function so essentially what this does is you wrap your classes with it so I wrap two sets of class classes so the first one is when it's not highlighted so notice how when it's not highlighted nothing is on it but when I click right and I'm on/ projects notice how projects is highlighted the way we achieve this is I use clsx I have my first set of classes and then I do comma and then you open a bra you open brackets and then it's it's essentially an object you have your second set of classes and then you have the condition to which this second set of classes um activates so notice how I have path name equals equal SL dashboard so what I'm going to do is I need to import um use path name from next navigation and what this essentially does is I I'll show you guys how this works is when you let me conso log path name and show you how this works so if I conso log path name notice here that when I console lock path name I see/ dashboard and that's the path that I'm on so the reason why I'm going to use path name is path name is going to allow me to check what path I'm on and if that path is uh the one that corresponds with what I want highlighted then the second set of classes will fire so for example you notice here home is highlighted now let me just create another page um called uh projects so we're going to do projects we're going to do page. TSX and we're just going do a random component I just want you guys to see how it changes so when I click on projects you see that and again no no IFL statements none of that all using clsx right so very simple very intuitive and just to keep uh just to show you that this is not a lot of code we're just going to remove every other link other than home and projects because that's all we need so again this is how much code is needed again all you need is the link tag right you have your class names you have your two sets of classes the first one when it's not uh clicked on the second one when it's clicked on um and you're essentially just going to copy paste these classes and then I have a nice icon so that it can you know it just looks nice um and you do the same thing make sure you have an href that takes you to that path and then the path name um also make sure you use use path name get the path name and then check if it's equal to the specified path that you want highlighted and this is how easy setting up a sidebar is so now that we have our sidebar set up so let's work on our navb bar so now I'm going to do dashboard nav I'll just do dashboard Navar right and I'm going to do main class name Flex Flex column Gap 4 P4 and then large gap six now these are all design preferences you can have this however you want I just want to show you how it is that we we uh create a dashboard so I'm going to go to my components I'm going to do dashboard navbar ttsx going to make sure this is imported uh wait did I oh let me do RFC here and then let's make sure this is imported now it's going to give me an error because it says um we're wrapping it seems to be we're wrapping something but we're not we haven't specified it in dashboard na dashboard navbar so that's what we're going to do so let's go dashboard navbar and the first thing we're going to do is we're going to pass a prop and this is the children's prop and children is a react note and that should should work and then again I'm going to drop over some jsx and we're going to go over it instead of seeing me type this line by now let me show you how we have the Navar set up so the Navar again wrapped by div Flex Flex column right so we have a header component and now here here's where it gets interesting so we have dialogue and then dialogue is triggered by a hamburger menu icon and when the hamburger menu icon is clicked right the sheet content opens now in order for me to show you how this looks we're going to go back to our layout and then we're going to wrap we're going to place our children here essentially what this is going to do is the navbar is wrapping the entire uh the the entire dashboard aside from the sidebar right notice how this nav bar pops up but there's one interesting thing I want to show you when I when I make the page smaller notice how the sidebar disappeared and now we have this hamburger menu that when I click notice how that that pops up and this is how works let me go back to our code and let me show you so in the Nash uh in the dashboard navbar this dialogue is uh has a sheet trigger right so basically that hamburger menu Tri triggers so that this content can show and this content is essentially um just a title and and then you have some buttons right again if I show you this if I minimize the screen when I click on this these are just buttons If I click on projects it's just going to take me to SL project if I click on home it's going to take me to slash dashboard and again this is all thanks to shaten if you go to sheet that's that's what it is I just have it popping out from the left so that's literally all it is and at the end again the Navar wraps children so you can think of it as the Navar sort of um on top and technically it could be in the bottom as well if we had like a footer but it's not and the children is wrapped by the nav bar so the way we have things set up now when we go back to our layout we have our dashboard sidebar we have our dashboard navbar that wraps our children now here's the interesting thing we're pretty much done all you have to do now is go to your sidebar and if let's say you want to add another page let's say I want to add you um videos page all I do is copy this link paste it underneath I'll do dashboard SL videos I'll do path name dvideos here right and then we can name this tab videos and then all I have to do is create a page under dashboard so I'm going to do videos SL page. TSX and I'm going to do RFC videos right and I'll say this is the videos page and when I click save if I go back to my project I'll see the videos tab I click on it this is the videos page and in order for it to show up on the mobile view I need to go to my I need to go to my navbar so dashboard navbar go to dialogue and then literally just copy here like from dialog Clause to dialog close paste and what was it videos and this is going to be/ dasboard SLV videos right so let's test it out make the screen small I'm going to go to home we're on the homepage and then when I click videos SLV videos and ladies and gentlemen that is how easily you can build a dashboard right very intuitive very clean um in a very simple manner now the code for all this is in my starter kit so you can go to starter. rmic doxyz or you can click on the GitHub um link down below and you just go to/ dashboard um the file con convention I use is pretty much similar and I just wanted to show you the thought process behind it again I will have the GitHub link Down Below in the descriptions just go to the dashboard folder in fact I'll just show you for Simplicity sake so you go on my GitHub next you starter template and then you go to app and then dashboard so everything is here here for you the code is all here I just wanted to show you my thought process behind How I build dashboards but thank you so much for watching this video I hope you enjoyed it let me know if you want to see something else if you have any feedback make sure to like comment subscribe hit the notification Bell as always guys thank you so much for watching and I will see you in

Channel: Ras Mic

Views: 3,891

Keywords: nextjs dashboard, nextjs 14 dashboard, nextjs shadcn ui, nextjs shadcn design, nextjs ui design, nextjs ui shadcn, nextjs shadcn dashboard, nextjs 14 design ui, how to design nextjs 14, design ui nextjs 14, shadcn, shadcn ui, nextjs tailwind, nextjs shadcn ui tutorial, nextjs design tutorial, shadcn ui blocks update, aceternity ui, aceternity ui nextjs, nextjs design, designing for developers, how to design as a developer, nextjs design system, hyperui nextjs, react design

Id: NXW1vGtKnQE

Length: 15min 16sec (916 seconds)

Published: Thu May 16 2024