Build a React Data Dashboard App | NextJS, Typescript, MUI, ChartsJS - 1.Project Setup

what's up coders today is a good day nay a great day you know why because today is the day we start a brand new series that series is the data dashboard series we are going to build the UI for a data dashboard with nexjs material and typescript amongst many other libraries and Technologies but those three are going to be the core for this platform now why are we choosing those Technologies well it's a no-brainer for next.js nexjs is essentially cannibalizing the react landscape it's used everywhere most people are switching to server-side rendering a lot of people are going to be using next JS for Enterprise level work or work that you generally are going to get paid for there are a lot of great server-side technology Frameworks out there but this is probably the one that gets the most Mass adoption uh there's others out there as well but this is the one we'll be focusing on the other is is typescript which of course comes without no doubt typescript is pretty much used in most front-end systems uh you'd be hard-pressed to not find it obviously there are people out there who don't use it but we are going to be using it and it is one that will be a really good transferable skill and last but not least is mui which is material UI which comes from Google's material design system now materials design system is very distinct and very easy to tell but also they give you the tools to build amazing Design Systems amazing component libraries which are the same thing essentially amazing uis that look fantastic and you can customize to look even more epic now some of the biggest websites in the world use material UI and they're so distinct from one another you probably couldn't even tell but now we ask the question why are we building a data dashboard well data dashboards are used everywhere and as a front-end developer or even a designer you're gonna come up against dashboards these are things that are going to be your bread and butter for creating front-end work at some point other you're probably going to work on a data dashboard of some kind whether it's for checking finances for checking performance of Hardware or checking something else that requires real-time data so who is this course really for well it's great for beginners who are looking to add something to their portfolio that is a strong centerpiece to show this is how I can build a really strong front end and UI for a dashboard which could be really handy for the company that you're applying for it could be really good for an existing company you're in that you want to show them we should probably use these Technologies to build this dashboard because I've already gone ahead and built one myself and you can show them this demo that we build or they could be a multitude of reasons it could be just to add to your portfolio or something that you want to learn so if you want to learn how the dashboards are built and all the considerations the accessibility the way routing works the way authentication works all these things then this is the one to watch so if you haven't already make sure to subscribe and follow along as we go through these videos but what we're going to do is we're actually going to do some setup now and we're going to get the project and ready to go and we're going to build some simple routes and some pages and components to get started so let's go take a look foreign [Music] s but what actually are they for those who don't know this is what a data dashboard really looks like you've got information available in an easy to digest way generally with a good ux unless you use AWS and that is one of the worst dashboards of all time but in contrast this is a very simplistic nice and easy to use dashboard it's all very spaced out and it's got good ux so this is some cards some graphs with nice animations and it's got some tables it's got separate pages as well some admin type stuff so you can manage users you can search through companies you can edit your own account and yeah this is the type of thing that is in a dashboard and albeit this is a very simplistic dashboard because dashboards can get very complicated uh so this is an example of a 404 page then a login as well which we'll need so you can see there's a header side menu and then the core dashboard in the center so these are the types of things we're going to be building we won't be using a design but we will be building this in a similar way that uses these types of components like side venues headers and charts and things like that but we are going to be building it to a high spec we're going to be building the UI with accessibility in mind uh ux in mind and theme ability and we're also going to build it in a way that somebody can come in and edit this and turn this into a professional project if need be that's kind of the bar that we've set for ourselves to work on this project and our expectations if you were interested in this particular demo just to have a look at it go check out DVS uh on GitHub the DVS IO Dash IO and this is that particular project I'll leave the link in the description so the Technologies we'll be using are material UI and this is a design system so if we go to material UI and mui core uh this is coming from the material design system and the way Design Systems work is they work on a component level so if I show you like we'll go have a look at the button so these buttons here are a part of the material design system and Design Systems can only function if they are served by component libraries so one can't really live without the other but a component library is essentially a way for a design system to be served to the users um there are different parts to it there's obviously the designs of the uh the design system which material actually gives to you for free so material has this figma file with all the designs on it and essentially what you do is you take that file and you can just re-jig it redesign it and make it fit your own style and there you go you've got a design system all ready to go with a component Library that's accessible it's amazing this is why material UI material design are so huge and it's great as a skill to learn if you're if you're learning front end or if you're looking for another skill to learn and then another library to put in your tool belt so material UI is a really good one that we'll be using and the other really good one is next.js so we'll be using next JS to be the core front-end framework for this um this is going to be a UI demo and project so we won't really be tying in into the data layer too heavily this is one that can scale with the project so if you ever decided to tie it into the back end and give it something that isn't a mocked data then this would be really good and obviously the final one is typescript so we'll be using typescript to type our our project so we'll make sure that we've got end-to-end type safety and we'll probably be introducing more libraries and more Technologies to help support typescript as we go along but for now this will be the core part of it so typescript next.js and material UI now the next stage is we're going to start building our scaffolding for the project and start building some of our routes and pages and installing these Technologies so like all good projects we're going to start in the terminal and we're going to set up the scaffolding for the project by installing nexjs and mui we're also going to include typescript with our next installation and I'll show you how to do that just now but before we do we need to make sure that we've got the correct version of node installed so let's just double check so we've got 12 18. um so what we're going to do is we're going to use node version manager to grab 16. so just so we're fairly nearer to LTS all the latest version of node NVM or node version manager if you haven't used it before is an excellent way of switching between different node versions and being able to use the right one for each project because not every project has LTS as the accepted node version and generally if you go into the package.json you can see what node version that they want if it's stated but um yeah NVM definitely a good one to to grab so now we've got uh version 16 of node let's install next.js so let's go to the next.js website and we'll go to the docs and we'll get going with the typescript version of the installation so we'll use the npx command to create a project within our sites folder so in here we'll just paste that in and we're going to name the project now naming the project is actually going to be the folder name that it's going to create so we're going to call it data dashboard obviously curios by data dashboard we would like eslint and I would like to use the source directory and I would not want to use the app directory right now and yes that seems happy so the import Alias is essentially how we're going to import things within the project so assets within the projects so like components for example you won't need the full directory or path in the import and you can simply just use this alias and that should work fine if you're using um webstorm or vs code it should automatically do that for you when you add an import statement right so as that's installing let's go grab what we need for installing mui after so we're going to go to mui's page and go to the front and just copy that go back to our terminal and install that so we'll be installing uh material UI and we're going to be installing emotion react which is essentially the CSS in JS engine that runs mui um so mui is basically using CSS in JS under the hood to style it with inline styling and emotion styled is essentially the CSS in JS solution that emotion uses it's very similar to style components in the fact that it's actually named after style components and yeah so if you like style components this is a great way of using material UI and it all comes packaged with it you don't have to use that you can use another solution like SAS or whatever you'd be comfortable with but we'll take all of that on board so we've got that installed so let's go to the folder cool and we're in so we're now in the data dashboard and let's run the project so npm run Def and there we go project installed so you pretty much have everything we need to get started so let's get into it so right now this is our demo page but what we want to do is get our dashboard Essentials set up so core components pages and routes all set up ready to start working on so let's go back to webstorm and we can see we've got the index.file which is the demo that you saw there that's in the pages folder so open that uh we'll keep the header the same for now but within here we'll just start closing some of these folders uh closing some of these divs sorry and just collapsing them I will delete all of that because we don't need that right now uh what is the description so we want to say a data dashboard as a description and yeah we'll just call it CV data it's called a data dashboard and then I'm going to delete this next image delete enter we don't need that anymore let's go take a look yeah so that's all blank now so that's our blank canvas to get started it's currently black but that's fine uh I prefer a dark layout to get started anyway so the first thing we want to do is we want to add the dashboard page so let's go here and we will create the dashboard page and if you're using vs code or webstorm you can pretty much create folders when you create a file so you can see I've created the dashboard folder and now I'm creating the dashboard file so we will do it as a TSX file so if we do const uh dashboard oops turn and we'll just do H1 dashboard for now I want to export default dashboard make sure to import react get rid of that brilliant we want to go to index here make sure we put dashboard in here and then there we go we can see that on the main page and if we go to forward slash dashboard ah obviously so I had a narrow there so I just need to rename this to index.tx because it does need an index file to redo and then if we go back and if we go back to dashboard oh yeah so we can go to the dashboard page now um we need to just create a few more pages so let's go back copy and paste this and we will create a login page um for the index.ts X and we will have login we will create components for these later pause dashboard all right so let's go to login and the login is working and let's go back to dashboard and dashboards working cool so let's go here now there is another way we can do this we could do it where we create the component within the file the page component so we could do this essentially so we create login.tsx take this copy and paste it paste that into here and we'll rename this index.ts sex to a TS file and we'll just rename this to there we go and then all we do is we just go default from login so this creates a index page for next.js to essentially read it because next.js is going into this folder here login and looking in the root folder what it's not trying to do is going to login and then look for login here the component again so this makes sure that at the default route of the folder that it tells it and points it to the component folder so we'll put login test just to see if it worked and we'll go whoops login and there you go now it's connected to the page component so if we go back go here and we can do the same for dashboard so we'll create a dashboard page and we will refactor this to a TS file grab this pull it out and export default cool and then we'll go check that out and if we go to the home page it should show us just the dashboard so let's go to the index file now in this index file we're going to need a header and a side menu so we're going to add those components now and that should be the basic starting point for this this project really so we'll close these here we'll go here and we'll create component so we'll create a components folder and we will have header Dot I have header dot TSX so that's gone and created the components folder and the header folder with the header.tsx and we'll just create an index file to use the root from here we probably won't need this because of next js's component export aliases which we saw at the start so we can just use Alias structure to get around this um but I also just like to have it in general uh as as just knowing that when we refer to the folder we are pointing any reference to the folder to the component straight away so it's just a best practice I like to do all right so in default we want to say header.tsx is where we want everything in this folder to point to let's go grab one of these Pages here and we'll just say header uh multiple H1s is causing me a bit of a twitch but I won't I won't feed it let's go to create a new component so we will create a side menu component right so in here what we're going to do is just create an unordered list and then what we're going to do is we are going to create a list item we will create uh three of those and let's go check that out and we will have settings as the first option and then we'll have profile and the analytics page now ideally we probably want the analytics page up here and actually we want the profile page probably higher up yeah we'll use that for now we'll add to it we'll we'll develop the list but as a cool starting point um that's fine so just rename this to side menu and just make sure we add an index file brilliant and let's go add these in so we'll add the header and you can see here it's using the Alias import that next.js uses here that we spoke about when we set up the project and it's getting the header and the next thing we want is the side menu cool and that's Auto imported that for us with webstore brilliant so if we go to the main page we can now see the header the dashboard and the side menu none of it's arranged yet we will do that soon but for now this is our call setup what we also want to do is we want to just set up a few subroots quickly so we'll go here and we'll set up some subroots so we'll set up settings and we'll go settings.tsx I'll just create another index file here make sure that we are pointing it to the settings component and then what we want to do is we want to go to dashboard just grab this quickly go here make sure this is set to settings and settings cool right that should be fine so it's pointing to the settings file so let's go test this out so we want to go to dashboard which works and then we want to go to settings and there we go so we've got nested routes set up we'll add a couple more so we'll add profile we will add an index file make sure that points to the profile page okay that's been replaced and then we just need to do one more Analytics make sure the pointer index file is pointing to analytics the component uh just make sure this all says analytics and let's go test these out so profile looks great and analytics is it analytic there's Analytics is there anything here on the analytics page is this pointing to that should be correct very odd it does not like the analytics directory so I suspect for some reason it just does not like that page name so let's add Analytics with another s see if that works it does not like the analytics page name I don't know whether that's a reserved word or not I don't know if anybody in the description can let us know why that is the case it did not like the analytics keyword in the root well whatever the reason it's working now um we'll probably have to change this to something else um what can we name this to let's just change this to data for now that's a terrible name isn't it naming things it's always the worst so let's just change this to data and change this to data just make sure that's pointing to the right file [Music] that's already renamed it for us thank you webstorm cool right so let's try this instead hopefully data's not a nope data's allowed so next.js is allowed data so cool uh and then let's go back to the main page brilliant so we've got our header we've got our side menu we've got our main dashboard page we also have our login page all sorted which we probably should have checked out just to make sure that that works yes login's working so we've got our login we've got our subroots within the dashboard which will be interesting because we'll be using URL parameters and all kinds of fun things so if we click on bits of UI it should remember that we've done that and we should be able to monitor essentially what part of the dashboard they're using and they can copy and paste that and send that to someone else if they want to that's the idea so that will be coming up and there we go so that's the core of the project setup we have all the starter stuff in place we've got all the Technologies in place the next step is authentication so in the next video we're going to kind of flesh out the components the layouts and the routes and all that stuff a little bit more and make a login page and Source out the authentication so stay tuned for that make sure to like And subscribe to stay notified of the next video as it drops make sure to follow me on Twitter at the hashton as well if you want to find out when the next video is around about going to drop but yeah I hope you're enjoying the course hope you're enjoying the topics and to all of those who have joined us on this data dashboard course let's have some fun and I'll catch you in the next video

Channel: Curious Byte

Views: 33,787

Keywords: data analytics, data dashboard, dashboard, frontend, nextjs, react, next js 13 tutorial, nextjs 13, next js tutorial, typescript, mui, material ui, material ui react, material ui react tutorial, chart react js, next js app

Id: E9BYc5_etOk

Length: 25min 24sec (1524 seconds)

Published: Tue Mar 14 2023