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

Key Takeaways

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 with 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 an 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 import 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 import 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 table 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 table 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 table 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 table 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. TSX and let's do 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 so 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