Build and Deploy a React Admin Dashboard App With Theming, Tables, Charts, Calendar, Kanban and More

Key Takeaways

hi there and welcome to a project course where you'll build and deploy the best react admin dashboard application you have ever seen I'm so excited for this one this dashboard application is fully mobile responsive and customizable you can choose between six beautiful theme colors as well as toggle between the dark and light mode our admin panel includes One dashboard three pages four apps and seven fully functional charts the possibilities of different kinds of applications you can make by using the skills you learn in this course are endless without any further Ado let's take a look at what you learn how to build from scratch in this video and just imagine all the different kinds of applications you'll be able to build on your own the dashboard includes a beautiful view of all of the most important metrics such as earnings recent transactions sales overview and more the first page is the orders stable and it includes a pagination system the employees page is the second table and it includes a completely functional search and filtering functionality and finally the customer page table is fully editable which means that you can select multiple rows and delete them as well as edit each field individually this is not a specialized dashboard which means that you can use specific pieces of it for absolutely any app you can think of that's why I've included four apps that are crucial to almost every dashboard the first app is a fully functional calendar and when I say fully functional I mean it you can drag and drop events and edit the title location start and end date and every single other little detail I feel like I'm on a TV sales show by saying this but that's not all you can even change the Calendar's view from day week month and even an agenda list isn't that crazy the second app is a can ban board oh you know just like an entire Trello or jir app right inside of our dashboard you're going to learn how to make that as well then we have a fully fledged what you see is what you get editor you can make text bold you can add images and essentially modify the text in any way you can think of and finally we have a Color Picker app highly useful if you want to allow your users to choose specific colors for example to theme their applications and now the fund begins you'll learn how to create seven different kinds of charts let's check them out one by one the first chart is the line chart you can hover over the lines to get more information on these nice tool tips the second chart is an area chart you can click on a specific value to hide or unhide it from the graph the next charts our classic bar chart and a pie chart and finally we have some more custom Financial candle charts great for tracking stocks and we have a color mapping chart right here and finally a pyramid chart these are charts that you don't really see that often and if you wanted to develop them you would spend the weeks on trying to achieve that perfect look again the possibilities of different kinds of applications that you can make by using the skills you learn in this course are endless users can also collapse the sidebar to view the content in its entirety and will also cover some additional widgets like the shopping cart the chat notifications and a user profile oh and I almost forgot to mention our admin dashboard is fully mobile responsive as you can see the sidebar automatically collapses and if we open it we can move between all of our Pages naturally it feels like a a native mobile application alongside building this phenomenal application in this video you'll learn Advanced react best practices such as folder and file structure Hooks and refs we're going to have many different components in many different pages so I'm going to teach you how to scale your smaller react applications to a higher Enterprise level size you're going to also learn Advanced State Management of the entire application using react context API and most importantly you'll learn how to use sync Fusion sync Fusion is the world's best UI component suite for building powerful web desktop and mobile applications it includes more than 1,700 components for all major platforms and of course we'll be focusing on reactjs develop applications using their components will save you hours of time and you will end up with a professional and a beautiful production ready application all components are responsive by default so you don't have to do any extra work to make them mobile friendly and best of all is that sync Fusion Community license provides free access to all sync Fusion components for individual developers and small businesses that means that you'll be able to get everything I mentioned in this video completely for free all of the advanced components are included functionalities that would take you weeks or even months can be developed in hours using their components in just around 30 to 40 lines of code you can build a very complex calendar editor and a chart almost all components in our app have been built using sync Fusion tables charts calendars editors and essentially anything you can see here everything is super easy to use customizable and it's responsive out of the box sync Fusion is the sponsor of this video but I wholeheartedly love their software and I would recommend it to every single one of you I'm going to definitely use it on my own Enterprise level projects and if you're like me when I first heard about syn Fusion you're going to be asking hey but isn't there material UI chakra or and design these are also some other UI libraries right these UI libraries are good but they just don't have complex components as sync Fusion does sync Fusion is simply the One-Stop solution to building complex apps faster and as I've said completely free for individual developers and small businesses so enjoy once again I'm so happy I can share this with you and give you a comprehensive tutorial on building the best admin dashboard on the internet if this video reaches 20,000 likes I'll create more videos just like this one so subscribe like and let me know what you'd like to see next in the comments in the end we'll also deploy the app so that you can share it with your friends put it on your portfolio and get a job once you deploy it share it on Twitter Instagram or LinkedIn and tag us we'll gladly reshare your posts on our social media channels for the entire world to see with that said let's dive straight into the [Music] code as we always do on JavaScript Mastery we're going to start from from bare Beginnings meaning we are right now on our desktop we can rightclick and create a new folder we can call it something like dashboard once you have your folder you can open up your code editor of choice in this case we'll be using visual studio code the only thing you have to do is simply drag and drop the folder into your Visual Studio code window once you do that you can expand your Visual Studio code and you can go to View and terminal Visual Studio code has a great integrated terminal which we're going to use to set up and initialize our react application so let's start by running MPX create Das react Das app and then slash to create it in the current repository we can press y to install the following packages and this process usually takes just about a minute so I'm going to pause the recording recing and I'll be right back and there we go now if you open up your file explorer you'll be able to see that we have a few files and folders here the most important folder right now is going to be the source folder which contains our entire react application what I always like to do with create react apps is completely delete the source folder as it contains some files we don't necessarily need so just right click and delete it and then right click right here and create a new empty Source folder we can immediately start by creating some necessary files for every single react application and of course the most important one is the index.js file this is the file where we import react from react and this is also the only file where we import react Dom from react-dom so in here we hook up our react application to the real Dom what we can also do in here is import app from app and this doesn't yet exist but we're going to create it really soon so just SLA and finally we can say react dom. render and then as the first parameter we can provide our app and we can say comma document. get element by ID and then root this is going to make sure to hook our react application to the root div now of course we use this app but it doesn't yet exist so let's go ahead and create it we can rightclick the source folder and click new file and let's create a file called app.js inside of there we can use a cool little shortcut called rafc which is going to create a react Arrow function component with export if this didn't work for you that must mean that you don't have the es7 plus Snippets so just type es7 plus react Redux react native Snippets and install that extension then you should be able to Simply type rafc and get this Boer plate code great so now we have our index GS and our appjs so now might be a good time to install all of the necessary dependencies that we're going to use for this project and we can of course do that inside of our package.json to make your life easier and to make sure that this project works exactly as it is supposed to for years to come I'm going to give you my package.json so down in the description there's going to be a GitHub gist containing all of the code that I'm going to be referencing in this video so just go to that GitHub gist find the package Json and paste it right here as you can see this packet Json is going to have the project name version and it's going to have the exact versions of specific dependencies this is to ensure that we are working on same versions of dependencies so even if you're watching this video two years after it's been published it's still going to work perfectly for you now as you can see we are just using plain react here we have react react Dom react icons and the react router Dom as well nothing major but as you can see see most of the dependencies are actually coming from at sync Fusion so in here we're going to get their amazing calendar chart drop-down grids inputs Canan boards popups Rich Text editors and schedule components this is going to make our application the best dashboard on the internet so the only thing we have to do to install these dependencies is go to view and then terminal and finally you need to type mpm install D- Legacy Das beer- deps this is going to make sure to install only the right dependencies and finally we can press enter this process is going to take about a minute so while that is running let's go ahead and set up our Styles what you can do is you can create a new index.css file in the source folder index.css inside of here you can copy and paste the file which you can also find in the description it's going to be a simple file containing the import for a good-look font we're resetting the margin and padding on the body and we're importing Tailwind so we can use those great Tailwind styling options the next file we're going to need is going to be called app. CSS inside of our app CSS we're going to have some more Styles you can again find these Styles down in the description inside of that same GitHub gist in here we're just resetting some of the necessary Styles and making sure that everything is looking good and while we were creating those files it looks like our app has installed that's great we'll be able to run it soon enough to check that everything is all right but before we do that we just have to set up Tailwind Tailwind is an amazing CSS framework which allows you to wrap rapidly build modern websites without ever leaving your HTML or in our case jsx instead of having separate CSS files you'll be able to use utility classes such as Flex padding top 4 deex Center and so on to more easily style the components on your website to install it we can go through this process right here but we have already done most of those things by installing all of the necessary dependencies which were included in my package ason so just to to finalize things we have to add two new files outside of the source folder meaning in the root of our directory you can right click right here and create a new file it's going to be called Tailwind doc config.js inside of that GitHub gist in the description you'll be able to find this file right here it's just a quick setup specifying some fonts font sizes as well as background colors to make our workflow so much smoother and the last file we need is going to be also in the root of our directory and it's going to be called craco doc config.js inside of that GitHub gist you'll be able to find the CCO do config.js file as well so simply copy and paste it right here I know we've done a lot of copy and pasting for the start but that's because it is the start so we need to make sure to properly set up everything so that our development workflow is as fast and as smooth as possible spending this time on the setup is necessary because from now on we'll just focus on creating the actual code and that way you won't have to worry about some bugs or inconsistencies you'll be able to just code along and learn so much so with that said I think now we should be ready to actually run our application and see what's happening you can press control Tilda or go to view and then terminal and finally you can run mpm start this just ran our application on Local Host 3000 and you should be able to see it in your browser if you zoom in a lot you can see that we have a small app right here which means that our app is working to make sure that Tailwind is properly connected to our application we of course have to go back to index.js and and we have to import that index. CSS file so just above our import app we can say import and then in a string SL index. CSS that's going to import all the Tailwind utilities we can also go to appjs and inside of there we can import a string. slash app.css there we go and finally instead of just typing f app in a div right here let's change this to H1 and let's give it a class name equal to something like underline as well as text- 3XL this should actually increase the font size and this should make our text underlined so let's save it and if we go back to our app now we can even un zooom because you can see that this indeed Works Tailwind is connected because the class name of underlined actually applied it so that's great now we are ready to start setting up our file and folder structure as I've mentioned in the beginning this is going to be quite a big application with a lot of different components a lot of data moving around and with a lot of Standalone pages so it is crucial that we set up the right project structure from the start and when I say project structure I primarily mean the file and folder structure and the way in which we're going to connect these files so what we can do for start is create a few different folders all of these files and folders are going to be inside of the source folder so rightclick it and click create new folder we can start with one of the most important folders and that is the components folder then we're going to have the second one which is going to be called contexts in here we're going to use our react context API and finally we're going to have one for Pages pages are similar to components but where one component cannot be used inside other components in case of pages one page can include and in most cases will include more components there is going to be a fourth folder right here and that folder is called Data this data folder will include many images as well as demo data that we can use across our entire application so down below in the description most likely in that same GitHub gist you'll be able to find the link to download the zip data folder you can unzip it and simply paste it right here it's going to look something like this so as you can see we have a lot of different images of different people that are going to use our dashboard as well as different product images from glasses to small cars and watches and finally we have a huge damid data file which contains absolutely no logic so don't be scared by it in here we just have a collection of different arrays and objects that represent our data this way you won't have to worry about writing all of this boring code meaning simply objects and arrays of different strings like different positions of elements in specific charts or some titles descriptions images and so on everything in is nicely compiled for you right here and we'll be able to Simply import it in different pages inside of our dashboard this is going to save us so much time and it's going to make this video so much more educational I don't want to spend 10 hours of your time for you to type this out I want this video to be as short as possible but as you know with JavaScript Mastery videos that can be a few hours but during that duration of time I want you to learn the the most you can I want you to absorb the knowledge that really matters so with that said we now have our appjs our index GS and we have these four different folders which we're going to soon fill out with files now let's start with our main file which is the app.js inside of here we can of course first start with Imports so we're going to import react as well as inside of curly braces use effect Hook from react we're going to also import a few things from react router Dom and these are browser router as well as routes and finally a single route so these are coming from react-router-dom we're going to also need an icon so we can say import fi settings and that's coming from react D ions slfi finally we're going to import a tool tip component so tool tip component like this and that's going to be coming from add sync Fusion SL ej2 Das react Das popups there we go I think that's going to be all that we need for now of course later on we're going to import all of our components and P ages into this single file but for now we should be good to go what we can do is focus on the actual structure so instead of this H1 we can create a div right here and inside that div we can create a browser router component inside of that browser router we can have a div and this div is going to have a class name Flex relative and on dark mode we want to set the BG Das m- dark dbg this is the power of Tailwind you simply made a div Flex we gave it a position relative and we set the dark background color inside of there we're going to have one more div and this div is going to have a class name equal to fixed right -4 bottom-4 and we can also get give it an inline style which is going to set the Z index to something like a th000 to make it appear over all other elements inside of there we can render our first sync Fusion component ever and that is going to be the tool tip component tool tip is going to have its own closing tag and as props it's going to accept the content equal to settings and it's going to accept the position equal to to top there we go and now inside of there we can simply create a button like this there we go and inside of that button we can put the icon fi settings as a self-closing icon now to be able to see the changes that we code live in the browser it might be a good idea to put our browser and our editor side by side and there we go I just pulled my Editor to the side and we can see this great settings icon on the bottom it is too small on 100% but if you zoom it in a bit you can see it really well so now we can actually hover over it and you can see this great tool tip this is the first sync Fusion component that we've used but of course we're going to use many more really soon now let's style this button just a bit so let's give it a type which is equal to button and let's also give it a class name equal to text- 3XL this is going to make the icon a lot bigger we can give it a p-3 property or padding -3 on Hover we can give it a drop-shadow DXL so now if we hover over it you can see that nice shadow we can also say hover dbg Das light- gray so this is going to change the background color on Hover something like this of course it's going to look so much better really soon but now let's just add the text- white Coler which is going to make this completely white and unvisible but what we can do now is below this class name we can provide some inline Styles so I'm going to say style put an object in there and set the background to be equal to and for now we can simply say blue there we go of course this is not the actual color we want we want to get the color off our theme remember in the intro I said that we'll be able to change the theme color of our application so that is really important here and finally we can set the Border radius to be something like 50% to make it into a circle looking so much better we can actually zoom out now and we can still see it on the bottom right and if we hover over it we can see settings looking great now of course this is a really ugly blue color but we're going to implement theming soon so you'll be able to choose between many different predefined colors just to give you an idea of how the finished side is going to look like you can see that right here on bottom right we have that same icon and if we click it a nice sidebar is going to appear and then you'll be able to change the theme color and therefore the color of the circle Chang changes as well so as soon as we Implement that theming functionality we'll be able to change this background dynamically and that is the only reason why this is written in an inline style and not inside of this class name great now we can proceed with actually creating the sidebar so we can go below our tool tip right here and also below this div there we can check if the menu is currently active so we can say active menu if that is true then we want to render a div that's going to have a sidebar in there if that is not the case then we can render again a div but inside of here we're going to have a bit of a different sidebar it's not going to be visible because the width is going to be set to zero but now what is this active menu well soon enough that variable will be coming from our context but for now let's simply declare it right here const active menu is equal to and let's set it equal to True at the start great so now we can see sidebar right here now let's style these divs just a bit so I can give you a better overview of how that is going to look like of course you can visit the shoy Das dashboard. verela and then you can see for yourself but I'll keep this website right here and whenever we start implementing a new feature I'm going to show you what we're trying to achieve with the code that we'll be writing so in this case we're of course trying to make this sidebar happen appear and disappear so to do that let's apply some class names to our div these class names are going to be class name is equal to w- 72 which means width of around 18 Ram then we're going to also make it fixed and also provide the sidebar class name on dark mode we're going to set the BG D secondary Das dark dbg and also usually the BG is going to be white so now this is going to give it just a bit of Shadow below I'm not sure if you can see it it's barely visible but after we Implement all the Styles it's going to be clearly visible now of course the sidebar right here is not going to be just a sidebar text soon enough we're going to to implement a real entire sidebar component for now let's simply leave it as text and keep producing the appjs code if the sidebar is not active we can simply set the class name to be equal to w-0 which means width is zero and also on dark mode BG D secondary Das dark- BG so now if we switch this to false manually you can notice that something is not looking right let's see and as you can see now we lost that sidebar and only the text that's in here is visible so just sidebar of course this is not going to be existent later on once we implement this component now below this Dynamic block of code we can have a div and this is going to be a div for our navigation bar so let's apply some different class names depending on if the menu is currently active so we can say class name and then make that a dynamic block of code if the active menu is true then we want to apply a string that's going to look something like this dark bg-- BG usually bg-- BG Min dh- screen on medium devices ML -72 and W-4 so this is if the menu is active then if the menu is not active then we can essentially copy almost all of this let's copy and paste it here we will need dark BG main BG uh we will need the Min screen and we also will need the W full but we don't need MD ml 72 instead of that we have to have the flex dash2 so as you can see these are quite similar when it is opened or closed so what we can do is create a template string and then replace all the code that's repetitive that is a small lesson just in general JavaScript how to reduce repetitive code so first let's find all of the pieces of code that are repetitive so it looks like everything here in including the W fo the only thing that's different is the MD and flex right here so inside of the class name let's create a template string that looks like this and that template string is going to include all of the shared classes so everything plus the w- full so now we got rid of all of this there we go and the only difference is the MD and flex so now inside of that template string we can simply say if menu is active then apply the mdml and usually apply deflex 2 and this way we saved a lot of code and achieved the same look now inside of that div we're going to have one more div and that div is going to have a class name equal to fixed and I know that this might look a bit weird at first especially if you've never used Tailwind but but Tailwind is really useful and allows you to more easily write Styles if you have never used it before though I would strongly encourage you to open up their docs side by side with this editor and whenever I type a specific style for example w-o you can simply go to their search type it out and click right here this is going to show you exactly what that class name does for example w-o is going to take the full full width of the div and there is also a great extension so if you go to extensions and type Tailwind there you can find the Tailwind CSS intellisense this extension is going to when you hover over a specific property give you a full explanation of exactly what CSS styles are applied with that class so w- full simply sets the width to 100% so one more time as I go through all of the class names and I write them out if something is not familiar simply pause the video and then copy that class name paste it in tving docs and learn what it is about that's the best way to learn and improve as a developer with that said let's create another div inside our current div and that div is going to have a class name equal to fix MD static bg-- BG on dark mode bg-- dark dbg it's going to have a style of navbar nw- full inside of there we can simply type navbar for now but later on we're going to use the actual navbar component remember for now we're just going through the setup of the appjs and then soon enough we're going to replace all of these texts right here with real components now below this div and Below one another div we can create the main div for routing so this is going to be an empty div with no class names and then in here we're going to have our routes the routes element belongs to react router Dom and it is a container for nested tree of elements that branches to a specific location so we're going to have different routes inside of there each route is a self closing tag that has a path in this case the first one is going to be just forward slash or the home and then it has the element which we want to render in this case the element can be a string of [Music] Ecommerce there we go you can see it right here on the right side of course our elements are not going to be simple strings each element is going to be a page on its own but let's first go ahead and create all of the routes and then we're going to replace all of these elements with actual Pages I'm going to expand this just a bit there we go and then we're going to have the second route the path is going to beward slash Ecommerce and then we also want to show the same e-commerce tab like this this is going to be the homepage so if we expand this up a bit and go to e-commerce you can see that we have this great view right here same thing happens if we just go to forward slash we're going to show the same component now we have to implement the routing for all of the other Pages for orders employees customers and so on so let's go ahead and add them right away we can even apply some comments by going above our routes holding control and then pressing forward slash this is going to be our dashboard below we're going to have something like our Pages we're going to create a self-closing route component and the first page on our list is going to be called orders and we can render an element string of orders then we can duplicate this two times the second page is going to be forward slm employees and then it's going to to render the employees component which we're going to create later on the third one is going to be customers and the element is going to be customers we're just following this structure right here now we're going to have four different apps routes and then finally seven different charts routes so let's make some space let's add a comment for apps and we can simply duplicate one of the routes above the first app is going to be the Canan board that jira or Trello clone and it's going to render the same component we can duplicate this three more times then we're going to have the editor and same thing here editor component then we're going to have the calendar as well as the calendar component finally we're going to have the color- Picker and also the element is going to be Color Picker written together like this and finally we can duplicate one route we can make some space for our charts and there are seven or eight different charts the first one is line so we can simply say line right here and we can duplicate this many different times for every single type of chart we're going to have the area chart same thing area right here a bar chart and a bar element a pie chart like this as well as the pi element then we have the financial chart right here we have the color- mapping chart so color mapping and we also have a pyramid chart pyramid as well as the pyramid element and the last one on our list is a stacked chart so we can say stacked right here there we go so now we have all of these different routes and if we type line right here you should be able to see a line just barely at the top right corner of course we're going to make this look so much better as soon as we Implement these components so now might be a best time to do that we can go ahead and finalize the file and folder structure by creating all of the components and all of the pages that we're going to need throughout this entire application this will require some grun work but it will make our life so much easier later on because we'll be able to just import all of the components we've already created so with that said let's add a boilerplate structure for all of our components as well as all of our Pages we can start with the components of course inside of the components folder we can create a new file called button. jsx inside of every new component we create we're going to run the rafc command which is going to create a simple file structure now we can create a new folder this time inside of the components folder called charts inside of there we can create our first first chart called line chart. jsx again simply run rafc let's repeat the process for another chart called pi. jsx and again type RFC we can keep it going with the spark line. jsx which is another chart and finally we're going to import the Stacked jsx which is yet another chart now we're done with the charts so you can simply close that folder and we can proceed with adding new components to the components folder below our button we're going to have our cart. jsx again simply run RFC below that we're going to have the chat. jsx again simply rafc then we're going to have a charts header. Js X and again you can type rafc let's keep things going we're going to create a footer. jsx and repeat the process below the foter we're going to have our header. jsx then below the header we're going to have our navb bar. jsx below the Navar we're going to have our notification. jsx below the notification we're going to have the sidebar. jsx just two more left to go we're going to have a component called theme settings. jsx and finally the last component is user profile. jsx and finally run rce there as well and this is our entire structure of all of the components that we're going to use now to more easily export them we can create a new file called index. jsx below in the description you'll be able to find the GitHub gist for this index file and after you copy and paste it here you can see that we're simply exporting all of the necessary components we just created straight into our entire application this is going to allow us to Simply import them all in one line great now now just to finalize the file and for structure we can repeat the same thing for our Pages there are going to be quite a few pages so just bear with me we can do this but as I've said this is taking some more time at the start but as we start coding everything out it is going to be so much faster because we did this at the start so let's create our first page which is going to be called calendar. jsx and you can also type rafc inside of the pages we're going to also have our charts which is going to be a folder inside of that charts folder we can create our first chart called area. jsx again rafc I don't think I even have to mention that anymore because you're already doing this so fast then we're going to have the bar. jsx and again rafc we're going to have the next one which is going to be the color mapping. jsx after that we're going to have our financial. jsx we also need our line chart so let's simply type line. jsx we also need the pi chart so let's say pi. jsx we need the pyramid so pyramid. jsx and finally we need the Stacked jsx these are all the charts and we just have a few more pages to go so inside of the pages folder create a new file called color picker. jsx then we're going to create customers. jsx and it looks like I forgot to do rafc there don't forget to do that because then the component won't exist then we're going to have the Ecommerce jsx we're going to also have the editor. jsx we're going to have the employees jsx finally we need the Canan jsx and finally we need the orders. jsx and as we've done with the components we can also do the same thing with Pages create a new index. jsx file and below in the description in a GitHub gist you should be able to find a file where we export all of these Pages now we're done with the en entire file and folder structure and everything from now on will just flow smoothly so now what you can do is Click anywhere in your Visual Studio code hold control or command and then keep pressing W to close all of the open files while doing this you're going to also notice if some file is missing the rafc in case you missed it so let's close all of them and yeah it looks like there are a few where I missed doing rafc so I'm going to add that right now there we go and this is going to make sure to close all of your currently open files now we have a clean working environment we can go back to app.js and now we can import all these components and pages so to do that above our import app CSS we can say Import in curler braces navbar footer sidebar theme settings and these are coming from SL components because of that index.js file we can import everything in one line and then we're going to do import e-commerce orders calendar employees stacked pyramid customers can ban area bar Pi Financial Coler picker as well as color mapping and finally the editor and these are coming from slash Pages there we go now we should have everything we need it looks like we have a problem inside of our components inside of the index. jsx file let's head there it looks like that definition for rule import no cycle was not found that's because I have this line right here for you it's not going to be there while I was developing this project I was using eslint but now we don't need it since we're going to keep our code clean straight from the start great and now we can see our code as it was if we go to Local Host 3000 we can see e-commerce right here but of course we just created these components and we never use them so now instead of the sidebar right here we can simply open a new self-closing component called sidebar nothing is going to change now for the Navar or the sidebar or anything else because these components are simply a div containing that same text but this is going to allow us to implement the actual logic inside of each one of these components so let's simply keep going through it and let's change all of these text elements to their corresponding components so we have to do that for sidebar two times for the KN bar right here and then we'll have to do that for every single one of these components the quickest way to do this is to hold alt on Windows and then click right after the opening string sign on all of these routes so simply hold out and then click right after the opening double quoted string so keep doing that for every single element there we go and let's repeat that until the end there we go and now what you can do is press backspace to remove the first opening sign open the curly brace because we need to be inside of there open the tag sign like this now hold control and then press the arrow right one more time close the curly brace and then press the forward slash and close tag to close the route as well with this we have effectively changed all of our strings into components I know this was a bit of a finger workout and it really tested out your abilities to use keyboard shortcuts effectively but if this didn't work out for you simply manually change every single string from this into this that's going to make it work and that way we'll have all of our components that we can now jump into and start working on that was it for our entire setup now we have the entire file and folder structure all of our pages and our components as well as the appjs done of course we spent a lot of time on the setup and our app is not looking that good nothing seems to be visible but really soon for the pure fact that we did spend some time on the proper file structure will be able to really easily create our application and start coding right away great job on making it through to here and now the fun begins and finally we are ready to start coding out our sidebar then we'll be able to see what's happening but even right now we should be able to see something the screen is a bit too white suspiciously enough so we can go to inspect open up the console and see that e-commerce is not defined this here was supposed to be e-commerce with a lowercase C so let's quickly fix that right here and right here as well as soon as we fix that and reload the page it looks like we still have an error that's fine let's open up the console one more time and it looks like line is not defined so let's see if we're importing line correctly it looks like we are not so what we can do is under Pages we can add that line import at the end looks like I've missed it once we add it here and reload the page we no longer have any errors and we can begin coding out our sidebar we're going to turn it on by setting true right here there we go and we can switch to our sidebar component by holding control and then clicking the left mouse key there we go now let's drag our editor a bit more to the side and let's begin working on our sidebar inside of our sidebar we first have to have a few Imports we need to import the link component as well as the nav link component from react-router-dom this is going to allow us to switch between some different pages in our application so I'm just going to pull this a bit more here and then we can import a few icons the first icon that we need is going to be Import in curly Braes SI shopware and that's going to be coming from react D ions SL SI we also need one more so that's going to be import MD outline cancel and that's going to be coming from react Das icons forward SL SL MD finally we need that same tool tip component so we can say import tool tip component from that's going to be add sync Fusion SL ej2 and then that's going to be react popups there we go we're going to also import all the different links so import links and this is going to be coming from SL data SL dummy so this is dummy or demo data these are all the Imports that we need for now and we can finally start coding out our sidebar our sidebar is going to be a div and more specifically it's going to be a div with quite a few class names so we can add a class name property and we can say ml-3 for margin left h- screen which means full height on medium devices overflow is going to be hidden usually overflow is going to be set to Auto on medium devices and on Hover overflow is going to be set to Auto like this and finally pb-10 as in padding Bottom now inside of there we also have to know if the menu is active that information will be coming from our state context but since we don't have the context already let's simply say const active men menu is equal to true just a dummy variable soon enough we're going to make that Dynamic so we can open a new Dynamic block of code and say if active menu or active menu and end in that case what we can do is render out an empty react fragment and inside of that fragment we're going to have a div this div is going to have a class name equal to flex justify Dash between as well as items Das Center inside of there we want to render one link like this and that link is going to point to just forward slash it's also going to have an onclick property which is for now going to be just an empty callback function we're going to implement it really soon and it's going to have a few class names so class name is going to be items Das Center and just before we start typing out the class names it might be a good idea to already put something in the link so we can see what we're changing in here we're going to render out that SI shopware icon and just next to it we're going to say shopy that's the imaginary name of our component we can put it inside of a span element like so there we go so now if we save this and reload the page you can see that now we have this full height sidebar appearing on the left side and this is already looking so much better so let's continue adding class names to this link we're going to give it a gap das3 property as well as ml-3 which is going to push it a bit from the left it's going to have a mt-4 which is going to push it away from the top it's going to be a flex container which is going to make the items appear in a row it's going to have a text- XL property to make it bigger and also font Das extra bold we're going to also give it a tracking Das tight like this and finally on dark mode the text is going to be white and usually text is going to be text slate 900 there we go so as you can see using Tailwind can be really powerful with just a few class names you can have a great looking sidebar and a link right here now below that link we want to render a tool tip component that tool tipe component is going to have a Content equal to menu like this and also it's going to have a position and that position is going to be bottom center like this inside of there we can render a button so let's say button and that button is simply going to have the MD outline cancel self closing icon as you can see it appeared right here at the top right that that's going to close out our sidebar of course it's just a bit too little right now so let's make it a bit bigger let's apply a few properties to our button we can say type is equal to button we can also give it an onclick property which for now we're going to leave to be an empty callback function later on we're going to make it actually close the sidebar and we can also give it a class name equal to text- XL also rounded Das full p-3 for padding on Hover we want to set the bg-- gray margin top or Mt is going to be set to four it's going to be a block level element and on medium devices it's going to be hidden there we go so now this is already looking like a great sidebar of course it's not doing anything yet but soon enough it will what we can do is below this div we can create one more div this is going to be for our actual items so div right here class name is equal to mt-10 to divide it a bit from the upper shoy section there we want to Loop over our links and what actually are those links we're importing them from dami data but if you at any point want to check what these are hold control click right here and as you can see that is an array with a few objects each object has a title and a links property pointing to specific things Pages points to three different links such as orders employees and customers each has its own icon so let's Loop over those links what we can do is say links. map we're going to have a callback function for each item or each link and we can have an instant return for each one of those items each link is going to be a div and that div is going to have a class name equal to text- g-400 it's also going to have margin D3 or m-3 and mt-4 margin top four and it's going to be uppercase inside of there we want to render out the item. tile now if you save this you can see that our link headings appear right here and this is looking so much more like a regular sidebar so it looks like I've made a small mistake this class name right here was not supposed to go to this div this div was just supposed to have key is equal to item. tile to make it unique but this class name was supposed to go on a p element inside of it so right here we have a p element that has that item. title inside of it and then we can render that class name on that b element now below that b tag we're actually going to Loop over the links so let's open up a new Dynamic block of code and say item. links. map and in here we're going to get the actual link and we can have an instant return one more time so essentially it is a loop inside of a loop inside of here we're going to render a nav link component like this and it's going to have quite a few properties the first one is going to be two to where are we pointing and that's going to be dynamic so we can render a template string say forward slash dollar sign curler braces link. name the key is also going to be link. name since we need to make it unique on click is also going to be for now just an empty callback function but we're going to implement the logic really soon and then we need to provide a class name and a style now class name is going to be a bit different from what we usually do what we can say is class name and then inside of there we're going to actually call a function that function is going to accept a state so we can destructure meaning curly braces and then we're going to get the is active state for each specific item and then based on that state we we can render different class names this is given to us straight by using the nav link component belonging to react router Dom what we can do is at the top Define two different class names for active and not active links let's do that right here by saying const active link is equal to a string it's going to be Flex items D Center Gap D5 PL for padding left four PT for padding top three padding bottom PB -2.5 rounded dlg and text- white as well as text- MD and finally m-2 for margin 2 now we're going to have the const normal link right here and it's also going to be a string we're going to copy the entire active link and just replace the last few properties we don't need the m-2 rather we're going to add the text- gray- 700 since we're going to make it gray we don't need this white color right here we're going to also add on dark mode text- gr-200 on dark mode and on Hover we're going to add the text- black and just on Hover we're going to change the BG to light Das gray and M is going to be two for margin 2 now we can use these two links down below we can say if is active then we're going to render the active link else we're going to render the normal link and if we save that of course we cannot see anything yet because we haven't inputed any links right here so what we can do is inside of the nav link we can render out link. icon and below that we can render a span element that has a class name equal to capitalize and inside of there we can render the link. name there we go so now if we save that you can see we have these amazing list items in our sidebar which is automatically scrollable and now we have these great sections or headings and if you actually hover over the link you can see that we get this nice list item this is looking great and again the reason we made it so simple is because we're using tailwind and we are simply inputting all the specific class names right inside of our code great definitely the fact that we had this dumi data helped because we didn't h