Build and Deploy a React Dashboard With Hostinger

hey everyone welcome back to the channel code Commerce my name is Clint and in this video I'm going to show you how to build this dashboard and react we're going to be using VJs to be more specific and we're going to be using a really awesome component Library called trimmer which is all these components that you see on the screen here so really powerful tool you can build out it's a component Library tool for react or other libraries as well and I'm going to show you what all we can build with that and also we're going to sprinkle in some Tailwind CSS as well and stay tuned because at the end of this video I'm going to show you how we can host this live on the web with the sponsor of this video hostinger that way you can showcase your project to your friends your family you can put it on a portfolio website to Showcase two potential employers so make sure you stay tuned to the end of this video so we can deploy this thing live to the web so without further Ado let's go ahead and get started so I'm just going to shrink down my demo here and but yeah by the way this is completely mobile responsive so as we shrink down you're going to see these three here these three cards they're going to stack up just like that and then once we get down past the immediate break point everything's going to become just one column as you can see here we have a nice scroll to the top we do have some other things in here that's pretty cool right there just a nice click of the button so this is all done with trimmer and also Tailwind so let's go ahead and get started now I'm already in vs code I'm already in the folder that I want to be working in just this react dashboard trimmer now we're going to be using VJs so you can go to Veet JS let's say veetjs.dev go ahead and click on get started and if we scroll down here you can do a vanilla JavaScript typescript view react we're going to be using react in this project so all we have to do is type in mpm create Veet at latest so I'm just going to shrink this down I'm going to press the control back to button to open up my terminal and I'm going to type npm create Veet at latest now I want to install it in my current directory so I'm just going to put a period there now if we open this up it's prompting us do we want vanilla JavaScript view react we're going to be using react typescript typescript with swc we're going to use JavaScript with swc and swc is just a compiler it stands for Speedy web compiler so here we have it everything as installed now what we need to do is just run this npm installing what that's going to do is just install all of our dependencies and just like that we can now start our development server so I'm going to type npm run Dev now I already have my demo running so yours is probably going to be on localhost 5173 mine's on 5174 so let's go ahead and open this up here it's gonna be a local host we'll say 5174 for my demo yours is on seven three and this should be what you see here so this is just the starter package for VJs so let's go ahead and get into the build so what you see here if we come over here on the left if we go into our source folder this app.js this is what you see on the screen to your right this is all the code so what we're going to do to just give you a layout of our build here we're going to do we're going to start off by building this sidebar and then we'll go over and build this top bar which is another component and then we're going to break this up into two different columns we're gonna have a column on the left which is the are these components right here and then the column on the right and then when we shrink down to mobile we're just going to stack these into one column but to start off with let's go ahead and start with our sidebar right there I'm going to drop this over here we can close that let's go back to our demo here now I'm going to go ahead and stop our server here and let's go ahead and we want to install Tailwind CSS so let's go over to Tailwind go ahead and click on get started and we're using the Frameworks guide let's scroll down we are using Veet so what it wants to do first is create our V application which we've already done that so I'm just going to move on to the second step I'm just going to copy this line of code right there we'll paste that into our terminal here all right next we're going to copy this second line here this is going to create a Tailwind config file for us over there on the left all right so if we open that up this should be what you see here and what we're going to do I'm just going to copy this over I'm going to copy this over right here inside of our content array so if we go ahead and save that should be configured for us there and then the final step in configuring Tailwind with our V application is just to copy this over into our index.css so we're going to have some Styles in here and I'm just going to say command a to select everything and I'm just going to paste right over it and that's just going to remove all of our styling so we can go ahead and close the index and close this tailwind.config file and let's go ahead and just remove everything and here we're just going to have an empty fragment there so let's come back to our build we should see when we start our server npm run Dev we should see just a blank screen here so there we have it so let's go ahead and delete this you state we don't need that um we'll delete that there and we can just delete that as well so we'll keep this import our CSS file so again what we're going to do first is our sidebar so what I'm going to do inside of my source folder here I'm going to create a file I want to put this inside of a components folder so I'm just going to say components slash sidebar.jsx what that's going to do as you can see here it's going to create a components folder for us and then it created us a sidebar.jsx file so rafce just going to generate a functional component for our sidebar and then if we go into our app.js what we're going to see here we just want to import our sidebar here so I'm just going to say sidebar and make sure they're imported as you can see there if we go ahead and save you can see our sidebar right here in the middle of the screen so if we go ahead and inspect this here you see it's why is it centered in the middle of the screen well we should have we deleted all of our CSS in there but if we go back to our app.js or app.css we still have some styling in there so we can actually just delete this app.css we're going to be using Tailwind which basically we're just going to put everything in line and then we can if we need to add any extra styling we're just going to put it in our index.css file so um we're getting an error right off the bat we're probably trying to look for this in our app.js so let's just go ahead and delete that and that should remove any errors so if we go ahead and refresh no errors no styling ECR sidebar up here at the top so let's go ahead and I want to give this I'm going to give this a main tag here we'll change this to Main and what I want to do I want to say we actually need to remove this here we'll put this there we have it now I'm going to give this a class name class name of flex and that way we're going to have a sidebar here and then we're going to have a div over here and we're going to have other components over here just like that so we're going to rename this but again we're gonna have our sidebar and then some other components there on the on the right so let's go back into our sidebar here and let's go ahead and start styling this thing out we're also going to be using some hero icons so we'll get to that here in just a moment but let's go ahead and I'm going to give this some class names so I'm going to say BG slate 800 what that's going to do is just give us a nice background I'm going to say Flex none width of 14. anything above small I'm going to say width of 20 and then height screen which is 100 viewport Heights so if we go ahead and save that you can see we have our sidebar here and once we pass this small break point which I believe is 640 pixels it should grow just a little bit so I'm not sure where our breakpoint there it is there's our break point you can see it gets just a little bit bigger all right that's looking good so far so next we're going to create a div in here we can go ahead and get rid of this sidebar here we're going to create another div and inside here let's go ahead and install our hero icons so I'm just going to search for hero icons in here hero icons let's go ahead and click on this one here documentation we'll scroll down okay this is what we need right here let's go ahead and just copy this we'll stop our server we'll install the hero icons reacts package all right let's go back here we'll start our server back up npm run Dev okay so in here what I want to have is our little home icon here at the top so we're going to put that right in here so what we're going to say for our hero icon it's called home icon you might not see it yet that's okay let's go ahead and import this from Material icons so what I'm going to say is import open up our curly brackets here need a space I'll say home icon from here well we need to put this in quotes at hero icon slash react slash solid so let's go ahead and save and we're already getting some errors from V1 installed you're I have V2 installed okay so let's just go ahead and I'm going to select this here and we'll stop our server and say npmi at heroicon react V1 let's start our server back up see this should hopefully fix the problem okay so now we have our icon there um it looks kind of funky let's give it some class here so I'm going to say first off I'm going to say width 40. okay that's a better size there now I'm gonna say a class name here I'm going to say text Gray 300 I'm going to say left three anything above the small break point remember our 640 breakpoint I'm gonna say left six and I want this to be fixed so it does look a little bit off-center and that's okay I'm doing that on purpose because we're gonna have a little spacing in here and I just wanted it to look um I just wanted to look even with the spacing on this right side so there's different ways you can do it um if this background was different color I would probably Center it a little bit differently but for how I built this this is how I'm going to do it now um I'm gonna go ahead and give this div I'm gonna say height of 20. then we'll say items Center and then flex and if you're wondering what this number is where we say height of 20 or left of 3 width Dash 20 left-6 so if we hover over this this is a really cool plug-in it's called the CSS intellisense or Tailwind tell us in something like that and basically when we hover over it it gives us a preview of what the CSS is and Tailwind calculates or runs in multiples of four so if you were to say p dash 4 for padding four would be uh one rim and eight would be two Ram so on and so forth so as you can see if we hover 20 h-20 is 5 Rim so I hope that makes sense now uh let's go on here what else do we have let's go on and we have a width 14 height 20 items Center we have this displayed as Flex now let's go ahead and after this here I'm going to add another div and this div is going to contain all of our icons in here so all of our icons in there I'm going to go ahead and drop this down we're going to have a chart was this chart bar icon okay and I'm going to go ahead and give this a width of 40 so it's the same size as our other icon then I'm going to give it a class name I'm going to say BG gray 600 p dash 2 for a little bit of padding rounded large margin bottom of four and then text Gray 300 and we're going to need to import our icon so chart bar icon all right so there you have it that looks pretty good right there and before we go any further this diff here I'm going to give this a class name and I'm going to say basically just as we did above here I'm going to say fixed left-3 anything above the small break point we'll say left-6 then top we're gonna say and I'm gonna say 100 pixels and I opened up these these brackets here whenever you open up brackets you can actually enter in a custom value and you can do that here for width padding margin so on and so forth and this can be pixels Rim percentages however you want to do it so if we go ahead and save now it's in line with our top one so and again don't worry about this padding we're going to fix that or it's going to look a little bit better once we start adding our our main elements so that looks good for our chart bar icon I'm going to go ahead and copy this down for other icons so we're gonna have a document mail a credit card and a bell icon so let's go ahead and this one is going to be document let's see document search icon so make sure that Imports up here if we go ahead and save okay there we have that one and this one is going to be let's go ahead and highlight that this one's going to be a mail icon this chart bar icon here we're going to change this one to a credit card icon then this last one is going to be a Bell icon all right so that looks let's go ahead and save that looks pretty good so far now I want to add these icons on the bottom as well we're gonna have this little scroll to the top which is pretty cool and then a little like kind of button simulating like a sign out function so underneath this div I'm going to create one more div in here and we're going to have a Arrow up icon just like that and we'll say width let's just matter of fact we'll just copy of this just like that we'll save and then we'll have a let's just copy this down this one's going to say external link icon so let's go ahead and save those and you can see them kind of tucked up in there let's go ahead and add some class names to this div here I'm going to say fixed bottom four left three I think above small we'll say left-6 so it's kind of on par with everything else so there's our sidebar you guys looks pretty good we'll make a couple more changes like our scroll to top link whenever we get there but that is our sidebar and it is responsive as we pass the break point you see it it opens up a little bit further so that's exactly what we want next let's go ahead and build our navbar here which is going to have our first trimmer component so inside here let's create a new file I'm just going to say navbar.jsx our afcs using our Snippets Rich snippet or sorry Snippets uh shortcut to generate some a functional component for us so next let's go ahead and for our nav bar you can call it header sidebar doesn't matter let's go ahead and we want to install or you know let's just go ahead and code this out so we're going to have an H1 and I'm just going to call this dashboard or something like that then we're going to have a div and then we'll have like an input in here this is below set placeholder input something like that we're going to remove this we're going to replace it with a trimmer component now we can't see it of course because we need to go into our app.jsx and in here where it says components we're going to start putting our our header so I'm just going to say what do we call it navbar nav bar there we there we go make sure imported and there is our navbar up here at the top so let's go ahead and I'm going to give this right here class name Flex I want to say Flex column Flex one we'll say relative all right so let's go into we can close that for now let's go we can close this main let's go into our nav bar here and what we need to do is we're going to replace this input there with an actual trimmer component so let's go over to trimmer trimmer.so and this is it you guys awesome so what we're going to do is just copy this here stop our server npm install at trimmer slash react and look at this has so many um components that we can use you can customize them it's really awesome and this is uh a lot of this is used with Tailwind CSS so built on top of react and Tailwind means it's going to integrate perfectly to this project that we're building so let's start our server back up with npm run Dev so let's see what we need to do let's get started we're going to need to do a few things here so the first thing is installing Tremor to our CLI our framework so this is wanting us to create our library which we already did so we need to install trimmer which we just did if we look up here we did our Command that we just ran npm install at trimmer slash react so we just completed that step so next we're going to need a few more things in here so this is the trimmer module under our tailwind.comfig file so let's just go ahead and replace this here or you know what I'm gonna scroll down we're going to need all of this we're going to need all of this in here so what I'm going to do is I'm just going to take this content I'm going to paste over that paste over that there next for the theme I'm just going to take this theme and we'll grab everything in here we go and I'll just paste it over that let's go ahead and save make sure there are no errors believe that's all we need to do let's run this thing awesome so I think that is all we need to do oh yeah we're going to be using or we already have our react icons yeah so our hero icons rather so let's go ahead and start our our servers back up and running so let's go ahead and change our input so if you look over to Trimmer again let's go ahead and look for let's see here we have inputs over here select we're looking for a text input let's go I'm just going to click on any one of these here let's open this up some so we can have a little more space here we have it all right so select this is what we want to do so we're going to use one of these inputs here if we scroll down we're going to use one that has an icon inside of it so all right I'm just going to shrink that back down doesn't really matter where it is feel free to browse around and look for those so we can close our tailwind.com big file I'll zoom in just a little bit if it's easier for you guys to see so what we want to do next is instead of this input we're going to use our trimmer component I just wanted to put that in there so you guys can see what it looks like so what we're going to have in here it's called a text input and if you if you've already installed the trimmer components which we just did it should Auto Import for you so as you can see import text input from at trimmer slash react so you can see we still have our input now and it looks like a little bit better sorry it's starting to have a little bit of styling into it already so yeah already responsive as well looking nice smash the like button you guys feel like you're getting value out of this I'd appreciate that so next we want to add a few things to it so we'll give it a placeholder we'll just say search just like that so now we have our placeholder maybe give it one more period Then what we're going to add is our icon so if we say icon we're going to be using search icon all right look at that and trimmer automatically knows they work hand in hand with a hero icon so it automatically goes to the right spot everything is looking golden so I'm going to go ahead and give this div I'm going to give it an ID of top because I want to be able to scroll to this so real quick we go to the sidebar if we go back to our sidebar here and we look down at our um at our link down here we don't have a link but we're going to put one so on this up Arrow icon I want to be able to scroll up whenever we're down here say you're at the bottom of the page I want to be able to click and just scroll right on up to the top so that's what I'm going to add down here so around this um around this up Arrow right here we'll just create a little a tag there and we can just say a little number sign which is grabbing the ID of top which we just named just like that and we'll just wrap our icon like so so that's all we need to do there um again we can't really scroll so we don't need to do anything but as you can see whenever you click this it redirects us to the top uh ID so which is the snap bar and I'll give you an example once we scroll down and have more components on the screen that'll probably probably make a little bit more sense and what I want to do real quick before I forget I want that smooth scrolling feel I don't want it to like just jerk back up to the top so what we can do here is I'm going to say I'm going to use the asterisk there to apply to all I'm just going to say scroll Behavior we can just set that to smooth okay so that looks pretty good and before I forget I actually want this background let's go ahead and change the background color as well so we can just change that on the we'll change it on the body so we're going to be using let's see one e two nine three B so whoops I need to say background color so background color just like that and okay let's go ahead and save and that should change the background so yeah it looks pretty nice there so starting to come together here as you can see let's go and refresh to take care of those errors so let's go back into our uh our header component right and inside of our header component you can close that inside of our header component or navbar whatever you want to call it let's go ahead and give this a little bit of class so it kind of looks looks a little bit better because right now if we open this up it's kind of flexing all the way across the screen and when we want it to be responsive so what I'm going to say here let's say class name oh this is B position relative I'm going to say with full which it is then anything above small I want it to flex justify between items Center I'm going to give it some padding then I'm going to say I think that's all we need to do let's go ahead and save so as you can see it stacked up pretty nice now if we open this up that's where we have our changes it's flexed to either ends of the screen then once we shrink back down below our small break point which is 640 pixels it spans the full width so that looks pretty good um for our dashboard here let's just give this a little bit let's say uh font bold and we'll say text Gray 300 and 300 you can go from 100 I believe it starts up to 900 maybe 800 or 900 that's how you can change the color so the higher the number the darker it is and you can also do a custom value again like we said if you want to do some custom values in here you can say like something like that for black or or however you want to do it but again we're going to say text Gray 300. all right so let's give this div just a class we'll say padding of two but I only want this on the the Y margin which is the vertical margin so let's go ahead and Save there we have it so that looks pretty good um and I think that basically concludes our sidebar and our top bar so it is fully responsive everything is looking beautiful next what I want to do is create our main layout which is one column here then again once we pass our medium break point it divides into two columns so let's go ahead and do that right now so let's go ahead and inside of our app.js so we have our nav bar there just below our nav4 I'm going to create another div and inside this div in here I'm gonna have a div with the left column and then I'm just going to copy this down and we'll this one will be the right so you can't see anything there it is so let's go ahead and give this a class name and what I'm going to say is grid and I want this to be anything above the medium breakpoint I'll say grid columns 3 else just be grid columns one width full so Tailwind CSS is what you would call a mobile first approach meaning all of these styles that you declare are going to be based on mobile and then if you want any uh break points you add in use add in the midi queries like so so we have grid medium we're going to say grid columns three else we're gonna have grid columns one and then width of full now I actually put that on the rung one there so let's go ahead and drop this down we'll save there we go that looks a little bit better all right so if we open this up we have our three columns you can see one there and then the one there and this is another one but we want our left column to take up two-thirds so two columns and we want our right to only take up one column so we divided it up here into three columns so what we'll say here on this left column let's give it a class name I'm just going to say column span 2. just like that and then this one over here we can just say width full and it'll just take up the remaining area so now you can see and this is gonna this is gonna be responsive no matter how big or small you get it's gonna just take up the same uh amount of space so and then once we shrink down we want this to stack as you can see right here it they just stack all right so I hope that makes sense now let's go ahead and let's see let's go ahead and start off with our left column here so we're going to start out with our left column this is going to be a component in here another component here and then this one here and then we'll start on our right column so let's shrink this down a little bit so we can see what we're doing so for our left column in here what I'm going to do you can do this uh different ways so we're going to have a component near here we'll say new file I'm going to say a left if I can type in here I must say left column again you can name it or do whatever kind of naming convention you want to use well so we'll have our left column and then while we're at it let's go ahead and we'll say right column Dot jsx rafce and instead of just having this text in here what we can do is just say we'll bring in our left and right columns so we'll say left column just like that make sure it Imports and then again right here we'll say right column whoops right so let's go ahead and save so you can see not much difference there and again just to confirm whenever we hit that break point they're splitting so okay that's looking good so far now inside of our let's do our left column let's do our left column first what we're going to have in here we're going to have a div in here and I'm going to give this a class name I'll shrink that down a little bit I'm gonna say with full I want to display Flex I'm going to say Flex column I want to say justify between and then p dash 2 for just a little bit of padding in there so you can see our left column now has just a little bit of padding and now let's go ahead and first what I want to tackle are these cards up here at the top so they're going to be stacked and whenever we hit our break point so they're still going to be stacked there we're now switching two columns then once we hit our medium or I think it's a large break point maybe medium they're now going to become a row so let's go ahead and let's go ahead and do that right here instead of this left column we're going to give go to the next line and we're gonna have another div and inside here we're going to have our card items and we'll say class name we want this to be flex and then Flex column anything above large we're going to say Flex row a gap of two which is just giving a little bit of padding basically some room around those card items and then we have our card items in here okay so and inside here you can we'll just say these actually are going to be components but if we go ahead and just list it out like that you can see our card items and whenever we pass our large break point they should Flex so there you go so that's our card items they're flexed out whenever we go below our break point they're going to be stacked and then they remain stacked as we get on a smaller device but we're not actually going to use P tags here we're not using a paragraph element we're actually going to be using a trimmer component so this is one of our another trimmer component we're going to use so what I'm going to do here is create another component and I'm going to call this card item dot jsx raf-ce let's go and generate our functional component here now let's go back here to Trimmer and this is going to be I believe it's called a card so let's just scroll down and find a card so all different kinds of cards that we can use we're going to be using basically basically this one right here but we're going to add a little bit of extra stuff in there okay so let's go ahead and I'm just going to copy that and you can just paste that over the div so go ahead and paste and when you save it should put some parentheses around that since we're rendering out multiple elements on the screen there and then we want to of course we're going to import all of these trimmer things there so if we go ahead and look oh we need to so what we need to do inside our left column instead of our P tag let's go ahead and import our card item whoops just like that and we'll copy that a couple times and we'll delete that so just like that you can already see some stuff happening on the screen that looks pretty good not done yet with it yet let's go ahead and add a few things to it so let's go to our card item here and I want to add a few like I said a few extra things into it and I actually don't want this to be I want this to be with extra small not Max width so if we go ahead and delete that that's going to open them back up a bit we don't need this MX Auto since we just changed the width so I think that is looking pretty good so far again there we have it that looks nice so I want to add a this little badge in there so you can pass in some like trending values if it's going up is it going down there's some percentages so let's go ahead and do that next and we're going to do that let's go ahead and add a little space here so we're going to use a flex component which is from trimmer I'm just going to wrap that in a flex just like that the metric's going to be on bottom and then inside here I'm going to have what's called a badge Delta just like that and then inside here you can add a value in this case we'll say 12 12.5 percent I think the demo and we need to import this stuff so getting a little error here let's see what we're getting Flex is not defined so Flex is a trimmer component so if we go ahead import that just add it up here that should take care of any of the errors we see so if we go and save nice it's not laid out exactly how we want it and that's okay so let's go into this Flex here and what I'm going to say is justify content I want this to be between then I'm going to say align items to the center and inside here I'm going to put this I actually want this to be above the sales so let's see how that looks when we save it I think that is looking pretty good um and we can actually change this up Arrow so on the badge Delta you can use what's called a property called delta type and if you just were to say moderate increase amount of decrease it'll change the direction of the arrow so notice it is now pointing up and outward if we refresh make sure uh all those errors disappear so let's go ahead and open this up and as you can see it is completely mobile responsive with some nice padding in there and they stack whenever we drop below that break point okay this is looking awesome you guys I love this build I love Tailwind I love Veet I love trimmer these components are really fun to work with so all right so next what we want to do below this let's go ahead and see here below this we have this chart that you see here and this is what's called let's see what is this I believe it is called a area chart so let's go ahead and if we go to Trimmer here the area chart all sorts of charts we can use so I think this is actually the exact one that I was using um so yeah let's go ahead and do that one next so let's go back to our left column and we're going to drop this in right below this div okay so what we're going to say here let's go ahead and I'm going to add a div in here and I'm just going to go ahead and give this a little bit of class we'll say class name we'll say Flex Auto width full now let's go in here and we're just going to grab I'm just going to grab this card that you see here just like that and I'm going to paste it inside here so out of space we'll paste probably need to import some of the few things up here at the top so make sure we have card title and area chart so we'll import those and it's pulling in some it just has some like hard-coded data in here so make sure we need to copy down this const chart data array and this is something you could be pulling from a back end or something like that excuse me then we're also going to need this data formatter function so let's go ahead and save or sorry copy that and we're going to paste that in here just above our function now we're getting an error in here it looks like they're using some typescript and we did not opt to use typescript so I'm just going to delete that number right there go ahead and save and let's see if that takes care of it all right looking pretty good looking pretty good um yeah it's looking good right there that's how easy it is to use these trimmer components and look everything Stacks just nicely responsive awesome um but we have this little uh little funky uh there's no space in here that looks a little off so let's add this is our card I'm gonna say class name I'm saying margin top four yeah and you can change it around if you want to say two for um whatever you think looks good I think that looks uh pretty decent for now so and you can you can if you want to extract this into a another an ideally a deal world you would want to extract this into say a um you could say line chart or barge area chart component something like that um and you could do that you know what let's go ahead and do that let's go ahead and do that so I'm going to create a new file called area chart we'll say component.jsx and refce let's go ahead and do that so we'll say on our left column this card right here I'm just gonna cut that out and this is going to be area chart component and let's just paste that in there we'll save make sure you get the brackets around it let's go back and take all of our functions here and you could be passing these through as properties if you want to do that as well but hey we're just going to do it like this we'll go ahead and paste in here and we need any of these let's go ahead and cut those and we'll paste that in there so let's go ahead and save make sure we can get rid of the years cool so now it's a little bit more broken up potentially easier to read for other developers just makes a little bit more sense this way and you can get as as um you can narrow it down as far as you want as far as destructuring and just kind of breaking it up to to be more easier on the eyes developing so what I want to do next is grab this list of Swiss Federal counselors whatever this is looks to be like some sort of a table so let's go ahead and do something like that so let's go over to Trimmer again and let's see if they have a table there it is table Yep this is the one I used right there so let's go ahead and we'll do this let's say table component.jsx RAF c e to generate our functional component in here and for this what we're going to use let's grab our data in here so I'm just going to copy that we'll paste our data in there all right and then we're going to need to import some stuff from tremor and it looks like we're using these hero icons as well so we'll go ahead and grab that let's just paste that at the top all right and let's scroll down here and we'll grab all of our stuff that we need so we'll grab that whole card all right and we'll just paste it in our table component there we go there we go let's go and save make sure it hits you with those parentheses there and let's have a look oh we need to left column and inside of our left column we'll just put this we made this table component foreign look at that just makes it a little bit a little bit cleaner in my opinion and let's just give this card right here inside of our table component we'll say whoops I need to put that in the right spot not children class name let's give it a little bit of margin margin top of four so how does that look as you can see we're basically taking this data and just mapping through it that's the JavaScript they're using so pretty easy stuff they're just mapping through all the items up here so if you want to add another item for example um if you just were to add up here I'm going to drop this down a little bit so we can see this Sutter there since it's mapping through if you were to drop this down make another one here um it would just automatically add it to the list here so as you can see just creates another row so that's just a way to make things um more adaptive and using using react so kind of mapping through everything making everything responsive intuitive this is awesome so all right that is looking good you guys I think that wraps up the left side too smash the like button if you feel like you're getting some value out of this and yeah let's go ahead and test out our scroll to top feature that we have here should be a nice smooth scroll looking good you guys this is gonna be awesome when we host it too with hostinger much appreciation this is going to be awesome as well when we host it with hostinger so much appreciation to those guys over at hostinger thanks for helping us out all right so let's do our right column here so we're gonna have a few different components over there and look at that this is awesome you guys look at that looking good all right so let's see what we're gonna do on this right side here so we're gonna have um we're gonna create again we can break this up however you want to do it you can break it up so let's go ahead and say I'm going to call this a new file we'll say sales item.jsx something like that RAF c e now inside of our app here let's go find our left column we have our right column so we're going to put this inside of our right column let's go and close that one there let's close our table component area chart kind of getting a little bit messy here our sidebar navbar okay gonna clean things up a bit so inside inside of our right column we're going to have our sales item okay and now you can see we have our sales item component successfully being pulled in now on this right side I'm just going to give it a little bit of padding just kind of like we did on the left on the right or the left column so I'll say width full and let's just say p dash two just for a little bit of padding so let's go ahead and save okay so for our sales for our sales item component here I'm not sure let's try and find this thing so is it a donut chart let's see if not a scatter chart it's not an area chart it's not a line chart bar list it's not data bars and these are all some pretty cool things you can use so and you see how easy it is to incorporate these into your build so um without wasting too much time I'm not sure where it is so I'll just go ahead we're gonna use this one here in a little bit this bar list I'll just go ahead and code it out and you guys can follow along it's not super difficult so don't worry about that I'm just going to open this up a little bit so we can kind of see in the background quick drink all right so let's go ahead and import some things in here I know that's kind of a lot you guys I'm going to put a link to this in GitHub so if you want to copy some of this feel free to do so we're gonna use the badge Delta the button the card the donut chart Flex tab group tab tab list bold divider list list item metric text and title and let's grab some hero icons as well we're going to use uh Arrow right icon the chart Pi icon and the view list icon so that's all we're going to need and I'm going to grab just a little bit of data in here so again feel free to just copy this over from my GitHub I'll put a link Down Below in the description and then we are going to need one of those data formatters so let's go into where is that in our chart here yeah we're going to grab this one all right we'll grab that one and let's just put this in here whoops there we have it so data formatter and I think that's going to be I don't think we need to make any changes in here yeah that's going to be perfect now we are going to need just a little bit of State so we'll put our state right here so what we can say here is const and we're going to have the selected index and set selected index equal to use state and we'll just set that by default to zero and we're just going to toggle between zero and one so you State's not defined let's just come up here and we can say Port you state that should take care of the error um and to give you an example this is why we're using state so we're going to be showing the chart and if we click the list so right now we're on by default right by default we're on zero when we click this we're going to update the state to one and it's going to it's going to trigger a different component being rendered right or some different elements being rendered on the screen so that's all we're doing right there but it's pretty cool all right so inside here what we're going to have let's start out with a we're going to start out in here let's just delete that open up our parentheses here and what we're going to have is a card and let's go ahead and give this card I'm gonna like to see what we're doing here oh it looks good already nice so let's give this a class name I'm saying Max width full MX Auto is fine all right and what we're going to do in here what we're going to say and here I'm going to say might need to add a little bit of margin up there we'll get to that in just a minute so for this card we're gonna say we're adding our Flex element okay and let's go ahead and give this a class name we'll say space x axis we'll say eight which is two Ram Flex column anything above large we'll say Flex row so let's go ahead and save that now inside here we're going to have a title from trimmer and we're just going to say you can say whatever you like we'll say overview let's go and save you can see there's our overview very very nice now we're going to have our tab group just like that and then we'll have a tab let's go ahead and say tab list then we'll have a tab with a chart and copy this down and this one is going to be the list so let's give for our tab group here we'll say class name and actually we don't need a class name on here we're going to have the index so we're going to say index selected index just like that then on index change we're going to say set selected index now on this tab list where we're going to have we can say variant solid and if we go and save let's go ahead and add in some icons in there so you get a little pie chart or the bar list right so inside here we can actually just pass these in as icon properties so we'll say icon equal to chart Pi icon which is just one of our hero icons and this one's going to say view list icon let's go ahead and Save and look at that looking clean already you guys looking nice all right so next what we want to do next what we want to do is let's go ahead and before load this we're going to start off with this portfolio or we're going to add in some of these bar charts so the portfolio is going to stay the same we're just going to end this asset allocation we're going to allow the user to view this as a pie chart or a list so pretty cool and we're using the same data for that as well by the way so that's something neat to think about so let's see below our Flex here right so before our just below our Flex we're going to add some text in there so we'll say text and we're just going to say portfolio value something like that and we'll say margin we'll say class name margin top of eight okay that looks good there now below this text we're going to use the metric and you can add whatever you want I'm just going to say five four six five like our demo and then we're going to add what's called a divider should be like a little little line in there nice nice okay now below our divider we're going to have a another text in here with a class name of margin top of eight okay and we'll just say portfolio value and then let's do another metric I'll just copy this one I'll copy this metric in here um or you know if we're gonna have portfolio value yeah this is good here we'll say let's see you know what let's just say underneath here we'll say asset allocation uh we'll say asset allocation there we go and we can just delete that metric there we're only going to use one metric so let's go ahead and save so we have our asset allocation okay asset allocation and we're going to put this if you want we can put it in a bold so if I go ahead and cut that we'll say bold that's going to make it some bold text there looks pretty nice and let's just use this text again so we'll say text one asset class this is just what was um by default being used in the trimmer components so let's go ahead and save and now we can actually render out this data that we're using up here so I believe it's just it's just stocks and what we're going to do is just kind of map through all of those to display them on the screen so just below this text what we're going to say in here we're going to say we're going to open up our curly brackets and what we're going to say is selected index if it is equal to zero if that is true we're going to show something else we're going to render something else out on the screen this is essentially what we're saying here I'm just going to put empty string in there so it kind of gets rid of rid of the errors and on one hand we want to show the donut chart and on the other hand we're going to show our list items right our list row so inside here we'll say donut chart just like that and the data that we're going to pass through stocks then we're gonna have our value formatter function that we already wrote that's just going to be that uh formatter let's go ahead and Save so that you can see our chart is actually pulling in the numbers from our data up here so that's pretty cool and if you hover over it you can see this off running AG 10456 that's where we're getting it from so awesome awesome powerful stuff here you guys now so we need to add a few more things in here so we have our let's see here we have our we can do a show animation property that we're just going to set to false for now we have a category that will say value and then we'll have an index we can just set to name and then let's give a little bit of class name we'll say margin top so let's go ahead and Save that is looking nice that is looking nice so and you can see we could toggle back and forth but we don't have anything on the list we just have this chart else we're just showing this empty screen so if you're this empty string here so if you say something like hello I know I misspelled that but you can see how it shows hello on the screen right so let's go ahead and add um this little list item there is what we're going to render out okay so what I'm going to have in here and I'm going to change this that's a little bit too much so I'm going to lower this down to six okay so instead of uh hello all right let's delete that we're going to use a fragment I'm just gonna wrap multiple elements in here and what I want to have is a flex and I'm going to give this a class name of margin top eight and then I'll say justify content between and inside here we're going to have a text and what we can say here we're gonna have make this bold stocks and for this text we'll say class name truncate that looks pretty good all right now below this text here we're going to have one more text element and this one is just going to say since transaction or something like that all right now below this Flex what we're going to have is our actual list items that we're going to be rendering out on the screen so first we want a list just like that and we'll just give this a margin top of four and now we can actually render out our stocks just like we did up here so instead of selected index what we'll say here let's say stocks dot map and we can just pass the value of stock or what it can be whatever you'd like and then we'll have we're going to render out is actually some components we're going to use our parentheses in here and what we'll say what we'll say in here we want to render out a list item just like that and we need to give this a key so but first we'll say we'll say stock.name and we're getting the stock from this right here so if we go ahead and save you can see we're now rendering out all of the names right all of the names and we're going to end up rendering out the value performance and delta type Etc um looks like it's throwing a fit because we don't have a key so check the render method of sales item each child in a list should have a unique key prop so easily fix easy fix down here what we're going to say is just on the list item we want to add a key property and we'll just make the the key stock.name so each item is just going to have a key of the name so if we go ahead and save refresh that takes care of any errors now below this let's go ahead and add our let's view our list while we do this that looks pretty cool right yes all right so in here so we have our stock dot name on our list item let's go ahead and wrap you know what let's let's cut this and I'm going to wrap this inside of text just like that I think that looks a little bit better and a little bit more formal next we're going to have a flex in here and inside this Flex we'll have another text and inside here we're going to open up some JavaScript so because right now it's going to be stock.value but we want to format this into a string right so what we're going to say is intl DOT number format we want to format this to the US and we'll say dot dot format the stock dot value then we'll just say to string use the tostring method now we have this rendering out this text as a string and let's give this here this Flex we'll say class name a space x two and then we'll say justify content we'll say end so it kind of shoots it over at the end whoop not ends okay that looks good there now um what I next what I want we want this little at the bottom here we just want to have this little like view more button right so let's go ahead and do that right now and we're going to put this just below uh rendering this out here there we are just above the card we'll have another flex and inside here we can have a button that says view more let's make this lowercase all right and let's just give this we'll say margin top of six padding top four border T So border top give that little line in there it looks pretty cool and for this button we have some properties we can pass in we'll say size extra small I'm going to say variant of light all right and we can say icon if you want to add an icon to the button we use add in a hero icon we'll just say Arrow right icon all right and if you want to move this icon to the other side very simply we can just say icon position right if you go and save it's looking nice all right what I wanted to do is kind of bugging me a little bit let's see if we can say margin top two there you go kinda I was off a little bit all right so if we open this up I'm sure that may have gone off the screen a little bit everything is completely responsive whoops let's drop this down all right looking nice oh this is looking a little bit funny here um we need to fix that right there it's kind of going off the screen a little bit all right let's check our column uh you know what that's why it wasn't had an s in there so you know what let's go ahead and remove this that was probably what was causing the issues yeah all right you guys probably saw that and didn't even have that issue all right you guys yeah smash the like button if you feel like this is cool a quick drink all right looking good this is awesome you guys this is how easy it is with trimmer and the trimmer and Tailwind material icons or sorry not Material yeah I've been building a lot of material lately so hero uh icons so very awesome sorry if I was like chewing on a little bit of ice um so yeah next let's go ahead and for this final component or a couple more components we're gonna use this website analytics I think that's pretty cool so let's go ahead and find we're going to be using something called um We're gonna call this web analytics so let's just go ahead and open up our components here we'll create a new component call it web analytics dot so say.com jeez jsx type oh my gosh rafc sorry I've been like working all day as well so okay so next let's go find our analytics component that we're going to be using from trimmer components right so where was the our analytics that we're using I believe it was on a card area chart forgot what it looks like here it's a probably a bar chart right maybe not a bar line Donut Bar list I think that's it yeah sweet so let's go ahead and grab all these things that we need to import and we'll just import them here at the top next we'll grab this data here so let's just snag all that data cool so we'll grab that we'll throw this in up here just want to give a little bit of space so again just post pasting this at the top here awesome and we'll go down here let's just grab our component and we'll paste it in here like so and then make sure you go ahead and save it's going to throw the parentheses around there so let's just have a look at this and see how it rendered on on the screen oh I forgot we need to write column and then inside here we're going to say web Analytics right there we go web analytics all right all right looking good um let's add a little bit of margin here and I think we're gonna need to change that as well so I'm going to say margin y four that looks good now let's open this up yeah so we're going to say with full so right now it says Max width large so let's just change this to say Max width full all right and if we shrink this down it should stack any second stack stack there you go all right yes yes our chart there oh nice nice looking good you guys so that's that's a good one there that's pretty easy one next let's go ahead and add down here just another list to fill out the look and feel of our dashboard so let's go ahead and look for that again we're just going to throw that down on the right column so we can call this something let's go ahead and say I'm gonna call this or score list dot jsx so RAF c e just going to generate our functional component here now let's see we're using I think it was a list so it's not a bar list is this the only bar list is that it yeah no let's see here it's not a line chart let's find data bars not data bars line chart bar chart so many things you can use out of here you guys so many things you can use it's not the area chart you can we can use whatever you whatever we want here but let's see bar chart I'm going to scroll down it's not the line it's not the donut it's not the scatter chart though it is kind of cool the scatter chart accordion's kind of neat just drop down makes everything easy this would be somewhat of a pain to write in just CSS got the badges the bar list where did I find this call outs those are neat we already did the cards the data bars is it tucked in here somewhere date range picker again this is kind of cool we're not using this but all this built in natively that is awesome icons a legend that's neat select list is this it yeah there we go okay that's what I was using cool all right so let's use that list right here uh uh let's use that yeah that second one so let's go ahead and just copy this okay come back to our code and we're going to import whoops we're going to import that there next we're going to need to grab the data in there so let's just grab all the data again you could just be running like a use effect capturing all the data however you want to do it let's grab our card and we'll go back over here and we just paste over this there we go again make sure you save return the parentheses in there and Max width extra small we'll change this to full and let's see how that looks of course we need to write column let's bring in our score list the component that we have here make sure Auto imported let's drop this down look at that look at that you guys look how easy this was to create this custom dashboard in react tailwind and trimmer components you guys let's Host this thing live on the web thank you to hostinger let's go ahead and drop this down and let's go ahead and Host this thing right now we're going to go to hostinger.com code Commerce make sure you go to slash code Commerce so you can get the extra discount I secured for you guys go ahead and click claim deal okay so let's have a look at their packages they have the single the premium the business the cloud startup so if you look at 1.99 299 399 let's take a look at what you get for the dollar 99 this single here you're getting one website so let's go ahead and cross that one off right now I'd recommend what they're promoting the 3.99 a month business package it's going to give you up to a hundred websites you get the increased speed above the basic and the premium they're gonna give you up to five times more performance you're getting 200 gigabytes nvme storage daily backups free email unlimited free Security Site lock unlimited bandwidth a free domain you're getting a free content delivery Network and if you're using Wordpress which we're not you have a ton of built-in WordPress features which is awesome you have a no code website builder which come on guys we're coders so we're gonna get go ahead and skip that but if you want to deploy something a little bit easier then they do have that option for you security they're going to give you an enhanced DDOT protection web app firewall Cloud Fair protected name servers the malware scanner secure access manager and a free domain who is privacy protection basically this means if someone searches up your domain and who is it's not going to show your name it's just going to show hosting or information then of course a 30-day money-back guarantee 99.9 percent uptime guarantee with global data sitters and 24 7 customer support so I'm gonna go with this business plan at 3.99 a month plus two months free so we have a couple more options here of course we're not going to do one month the savings really start to come into play as you get more months so they have a 12 months this is going to be 4.99 a month two uh two years which is 24 months for the 449 if you want the biggest discount go ahead and do the 48 months plus they're going to give you two months additionally free so this is a pretty great option and you guys you don't have to have the same website so you know in a few months if you want to host something else or you have another other sites you want to add to that then you can do that as well so I'd like to choose the the best value which is the 48 months for the two months free let's scroll down go ahead and enter in your information here you do have a coupon code make sure you enter the code to so you get that extra discount I'm going to type in code Commerce go ahead hit apply and you're going to get an additional 10 of savings so go ahead and enter in all your information and click submit all right so you've signed up we're in our hpanel go ahead and click on home or you can just type in hpanel Dot hostinger.com and let's go ahead and claim our free domain okay so now we get to choose domain and this is the address for your website I'm going to type in I don't know I haven't tried this yet let's see uh code Commerce Tech something like that let's check the availability is it available your domain is already taken I gotta try another one let's try this code Commerce Pro check the availability all right there we go sweet so let's go ahead and claim our free domain you're almost there let's do this all right it's going to send you an email request so go ahead and make sure you confirm that okay so next let's go ahead and click on hosting now this is it right here our business web hosting I'm going to click set up we'll start now so do we want to create a new website well we've already done that so let's just create an empty website we already have our free domain code Commerce Pro let's select I'm in the US so I'm gonna go ahead and click on North America if you go and click on that you can actually see that there are different hosting centers around the world so go ahead and click on whatever location is close to you change let's finish setup initializing our project okay so let's go to manage site next I'm going to click on file manager now it probably already configured a little something for us we go ahead and click that so as you can see code Commerce Pro this is our live website so what I'm going to do is actually I'm going to pull this over and what I'm going to do let's go into our public.html we can actually just delete that file so go ahead and delete and let's go back to our code let's go ahead and stop our server and we actually need to run a build command and what that's going to do is going to compile all of our code and just do a couple files we can upload those files to hostinger so we're going to run npm run build so just run that command and as you can see real quick it's just going to bundle up your application into a few small files so you should see this distributed or distribution folder here and this is what we're going to upload to hostinger so I'm just going to right click on this and say reveal in finder let's open up our dist folder I'm just going to select all that and I'm going to pull it over here to hostinger and just drop it in here inside of the public HTML folder there we go so let's just open this back up now let's go check out our live page here let's go ahead and refresh oh look at that look at that our dashboard live on the web that is awesome code Commerce Pro has all of our components here look at that perfectly responsive you can pull this up on your phone you can show it to your friends family co-workers throw it on a portfolio website if you want to showcase it to potential employers that is awesome smash the like button you guys if you feel like you got some value out of it I would very much appreciate that thank you for sticking around to the end and a huge shout out and thank you to hostinger for sponsoring this video and giving us an awesome service to host our site and real quick if you want to jump back over to our hpanel you can also like I said you're going to get a free email so you can go ahead and set up an email account which is mine's going to be you can call it whatever you want it could be Clint at codecommercepro.com it could be info could be support if you're running some sort of business so it's really up to you on how you want to showcase your email I did mention a free SSL certificate so let's go ahead and configure that if you come over here on the left we click on security we're going to click on SSL all right so I just came back and checked and it looks like the SSL the Security Site lock certificate should be enabled so I'm going to go ahead and refresh and as you can see here we now have this connection is secure the SSL certificate is valid so again that wraps up the build thank you for watching you guys smash the like button go check out hostinger.com codecommerce to get a discount on their platform thank you guys I'll see you on the next one

Channel: Code Commerce

Views: 8,782

Keywords: html, css, javascript, react, vitejs, hostinger, deploy a website, host a website

Id: GSgX60KBjTU

Length: 73min 43sec (4423 seconds)

Published: Mon Aug 21 2023