Admin Dashboard From Scratch - Next.js, TypeScript, Shadcn/ui

what's going on guys so I got a pretty cool project for you today we're going to build an admin dashboard area using nextjs typescript and Shad CN UI and some other smaller packages like recharts and Lucid react for icons but the main focus is going to be Shad CN UI which isn't really a traditional component Library it's a collection of reusable components that you can either copy and paste from the documentation into your project or you can use the CLI which is what we're going to be doing now before we do anything I just want to show you a really quick demo of what we'll be building so we have our main dashboard homepage area here the Navar at the top I just called it traversy press and then we're going to be building a theme switcher so here you can choose from light or dark or whatever your system uses which in my case is dark and then we have a little Avatar component with a drop- down we're not going to be doing the profile page the main Pages we're going to do are the dashboard home the post the edit post page as well as a a login so if I click log out it'll actually redirect me to SLO where we have the tabs component from Shad CN UI so I think this looks really cool where you can just toggle login and register now for forms we're going to be using react hook form and Zod for validation which integrate really well with shad CN so you'll see if I try to submit this we do have some validation we'll create a form schema and set up our rules and then if I do click sign in there's no Authentication but it does redirect me to the homepage now on the homepage we have some cards that we'll create with just some resources and count and and some icons from Lucid react this chart is is from recharts which is obviously a chart library and this just represents the the website views now the views and the posts the data is going to come from typescript files it's just going to be stored in an array if you want to you know take this further and use an oi r m in a database you can do that if you want to create some kind of backend API you can do that but this is a front-end video so we're just creating the interface and then down at the bottom we have the latest posts so we just have a table with the latest five posts on the side here this is a a component called command and it's pretty cool because you can have your links but you can also filter through them as well so if you have a bunch of stuff here you can filter through and then if we go to the Post page again we have the table with all the posts we have a pagination component if I click edit that takes us to the edit page and again we're using Zod so we'll create a form schema and we'll add some validation now we don't have any kind of backend to submit to but if you do submit this you'll see this little toast component so we'll set that up as well um and then as far as the the design goes we're going to be using a lot of Tailwind classes because Shad CN UI is actually built on top of Tailwind so you can use Tailwind class classes and we will make it somewhat responsive so you'll see if I go to mobile view all the cards stack um even the chart it's a little squish but it does fit in there we took away some of the columns on smaller screens so we'll be doing a lot of Tailwind stuff as well all right so that's the plan let's go ahead get a coffee get a tea whatever and let's get to [Music] work today's video is sponsored by mail trap an email delivery platform that developers love what's cool about mail trap is its actionable analytics they're the best in the industry with full statistics and drill down reports on each and every email you send they also offer separate streams for transactional and bulk emails SMTP as well as API Integrations mail trap also includes sdks for many of the major programming languages at mail trap actual human support is available around the clock for all customers and you can try it today by visiting mail trap. all right so we're going to get started on our project and this is something that I would definitely encourage you to follow along with and not just watch because you know obviously typing everything out is going to help you learn more than just watching so Shad CN UI I would say is the main technology of this tutorial I'm assuming that you know the basics of nextjs and react and uh we are using typescript but we're not using it a ton basically just using using it for props so if you don't know typescript that's that's fine um and then we're using some other things like recharts for the the analytics chart and the dashboard we'll be using Lucid react for icons and just some small small packages as well now Shad CN UI is a I hesitate to call it a component library because it's really just a collection of reusable components and Shad CN is built on top of two things radx UI or rad UI and that is a a very low-level unstyled component library and then it's also built on Tailwinds so you can actually use Tailwind classes with it and style it style these however you want and there's two ways to use components you can copy and paste them into your components folder so basically just come to the website here go to components you can see all them on the left here so for instance we got a draw component and they're really goodlooking right off the bat but of course you can style them however you want want you know pagination whatever and you can see the code here so you can either copy and paste them or you can use the CLI which is what I what we're going to do and what I would recommend so an example would be if you wanted to use this pagination you could run npx Shad C nuui at latest add pagination so just replace this with any of these components that you want to use and what that'll do is it'll create a file in components slui pagination Dot TSX or jsx whatever you're using and then you can just bring that into you know any file you want any page or other component you want to use it in and to use the CLI you do have to initialize it so if you go to docs and then installation and you can use it with any of these Frameworks NEX V remix anything that uses react and then to initialize it we just run npx Shad CN UI at latest and then init and that'll create a components. Jon file which is our basically our Shad CN config file all right so as the doc documentation says we're going to just create a new Next app first so let's jump into the terminal and I'm going to run npx create-- app at latest and I'm going to call this traversy press- UI because it's like a simple version of the WordPress admin and then just do-- Tailwind because we want to create our Tailwind config and get that set up um now would you like to use typescript I'm going to say yes and even if you aren't familiar with typescript that's fine we're not doing too much with it just use it for like props and stuff eslint I'm going to say no Source directory no app router yes uh would you like to customize the default Alias no and then it's going to get set up and install all of our dependencies okay so now I'm going to CD into that directory and I'm just going to run code Dot and open up vs code of course if you want to use a a different text editor you can so just bring this over here and then from now on I'm just going to use the integrated terminal so I'm going to open that up and let's run the server so we'll run npm run Dev okay so we'll get that going on Local Host 3000 should just see just the default uh landing page all right and then I'm also going to open a new console so that we can install packages and we can set up components with the CLI and then let's just do some basic cleanup so in the app folder I'm going to go to layout and just change the title here so I'll change it to traversy press and then for the description just say admin dashboard okay and then in the homepage which is the page. TSX file we don't need the image the image import and again I'm I'm not going to go over the basics of nextjs like the the app folder structure and routes and stuff like that you can check out my nextjs crash course if you if you want to learn the basics and I also have a premium course uh I think it's like 13 or 14 hours and that's on my website and on udemy and I'll have the links for the for those in the description now for the return I'm just going to get rid of of all this crap and we're going to just return let's just do a fragment and in that we'll do an H1 and we can use Tailwind classes so for instance we can do text- 2XL and let's just say dashboard all right now we want to initialize Shad CN so down in the terminal I'm going to run npx Shad cn- UI at latest and then init all right so that's going to initialize that's going to create a well actually we have to select uh so this is like the style I'm going to select default and then you can choose make this a little bigger you can choose a default color so I'm just going to go with slate and then there's also CSS variables I'm going to say yes for those and we can use the there's going to be classes we can use like BG primary um but we can also use the regular Tailwind class CL as well as you can see I just did right here now running that command created this component. Json file and this is used to configure Shad CN it has uh like the location of your Tailwind config it has the uh if you're using typescript or not it has your you location of your CSS file so just the basic configurations there's nothing in here that we have to do or ADD and then it also created this lib folder with this utils and there's just a fun function in here called CN which allows you to conditionally apply classes to your components and I'll show you how we can use that later all right so we have it initialized now before we start to work on our project and the UI I just want to show you the process of bringing in a component and using it so let's do the button component since that's something that's very simple and it's something we'll be using later so in the terminal here I'm going to run npx Shad cn- UI latest and then add and then whatever the component I want in this case button okay and what that's going to do is it's going to create a a file inside components and then inside the UI folder called button so if we wanted to use if we wanted to customize this in any way we could do that you know like let's say we wanted to add another variant because you have these different variants destructive outline secondary ghost different sizes so you can add to this very easily um now to use it let's go into our we'll just do this in our page I'm not going to keep this code so it really doesn't matter but we can then import button from components UI button and let's say I want to use it right here so button and we'll just say click me all right so there we go we have a button it has the hover State and all the you know normal things a button would have and we can pass in props so again if we go to the code here we have a prop of variant and we can use these different values we have sizes we can pass in so let's add a variant of let's say destructive so that will make it red okay if I do a size so for size let's say large so that'll make it a little larger now you can also add Tailwind classes so if I say class name and set that to uh I don't know let's just do a we'll do a text color so text blue 400 and now it has blue text so very very customizable so that's going to be our workflow is to just install the components we need bring them in and use them so we can get rid of all this stuff we don't need that and the first thing I want to do as far as our layout is the navbar now let me just bring up an image just want to open an image so we can see you know what we're working on all right so we're going to start top to bottom so basically we'll have this navbar and it'll just have a simple logo and I'll have the repository in the description so you can get like the images and stuff like that but we'll have the logo on the left and then on the right we're going to have this Avatar which is a component and it'll have a drop- down so when we click it it'll have some drop- down links including log up out profile um and then this is going to be the theme Toggler but we're not going to do that until later so right now I just want to get the Navar with the logo then we'll add the Avatar and the dropdown all right so let's create in components a file called navbar and we're going to do TSX CU we're using typescript now as far as creating react components I've actually been using a new extension so I've always used the es7 react uh Redux graph ql Snippets but there's a much simpler uh extension that I've been using called Simple react Snippets okay so I mean I basically just use it to create a component with sfc so if we go down here can see a stateless function component Arrow function so that's really what I've been using to to generate components so I'll say sfc enter and then give it a name so navbar hit tab tab again which will put me in the return and we'll have a div and let's just say navbar all right so I'm going to bring this into my layout because I want obviously we want the navbar to be on every page so let's go to our layout. TSX and let's bring this in so import navbar and then let's put it down here so in the body say navbar all all right so now you should see the Navar text now I'm going to add some classes to uh to the navbar div right here so let's say class name and I'm going to use BG primary because remember we have access to these these variables now and then on when we have dark mode I actually want it to be a different background so what we can do is just prefix with dark and then colon let's close that up and then I'm going to use bg-- slate 700 because I figured just put all the classes we need now so we don't have to come back later after we add the the dark and light toggle so let's do padding on the Y AIS so -2 padding on the X5 and make this a flex box and then justify let's do justify between because basically we want the logo on one side and we want the avatar on the other and then let's also add a text white class as well so after the background we'll say text white save that and now we should see the do background so as far as the logo goes you can bring that in from the the final repo the Link's in the description or of course feel free to use your own logo but what I'm going to do is in the root I'm going to create a folder called IMG and then I'm going to bring the logo over so it's just my white Travy media logo or gray and then we're going to bring a couple things in here so I'm going to import image from next image and I want a link around it so I'm going to import link from next link and of course we need the logo itself so let's import logo from and that's going to be up one level in the image folder and then logo PNG okay and then we'll go right into the navbar we can get rid of this text and let's do uh link and the href is just going to be slash and then in inside that we'll have our image uppercase i image and Source uh is actually going to be set to the logo that we brought in and we'll just do alt we'll call this traversy press and then I'm going to add a width of 40 all right so now we have the logo so now I want to have the Avatar or on this side and if we go back let's go back to the Shad CN website and let's see there's an avatar component so this is what we want and you can check the code out if you want this is how we would use it um we're going to install it with the CLI though so we just need to run this Command right here so let's go back to the terminal and let's run that and what that'll do is it'll create a a file in the UI folder called called Avatar TSX and if you want to take a look at that you can and again you can customize it but this exports Avatar Avatar image and Avatar fallback the fallback will be like a circle with the text of whatever text you put in it so your initials or whatever it might be so now in the navbar let's bring in the all that stuff from the Avatar so we want Avatar and we should have option here no so this is going to be from at slm components slui SL Avatar and there's a couple things we want to bring in we also want to bring in like I showed you the Avatar image and the Avatar fallback all right so now let's go down here and this div is a flex box so whatever we put here is going to be uh it's going to be on the to the right of the image so we want to do Avatar and in that we're going to have the Avatar image okay and we're going to pass in here the source now for the image I'm just going to use the the Shad CN PNG the same that's in the docs so that's going to be htps and github.com uh SL shad cn. PNG I believe that's it and then for the alt we'll just say at Shad C uh CN okay so there's the image now why is it not on the side we have display Flex justify between uh oh I put it inside the link what an idiot so so we don't want to do that we want to put that after the link okay so now it's over on the side now I also want to add the fallback so here we're going to add Avatar fallback and basically like I said this is just going to be the whatever text if the image isn't there so for instance if I put a one here and that image doesn't exist now it just says BT and we can add like a class name to make that text let's say text- black like that cuz you can add you know Tailwind classes directly to components which is cool but let's go ahead and fix that now we have our image so the next thing I want to do is add a drop- down to it because I want to have a link like a log out link a profile link and we're going to have links that go nowhere just because this isn't going to be a full dashboard the idea of this project is to get you familiar with shad CN so you can build your own stuff all right but the log out will actually go to a login page later so let's install the drop-down so down here let's run npx actually I'll just hit the up key and then we're going to install dropdown-menu that's the name of the component and that will create right here you can see drop- down menu so all your components will be you know nice and neat in in this UI folder now instead of typing this all out I'm going to go to the documentation here for drop-down menu and go down to where it says usage and basically we just we just want to do this really except for um where it says open we want our Avatar so let's copy the Imports first we just click that and then let's add that right here so we're bringing in these these drop- down Imports and then I'm going to copy this whole thing and let's put this I'm going to go right below where the Avatar is paste that in uh what's this children string has no properties in common with well all right so this is just a typescript error I'm not sure why I'm getting that so we can just ignore that it's not going to affect anything and then let's take the Avatar so this block of code here and we're going to go in the trigger where it says open and paste that in and then we'll save that and now if I click that Avatar you can see we have the drop down with the links now it has this outline which I don't like so I believe on the trigger we can just add a class name and let's say on Focus we want to set outline none yeah so now that outline is gone now as far as the links go all I want to have is a I want to have a a profile and log out so let's see we'll keep the my account the label but then for the items let's get rid of team and subscription and let's see for profile let's do link uppercase L link href and we'll have this go to slash profile but that's not something we're actually going to create in this video but we'll just add the link if you want to add it of course you can and then for this one let's do link HF and this is going to be set to slash not login it's going to be off cuz we're going to create a page called off and then have a a tab thing where we can click on register or create account so let say to off and log out so when we hit the log out link it should take us to that page which obviously right now doesn't exist all right cool so that's our Navar for the moment later on we're going to add the the Toggler for the theme but I think that that's good for now so the next thing I want to add is the sidebar so if we look at the image again we have this sidebar right here and this this whole thing here is actually a single component called command which is really cool because it has links right you can have your links with some icons we're going to use Lucid react for that and then you can also search here and it will filter the links so it's a really cool looking uh component but let's create the just the sidebar file and stuff first and import that into our layout so in components let's create a new file called sidebar. TSX and then I'm going to do sfc call it sidebar and for now we'll just have a div and we'll just say sidebar and then let's bring that into the layout file I'll just copy that down sidebar and sidebar and then let's come down here and what I'm going to do is let's see under the navbar I'm going to create a div with the class of flex and then inside that we're going to have uh two divs and the children prop is going to go in in the second one okay and the first one is where the sidebar is going to go so we can put that oops in here and then I just want to add some classes to both of these so this one is just going to be uh height because I want it to stretch all the way down so we'll do H dash and then in Brackets 100 viewport Heights and then for this one that wraps around the children let's do a class of padding five we're going to do width Dash full and then on medium screens and up I'm going to do a Max Max width what is it Max W Dash and then I'm going to do a fixed um pixels here 1140 pixels okay so let's save that but I actually don't want to show the sidebar on really small screen so let's go to this div right here that's around the sidebar and let's say hidden but on medium screens display as block okay so now it's not showing and then if I hit this break point then it's going to show all right now for the for the command component we're going to set that up but I also want to be I want to use some icons and we're going to use the package uh Lucid react so let's install that so npm install and it's Lucid so Lu C ID e- react and then let's uh let's set up the command command component actually you know what let's take a look at it so let's see command yeah so it's really cool because you can just like filter down your your links here so we want to run this command and yeah we want to bring all this stuff in so we can just copy and paste this again but let's let's go ahead and install it first so I'm going to just paste in that add command that will add it to our UI folder right there all right and then let's copy let's see we'll grab all the Imports first and let's put those in the sidebar okay so up at the top we're going to paste that in we're also going to import link and then I want a bunch of icons from uh from Lucid react so I'm going to put that here let's import and it's going to be from Lucid react and the icons that I want are going to be layout dashboard and newspaper uh folders C credit card credit card uh what else settings settings and user okay so those are the icons that I want to use now for the command components let's go back to the documentation here and I'm just going to copy this and then let's go into here and we can just replace this div with that so I'll go ahead and save and let's check it out all right now I want it to be a little wider than that so in the layout let's add right here we'll say withd Dash and then I'm just going to make it 300 pixels okay so now it's a little W we'll make it a little bit wider let's do uh I think that's all right let's take a look here oh maybe 300 is closer to what I have yeah now and I also want to give it a different color I want to use the secondary color which is like a lighter slate so why don't we go into the sidebar and then we can add it right onto the command component here we can add a class name and I think it has rounded Corners by default well you can't see cuz it's white but let's add a color of BG and we're going to use secondary yeah so see how the top is a little bit rounded so I'm also going to add a class of rounded Dash none to make it like fit in there nice yeah nice and neat all right cool now these aren't links they're just texts so we do want these to be links and we're going to change them up a little bit and we should be able to filter these the text there or the links as well um so for the first one Let's do let's see let's make it the dashboard link so First Command item right yeah the First Command item I'm going to replace this calendar text and I want to put the layout dashboard icon and I'm going to give that a class name of margin right- two height four and width four okay so that'll be the icon and then under it let's do link hre and we'll have that just go to slash and we'll say dashboard all right so let's take a look okay dashboard I click that it's just going to bring us to where we are now and then let's copy these two lines I'm going to go to the next where it says search Emoji get rid of that and let's change this to post and have it go to slash poost and that actually will be a working page and let's change the icon from layout dashboard to newspaper so now we have our post link okay good and then underneath that we'll have the categories link so we'll paste that in change this to categories and then I'm just going to have this go nowhere for now so we'll just put a number sign and let's change the icon so that's going to be folders so now we get categories and then for the here these aren't going to be actual links so we don't have to make them links but I do want to add the icon on the left and then add the shortcut on the right because there's actually an import of where is it command shortcut so that's what that's for so let's go into this one here into this command item where it says profile and we're going to add the icon which is going to be the user icon and let's give it a class name of mr-2 h-4 and W-4 and then we're going to have a span profile and then we're going to use the command shortcut component and let's see I'm just going to grab that it's going to be the command symbol and then P like that and let's take a look yeah so that looks good and then I'll grab these three let's go to billing replace that and the icon we're going to use here is credit card and then billing for the text and let's do command B for the shortcut and then for settings let's do the settings icon okay and then the text settings and then the shortcut will be command s all right so yeah I think that looks pretty good so next we're going to create our dashboard card so if we look at the image here it's going to be these four cards and they're going to be dynamic we're going to pass in the title the icon as well as the count all right so let's create a new component and I'm going to put this in in the components folder I'm going to create a folder called dashboard so any any UI components that are specifically for the dashboard will go in here so let's call this Dash board card. TSX and we're going to be using the card component from Shad CN so let's add that we'll go down to our terminal and let's say Shad cn- UI at latest add and then card okay and then we'll start to bring what we need in so actually let's create a component first I'm going to Su say FFC sfc dashboard card and let's have uh we're going to wrap this in a div for now and I'll just say card because I just want to import it into into the page now this is going to go into the homepage which is going to be in app and then page. TSX and at the top we're going to import dashboard card from our um component for our dashboard SL dasboard card okay we're bringing the the the Shad CN card into this component but we're bringing this component into our main file here now we're not going to need this H1 so we can get rid of that and then I'm going to have some Flex classes here so let's do flex and I want it to stack on small screens okay I want to have four across on large screens one column on small screens so we're going to initially set it to a flex column but I'll add in on medium screens make it a flex row okay I'll do that in a second let's go ahead and justify to Let's justify between and then we'll give it a little bit of space with gap -5 and let's do margin bottom five as well all right so right after Flex call I'm going to say on medium screens I want it to be a flex row because I want them to be you know four across and then inside here we'll have our dashboard card which right now doesn't take any props but it will and we just see card so now let's go into that file dashboard card. TSX and let's import so we want to bring in card and that's going to be from at SL components slui card and we also want to bring in card content you can also have like a a card header footer and so on but this is all we need for for this particular thing and then we're going to be using some icons and right now I'm just going to make everything hardcoded like the title like post the the count of the post I'm going to hardcode it all right now but then we'll we'll make it props after that so let's import the newspaper icon from Lucid react and then down in the return here let's um let's replace the div with the card component and then this is going to have some classes on it so I want to do BG slate 100 but then on dark so on when the theme is dark when we add that switcher later it's going to be BG Das slate D800 and then let's do padding four and then padding bottom zero and then inside the card we're going to have get rid of that text and then we're going to have the card content and inside the card content we'll have H3 and in the H3 will be the title but I'm just going to hardcode it to post for now and this H3 is also going to have some classes so let's do text Dash uh we'll do 3XL let's do text Center margin bottom four font bold and let's say text- slate 500 and then on doc I want to do text uh text slate 200 all right so we'll save that for now and that's what it looks like at the moment and then let's see underneath the H3 we're going to have a div that wraps the the icon and the count so this div actually let's just do that and then add our class name and we're going to make it a flex box we'll give it Gap five and I want to to Center everything so let's say justify Das Center and items Das Center and then inside that we're going to have our icon and we're going to use the newspaper later on in a few minutes we're going to make it so we can pass in the icon as a prop but right now we're just hardcoding it now I want to change the size because you'll see if I save it it's very small uh I also want to make it a slate color as well so let's add a class name to this and let's do text- slate d500 and then we can also add in a size prop so the size I'm going to set that to 72 and there we go now we also need the the count so let's go back in here and I'm going to go under the icon and we're going to have another H3 let's do text- 5xl for this and the font is going to be semi bold and and let's do text slate and we'll do 500 now on dark screens I want to do a different text slate so let's say text slate 200 on dark and in that H3 is going to be the count for now I'm just going to hard code 200 uh let's see what's going on with this oh I I had a space all right so let's save that let's take a look all right cool so now we want to be able to pass this this dynamic stuff in because we're going to have posts categories users we want to display those numbers so we're going to add some props and we're going to be using a little bit of typescript here we're going to create an interface and we'll call this dashboard card props and we're going to have a title so the title is going to be a string we're going to have the count which is going to be a number and then the icon now now the icon is going to be a lucid icon um react element so what I'm going to do here is import we're going to import Lucid icon from Lucid react and then for the type for the icon will be react Dot and then react element and then in Brackets here we want to add that lucid icon all right then we can go into the the uh parenthesis here and as props we want to pass in curly braces with the title the count and the icon and right after the the closing curly brace we want to set it to the dashboard card props type or interface all right and then we want to take the props like the title we're going to replace post with title we're going to replace this whole newspaper paper actually you know what I'm going to do is um I'm going to copy this cuz we want to pass it in like this so I'm going to actually cut it and that's where we're going to display icon and then here we're going to display the count all right so now what we can do is go into our homepage and the dashboard card is now going to take in a few things it's going to take in a title this one is going to be posts it's going to take in count and and we can pass in whatever here we'll just say 100 and then it's going to take in icon and that's where I want to paste in what I cut which is the newspaper now we have to bring in that icon into this file okay we don't need it here anymore so we can actually take it from here cut it and then we can go to the homepage and we can import it here all right so let's save that let's take a look and there we go it's it's the same thing but now we can create all of our other dashboard icons with with Dynamic data so let's go ahead and do that I'm going to just copy this down we want four of them total the second one is going to be for categories so we'll say categories and then let's do we'll do 12 categories um that the icon is going to be different too we want that to be folder okay we can Auto Import it so you can see I hit enter and it brought it in and then let's see the next one is going to be users and this will set to 750 and then the icon is going to be user and I'll hit enter to Auto Import it and then the last one is going to be comments and for comments we'll do 1,200 and for the icon we'll do message Circle so message I think that's it message Circle yeah and that got Auto imported as well so now if we take a look now we have our dashboard cards and if we make it a certain size once we hit that break point then it goes to they go to being stacked now the next thing I want to do is the latest post table so if we look at the the image me pull that up so right here we have the latest post and this table is also going to go in the post page but it's going to show all of them we're just going to narrow it down to five here and this is going to be a data table that's a specific component from Shad CN UI um but as far the data I'm not going to just hardcode these the the text we're going to have it come from a Javascript file we're going to have an array and um we're going to import that that data so let's create the data first before we do anything else and I'm just going to close all this stuff up and let's just collapse all this and what I'm going to do is create a folder in the root called data and I'm also going to create a folder in the root called types because our data which is going to be posts in this case and then when we go to the analytics we'll also have some data there so we'll have an analytics data and analytics types as well but let's start with the types so we'll create a new file here and let's call this post. TS and basically we just want to create our interface for the data that we want we're going to export it too because we're going to be you know bringing it into the actual data file so we'll say interface post and then what is a post going to have it's going to have an ID which is going to be a string it's going to have a title which is going to be a string it's going to have a body string and obviously if you weren't using typescript you don't have to do this but it's it is good to have it just I mean you can be less prone to errors and there are advantages to to using typescript but that's a whole new video that's a whole different video that's going to be a string uh title body author and then date which will also make a string and then we're also going to have comments which is going to be an array so I'm also going to create an interface for that called post comment and that will be an array oops okay now that post comment we're going to just put right down here so we'll say export interface and post comment and that's just going to have ID string text string and we'll say username string all right so the there our types now we can close that up let's go into data and let's create a file called post .ts here and in this file we want to bring in the types that we just created so we can import and we want to bring in post and that's going to be from uh at SL types slost all right and then let's create our array so we'll say cons post which will be a have a type of post or post but will be an array and then set that to the AR array with the data now for the the objects I'm actually going to paste these in because it'll be way too much to type out uh and you can just get these from the final repo so I'll paste these in and let's just take a look at what's included here we'll go to the first one so ID is a string of one we have a title a body author date and then a comments array and in the comments we have an ID text username all right so obviously this you know our types match if I were to call this like name then we're going to get an error because that doesn't match our post interface all right now we want to make sure that we export this at the bottom so let's export as default post or sorry posts and now we can use this data so we're going to have a a component called post table so let's go into components and I guess you know what let's create a folder in components called posts just to kind of break it up so we don't have all the components in you know the ones that we create we don't have them all in the root so we'll create a file in here called post table. TSX and let's do sfc Post table and for now we'll just have a div and say post okay now we're going to bring this into the um the dashboard so let's go back to let's see app and then page. TSX and let's bring this in so we'll import post table and let's see we're going to put this where are we going to put this after this div here so post table and now we should see right here post all right so now let's go into post table and we're going to be using the data table component from from Shad CN so let's install that we're going to say npx Shad Shad CN UI at latest and then I believe it's data-table let me just double check that uh let's see so data table oh it's just table okay okay it's just table so oops let's get rid of that and just say add table okay that will get added to the UI there we go table TSX and then let's bring in the stuff we need so we're going to from and let's see at SL components slui SL table and what we want to bring in is going to be table and then table body and table cell table head and what else table header and table row I think that's everything we need and then in addition to that we're going to link so link and then we also want to bring in our both our data and the post type so let's say import uh post from we want to go at data slost and let's also import the type so that's going to be post from types post okay now the table is going to take in a couple props it's going to take in a limit and a title the title will be the header that the heading that displays so let's uh let's go right here and let's create our interface for the props so post table props and we're going to say limit and this is going to be optional so we can put a question mark and then that's going to be number and we're also going to have a title optional and that will be a string okay so now in the props we're going to pass in an object we're going to destructure the Limit and the title and we're going to set that to the post table props okay so now let's see we need to get the data but I don't want to use all of it I don't want to use all 10 or however many are in there I want to narrow it to five or to whatever the limit is passed in but I think before we do that we'll just we'll just have them all before we actually do the limit so let's go into the return and we are going to have a div and let's give it a class I want to move it down a little bit so we're going to do margin top 10 and then inside the div we'll have the H3 and let's give this a class name of text- 3XL or sorry 2 XL and let's do margin bottom four and font Dash semibold Okay and then I want to show the title but only if if it's there so I'm going to say title if it's there then show title um else then just say post okay U and we can save that and take a look so it just says post because we didn't pass anything in however if I were to pass in title and set that to latest posts then that displays all right cool so now let's keep going here we want to go under the H3 and that's where we're going to start our table so we have a table uh oh one thing I forgot is the table caption we need to bring that in as well so table caption and that's going to be next so caption and we're just going to put some text in here I'll say a list of re uh recent posts and let's see underneath the caption we'll have the table header and that's going to have a table row and in the table row we'll have head and say title copy that down down a couple times this one's going to be author and this one is going to be date now I want this to be responsive and tables are tough to to make them responsive so what we can do is just cut out some of the fields if we're on smaller screens then let's just show the title and the button because we're going to have an edit button so what we can do is add onto the the author right here let's do class name oops class name and what we can do is set it to Hidden initially but then on medium screen set it to table- cell so that's that's what it display will be set to all right and then for the date we're going to kind of do the same thing so let's say class name and let's set it to Hidden and then MD table- cell and I'm also going align text right all right so there we go now when I make this smaller you can see that only the title shows now this right here a a recent list uh a list of recent posts I couldn't figure out how to get this out of here without having to go into the file and actually change it so if you go into the UI uh components UI table and let's see it's down it's like the caption I I think let's see uh I think it's this 103 if I comment that out yeah that gets rid of it if you don't want that all right so back to our table that's the header now let's go under the header and let's do the table body and in the table body we're going to map through the post so let's say post post. map and pass in here set that to some parenthesis and we're going to say for each post call it post and then we want to have a table row and since we're in a list we have to add a key so let's set the key of this to the post. and then in the row let's have a cell okay so table cell and that's going to be the title so post. tile right and then we'll copy that down the next one is going to be the author but remember we're not showing this on small screens so we also have to add what we did to the table header or table head rather add a class name of hidden but on medium we want tables cell I think that's right should be yeah so there we go we have title author but only the title on smaller screens now let's add the what else is there the date so under that table cell let's create another one actually we probably just copy this because it's going to have those classes um and I also want to just add text right and then this is going to be post date okay so that will show the date good now I want to have a link to the edit page as well so why don't we add another head up here after the date so head and let's just say view or yeah I guess we could say view it's like the view sledit page and then let's add another cell and in here we're going to have our link and href is is going to go to let's put some back ticks in here because we want this to go to slash poost slash edit slash and then the post ID okay so that's our href and then we want to wrap we'll just use a button and uh let's say edit and we're going to give this a bunch of classes so let's do a background blue blue 500 and on Hover we'll do BG blue 700 and let's do text white font bold padding on the Y AIS 2 padding on X4 and rounded and then we'll also make it extra small so text Xs and there we go so now we have our edit button if I click it it's going to bring us to post edit and then the ID which obviously doesn't exist but we will be creating this page we'll have a form I'm going to show you how we can set up a form using um some components and using uh react hook form along with Zod for for validation now before we move on one thing I want to do is cut this down because if we have a 100 posts they're all going to show here so remember it takes in a limit and I want to use that we haven't used that prop that's passed in so let's pass it in so right here we'll say limit and we'll set that to five and then we want to implement that so I'm going to go above the return and let's say let's first sort posts in descending order based on date because I want the the latest ones first so we'll say const sorted post and this is just vanilla JavaScript so sorted post or I should say typescript because we're going to set it to a type of post array and then set that to an array with we'll spread across all the posts and then we want to sort it so we're going to use the dot the sort method and inside that we'll pass in our function and that function is going to take in our uh A and B and then we just want to uh you know what let's not even use parentheses I mean not parentheses curly braces so we'll just do an implicit return and we'll say new date and let's pass in b. date and we want to get the time so d. getet time and then minus new date pass in A.D and then dot get time that should give us the sorted post post right in fact if we were to replace down here where we have post we can replace that with sorted post and now it should be the the most recent first which it is 520 428 all right so we know that that's working now we want to filter let's say filter post to limit so const and we'll call this filtered posts and let's set that to first we want to check the limit so if there's a limit then we're going to take our sorted post and let's use slice we could do this a bunch of different ways but I'm going to do slice zero to the Limit else then we just want to use sorted post if there's no limit passed in and then down here instead of sorted post we're going to use filtered post all right so now we only have five all right cool so I want I mean I want to finish the the dashboard up then the last thing that I want to put here is the analytics charts now as far as I know Shad C nuui doesn't have any charts um I could be wrong but I searched all the documentation couldn't find anything so we're going to use something called recharts which is pretty easy to implement um so let's install that we'll come down here npm it's recharts make sure you put the S on the end and then why don't we create our data that we want to show in the chart and I want to make this basically just the views like the website or the the platform views over the year for each month so let's create the type first so in types we'll create analytics. TS and let's see we're going to add rid of that we're going to add export an interface we'll call this analytics uh analytics item and it's going to have a name should be a string it's going to have a UV which is going to be a number it's going to have a PV which is going to be a number and an AMT which will be a number that just comes from some I don't know where I found it some site that just gives you a bunch of data and I believe this stands for Unique views um page views and amount I'm pretty sure so the data itself is going to go in the data folder and we'll create uh analytics. TS and then again I'm just going to paste it in let's first import the types so we want analytics or Analytics item and then I'll grab that data again you can just copy it from the final repo okay so we have con data set to uh an array of analytics item and you can see we have the name which is the the month and then the unique views the page views and the uh the amount I'm pretty sure that's what it is yeah I'm pretty pretty sure that's what that is I didn't create this data so let's save that and now we want to implement recharts so why don't we create uh let's see in components this is going to be for the dashboard so in the dashboard I'm going to create a new file called analytics chart. sfc analytics chart and for now I'll just have a div just say chart and let's bring it into the to the dashboard page which is going to be app page. TSX and let's bring that in right here import analytics chart and I'm going to put this I want to put this in between the dashboard cards and the post table so I'm going to go right here and put this in okay so it's going to show right in the middle now let's go into analytics chart and as far as components um we're going to be using the card component but we obviously we're going to bring in a bunch of stuff from recharts as well so let's go up to the top and let's do our Imports so we'll do import and let's first do the rechart Imports so this is going to be from recharts all right so the first thing we're going to bring in it's going to be a line chart so let's bring in line chart and line and then we want the x axis and the Y AIS and we want the cartisian grid cartisian grid and then a responsive container because we want to make this responsive so those are the things we want to bring in from recharts now let's import what we need from the card component so this is going to be from at SL components slui card and we want to bring in uh card card content card description card header and what else card title and that's yeah we want to bring in the the types as well for analytics so let's data from data analytics all right so now we can do the output actually one thing we have to do is make this a client component because we in order to use this chart it has to be we have to add use client at the top okay and then what we'll do is just have a just a fragment and then inside that let's do the card and then we'll have the card header and inside that will'll have the title and for the title we'll say analytics for this year okay underneath that we'll have the description I think it's card description right yeah and let's say views per month okay so that's what it looks like so far and then let's see we have the card content underneath and in the card content we're going to have a div with a little bit of inline style this is what's recommended in the documentation for the responsive container so we just want to add a whb and that width is going to be 100% And then also height which is going to be 300 all right then within that div we want the responsive container and in the responsive container we're going to have the line chart actually yeah and that line chart is going to take in a couple things it's going to take a width so this is basically like the max width I'm going to going to do 1100 and then it takes in a height let's do 300 and then it takes in the data which we have set to data all right and then within the line chart we have our line and the line is going to be self closing and take in a couple things so it takes a type which I'm going to set to uh monotone and it takes in the data key which is is going to be UV and then stroke which is going to be the color of the line so that's going to be heximal 8884 d8 all right so there's our line now we don't see anything yet we have to add the cartisian grid oh there's the line yeah it is there it has a little animation which is pretty cool now you could leave it like that if you want but I like the the grid behind it so let's um and it also doesn't show the data that will be the X and Y AIS so let's do cartisian cartisian grid which is going to be self closing and then that takes in a stroke as well which we're going to set to light gray okay then underneath that we'll have our X AIS and xaxis is going to take in a data key which is going to be the name and then underneath that we have yis which doesn't take in anything so now you can see we have our grid we have our xais which has the names of the month and then we have the Y AIS which has the views the unique views yeah so I think that looks pretty good and then if I make this smaller you'll see that it shrinks up right it's responsive and it's not easy to make a chart like that responsive so I think we're done with the dashboard yeah we're done with the dashboard so now we can move on to the post page I want to be able to go to this post and basically have this table right with all of the posts and then add the pagination component so we're actually using quite a quite a few components from Shad CN UI so let's create the post page so we can close this stuff up and in the app folder we'll create a folder now actually you know what before we create the post folder what I want to do is create a a category folder I'm not sure what exactly what these are called but in nextjs if you put a folder with parentheses around it and um I'll call this uh let's call this main okay so I can put a folder in here called post and then in there I can create a file called page. TSX and this is this will be accessible this page by going to slash poost I don't have to do slash main post because when you have parentheses it's not an act it's not a route it's not counted in the route it's just it's just to organize your um your folders all right so in here let's do sfc and let's do Post page and for now I'll just have a div and just say post and now I should be able to click on the post link and now I see the post page all right and then what we can do is actually have a a a separate layout per these these category pages and that's what we're going to do in a little bit because the login page is going to have a different layout than the rest of the site the main site all right so but we'll do that after we'll do the layout after let's now on the post page bring in the post table which we've already created so we're going to import post table and then let's get rid of that we can make this a fragment and then let's say post table and I'm not going to pass in a limit because I want to show all of them and and that's it we've already done this it's already it's already there um the only other thing I want to do on this page is the pagein so let's install the pagination component with npx shad CN UI add and then pagination okay and actually before we Implement that let's add a back button because I do want to have a button to go back here as well as in the edit page when we do that so I'm going to have a separate component for the back button so we can put that um we can put that just right in the components folder so in here we'll create back button. TSX and we're going to bring in an icon called Arrow Circle I think it's or Arrow left circle from Lucid react and let's create an interface because this is going to take in uh a couple properties so we'll call this back button props and it's going to have text which will be just a text that shows that'll be a string and then it's also going to have a link and that'll be a string all right so now let's do sfc and back button for the props text and Link and we want to map that to back button props and then in the return let's do uh let's see what's bringing link and then we'll return link now the hre is going to be the link prop like and uh let's see we're going to add a few classes to this as well so let's say class name and I'm going to do text Dash gray- 500 and then on Hover I'm underline and I'm going to use flexbox because we'll have the icon along with the text so we'll item Center and let's add a gap of one and font bold and margin bottom five and then in the link we're going to have our Arrow left Circle icon let's give it a size so size I'm going to do 18 and then after that we'll have the text all right so that looks good now let's add that to the the post page right so here let's bring in import back button and we're going to put it right above the post table back button and for the text we're going to set that to go back and for the link in this case it's going to go back homepage okay so now we have a go back button now we'll add the pagination so we're going to add in the let's see let's go into components and then post and we'll add post pagination ttsx and let's say sfc see pagination for now we'll just have a div and let's bring that into the page so let's see um import post pagination and where do we want to put this just right below the table okay so you should see just right here pagination and then we're going to bring in the the Shad CN stuff we can probably just copy that from um from the docs so if we go over here to pagination yeah so we just want something like this so usage let's copy the Imports so inut ports and I'm just going to grab this and let's see we'll just return that so if we save it and take a look okay so there we go we probably want a couple other P now this isn't going to work we're not going to be able to use this because I mean we don't we're not doing the back end it's just the interface but if we can add some more items like we can copy this down and we can have two three and there we go so very easy to to implement this stuff now for the edit form these links here they go to if I click it it goes to post edit and then the ID so what we want to do is go into our app main posts and then inside that we'll have a folder called edit and then inside that will have a folder with brackets and ID and inside that we have a page.js uh TSX let me just make sure I use TSX and all these yeah all right so this is going to be our edit page so let's say sfc post or post edit page and then for now we'll just have a not dice div and edit okay okay so you can see that now that's working if we go to edit and then ID and uh we're going to use our back button here as well so let's bring that in so import back button and let's see we'll make this a fragment and put the back button here and I'm going to pass in the text which is going to be back to posts and then the link the link is going to be slost all right so now we can click on any of these we can go back easily now the form here this is going to be probably the the most in-depth part of this um because we're going to be using react hook form and Zod for validation um and and there's three there's three components from Shad CN that we need to install that's form input and text area so why don't we do that let's come down here and let's say let's say add Shad CN UI at latest form okay so that's the first one then we're going to do input and then we're going to do text area okay so now we have those installed now I'm going to just close up everything else and I mean you could put the form in a separate component but I'm just going to put it just right in the page if you guys want to change that up you can so let's bring in everything we need now we're going to be using Zod so we want to say import all as uh import as Z from Zod and we want to use a hook called use form and this has to be a client component so we'll do that in a second but we want to bring in use form and that's from react hook form all right let's go up here and let's add use client okay so in addition to that we're going to import the Zod resolver that's going to help us with our validation so let's Zod resolver and that's from Hook form resolver Zod then we're going to import the stuff that we need from the form component which is going to be at SL components SL form or components UI SL form and the things we want to bring in are going to be form form control form field form item and then we want form label and finally we want form message so this will have validation and it will it will show a message if something's wrong all right so that's that now we also want to import a couple other things we want the back button wait I already brought that in didn't I yeah but we want uh the input so input that's be from components UI input then we want area so text area and text area and then we also want button we installed that I think that was the first one we installed and in our data so import posts from data posts okay because we're going to Target the whatever ID we're on we're going to Target that post and fill the form with that data okay now to use Zod we need to create a for what's called a form schema which will have all of our fields and the types and any rules to those fields so we're going to go in the actually we're not going to go in the function we're going to go right here and Define form schema and set that equal to Z doob okay and then in that object we'll have an object and let's say title we want to set that to z. string because that's going to be a string and then we can do any rules we want now I want these to be required and you used to be able to do um uh what was it with no uh I forget I forget what the required one was but it's it's deprecated so now I guess you just do Min and we can say minimum of one character then we can have an object after that and add a message and we can say like title is required all right then let's just copy this down four uh we want four total second one is going to be the body and that's going to be a string minimum one and let's say body is required this one is going to be the author and we'll say author is required and this one is going to be the date and we'll say date is required all right so that's our form schema now the post edit page we need to get the ID right we need this from the URL and that comes in through a prop of params so let's add our typescript interface let's say post uh post edit page props and we're going to have pams which is going to be an object and it's going to have an ID that's a string okay and then let's map this um this object to post edit page props all right next we want to get the post which is pretty simple we have the ID we have the post the data coming in so let's create a variable called post and let's say posts. find and we'll pass in oops our function and say for all posts we want to call that post and we want to return where the post. ID is equal to the ps. and that should give us the correct post all right let's just save this make sure we have no nothing going on here and we can just do a console log of the post make sure that we're getting that all right so yep we're getting that this this is on my machine because of just some extensions I have you you probably won't have this this warning or error all right so we got our console log we got our post now we need to use the use form hook so we're going to say form equals use form all right and uh we can add we can add on here I guess the type we use here is z do infer so we can say Z infer and then open another set of brackets and in here we want type of and then form schema and then inside here we want to pass an object with a resolver and that resolver is going to be the Zod resolver that we brought in and it's going to take in the form schema okay so that's how we can attach the schema to this form and then we can provide default values and since this is an edit form we want the default values to be the data of the post so for instance we're going to say title we'll say post and just to prevent any errors I'm going to put make this optional and then say dot oops did I do dot do tile or nothing and we'll copy that down a few times then we're going to say body it's going to be post. body then we we got uh what am I doing body author author and date all right so that'll put the data in now we have to create the form so let's come down here into the output and we'll have a heading we'll do H3 text 2X and let's say margin bottom four and edit post and then under that we're going to have our form component so uppercase F form and then that actually takes in um that actually takes in an object and we spread the form like that and then we have the actual form tag so lowercase R and that's going to have an onsubmit okay that onsubmit is going to be form. handle submit and that takes in a function which we're going to create above and we'll call that handle submit and I just want to give this form a class uh let's say class name and just to space things out we'll do space- y-8 why is that giving me um why is it giving me an error oh oh we don't we have to create that so const submit and all I'm going to do this handle submit will take in the data all right so data and we're going to do z. infer and type of form schema and for now let's just do a console log I don't know why that's not working so console log of the data I guess now there's quite a bit that goes into a form field so I want to see if we can copy that from um from here so if we look at form so let's see example yeah so we have the form field then we have control and then we have the render so render is a function that's where we put the form item with the label control and then the input yeah so let's let's copy this actually we don't want the Ed form we've already done that let's copy just this form field and then we'll put our first form field right here so we want to change Let's see we want to change it's not going to be username it's going to be title and then let's change this to title and what else um form label form control input actually form label we're going to add a couple classes to so let's say class name and we're going to do uppercase text extra small font bold text- zinc d500 and then on dark doc themes we're going to do text Dash secondary slash 70 and yeah that should form description is not defined oh you know what we're not even using a form description so we can get rid of that I just want to make this okay so it's showing the title of this post which is good um the input though we want to change some of this stuff up so the placeholder or we want this to say enter title if there's no you know if there's no value and then we want to add some classes to this as well so let's say class name and we're going to do BG Das slate D100 and let's do border Das Z on Focus uh on Focus actually Focus visible we're going to set ring- Z black and also Focus Dash visible we're going to do ring offset d0 yeah so it just made kind of made that a little darker all right um actually you know what we I want to change that for the dark mode I think I added that somewhere let me just give me a second just want to make sure cuz when I added the dark mode there were a few things I had to change yeah so on the label I also I want to add I don't want to do the secondary actually we're going to do text white for the label and then also text white for the input on Doc so we have text black but then let's say dark text- white and I I think yeah I think that's what I want to do actually on dark for the background too so BG slate 100 but on dark then let's do BG Das slate d500 all right cool so I think yeah I think that that's it now the form message is where the error will display if like if we don't if it's not if we don't add anything and we submit it you know if there's nothing in the field if it's empty so let's copy the form field now which ends right here and the next body so right here let's paste that in now the body is going to be a text area so we want to change this input here to a text area and we want to change this or this name the the label and then down here then the place Place holder we're going to change those to body okay make sure you keep the casing I have an extension installed that uh that I really like that's so simple but it's really helpful so it's um what is it this right here I think no that's not it what is it called Damn it I forget what it's called it's like case keep case or something like that I want to show you guys here is this yeah this one multiple cursor case preserve so when you select multiple instances of of text and they're different cases it preserves it like here the lowercase e and the uppercase E it keeps them rather than just change it to whatever you type so it's a great extension and uh you know something so simple but so helpful all right so that's the body I don't I don't know if there's anything else I want to put here let's save it yeah I think that looks good and then let's paste in another form field under that that's going to be the author so we'll change this this and this to author and save that there we go now we want the date so go under that form item paste that in change this this and this date and there we go now we just need our button so under that form field which ends right here we're going to have our button oops should be uppercase it's a component so button we'll say update post and we're going to add a couple things to whoops to this button or a couple classes so let's say wi- full let's do on do I want this to have a background of slate 800 and on Doc I want the text to be white and there we go so that's our form now if we submit we should just see the data in the console okay there it is and what's cool is we have our validation so if I were to forget the title there we go it already says title is required body is required so that's it um and and I really like react hook form so I think when I when I redo my react course I'm pretty sure that's what we're going to use is is react hook form and Zod now I mean like I said we're not obviously we're not submitting to a database or anything like that at least in this video I might add to it later on but I want to show you another component and that's the toast component so I want to just be able to when we submit this it'll have a little toast pop up and tell you know say that it's been submitted successfully so for that let's um let's go back to the docs and let's see go down to toast and it'll look like this and you can even have like a little undo button so we want to install it with this command and you have to add this toaster in your layout right because it's it's the output for that toast and then there's a hook called use toast that we can bring into our component so let's do those those three things we're going to install it right so whoops what the hell I don't know what I just did we'll just say add toast and then let's go into the layout the root layout which is right here and we're going to bring in that toaster so toaster from uh and that's going to be from components components toast I think isn't that is that not right toaster from oh from toaster now I don't have to install both of those right I think if we look in components UI should have yeah we have toast and toaster all right so we just need to change this to toaster and then we can put this we'll just put it right above the body so toaster so that's just the just the wrapper for the the actual toast now to make the toast pop up we're going to go back to our page and let's uh let's bring in the hook so up here let's say import use toast from components UI and it should be just slash toast like that um oh no it's actually used toast let me just double check that yeah it is used toast all right okay then we have to initialize it just like you do with you know many other hooks so we'll go at the top of the function here let's say const toast use…

Transcript truncated. Watch the full video for the complete content.