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

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 table 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 customers 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 kanban board oh you know just like an entire trello or jira app right inside of our dashboard you're gonna 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 fun 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 tooltips 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 are 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 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 the 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 syncfusion is the world's best ui component suite for building powerful web desktop and mobile applications it includes more than 1700 components for all major platforms and of course we'll be focusing on react.js developing 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 syncfusion 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 will 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 syncfusion 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 syncfusion 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 gonna definitely use it on my own enterprise level projects and if you're like me when i first heard about syncfusion 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 syncfusion does syncfusion 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 re-share your posts on our social media channels for the entire world to see with that said let's dive straight into the code [Music] as we always do on javascript mastery we're going to start from bare beginnings meaning we are right now on our desktop we can right click 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 dash react dash app and then dot 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 gonna pause recording 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 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 dot slash app and finally we can say react dom dot render and then as the first parameter we can provide our app and we can say comma document dot 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 right click 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 rafce 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 rafce and get this boilerplate code great so now we have our index.js and our appgs 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 package.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 most of the dependencies are actually coming from add sync fusion so in here we're gonna get their amazing calendar chart drop down grids inputs kanban boards pop-ups rich text editors and schedule components this is going to make our application the best dashboard on the internet so the only thing you have to do to install these dependencies is go to view and then terminal and finally you need to type npm install dash dash legacy dash peer dash depths 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 dot 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 looking 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 gonna need is going to be called app dot css inside of our app css we're gonna 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 alright but before we do that we just have to set up tailwind tailwind is an amazing css framework which allows you to 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 text 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.json so just 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 dot config dot js inside of that github just 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 krakow dot config dot js inside of that github gist you'll be able to find the craco.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 in 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 ctrl tilde or go to view and then terminal and finally you can run npm start this just ran our application on localhost 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 we have to import that css file so just above our import app we can say import and then in a string dot slash index dot css that's going to import all the tailwind utilities we can also go to app.js and inside of there we can import a string dot slash app.css there we go and finally instead of just typing 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 dash 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 unzoom 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 ways 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 right click 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 zipped 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 dummy 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 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 most you can i want you to absorb the knowledge that really matters so with that said we now have our app.js our index.js and we have these four different folders which we're gonna 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 gonna 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 dash router dash dom we're gonna also need an icon so we can say import fi. settings and that's coming from react dash icons forward slash fi finally we're gonna import a tooltip component so tooltip component like this and that's going to be coming from add sync fusion forward slash ej2 dash react dash popups there we go i think that's going to be all that we need for now of course later on we're gonna import all of our components and pages into the 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 dash main dash dark dash bg 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 gonna have one more div and this div is going to have a class name equal to fixed right dash 4 bottom dash 4 and we can also give it an inline style which is going to set the z index to something like a thousand 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 tooltip component tooltip 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 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 tooltip this is the first syncfusion 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 dash 3 xl this is going to make the icon a lot bigger we can give it a p 3 property or padding dash 3. on hover we can give it a drop dash shadow dash xl so now if we hover over it you can see that nice shadow we can also say hover dash bg dash light dash 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 dash white color 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 of 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 gonna 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 site 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 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 tooltip 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 shoppy dash dashboard that for cell dot app 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 dash 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 dash secondary dash dark dash bg 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 implement a real entire sidebar component for now let's simply leave it as text and keep producing the app.js code if the sidebar is not active we can simply set the class name to be equal to w dash 0 which means width is 0 and also on dark mode bg dash secondary dash dark dash 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 dash main dash bg usually bg dash main dash bg min dash h dash screen on medium devices ml-72 and w dash full 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 we will need the min screen and we also will need the w full but we don't need mdml72 instead of that we have to have the flex dash 2. 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 the pieces of code that are repetitive so it looks like everything here including the w full 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 dash 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 the flex2 in 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 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 dash full 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-4 is going to take the 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 dash 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 tabling 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 fixed md static bg dash main dash bg on dark mode bg dash main dash dark dash bg it's going to have a style of navbar and w dash 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 app.js and then soon enough we're going to replace all of these text 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 you want to render in this case the element can be a string of e commerce 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 the routes and then we're going to replace all 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 be forward slash e-commerce and then we also want to show the same e-commerce tab like this this is going to be the home page 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 gonna 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 slash employees and then it's going 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 kanban 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 gonna 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 dash 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 dash 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 we're going to need throughout this entire application this will require some grunt work but it will make our life so much easier later on because we'll be able to just import all 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 rafce 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 chart called line chart dot jsx again simply run rafce let's repeat the process for another chart called pi dot jsx and again type r-a-f-c-e we can keep it going with the spark line dot jsx which is another chart and finally we're going to import the stacked dot 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 rafce below that we're going to have the chat.jsx again simply r-a-f-c-e then we're going to have a charts header dot jsx and again you can type rafce let's keep things going we're going to create a footer.jsx and repeat the process below the footer we're going to have our header jsx then below the header we're going to have our navbar jsx below the navbar we're going to have our notification dot jsx below the notification we're going to have the sidebar dot jsx just two more left to go we're gonna have a component called theme settings dot jsx and finally the last component is user profile dot jsx and finally run rafce 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 just to finalize the file and follow the 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 rafce 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 dot jsx again r-a-f-c-e i don't think i even have to mention that anymore because you're already doing this so fast then we're gonna have the bar dot jsx and again rafce we're going to have the next one which is going to be the caller mapping.jsx after that we're going to have our financial jsx we also need our line chart so let's simply type line dot jsx we also need the pie chart so let's say pi dot 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 looks like i forgot to do rafce 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 kanban jsx and finally we need the orders dot 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 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 ctrl 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 rafce 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 rafce 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 curly braces nav bar footer sidebar theme settings and these are coming from dot slash components because of that index.js file we can import everything in one line and then we're gonna do import e-commerce orders calendar employees stacked pyramid customers kanban area bar pi financial color picker as well as color mapping and finally the editor and these are coming from that 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 localhost 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 navbar 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 navbar 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 alt 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 ctrl 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 app js 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 we'll 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 cyber component by holding ctrl 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 dash 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 braces si shop where and that's going to be coming from react icons forward slash 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 dash forward slash md finally we need that same tooltip component so we can say import tooltip component from that's going to be add sync fusion forward slash 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 dot slash data forward slash 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 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 dash 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 on click 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 dash 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 dash 3 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 dash extra bold we're going to also give it a tracking dash 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 tooltip component that tooltip 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'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 dash xl also rounded dash full p-3 for padding on hover we want to set the bg dash light dash gray margin top where mt is going to be set to 4 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 choppy section there we want to loop over our links and what actually are those links we're importing them from dummy data but if you at any point want to check what these are hold ctrl 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 save 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 dash gray dash 400. it's also going to have margin dash 3 or m 3 and empty 4 margin top 4 and it's going to be uppercased inside of there we want to render out the item dot title 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.title 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 dot links dot map and in here we're gonna 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 2 to where are we pointing and that's going to be dynamic so we can render a template string say forward slash dollar sign curly braces link dot name the key is also going to be linked up 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 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 dash center gap dash 5 pl for padding left 4 pt for padding top three padding bottom pb dash 2.5 rounded dash lg and text dash white as well as text dash 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 dash gray dash 700 since we're going to make it gray we don't need this white color right here we're gonna also add on dark mode text dash gray dash 200 on dark mode and on hover we're going to add the text dash black and just on hover we're going to change the bg to light dash gray and m is going to be 2 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 inputted any links right here so what we can do is inside of the nav link we can render out link dot 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 dot 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're simply inputting all the specific class names right inside of our code great definitely the fact that we had this dummy data helped because we didn't have to write out all of the specific names for different list items and the icons were chosen beforehand so that's great that's going to be it for the look of our sidebar but what do you say that we implement our react context api now that's going to allow us to keep track of the state of the navigation bar to figure out should it be currently opened or closed so let's do that right away to create our context we can close the currently open files and then go to source context and then create a new file called context provider dot js inside of there we can import react as well as create context use context and finally use state and these are coming from react of course i misspelled context right here so let's get that fixed and then we'll have to say const state context is equal to create context and then we call that as a function below that we can define our initial state and that initial state is nothing more than a simple object our chat is at the start going to be set to false and that chat means is this currently opened or is it closed then we're going to have the cart which is also by default going to be set to false we also have our user profile which is set to false and finally we have our notification which is also set to false so that's just the state of all of these different things that we can click and open up at the start they're all set to false now we can say export const context provider that context provider is a basic react arrow function component which in props has the children property inside of there we can declare all different kinds of state and of course we can return something usually what you return inside of a context provider is the state context dot provider like this but to return that usually what you return inside of a context provider is a state context dot provider the most important thing that that provider has to have is the value property so we can expand it a bit and create a value property right here which is an object whatever values you pass through here they will be passed through all of the components inside of our entire application so of course we'll have to pass the state is our sidebar currently opened or is it closed and the second most important thing with our context is that you always return children inside of it that means that whatever you wrap your context with whatever is inside of it will be displayed so if you wrap this entire page with the context you still want to return that actual page right that's where the children comes in it returns the underlying component below that context but now let's actually add all of the states or all of the logic of our application that our context is going to have the first one which we already talked about is the state so let's say used state snippet it's going to be called active menu and set active menu and at the start it's going to be set to true there we go now what we can do is we can simply pass that state over through to the value so right here value is an object and we're gonna say active menu is active menu or as you already know if you have both the key and the value of the same value then you can simply omit the latter there we go so now the question is how can we use this active menu inside of our sidebar or app components well we can export const something called as use state context and it is simply a function that returns the call to the used context but we pass in which context do we want to use so we're saying hey give me the data from the context by using the context and we specify which one the state context in our application we're going to have one context but in bigger applications you can have multiple context providers whatever the case once you create your provider you render out the children and pass the values you have to wrap your app with it so we can go inside of our index.js inside of here we can import context provider and that's coming from dot slash contexts forward slash context provider the only thing you have to do is wrap your app with the context provider so we can say right here context provider and we can put our app right inside of it like so of course let's add a comma right here and let's space everything correctly there we go so now inside of our app we can use all of these values and the question is of course how and the answer is quite simple we import that use state context hook we created from dot slash context forward slash context provider and we call it as a hook at the top const and we pull the values we want to pull in this case we want to get the active menu that is equal to use state context and we call it as a hook we no longer have to use this static value there we go so now if we go back to our application let's see where we're using this active menu it's right here so let's go inside of our sidebar and actually make these functions do something like open and close the menu we have to repeat the same thing we've just done and that is to import the use state context from dot slash context forward slash context provider there we go and we use it as a hook right here const active menu and that's coming from use state context of course in here we don't just need the active menu we need the setter function for the menu so that we can open and close it so if we go back to our context provider what we can do is alongside the active menu we can also pass the set active menu that way back inside of our sidebar we can get that as well set active menu now inside this on click we can actually close the sidebar so what we can say is callback function set active menu to false and while we're here we can also change this one instead of here we're going to actually do something different we're going to call the set active menu but in this case we want to change the menu by using the previous value of that menu and you can do that by adding a callback function inside of there and then you can get the prev active menu which means previous state and then you can use that previous state to toggle it on or off there we go so this is the cancel icon so what do we have now is something like this when you click it it is gone but currently there is no way for us to bring it back because our navbar contains the button that should be there to bring it back so that's definitely something that we should do and that's going to be our next step to implement the navigation bar let's go back to our app let's find where we're using the navbar and let's hold ctrl and navigate to it finally let's start with implementing the navigation bar our navbar will be a bit harder to develop and it will take some time but trust me when i say this once we're done with the nav bar and the sidebar we can just breeze through everything else it's going to be amazing and you'll just start seeing all the functionality appear immediately usually the navbar and the sidebar don't seem that tricky they are almost not existent right here but there is some functionality trying to figure out is it currently opened or is it not and once we have that figured out then we'll be able to code everything really quickly so let's start with the navbar right here we can import the use effect hook and we'll also need many different icons so let's import the ai outline menu and that will be coming from react icons forward slash ai we're gonna also need to import the fi shopping cart and that's gonna be coming from react dash icons forward slash fi then we're gonna need to import the bs chat left and that is coming from react icons forward slash bs we'll also need to import the ri notification three line from react dash icons forward slash ri of course we need to fix the spelling right here and fix this import right here that's just react icons forward slash fi just a few more left to go we need to import the md keyboard arrow and that's coming from react icons forward slash md great we have all of the icons that we need but we also need that tool tip so we can import tooltip component from add sync fusion forward slash ej2 react popups like this we'll also be using some dummy data so we can import the avatar image coming from dot slash data forward slash avatar dot jpeg like this and finally we also need to import a few components the cart as well as chat the notification and finally the user profile and these are coming from just dot we are already there we are inside of the components finally we're going to import the use state context from dot slash contexts forward slash context provider now we have everything we need so to start coding out our navbar we can immediately get that active menu state so we can say const active menu like this as well as the set active menu is coming from or rather is equal to use state context and then we call it as a hook now below that we can actually start implementing our navbar so let's start with class names for the div class name is going to be equal to flex justify dash between padding-2 or just b-2 on medium devices the margin x is going to be set to 6. margin x simply means margin left and right everything on x axis and finally the position is going to be set to relative now you can see that everything jumped on top but that's going to be fixed really soon once we actually implement the navigation bar inside of our navigation bar we're going to have many different navigation bar buttons so let's create a new component to make her life easier const nav button our nav button is going to be a normal react arrow function component with instant return it's going to accept a few properties that's going to be a title a custom function which we want to call an icon a color and the dot color soon enough you'll see what all of these properties do so what is our nav button well essentially it is a button wrapped in a tooltip component our tooltip component is going to have the content equal to title and the position is going to be set to bottom center inside of there we can finally render our button now it might be a good idea to already call one of these buttons below just so you can see what's happening on the screen so let's call our first nav button right here as a self closing component we can pass a few props to it title is going to be set to menu and that custom func we can pass to it is going to be a callback function where we simply call the set active menu like this again we have a callback function inside of it where we get the previous active menu state so previous active menu and then we simply toggle it so if it was open then we're going to close it and vice versa great so now we have the title and the custom function we're gonna also have a color and this color is that same color of the theme we're changing remember this blue at the bottom right well let's also set this to blue but later on we're going to make this dynamic finally we have to pass the icon and the icon in this case is going to be a component ai outline menu there we go so now we have everything we need to create our first nav button let's go ahead and actually use that data inside of our nav button component our button is going to have a type is equal to button like this and what is that button going to do well on click it is going to call that custom function like this the reason why we couldn't have taken this code right here and put it straight right here is because other nav buttons won't do the same action as this one does so they're always going to call the action that we provide to it that's going to allow us to extend the functionalities then we're going to also give it a style and style is going to be equal to the color and we can also give it some class names so we can say class name is equal to relative text dash xl rounded dash full p 3 for padding on hover bg dash light dash great and what is the button going to render that's going to be a span element with a style equal to background which is dot color like this and it's also going to have a class name the class name is going to be equal to absolute inline dash flex rounded dash full h-2 w-2 right-2 and top-2 finally inside of it we can display our icon there we go so now if we save this you should be able to see this small icon right here if it zoomed out you can barely see it but once you click it take a look at that we are actually opening and closing our sidebar this is looking great of course we just have to make that icon a bit bigger and when i say a bit i mean quite a lot before we do that though let me show you how easy it will be to add all of these other icons as well what we can do is scroll down create a div right here that div is going to contain all of the other nav icons the only thing it's going to have is a class name equal to flex now let's copy our original nav button let's just space out all the props so we can more easily see what's happening there we go color blue and icon is right here as well there we go so this is one of our nav buttons now this one is for the menu or at least it was but now we can actually change it to something else let's do cart and a custom function is going to be a call to a new function which we haven't yet created handle click and we're gonna pass cart as a parameter then we're going to set the color to be blue again and finally we're going to give it a different icon fi shopping cart there we go so now you can see it on the top right of the screen if you zoom quite a lot while we're here let's also add all the other icons by duplicating this one the title is going to be chat this one can also have that dot color so let's say dot color is that's going to be a hexadecimal 0 3 c9 d7 there we go you can see we have a dot for notifications and what we can do is change the icons to bs chat left so as you can see now we have this chat right here and of course the function is going to be handle click and it's going to open the chat this doesn't do anything right now but it will soon and the last one is going to be for our notifications and our profile so as you can see right here we have cart chat notification and profile what we can do is say notifications right here that's going to point to handle click and it's going to open up the notification singular and the icon is going to be ri notification 3 line there we go finally we need the last one for the profile and profile is going to be just a bit different as you can see it is not really just a single icon so what we can do is create a tooltip component that tooltip is going to have a content equal to profile like this and position is going to be set to bottom center inside of the tooltip we're going to have a div so right here let's create a div and that div is going to have a few class names so let's add a class name equal to flex items center gap-2 cursor dash pointer p-1 for padding on hover bg dash light dash gray and rounded dash lg once we click on that div we want to open the profile so we can say on click callback function where we handle click and we're going to pass in the user profile as a string now you can see nothing happened yet but inside of there inside of that div we're going to add an image this image is going to have a source equal to avatar and there we go our avatar appeared we can give it a class name equal to rounded dash full to make it into a circle as well as w-8 and h-8 to make it just a bit smaller there we go finally below that image we can create a b tag and that b tag is going to have two different span elements the first one is going to say hi and a comma after that span we can create just a space like this and we're going to have one more span below it span right here that's going to say michael of course we can apply some properties the first one is going to have a class name is equal to text dash gray dash 400 and text dash 14. the bottom one is going to have a class name equal to text dash gray dash 400 font dash bold ml for margin left is equal to 1 and text dash 14 so there we go now you should be able to see hi michael finally we need that arrow down so below the p tag we can render the md arrow down and we can also give it the same class name as we gave to hi so class name text gray 400 and then also text 14. as you can see this means that we can hover over it and click on it to make it open and that's it when it comes to the looks of our actual navigation bar it is a bit too small but we're going to fix that really soon something that we also need to figure out is how can we get our context no when we clicked on one of these specific icons we have to move that value to the context so that the context knows how to open the cart chat notifications or the profile to do that we can go back inside of our contacts provider and we can create a new use state field so we can say use state snippet let's call it is clicked set is clicked and the initial state is going to be the value of our initial state object nothing has been clicked at the start now we can pass those two values is clicked and set is clicked alongside our values right here that means that we're going to get access to them inside of our navbar so now if we go back to our navbar at the top we can get those values right here is clicked and also set is clicked there we go once we have that at the bottom we can render different elements just below the tooltip component so we can say if is clicked dot cart and end then we want to render the card component we can duplicate this four times if we click on the chat then we want to render the chat component if we clicked on the notification then we want to show the notification component and finally if we clicked on the user profile we want to show the user profile component there we go so at the start nothing should be there because everything is turned off but now let's actually implement the logic to turn it on to do that we can go back to our context provider and we can create one important property that handle click function we talked about so our handle click is going to look something like this const handle click in here as a first and only parameter we're gonna get the information on which element has been clicked so we can say clicked and then what we can do is simply call set is clicked to be equal to clicked like this but if you think about it that won't really work because set is clicked or rather is clicked property is an object so we cannot just override the object with a string what we need to do is open up the object spread the initial state meaning where everything is false and then inside of square brackets only change the value that has been clicked and set it to true this is how the handle click works and now we can pass it as a value through our state context back in our navbar we can now retrieve that value from the context handle click there we go so now if we click right here you can see cart appeared at the top cart and if we click on chat chat appeared same thing for notification profile and everything else that means that our logic is working but of course we're gonna have to style the notification chat cart and profile components to nicely show like this and not just like a text appearing at the right of the profile page great so now most of the logic is done but there are just a few small details that we have to handle and one of these is remember we initially always open the sidebar by default but if we are on mobile we don't want to have it opened because it would take almost the entire screen take a look at this and now you cannot even close it so we'll have to figure out what is the width of the screen and then if the width is really small then we won't open the sidebar at all so that is going to be our next step we can go back to our context provider and then create another state use state snippet that's going to be screen size and set screen size at the start it's going to be undefined because we don't know what the screen size is we first have to find that out once you have the screen size and set screen size we can pass it over to our state context provider now going back to our navbar we can actually make use of these values so right here let's get the screen size and set screen size and we can call our first use effect so simply type use effect it accepts a callback function and then the second parameter is a dependency array meaning when is this going to be called for example if you put nothing here it's going to be called only at the start and if you put screen size here it's going to be cold every time that screen size changes that would be really heavy for our application and we don't want to do that we simply want to figure out the size initially when the window loads so to do that we can create a new function inside of the use effect called handle resize that's going to be an arrow function where we simply set the screen size to be equal to window dot inner width then we're going to add the window dot add event listener to our window and we're going to track all of the resize options if it resizes then we're gonna recall the handle resize function so every time we resize it we're going to set the screen size to that specific size and we also want to call the handle resize initially just on its own to figure out the initial width in react whenever you use something like this window.addeventlistener you also want to remove that event listener so what you can do is say return a callback function window dot remove event listener and then you provide the string resize and handle resize function now we're tracking what is the width of our browser or of our device but the question is what do we do with that information well it's going to play an important role inside of our sidebar but it also serves a small purpose right here inside of the navbar let's create a second use effect and you can have as many use effects as you want the only difference is that now we're actually going to keep track of some changes more specifically we're going to track the change of the screen size like this so whenever screen size changes if screen size is lower than or equal to 900 then set active menu like this to be set to false and else if it is larger or wider than 900 set active menu to true now as you can see since we were on a small device like this and if we reload it's going to immediately hide the sidebar so we can see better what's on the screen we're just preparing everything for the great content that we're going to have really soon great so now we're successfully tracking the size of our screen and as i've said that's gonna be really useful inside of our sidebar component as well so let's go there if we open up our sidebar component we can now use that screen size value right here so that's going to be screen size and we're going to create a special function const handle close side bar it's an error function and it's going to check if active menu is true and screen size is lower than or equal to 900 in that case it's going to close the menu as well there we go and we can call that function right here on click of our link so on click you can simply call handle close sidebar there is one other place where we call it though that's going to be whenever we click a specific link so we have a nav link right here and on click see we have to do something well we have to close that sidebar because you know what happens on mobile devices let's go to the mobile device width open it up and usually it covers almost the entire screen so you cannot see what's happening and now if you click orders imagine if the sidebar was remaining right here if it wasn't removed then you would have to manually close it every time once you select something but what we're doing right here is we're checking if you're on a mobile device and if you are when you click it's going to automatically close but if you're not on a mobile device and if you click it's going to remain opened so as you can see there is more than meets the eye we are really creating the best dashboard application ever and i'm teaching you all of these tips and tricks that you don't usually see in just basic tutorials this is something that you do on real applications to make sure that the client is happy great with that said we are now doing really good with our sidebar and navigation bar but as you know if we zoom it out to full width you can see that our icons are really really small so let's figure out the problem with that the icons are inside of our navbar more specifically inside of the nav button because we know the style that's wrong is affecting all of them at the same time so it should be something around here right around the icon and i immediately spotted it this pan right here was supposed to be just that dot but it was not supposed to wrap the icon so let's simply self-close the span element and then put the icon right below it this is how it should have been and there we go the icons are now immediately larger because we have the text xl right here in the button this is looking great now that that is done we are ready to start creating our first page of the day the e-commerce page it's going to look something like this once it is done this is a really diverse page with a lot of different cards to really show you what we can do of course this doesn't have to be just e-commerce data instead of earnings you could have the total number of users using your platform in here we can put any kinds of different metrics and any kind of different charts but this should give you a really quick overview of how syncfusion can help you code faster but of course once we're done with this page then we're going to dive even deeper into what syncfusion offers i'm talking all of these different pages tables charts and applications great so with that said let's start coding out our main ecommerce view we can start by closing all of our currently open files and leaving only the app inside of the app we can control click into e-commerce and this is of course where we'll start implementing that page we can import react from react as well as import bs currency dollar and that's coming from react dash icons forward slash bs we're going to also import the go primitive dot and that is coming from react icons forward slash go we also need to import some of our components like stacked which is a chart pie chart as well a button and finally a spark line chart as well coming from dot slash components finally we need to import some dummy data so we can say import earning data then we need to import spark line area data and finally ecom pi chart data now we have everything we need that is coming from dot slash data forward slash dummy there we go and finally we need to import the context by saying import use state context from data contexts forward slash context provider now we have everything we need so let's start with implementing this beautiful view right here again this doesn't have to be just e-commerce this is a classic dashboard view with some cards information and metrics great so to start off we can have a div and that div is going to have a class name equal to mt-12 to divide it a bit from the navigation bar then we're going to have a div that's going to have a class name equal to flex flex dash wrap and on large devices flex dash no wrap and also justify dash center inside of there we can create one more div and we're just starting to create the layout so usually when you're just creating the layout you will have many divs the next div is going to have a class name equal to bg dash white on dark mode text dash gray dash 200 on dark mode bg dash secondary dash dark dash bg height dash 44 rounded dash xl w dash full on large devices w-80 p-8 pt-9 margin or m-3 bg-hero dash pattern and also bg dash no dash repeat bg dash cover and bg dash center now if we save this you can see that we have this image but it is barely visible on the right side so i think we have a problem with the layout looks like our actual content is not appearing below our navigation bar and sidebar it's appearing to the side so that issue is most likely going to be inside of the app.js it looks like to me we have our navbar right here but we closed it too soon so this div should actually be closed after all of the routes so just copy it and then let's go below the div containing all the routes and let's add one extra div right here so now if you save this there we go now we can see this great looking banner and we can see that our content is actually appearing below the navigation bar as it should so now going back to our e-commerce we can continue implementing the layout we're gonna have one more div and this div is going to have a class name equal to flex justify dash between and items dash center trust me there is just one more div right here and this one won't have any styles inside of there rather we're going to show two different p tags the first one is going to say earnings there we go we can see earnings right here and the other one is going to specify what the earnings are so let's simply copy this number right here and i'm going to create another p tag and paste it of course feel free to use any number right here i'm going to add a class name which is going to be font dash bold as well as text dash gray dash 400 there we go and for the bottom one let's say class name is equal to text dash 2 xl to make it a bit bigger this is looking good now below this div and this div as well we can add one more div this div is going to have a class name equal to mt-6 and we're gonna have a button in there but not a typical button our own button component so of course we have to first provide some props to it like color is going to be white bg color is going to be the dynamic color that we choose but right now we're just going to set it to blue text is going to say something like download and finally border radius is going to be set to something like 10 pixels now we can control click to go inside of that component isn't it handy that we created all of the components beforehand so to implement this button we can of course accept all of the props we're passing into it such as bg color color size text border radius and that's going to be it for now this button is going to be just a regular simple button so we can give it a type right here and the type is going to be equal to button we can also give it a style something like background color is equal to bg color like this and also color is equal to color of course we can just omit that and then finally border radius there we go we can also apply some class name something like class name is equal to we're going to make it into a template string text dash and then we want to render the size we passed into this button so right here we didn't pass any size so what we can do is say something like size is equal to md like medium so text dash size p 3 hover is going to be drop dash shadow dash excel that's going to be all that we need for now and inside of there we can render our text there we go a blue download button of course this is a really dark blue right now but as soon as we implement theming we'll be able to change it as we go by using the settings icon on the bottom right now we can go below this div right here and below one more div there we can create one new div and this div is going to represent our cards so these cards right here the class name is going to be set to flex m-3 flex-wrap justify-center gap-1 and items-center then we have to open a dynamic block of code and inside of there we can go over the earning data dot map we're going to get each individual item and we can instantly return something for each card we're going to return a div and that div is going to have a key equal to item dot title and it's also going to have a class name that's going to be bg dash white on dark mode is going to be text gray-200 on dark mode the bg is going to be set to secondary dark dash bg on medium devices the width is going to be 56 padding is going to be 4 padding top is going to be 9 and rounded 2xl there we go so you can see those four little cards right here now inside of that div we can create a button this button is going to have a type is equal to button it's also going to have a style property so style is equal to where the caller is going to be equal to item dot icon color and also background color is going to be equal to item dad icon bg there we go so inside of there we can render the item dot icon there we go not looking bad but still requires some styling so let's also add a class name equal to text dash 2xl let's change the opacity to 0.9 to make it just a bit less visible we can make it rounded dash full and also padding dash 4. this is really going to make it pop let's also on hover set the drop dash shadow dash xl so now if we hover over it we have that nice shadow looking great so far below that button we can render out a p tag and that b tag is going to have a class name equal to mt-3 there we're gonna have a span element and that span is going to have a class name equal to text dash lg font dash semi bold and we can simply say something like item dot amount so now it's going to render a specific amount right here we can create one more span below it so span element and this one is going to render the item dot percentage and again this is all just demo data we're working on so this pan is also going to have a class name but it's going to be dynamic it's going to have a template string text sm and then text dash item dot pc color so this is the color of the actual span element and then ml-2 like this so this should actually change all the colors green if it is positive and red if it is negative but what's happening is i think we've found a bug in tailwind that would be huge so looks like right here it should be getting the pc color so if we click over you can see we have red 600 and green 600 right now it's just reading the reds but if we just type it out manually text dash green dash 600 it starts working but now all of them are like that if we switch to text-red-600 this also works but now if we make it dynamic so item.pc color now it actually works so it made it work after we manually switched it but initially tailwind didn't pick out that this was a dynamic value this is a really interesting bug that we just stumble upon but that's good it's important that we fixed it next below this b tag we're going to have one more p tag and this b tag is going to simply render the item dot title there we go but let's style it a bit let's give it a class name equal to text dash sm as well as text dash gray dash 400 and mt-1 there we go this is already looking so much better we have four of these cards right here now if we unzoom to regular size like this and if we expand it just a bit you can see that it nicely scales to the center of the screen looking great so now we can continue with implementing the rest of the layout let's go below this div right here and also let's go below one more div like this because we're starting with a whole new section so let's create a new div element and just to give you an idea of what we're going to work on now it's going to be this big card that has the revenue updates and it has a graph with expense and budget right here so this is going to be the first time that we're going to actually dive into more sync fusion components it took us a long time to create this layout and so far we haven't really explored all of the benefits that syncfusion does now as soon as we start implementing different pages and functionalities using syncfusion you're gonna start noticing the difference and in how much less time it takes you to build something even better so let's start with this section right now to start implementing the revenue update section we can go inside of this newly created div and we can give it a class name let's make it a flex and let's add a gap of 10 a flex wrap of wrap so just flax dash wrap with tailwind and justify dash center we're going to have one more div inside of there so this div is going to have a class name equal to bg dash white and also on dark mode text dash gray dash 200 and on dark mode bg-secondary dash dark dash bg margin-3 or m-3 p-4 rounded dash 2 xl and on medium devices w-700 pixels like this that's going to create this nice looking paper like div of course let's add something inside of it we can start by adding a div and this div is going to have a class name equal to flex and justify dash between inside of there we're going to have a p tag and this p tag is going to say revenue updates there we go as you can see and we can also give it a class name font-semi-bold and text dash xl there we go revenue updates below that feed tag we can have one more div and this div is going to have a class name equal to flex items center and gap dash four inside of there we're going to have a p element and this p element is going to have a span inside of which we're going to render the go primitive dot a self-closing icon there we go as you can see it on the top right corner and we're going to also create one more span which is going to say expense okay doesn't really make so much sense so far but let's add some class names to our b tag let's do flex items dash center let's also do gap dash 2 text dash gray dash 600 and on hover drop dash shadow dash xl there we go so now we have this nice expense tag but we can simply duplicate this b tag below change the text to green 400 right here and then instead of expense we're going to say budget there we go so now we have this part right here we can see that we're talking about expense and budget great so now we're going to jump onto this part on the left side we're going to have two different text elements a line chart and then on the right side we're going to have this great looking stack chart so now we can go below this b tag and below two more divs and then right here we're going to create one more div this div is going to have a class name equal to mt-10 flex gap-10 flex dash wrap and justify dash center nothing should happen if we save this but now we have to add something inside of it and that something is going to be a div with a border so let's add a class name border dash r dash 1 border dash color and also m 4 and pr 10 padding right if we save that you can see that nothing is going to happen but we can add a div inside of it and that div is going to contain a p element that p is going to have two span elements inside of it the first one is going to render this amount right here so we can copy and paste it right here and below that we can simply render this percentage right here so let's copy it create a new span element and paste the percent of course we have to style them somehow so let's give a class name to the first span which is going to be text dash 3 xl and font-semi-bold there we go that's much bigger and to the second one we can give a class name equal to p-1.5 so let's give it some padding and now you'll see how we can create this little pill-like structure using only tailwind let's also give it on hover drop dash shadow dash xl cursor dash pointer rounded dash full text dash white and bg dash green dash 400. margin left dash 3 and text dash xs and there we go we have our little percentage sign looking great now we have to add the expense of course so below the speed tag we're going to add another p tag and this one is simply going to say budget we can give it a class name is equal to text dash gray-500 and mt-1 there we go now we can copy this entire div paste it below and remove the span element with the percentage we don't need the percentage for the budget let's say that the budget is going to be something like 48 000 and that's going to be the expense so if we save that you can see that we have the expense and the budget but to this div let's just add a class name equal to empty dash 8 like this there we go so now we are getting just a bit closer to our actual revenue updates card it's time that we code out our first chart a sparkline chart you can see we can actually hover over it and get different data points although it is quite simple it is looking great so right below this div we can create a new div this div is going to have a class name equal to mt-5 and inside of there we're going to call a self-closing spark line chart like this this is the component that we've created first before we go to it let's actually pass some props we're going to pass in the current color which is going to be dynamic later on for now let's simply say blue let's also give it an id line dash spark line like this we need to give it a type which is going to be set to a line we need to give it a height which is going to be set to 80 pixels so that is 80 and we also need to pass in a width which is in this case going to be something like 250 pixels of course we need to pass the data for that chart and we already have that prepared sparkline area data and we can pass in the color which is again going to be just blue there we go so now we're passing all of the necessary props and we can actually go into that sparkline component and make use of it to start implementing these sparkline components we can import the sparkline component from add sync fusion forward slash ej2 forward slash react dash charts we installed this package before and it gives us access to all of the charts we're going to also import inject soon enough you'll see what that is for and we're going to import the sparkline tooltip there we go that's all that we need and this is actually the first time in this whole video that you're going to see how to use syncfusion's component well i'm lying you did see that tooltip component right here but that was just the smallest possible part of what syncfusion offers now we're gonna see a small chart in action but the main thing is to notice how simple it is to create it so let's dive right in first we have to get all the props that we're passing into sparkline component that's the id height with color data type and current color there we go and now the only thing that we're going to return is going to be a spark line component there we go like this of course we have to provide some props to it so now if you reload the page you won't be able to see anything but how do you know which props do we have to provide well one of the things that i really like about syncfusion is their documentation there are plenty of examples to show you how any component works you don't need to go to any other website for help their documentation shows you everything it will answer all of your questions there are code demos different demos for different situations and everything else you might need so in this case you can go to sparkline getting started and then you can explore how to install it we already have the react charts and you simply need to call it that's it but now of course how can we change the dimensions types axis customization everything is here so don't worry i'm going to teach you how to use this component in this video but if you have any additional questions simply visit their documentation it's amazing our sparkline component needs to have an id so let's say id is equal to the id that we're passing through props we're going to do the same thing with the height and the width we're already passing these through props so that's easy we're going to set the line width to be equal to 1 and the value type to be equal to numeric we're going to set the fill to be equal to color and finally we're going to set the border to be equal to color which is equal to current color and the width which is going to be set to 2. nothing is going to show yet because we didn't put anything inside of it what we have to do is we have to call the inject component like this and we have to provide the services that we're planning on using services inside of an array we want to use the sparkline tooltip that's going to allow us to kind of hover over it to see more data about the chart now that we have this we can continue with all the different properties so let's finally provide the data source the most important part and that is going to be equal to the data that we're passing in finally we're going to say the x-axis name is equal to x also the y name is equal to something like y and the type is equal to the type we're passing through props now you're going to notice that everything is still blank so if we go to inspect and open up the console you can see some great useful errors sparkling component is not defined so if we go back looks like we called it sparkline right here and let's see how did we call it in the import that is sparkline so that seems all right right yeah sparkline but sparkling component is not defined so that's happening right here looks like i misspelled it sparkline component in here i have a lowercase l and that's how it should be so let's simply fix it here and there we go as soon as i reloaded the page the chart is right here the chart is good as it is but we can also provide some more tooltip data so let's simply say tool tip settings is going to be equal to an object we're going to say visible is set to true and then we're going to set the format to be equal to in a string dollar x like this and then data and then y right here so this is what's going to happen once we actually hover over it this is the x value and then this is the y value and we can also add track line settings like this and inside of an object say visible is true now if we do this if you hover you can see that we are now seeing the data of the chart of course this data isn't that relevant right now because it's not connected to this data this is just dummy data but imagine if you had real data to show you would be able to show this and add this great tooltip explaining the data at each point and that is it i know this was a simple chart but you can see it is just one single component and then some options to get this great looking chart which is fully mobile responsive now we can get back to e-commerce and we can continue with the revenue updates it looks like our button is next so just below this div we're going to add one more div and this div is going to have a class name is equal to 10 and also it's going to have a button which is a self-closing component it's going to have the color equal to white as well as a bg color is equal to blue text is going to say something like download report and border radius is going to be 10 pixels now if we go back you can see this button right here but now let's create this better looking chart using syncfusion as well this time we can actually toggle on and off expense or budget to see what's happening so below this div and below one more div i'm going to create a final div and this div is going to render a stacked self-closing component to that component we're going to pass the width which is going to be equal to 320 pixels and the height which is going to be equal to 360 pixels great so of course we cannot see anything yet because we have to go inside of our component and implement it right here this is going to be the second opportunity for you to see how amazing syncfusion is and how you can create great charts in a matter of minutes first we'll have to import a few things from syncfusion so we can say import chart component as well as series collection directive we can also get the series directive and don't worry about these names i'm going to show you where to find them really soon we're going to get the inject as well as the legend a category a stacking column series and finally the tooltip and this is coming from add sync fusion forward slash ej2 dash react dash charts there we go finally we have to import the data that we're going to use so import stacked custom series as well as stacked primary x axis and also stacked primary y axis there we go this is coming from dot slash dot slash data and then dummy and that's going to be it for now so how can we create this chart well there's going to be just one return and that is going to be the chart component inside of that chart component we need to create an inject component with different services so services indicate what do you want your chart to have we want to have a legend which is going to be this part right here to toggle it on and off we also want to have a category a stacking column series and a tooltip so the next step is to provide all of the necessary properties of course we can first get some from the props in there we pass the width and the height so what we can do is add the width which is going to be equal to width and also height which is going to be equal to height and as soon as you do that you can see this nice looking grid where our chart will go you can see how it also pushed the content to the left side let's also give it an id equal to stack chart we can also give it a primary x-axis to be equal to stacked primary x-axis that's going to change it a bit for the purposes of this specific task and we can also specify the primary y-axis as stack primary y-axis this is coming from dummy data and that just allows us to better show the data just 100 200 300 400 and so on we could have easily not provided this so let's comment it out for now and we'll see how it goes the next thing we have to do is provide the chart area property and that's going to be equal to an object where we're going to set the border to be equal to another object with the width set to zero so we've completely removing the border with one easy line we're going to set the tooltip to be equal to an object where we set the enable property to true and finally the most important part is below this inject we can call the series collection directive and inside of there we can map over our stacked custom series that stacked custom series is the data coming from our dummy data so we can say dot map we're going to get the item and the index and we want to return a series directive for each one of our items like this that is a self-closing tag to which we're going to give a key equal to index and also we're going to spread all of the properties of our item these are our actual data points so i'm going to go into our data so you can see how does it look like there we go stacked chart data we simply provide all of different values to this chart for example on x-axis we have some specific dates and then on y we have values for those dates and it looks like the chart is smart enough that it immediately noticed what do we want to use for x-axis and y-axis so now it looks like it's not even necessary what we can do is also say legend settings that's going to be an object where we are going to set the background to be white there we go so now we can actually see what's happening and we can toggle on and off specific values this is great we just created a great looking chart in a matter of minutes the chart quickly disappeared for me so i think it's letting me know that i need the primary y and primary x-axis so i'm simply going to bring them back and everything is looking great right now and the only thing that doesn't seem to be working right now are the tooltips if we hover over it we cannot get any extra information and to fix that i think we have to change the id based on how we specified our demo data we have to call this in the same way so that's going to be charts and if we reload the page you can see that the tooltip now works and we can see our total expense by month as well as the budget by month this is great we can toggle it on and off and we have a great looking card that is it for our initial ecommerce page now we're finally ready to start creating all of our other pages packed with amazing functionality like these orders pages employees customers calendar kanban board and so much more so that's going to be the next step we can go back to our app we can close all the currently open files and as you can see right here the next page we can work on is the orders page so let's control click orders and go straight there inside of our browser we can also open the orders and you can see that it is currently empty so if you feel like you need to take a break this is a great time to just sit up a bit do some exercise and then come back exciting stuff awaits we're going to implement this entire table which allows you to sort out the items by name customer name the amount status and the order id so stay tuned inside of the orders we can first import some of the things we're gonna need from sync fusion so that's going to be import grid component like this we're going to also need the columns directive we're going to also need the singular column directive also the resize component the sort component context menu filter component page excel export yep even that is available pdf export edit and finally inject and all of that is coming from add sync forward slash ej2 dash react dash grids for the data we can import the orders data and the context menu items as well as the orders grid that is coming from dot slash data forward slash dummy there we go and finally we'll be using our header so we can import the header component like this from dot slash components and actually the header component is going to be the one that we're going to create first so inside of this div we can render out the header component and we can pass in the title equal to orders and a category equal to page there we go so this is not a syncfusion component this is a component that we can create on our own so we can simply control click into it we know that we want to accept a category as well as the title and this header is simply going to be a div that's going to have a class name equal to margin bottom or mb-10 it's going to have a p tag that p tag is going to have a class name equal to text dash gray dash 400 and inside of there we're going to render out the category finally we're going to have one more b tag and this one is going to render the title so now if we save this you can see page and orders and let's also give a class name to this title that's going to be text dash 3xl font dash extra bold tracking dash tight and text dash slate dash 900 as soon as you do that you can see this page orders right here that's going to be it for the header so we can go back into our orders and right here we can apply some class names to this div wrapping our header that's going to be margin dash 2 and on medium devices margin 10 padding dash 2 and the medium devices padding 10 bg white and rounded dash 3 xl as soon as we do that you can see this nice header right here of course now we have to create the actual table and as you can see this table is packed with functionality we're looping over a lot of different items and we can sort them out by item customer name and even the amount so how would we go about implementing this using syncfusion well what we can do is create a grid component right here and the component for that is called columns directive that's simply where the data goes so we can go over our orders grid dot map we're going to get an item as well as the index and for each item we want to simply render an individual column directive that's how they call it column directive and to that self-closing tag we need to provide a key which is equal to index and then we spread all the data dot item there we go if you do that you'll notice that the website crashes so we can go to inspect and console and as you can see column directive is not defined that is my bad i misspelled it right here so this is supposed to be column there we go so as soon as you fix this you'll immediately be able to see our great looking grid we have image item customer name total amount and all of that is coming from our orders grid we can actually go into it and as you can see you can specify exactly how much space is each specific header going to take so so far we've just set up all the headers but now how do we actually pass the data to that grid component well first of all we can give it an id id equal to grid comp and then below that you can provide the data source the most important thing data source is equal to orders data as soon as you do that all of our data is going to get populated right inside of our grid isn't that amazing you can also scroll horizontally and you can see all of the data right there another great thing to notice is that the table is fully mobile responsive if you expand it it's going to take the full width of the screen this is looking amazing all of our items are right here and as you can see by default we don't have any pagination by default we also cannot do anything like sort the items by item customer name or so on so how do you actually allow for these things the only thing you have to do to enable pagination is say allow paging save that and scroll down you can see that now you only have the first 1 2 3 4 5 6 7 8 9 10 11 12 elements but we have no other elements but we also don't have the page right so how can we actually move to the second page well we're gonna use that inject component and by now you should start seeing the pattern we first use the basics of every component and then using inject and some additional properties you can allow for some additional features like pagination so we're going to say inject services inside of an array we want to add resize we also want to add sort context menu filter page excel export edit and pdf export there we go so now if you save that you can see that the pagination appeared right here now you might be wondering how do you allow sorting how can we sort these items think about it well it's actually funny how simple it is the only thing you have to do is say allow sorting and that is it save it add it right here to injected services and sorting works right out of the box isn't this amazing and that is everything we had to do to get this amazing sortable orders page isn't that crazy now it took us just a few minutes to implement it and it is fully mobile responsive and it's looking great we have complete pagination for fetching data from an api we have different pills right here for statuses the total amount customer name as well as the item and the image it's looking great now soon enough we're going to implement the employees tab and there we're going to have an even more complex page where we'll be able to edit specific values and also search by name so that is quite cool and it's going to be as easy as implementing the orders page was amazing so let's close out our orders and let's go to our app and to our employees tab great we are ready to start implementing our employees page since the employees and the orders page are quite similar we can go ahead and start by copying the orders page entirely so let's simply copy it and let's paste everything right here we're going to rename this back to employees right here and also rename it right here so what's going to be the difference in terms of imports well the grid component is going to remain the same we will need the inject so that's fine the columns directive and the column directive is the same we won't be needing the resize nor the sort nor the context menu filter as well we will need the page though and we won't need the exports so what we will need to do is add the search in this case great because we'll allow the user to search through different names we won't need the orders data rather that's going to be employees data and finally we'll also need the employees grid there we go the header of course is coming from components so this part is going to be exactly the same we're going to have the grid component but now inside of the columns directive we're going to loop over the employees grid right here and in inject services we're simply going to need the page and search great so now if we save this and go back we can reload the page and it looks like i misspelled employees data right here or rather that's going to be employees grid so i've made a mistake there there we go and we're no longer using the orders data so we can put employees data right here with that fixed that's it look at that the table is right here you might be wondering though where is the search well to add it the only thing you have to do is say toolbar and then pass in an array that's going to say search we're also going to remove this id right here and let's also set the width to be equal to auto and finally for our toolbar to appear we'll have to import the toolbar from syncfusion and finally add it to inject right here because we want to inject the toolbar functionality so now we can reload the page and our search bar is right here so if you search for something like nancy you can see it nicely filters it out and let's delete and press enter and we are back to everyone let's go with omar that works as well and looks like everything is functioning perfectly now let's rename this to employees of course and that's going to be it for the employees page the next page on our list is going to be the customers page and you might have noticed a small bug we have right now the page we're on is invisible in our sidebar that's because we still haven't set up those theme colors but don't worry soon enough we're going to fix that so as i've said the next page on our list are our customers great great job on coming this far in this course more amazing stuff coming right up when we switch to the calendar kanban and the editor these are incredibly exciting once finished our customers table is going to look like this we're going to have our usual table with pagination but now we're going to have people right here and you'll be able to select specific rows now this is just a demo table so actually clicking the lead won't do anything but if you implement full crowd functionalities you'll be able to remove rows from tables isn't that great and the same thing goes for double clicking right here and then changing the name so we can now press enter and as you can see i've just changed a value in a specific table row you can also change the status and everything else there is that is great so with that said let's proceed with this edit table functionality inside of our customers we can import and that's going to be a grid component like this we always have a grid so so far been working with a lot of different sync fusion grids we're going to have a columns directive as well as a singular column directive then we're going to have a page a selection inject for additional services edit toolbar and sort and finally filter and these are coming from add sync fusion forward slash ej2 dash react dash grids there we go make sure that it is grids plural and finally we also need to import some local things and these are going to be customers data as well as customers grid and that is coming from that slash data forward slash dummy there we go and we're gonna also use that same old header so we can say import header which is coming from dot slash components and we are ready to start implementing our grade grid table so first of all let's wrap everything in a div and that's going to be a div quite similar to the one we've already used in our previous employees component so let's quickly switch to employees and what we can do is essentially copy the entire thing because we're again working with a grid component so most of the things are going to be quite similar so let's simply paste it here we're going to keep this div right here but we're going to change some things inside of our header this time it's going to be customers and not employees now for the data source we no longer have employees data so we can switch this to customers data and down below we're gonna loop over the customers grid and not employees grid finally we no longer have access to the search so we can remove that search from here and if you do that and if you spell customers correctly you should have a page that looks like this so just by copying the previous table we immediately managed to make this look quite great but we're going to change it up a bit so what we're going to do is we have the customers data we will allow paging and allow sorting but we're gonna also add a few new parameters in the toolbar instead of search we're gonna include delete there we go and as you can see there are many different options that you can add then we're going to also allow edit settings and that's going to look something like this an object where we're going to say allow deleting to be set to true as well as allow editing which is going to be set to true so this should allow us to edit things but of course before we have to inject some additional services so we have page toolbar we're going to also add selection as well as edit sort and filter that's going to be all that we need so now if you save that you should be able to double-click so now if you save and reload the page you should be able to double-click and you can edit specific fields of course if you reload the page that field is going to go back to what it was because we're not actually implementing any crowd functionalities that could be a video on its own but if you'd like me to create that video and to connect full functionality in a mern-like application with syncfusion components that would be amazing so just let me know down in the comments but with that said this was incredibly easy as you can see our table is right here we have pagination we have delete right here and we can edit each specific field in a row isn't that great so with that you just saw that it took us a lot of time to create this simple view using just tailwind right but with syncfusion it was incredibly easy to create three quite different tables with different functionalities but right now we're diving into the good stuff now we're gonna create four incredibly different components i'm talking calendar kanban editor and color picker all of them are entirely different and you'll see how we can implement them using syncfusion so what i can do is collapse this back right here and we're going to go into our calendar component right here and also inside of our app we can open up our calendar there we go is that the first one yeah the calendar is the first one here to start with our calendar we can import all of the necessary sync fusion components this time it's not going to be a grid we're going to import the schedule component we also need a few more and that's going to be views directive as well as view directive singular you can already notice a similar pattern to what we've had in grids we're going to also import some additional services like day week work week month agenda inject resize and finally drag and drop all of these are coming from add sync fusion forward slash ej2 dash react dash schedule and finally to really modify everything even further we're going to import the date picker component and that is coming from add sync fusion forward slash ej2 dash react dash calendars we also need to import the scheduled data so right here that's going to be scheduled data and it is coming from our usual data so that's going to be dot slash data forward slash dummy there we go and it looks like we have an issue drag and drop right here coming from that looks good to me but it's saying that views directive has already been declared in here we were supposed to have a view directive singular great and finally we're gonna also need a header import header and that is coming from dot slash components great let me just spell this correctly and we're good to start implementing the calendar we're gonna have one div that's going to wrap everything and that div is going to have a class name equal to m 2 as margin on medium devices m then mt-24 d 2 on medium devices p 10 b g dash white and rounded dash 3 xl this is going to be our entire card then inside of it we're gonna have our header a self-closing tag which is going to have a category equal to app and it's going to have a title equal to calendar there we go great you can see this header right here the same one we've had with the orders employees customers and now calendar now below our header we can render out our schedule component the schedule component is not going to be a self-closing tag because we need to inject some extra services inside of it so we can say inject that's going to be a self-closing tag that's going to have the services property and that's going to be equal to an array where we're going to pass in the day the week we're going to also need work week month agenda resize and drag and drop there we go so now we have all the services that we need and if you do just that you're gonna immediately see a great looking calendar appear right here and as you can notice we implemented day week work week month and agenda so now if you click right here the view is going to change immediately isn't that crazy you can also switch between different weeks or if you're in the month view you can switch between different months also right out of the box if you click right here you're gonna get a new title definition so you can add a new event and that's going to work right off the bat immediately drag and drop also works so that is phenomenal now of course if i reload this page the data will not stay here and that's because we don't have any database connected to this again if you want me to create a marine application where we're going to make all of this work we can definitely do that in this video i'm just showing you how easy it is to create an amazing ui and to make it work with syncfusion right now if you start scrolling you're gonna notice that it is quite long so what we can do is we can change the height let's add some props and simply pass the height prop of something like 650 that way it's going to fit nicely on our screen and of course the most important part for us right now is to import our scheduled data we can do that by creating a new property called event settings we can set that to be an object and then say data source like this is equal to schedule data if we save that you should notice that nothing happened and that's because if we go into our scheduled data you can notice that all of the start times and end times are around 2021 and now is 2022 so we cannot really see that what we can do is change the starting date in this case so we can say selected date is equal to new date we pass in the date object and let's do something like 2021 0 and then 10. this is going to position us to that date and if we scroll up you can see all of our events right here we can also switch to work week month so we can see everything even better agenda view is quite cool because you can see all of them listed in a nice list format separated by days and sorted by times this is looking great and this amazing calendar right out of the box allows you to drag and drop different events click on them to edit them and you have the ability to edit the title location the start and end date with the entire date and time pickers imagine how much time you would have to spend to create this in material ui or imagine how much time it would take if you were to do this from scratch it would take weeks and there would most likely be so many bugs because handling dates and times is incredibly difficult fusion you can use their schedule component and everything is right here right out of the box i thought that we will have to implement the date picker on our own and also views directive and view directive but in this case it is so much simpler than that they make it work right out of the box great and believe it or not we are done with our first app which is the calendar so the next step is to switch to our kanban board if we go to the developed app you can go right here and see that this is a trello or a jira clone you can collapse any specific category and move around the tasks this works perfectly and we're going to implement it with syncfusion so we can go back to our app go back to app right here and then control click kanban so we can get started to create our grade kanban component the process is quite similar so we can first import something known as a kanban component as well as the columns directive and a column directive so this one is even simpler there we go and that is coming from add sync fusion forward slash ej2 dash react dash kanban we also need to import the data so we can say import kanban data as well as kanban grid right here and that is coming from dot slash data forward slash dummy and we also need to import that header so right here import header from dot slash components there we go instead of here we're going to also have that header and that div so it might be a good idea to simply copy it from our calendar there we go just the div and the header and we can paste it right here and we need to close that div there we go so let's close it and save the file we immediately have the calendar but rather that's going to be a kanban board so we can rename it now how do we go about creating this great looking kanban board well what we can do is render out our kanban component like this and inside of there we're going to render our columns directive like so now we want to loop over each individual column directive so we're going to loop over our data kanban grid dot map for each item and also for each index we want to return one column directive singular this time and that column directive is going to be a self-closing tag that's going to get the key equal to the index as well as we're going to spread out the entire item like this and as soon as we save that we're going to notice that we have a few different well let's call them columns or categories if we go into the kanban grid data you can notice that we have the header text the key field and the allow toggle so we have to do in progress testing and then done but now we have to import the actual data so let's give an id to our kanban component equal to kanban let's also give it a data source equal to kanban data and that's going to get it populated as you can see right now we just have zero zero zero which is not good so what we have to do is we have to say card settings and then inside of there we can pass in the content field which is going to be equal to summary written like this and we can also give it a header field which is going to be equal to id with a capital i now if you save that and reload the page now as you can see we still cannot see our actual items so there's one crucial thing we have to do and that is provide a key to each one of our data items as we have a key inside of a map when we're working with react so we can say key field is going to be equal to status there we go now if you save the file and reload the page you should be able to see all of our items appear right here we need to have one key field that is used to categorize all of our different elements and also we need to know what's going to be in the header and in the content field of each one of our cards so we have task 1 task 3 and also we have the content field which is the summary of the task and now we can move it around so this is looking great and again if i expand this you'll see it is fully responsive and we can move our cards around and even collapse different categories so this is looking great imagine that you're building a complicated dashboard application and you need to use all of these components inside of it you would be able to do that so easily using syncfusion so what we can do is collapse this and say that we're good to go with our kanban board it was that simple and again i just keep saying that it's great but i'm really amazed with what syncfusion's team is doing to make everything so simple and yet so effective now we're gonna work on one of the most used components ever and that is the what you see is what you get editor that looks something like this you have the editor with the text and then you can apply a lot of different styles that text bold italics underlined as well as all of the different styles font sizes orientations and bullet points and so much more even images and code so let's go ahead and start implementing our editor by going to our app and then control clicking the editor component to start creating our editor we can of course import some components and these are going to be html editor image inject link quick toolbar rich text editor component and finally just a regular toolbar and these are coming from add sync fusion forward slash ej2 dash react dash rich text editor like this and we can also import the data which is import editor data and that's coming from dot slash data forward slash dummy as well as import the header which is coming from dot slash components there we go and again we need that div and the header which we can copy from our kanban component so just take the div and take the header we can go back to the editor and paste them here as well as close our div there we go so immediately we can see this kanban right here but rather that's going to be our rich text editor so how is this component going to look like well we can render out our rich text editor component like this and it's not going to be a self-closing component we will have something inside of it first of all we'll have that inject so we can add some services and the services that we will add in this case will be the html editor toolbar image link and quick toolbar there we go so if you save this you should immediately see this great looking editor and you can immediately start typing and start making things bold italic or underlined we can also change this into a heading or change the alignment as well as add hyperlinks and also add images so this is looking great right off the bat i prepared some data just so we have something in there so if you want to include that feel free to do so so we can just call the editor data as a self-closing component and that's immediately going to import all the text inside of it so we just have something to show great and in case you want to have some data pre-populated here we can add that editor data right here that's a component of the prepared just in case you want to showcase everything that's possible right off the bat but it looks like it jumps outside of our rich text editor component let's see there we go now it's inside of there and you can play with it you can make it bold you can change the alignment as well as make it into a heading so this is looking great but again it's not necessary at all you can just have it like this empty at the start and then the users can fill in the data themselves and later on of course save it to the database so again i am amazed by how simple you can create all the done components using syncfusion with material ui you would have to code something like this on your own or you would have to find a third-party package which in most cases don't work perfectly great so that was our third app and our fourth app is a color picker that's quite an interesting one we don't see them quite often but whenever you have an application that requires some kind of theming changing colors it is quite useful to have a color picker like this or even a more advanced one like this where you can choose every single shade of every single color as well as change the transparency so this is looking great and we're going to implement it right away so we can close our editor and go to our color picker component there we go believe it or not to start coding out our color picker we'll only need one single component that's gonna be import color picker component and that's gonna be coming from add syncfusion for slash ej2 dash react dash inputs and of course we're going to also need our header so we can say import header and then that's going to be from dot slash components inside of here we can again copy and paste that header component and a div that we had in every single other app so we can just copy it and paste it right here there we go so this is going to be a div and this is going to be a color picker there we go so how is this actually going to work well we have a div we have a header and we'll want to have one preview of this pen right here to see live change and we'll also want to have an inline palette and an inline picker so two different options let's start off by creating a div and this div is going to have a class name equal to text dash center inside of that div we can have one self closing dev that's going to have an id equal to preview that's going to be our pen and there we go since we already have our styles connected and we apply the id of preview we immediately get this pen now below that we're going to have a div and that div is going to have a class name equal to flex justify dash center items dash center gap dash 20 and flex dash wrap inside of there we can create one more div and inside of that div we're gonna have a p tag right here we can simply say inline palette there we go you can see the text right here let's give it some class names class name is equal to text dash 2xl font-semi-bold margin-top or mt-2 and mb-4 there we go that's going to be all that we need so you might be wondering how do we now create this great inline palette the only thing you have to do is call a self-closing caller picker component like this there we go and now we're going to provide a few props to it first of all we're going to provide an id equal to inline palette we're going to also provide a mode equal to pallet with a capital p we want to also provide a mode switcher which is going to be equal to false because we want to set up the mode ourselves and show two different ones we want to show it in line we don't want to show any buttons so we can say show buttons is false and that's going to be all that we need now if you save this you're going to see this amazing color palette right here and now what do we have to do to get to the second version which is an inline picker well let's simply copy this entire div and paste it below then let's change this to inline picker and you can just change the mode to picker it is that simple and there we go we have our inline picker right here and it is working perfectly and of course you can use the output of these color pickers for anything you want you can change some things take the values and then use them later on in this case we simply want to take the values to change the color of this pen just to make sure that it is working so what we can do is above our functional component we can say cons change is equal to where we get arguments to this function and there we want to say document dot get element by id preview so we want to take this div containing our pen and then we want to say dot style dot background color is equal to arguments or arcs dot current value dot hex as in hexadecimal and we have to provide this change function right to both of our color pickers change is equal to change now if you save this you should be able to click right here and as you can see it actually changes color so this is phenomenal two incredibly custom color picker components right here in a few minutes and that brings us to the end of our four apps so we have our great looking dashboard we have three pages and four apps before we dive into our charts it might be a good idea to fix this theming issue as we said once you click on something then you cannot see what page are you on and usually it should look like this with a properly selected theme so what we can do is we can finish implementing the theme selection to do that we can go back to our application and then we can go to our app.js right here above our routes we can call our theme settings component i think we're importing it at the top let's just check yep we're importing theme settings from components so what we can do is we can simply render the theme settings component like a self-closing component and now you can control click to go into it this is where we're going to implement the possibility for users to choose between all different theming options such as light and dark mode and 6 different colors to start implementing our theme settings we can first import a few icons that we're going to use so we can say import md outline cancel and that's going to be coming from react dash icons forward slash md we can also import the bs check and that will be coming from react dash icons forward slash bs and finally we need a tooltip component so we can say import tooltip component which is coming from at sync fusion forward slash ej2 dash react dash popups there we go we're gonna also need some dummy data so we can import theme colors which will be coming from dot slash data forward slash dummy there we go and in this component we of course have to change the global state so once we change the colors in this component we need our change to be seen across the entire application so we can import use state context from dot slash contexts forward slash context provider first let's create the layout of our theme settings we're going to have one root div so right here that div is going to have a class name equal to bg dash half dash transparent also w dash screen for full width it's going to be fixed it's also going to have a nav item class top 0 and also right zero there we go so if we save this you can notice that nothing's gonna happen right away but we can add another div inside of it and that div is going to have a class name equal to float dash right also h dash screen on dark mode text dash gray dash 200 bg dash white on dark mode we want to have a custom color so we can put square brackets right there and then say hash four eight four b five two and then finally w dash four hundred now if you save this you'll be able to see that now we have this great looking sidebar on the right side and we have just a darker window on the left side so let's implement our sidebar for theme settings we can add a div and this div is going to have a class name equal to flex justify dash between item stash center p dash 4 and ml-4 for margin left inside of there we're gonna have a p tag and it's simply going to say settings we can give it some class names to style it a bit something like font dash semi-bold and text lg great now next to that we can have a button and that's going to be the button to close the sidebar so we can give it a few props like type is equal to button also on click property which is at the start going to be set to an empty callback function we're going to implement the logic later on we need to implement some inline styles so i'm going to say style right here and we can add the color that color is going to be an rgb value so right here we can say something like 153 171 and then 180 i found that color to work the best and we can also give it a border radius of 50 percent to make it a circle of course we cannot yet see it because we didn't put anything inside of it so inside of that button we can render the md outline cancel and there we go now you can barely see it on top right we can make it a bit bigger with class names so let's say class name is equal to text dash 2xl that's going to make it bigger p-3 for padding on hover we want to drop shadow xl that's going to have that shadow on hover there we go and also on hover we want to change the bg to light gray there we go okay so this is looking more like it already now below this button and below this div as well we can start creating our theme options so let's create a div and that div is going to have a class name equal to flex dash call border dash t-1 for border top border dash color padding 4 and ml-4 for margin left there we go now we can see this line which is a border top and then inside of there we can have a p tag that's going to say theme options and we can have similar styles like we have in the settings that's going to be font semi-bold and text lg so we can copy those class names right here but it should be a sub menu so we're going to leave it as lg and we're going to change the settings to xl to make it even larger there we go so what are we going to have under our theme options well we're going to have a div and that div is going to have a class name equal to mt-4 we're going to have an input right inside of there a self-closing input tag this input is going to be of a type radio there we go we're going to give it an id equal to light let's also give it a name equal to theme a value equal to light with a capital l a class name is going to be set to cursor dash pointer so that we know that we can click it and we're going to have to have an onchange property which for now is going to be set to an empty callback function we also need to know if it has been checked so we're going to say checked and there again we have to check if it is true or false for now simply let's leave it static as true now we need to add a label for that input so we can create a label and what we can do is say html4 is equal to light and also give it a class name equal to ml-2 text-md and cursor dash pointer now if we save this it's looking a lot better but we can copy this entire div duplicate it below and now we can change this to id is equal to dark value is equal to dark with a capital d and also we want to change the html4 to dark and also say dark right here that's going to leave us with two different input tags or two different radio buttons for now they're not doing anything but soon enough they will change the color mode of our entire application and just to see the finished product we also need to add the theme colors just below so to do that we can copy this div right here with a p tag that's going to be for the top border but let's first find where is it ending so it is ending right here and then below it we're going to simply add that new div and make sure to close it right away there we go so that's going to say theme options but now we want to say theme colors because we're going to change the actual color now what we want to do inside of here is create one more div below this b tag that div is going to have a class name equal to flex as well as gap dash 3. inside of there we want to loop over all of our colors and i've already prepared them for you inside of theme colors that's a variable that we imported right at the top so we can say theme colors and then dot map we're mapping over them we're gonna get each individual item and also the index for each one of these theme colors we can instantly return a tooltip component so we can say tooltip component and a tooltip component is going to have its own key which is going to be set to index and also content which is going to be set to item dot name and finally a position which is going to be set to top center there we go now if we save this you cannot yet see anything because we don't have anything inside of that tooltip so we can create a div element and that div is going to have a class name equal to relative empty dash 2 for margin top cursor dash pointer flex gap dash 5 and items dash center and inside of that div we're gonna have a button this button is going to render a bs check icon inside of it so that's going to be a self-closing icon but we have to change the theme color depending on the current color so let's say class name is equal to we're going to make it a dynamic template string and we're going to say ml-2 text dash 2xl text dash white and then finally we have to either show this or hide this depending on if the color we're currently on is the selected color so we're going to have something like this if item dot color is triple equal to the current color like this in that case we want to make this a block level element so right here we can say block and then if that is not the case we simply want to set this to hidden so there is no check mark there great but this current color i don't think we have access to at the moment that current color is something we'll have to get from the use theme context so what i'm gonna do for now is i'm gonna simply say true right here so it's always going to be visible there we go and now we actually have to style this button so inside of this button let's add a few props like type is equal to button class name is equal to h-10 and w-10 rounded dash full to make it a circle and cursor dash pointer there we go so now we're going to have a few circles here but they are invisible as you can see so what we can do is give them an inline style where we're going to say the background color is equal to item dot color and that's going to give each one of these a unique color as you can see right here we also need to add an on click on this button which for now as you already know it is going to be set to an empty callback function until we implement the logic and now we have check marks on all of them but rather let's say false here so we have it on none of them there we go so when it comes to the ui and the layout we are now done with this settings theme options and theme colors sidebar now we are ready to hook this up to our context and actually change the value so that they are changed across our entire application to make the functionality work let's pull out some states and state setters from our context and we can do that by saying const let's get the set color also the set mode as well as the current mode and the current color and finally the set theme settings there we go so we are trying to get that from use state context like so now i'm pretty sure that we haven't yet implemented almost all of these so we might want to revisit the state context so if we go back to our context provider you can clearly see that we're not passing these values in but we can create them as we speak so what we can do is create a few new use states i'm going to expand our code editor a bit more just so we can see everything there we go and i'm going to create a new use state field so we can say use state snippet and let's call it current color set current color and at the start we can use the string of hash 03 c9 d7 this is going to be the initial color we can do the same thing for our mode so we can say const current mode and set current mode and we can set the current mode to be light just so we have some default values finally we also have to create setter functions so we can say const set mode is going to be equal to a function that's going to accept an event and there we simply want to set the current mode to be equal to e.target.value meaning the mode we clicked on but we don't want to do just that we also want to update the local storage so that when the user comes the next time the same color is activated so we want to set item called theme mode to be equal to e.target.value and now we can repeat this function essentially just duplicate it below but it's not going to be set mode anymore it's going to be set color so we need to have two different functions for mode and color instead of simply setting the current mode we're going to set the current color there we go and then instead of theme mode we're going to update the color mode there we go and now we have all of the values that we need to pass over to our context so let's do that right away we're going to pass in the current color as well as current mode we can also pass the set current color and finally set current mode potentially we're going to have something else but i think that's gonna be it for now so we have these four and let's go back to theme settings one two three four five so i think set theme settings is the last one which we haven't yet used so let's create that last one that's going to be the last state so we can simply create a new use state value and we're going to call it theme settings this is going to be a simple yes or no a boolean variable so theme settings and at the start is going to be set to false so is this sidebar currently opened or closed and now we can also pass this variable right here through our contacts there we go so now let's go to our theme settings and let's actually make use of these values we can start with our first button and that button is used to close our sidebar so let's simply say set theme settings to false that should allow us to close it now the change we make here is reflected here also reflected here but most importantly it's reflected inside of our app as well so right here we can get our theme settings and then to actually hide it what we can do is we can say dynamic block of code theme settings and and this means that we only show theme settings if it is currently true so now if you reload you're gonna notice that it's simply not there but now we have to actually open the sidebar when we click on settings but now how do we get back to it well we have to activate it once we click on this settings icon so let's search for our settings and it looks like it is right here there we go button settings so right here on our settings we have to turn it on let's add an on click and we're going to call the function and set the theme settings to true that is going to activate our sidebar but of course we also have to get this function from our context so we need to pull the theme settings as well as the set theme settings and it looks like i missed something right here there's the button class name on click looks like i prematurely closed this button so let's delete that sign reload the page and now click on settings right here there we go so now if we click here we close it if we click down there we open it so everything is working perfectly now let's actually make the toggles work so what we need to do is go back into our theme settings and go to the next place where we have an empty function for now and that's going to be in our first input so right here on change what we want to do is we want to call the set mode function that's it just simply call set mode that's the function that we have created inside of our context so we call the set mode and then the checked is not always going to be true it's going to be if the current mode is triple equal to light only then it is true and we can repeat the process for the other button so right here we can say simply set mode and then checked is going to be if the current mode is triple equal to dark this time there we go so now you can see by default it is light and that looks good now let's do a similar thing for colors so we can scroll down and go to our button inside of our button we simply want to set the color to be equal to or rather call it with item dot color and now in here instead of false we can say if item.color is triple equal to current color so we'll only see the check mark for the currently selected core which is this one great so now we can try to test out these functionalities i'll try to expand this and click dark but as you can see nothing really happens also nothing happens if i click the colors so let's go ahead and debug that together let's try to make the theme color work first first of all once we click on a specific theme color i'd wanted to close the sidebar so what we can do is go back to the context provider and then immediately after we set a specific color we want to close the theme settings as well so right here at the bottom of both of these functions we can set theme settings to false there we go and another thing is that we call these functions set mode and set color and we're not actually calling these we're calling the set current color and set current mode so we actually have to pass these two into the context there we go so set mode and set color instead of the set current color and set current mode so these are the right ones there we go let me see set mode we just need to add a comma right here there we go so now it should be a bit better let's see if it works i'm gonna open up the theme selector or settings and i'm gonna change to blue theme and nothing seems to be happening okay let's go step by step so we are clicking on the color right yeah that's the color set current color we're setting it to a specific color setting the local storage and then setting the theme settings to false but it doesn't seem to be closing let's go to our theme settings and see if we're properly accepting it right here we have the set caller that's correct and then we're calling that set color right here on click on this button so that looks good to me as well but as you know sometimes issues like these happen and you cannot immediately know what to do but we can have a series of cons of logs and figure it out so i'll try to open the inspect element and go to console and clear the entire terminal i always like to include these bugs in just to know how i would go about solving this specific problem so let's go to settings and click right here and we immediately get an error cannot read property of undefined reading value in context provider line 29 so let's go to our context provider line 29 and it looks like e target value is undefined interesting even though we're passing this set color we're passing it right here and we're calling it right here so on click we're passing in the item color and it is undefined even though it is right here so what we can do is we can try cons of logging it so i would go right here into set caller and i'm going to put a console log to console.log the entire event or we can do e dot target to to be even more precise and now i'm going to click on a specific color as you can see we get undefined so that that's not good so let's go further let's go back into the theme settings and let's make sure that we're properly calling this we have an onclick property on this button and we're calling the set color that set color is coming from here which is alright and we're passing in the item.color let's try to expand this block right here and once we expand it we can put a kansa log right here as well so we can say console.log item.color to see if we indeed have it once i've done that i'm gonna reload the page open up the settings and click right here as you can see we do get the caller in theme settings so the question is why is it not getting properly transferred over to our set color okay i think i've got it we're passing in the item.color which is a string right so we're passing in a string to this function but then once we come back to the context provider we are kind of thinking that we're going to get an event like this and then we try to destructure the value from that event but since this is already a string there is no reason to do that what we can do is immediately call this a mode so i'm going to say mode here there we go and also we don't have to do any of this there we go so simply just pass in the mode and similar thing for this we're going to simply get the color immediately and then we can simply set the color as it is no need to destructure the value out of it great let's see if that's the same thing for our theme settings right here in here we are going to pass an event as you can see the difference between set mode and set color is that right here we actually are passing the actual caller and above we are simply calling the function which means that we're gonna get an event here so i have to go back and change this back to e and then right here e dot target dot value there we go so i think we should be good to go now as you can see small issues like these can definitely take some time to fix so let's select the blue theme and there we go it automatically got closed and now it is selected we can change the purple as well and that works same thing for red and we can also change to dark as you can see the value was selected but we cannot see anything in our browser and that's because we now actually have to make use of these values let's first make use of the actual theme color remember there were a few times where we simply typed the word blue there we go blue blue blue blue and that blue was actually supposed to be the real color so what we can do is go to the top of this page and we can get the current color from our context there we go and now instead of that blue we can actually use the current color which is coming straight from our context so that's going to be current color not current context my bad there current color we're going to get that from here and also use it everywhere else where we used to type the word blue there we go i think that's gonna be it for the navigation bar let's check it out there we go as you can see we have red items right here and if we switch to blue they are blue now now let's repeat this process for the e-commerce page as well so i'm gonna go to the top i'm gonna say const current color which is coming from or rather is equal to use state context and now i'm going to search for every instance of the word blue and simply replace it with the current color there we go so i think we should be good to go on this and just one more there we go now if i expand it to see this in its full glory we can close this as well as you can see we have our dashboard and if we change our theme color to something like orange you can see the buttons as well as the navigation bar changes but now we can actually solve that bug where the item in the sidebar is not visible so to fix that we can go to our sidebar right let's go find that sidebar and let's change the color of the currently active item that should be somewhere around here right if we go to our nav link right here we had the class name we can also give it an inline style and we already said that novelink is a special component belonging to react router so it allows us to call a callback function right there and if we destructure the parameters inside that callback function we get the is active property based on that we can say if is active then show the current color like this or rather we need to change the background color to be equal to the current color like this else simply an empty string we don't want to do anything so i think that should be it but of course let's fix the syntax i'm going to kind of divide this from the rest so we can see what's happening we have if is active i made a small mistake here how it was actually supposed to go was right here we want to instantly return an object with the styles and then we want to set the background color to be equal to and then if it is active then it's going to be equal to the current color else is going to be equal to an empty string so this is how it should look with this it looks like we have an error so let's go ahead and explore it i don't think we ever imported current color in the sidebar so at the top we can right here get the current color from the context you can see how easy it is now that the context is fully set up and there we go this is looking so much better now we can actually see on which page are we on it is nicely highlighted in our theme color we have our orders employees customers calendar kanban editor color picker everything else we have created so far and this great looking theme caller which now can be changed great i just noticed that our settings icon is actually blue so we can change that let's just search for again the instance of the word blue it is appearing right here inside of the app so we can get the current color and what we can do is change the background to the current color and that should fix it right away there we go so this is looking so much better now everything is red as you can see right here and with that we're done with our theming at least when it comes to colors we just have to do a few more things to make the theme options work as well so stay tuned to make our dark mode work there's just one thing that we have to do and that is add an additional class name to our div that's inside of the app.js let's give it a class name and let's make it the dynamic block of code we want to import or rather get something from our context and that something is going to be current mode so we can say if current mode is triple equal to dark with a capital d then we want to have a string of dark else we want to simply put the empty string as a class name now if we save this and go to settings and switch to dark as you can see most of the components switch to dark which is great we also have the sidebar everything else is dark besides the background so let's also fix that as well we can scroll down to below our sidebar right here this is the div that wraps our entire content and in here we have to change some things depending on our mode so what we can do is we can expand this active menu right here into a few lines just so it's easier to see what's happening so we have if the active menu is open then just have some margin left usually just flex2 but now we're gonna add some additional class names so on dark mode we want to set this to bg dash main dash dark dash bg so we were missing this dark right here and as soon as you change that you're gonna get this beautiful interface that you can see right here everything is looking great of course later on we're gonna also change the background of this chart right here so everything is fully customizable now if we switch to some other pages you're going to notice that the actual background is dark but the page and the content of the page is light of course you can decide if you want to make this black as well but just for visibility reasons i decided to keep the actual content light so that everything is nicely visible and uniform great with that said our dark mode is now done of course we just have to make a few other changes when it comes to the chart backgrounds but now is the time that we actually start implementing our charts so of course the first chart on our list is going to be the line chart so i'm going to switch this to light and we are ready to implement our first chart of the day so let me just simply pull this on the side we can go to our app and we can open up our first line chart component as you'll soon be able to see it's not going to be hard as we're using sync fusion components to help us so let's get started inside of our line component we're gonna have two imports that's going to be the charts header as well as the line chart and that's going to be coming from dot slash dot slash components so as you can see right here we are currently in the line component or rather line page but we're gonna create a separate line chart so to start off we can do the similar thing to what we have been doing in all pages and that is creating the header so we can say class name is equal to margin dash 4 on medium devices margin dash 10 margin top 24 padding dash 10 bg dash white on a dark mode we can have bg dash secondary dash dark dash bg and rounded dash 3 xl to create that paper look now we're gonna need our header and i see that it imported the charts header right here but just a regular header will do just fine this is the header component we've created before so what we can do is we can call the self closing header component right here we can give it a category which is going to be equal to chart like this and we can also give it a title which is going to be inflation rate there we go now if we save this you're going to notice that we have this paper or this box wrapping everything and then we have our header great so below that we can finally call our line chart so i'm going to have a div that div is going to have a class name equal to w dash full and finally we're going to call our line chart self closing component there we go now of course to implement it we can control click to go into the line chart component this is the first big chart that we're implementing so we can start by importing some components from syncfusion let's import the chart component we also need the series collection directive we also need the series directive we need that inject to inject special services also date time the legend and tooltip you can essentially pick and choose whichever services you want your chart to have and all of that is coming from add sync fusion forward slash ej2 dash react dash charts we can also import the data for our chart by saying import line custom series and we'll also need to get line primary y-axis and line primary x-axis there we go and that is coming from dot dot slash dot dot slash data forward slash dummy there we go now we can go ahead and check out what our series will have by control clicking into it as you can see we have our data source and our line chart data which is essentially just a list of points which we want to map over so as you can see our x-axis is going to be the date and then y-axis is going to be a specific number so what we can do is we can go back to our line chart and instead of this div right here we can render the chart component like so there we go if we save that you're gonna notice that we immediately get a chart right here which looks great now let's inject some services into it so right inside of it i'm going to simply say inject as a self-closing component and we're going to say services is equal to an array and then inside of that array we're going to have our line series date time legend and finally the tooltip and of course the line series also has to be imported at the top so let's get the line series right here and fix the typo on date time and the legend right here should be singular so if we fix that we'll get our chart back and we're ready to start mapping over our data so again right below our inject we can have our series collection directive inside of our series collection directive which is spelled with a capital s of course because it's a component we want to map over our data so let's get our line custom series dot map when mopping over it we're gonna get the item as well as the index right here and we want to loop over one individual series directive there we go now each series directive is going to have a key equal to index and then we want to spread over all of the data belonging to an item now as you can see this immediately gives us access to our data and there are even some dots indicating significant points on the chart so this is looking great of course right out of the box you can also trigger or show or hide specific lines in this line graph but now let's customize it a bit in our chart component i'm going to give it an id a line chart just so we know what we're working with let's modify the height to something like 420 pixels let's also change the primary x-axis to our line primary x-axis if we save that you'll be able to modify each year specifically because if you don't do that you're going to just have some default values belonging to our data points but once you actually implement that you can modify each and every point on each axis and we can repeat that process for primary y-axis as well so if we save that now we're going to have percentages right here instead of just values we can also remove the chart border so what we can do is say chart area and then we can pass in an object and say border and then width of the border is going to be set to 0. so now we just have horizontal lines like this we can also enable the tooltip by saying tooltip and then an object saying enable is equal to true so now if we hover over something you can get more detailed precise information about that specific point in time so this is already looking so much better and as you can see it is incredibly customizable what we can also do is we can import our context so let's import our use state context coming from dot slash context forward slash context provider and then we can use it as we usually do that's going to be const current mode is equal to use state context like so and what we can do with that mode is we can change the background so we can say background and then we can check if current mode is triple equal to dark with a capital d then we can change the chart color so in this case i found the color the hexadecimal value of 3 3 3 7 3 e to work best and if it is not a dark mode then we can simply put ffff for white looks like we have a quick error we were supposed to go outside of one more folder right here so as soon as we fix that that is now great and we can also change the color to dark and now as you can see we have a real dark mode of course i would suggest playing more with values right here because the header text right here is not that readable as well as these legend tooltips you can see on the bottom again everything can be entirely customized so let's go back to our light mode there we go and we can start with the area chart the area chart is going to be the last chart that we're going to implement together so if we go into the app and then if we click into the area i'm going to show you how to do this chart as well but all of the other charts are going to be incredibly similar essentially you're going to use that same chart component belonging to sync fusion the only thing that's going to be changed is the type of the chart so in here we have the line series but elsewhere we're going to have area series and so on i'm going to show you the differences between our line chart and our area chart and i'm also going to show you how you can implement those for every single other chart on the list here you'll be able to create them on your own and i'll also give you the code for all of these charts right below this video with that said let's start implementing our area chart just to show you how easily you can change one chart style onto another we're gonna start with the area simply by copying everything we have so far for the line chart so we can copy it go back to the area and paste it of course we're going to change the expert default to area as well as change the const right here to area which is the name of our functional component what we have to import at the top is going to be the chart component of course the series collection directive is going to stay the same as well as the series directive we're gonna still inject something and we're gonna need the date and time the legend as well in this case we won't need a tooltip and we definitely won't need the line series but we will need the spline area series so that's the only difference right there we're going to also import our header component so let's say import header from dot slash dot slash components and we also are not going to get the line custom series we're going to get the area custom series as well as area primary y-axis and area primary x-axis there we go now we can immediately change those right here so this is going to be area custom series and then right here we're going to have area x-axis and area y-axis there we go and of course we also have to have our div that's wrapping everything so let's create that div right here we can put our component inside of it and then we can copy our header as well from our line component we need this div alongside this header let's copy it and paste it right here looks like we got a small error and in this case we are naming the area primary y-axis and area primary x-axis with a lowercase a so this was just a minor inconsistency on my end once we fix that we can just go under the inject and remove the things that we don't need so we won't be needing the tooltip and instead of the line series we're going to have our spline area series there we go now if we save this as you can see we have our new chart we can immediately rename it right here to area and also the title can be something like inflation rate in percentage there we go and look at this this is a great looking area chart you can also click right here to toggle specific data on or off and it's looking great so you just saw how simple it was to take one existing style of charts or rather type of charts and then implement a new chart with it sync fusion's components are incredibly extensible and modifiable so we are using the same chart component but this time we're switching it from a line chart to an area chart this is looking great let's expand this to the full window so we can see it in its full glory there we go as you can see the chart immediately expanded as it is fully responsive on the sidebar we can now switch between the area chart and the line chart as well as all of the apps we have already created this is already a phenomenal dashboard application i would dare to say the best dashboard application on youtube so there are still six charts left to go but as i've told you the way in which you can implement them is incredibly straightforward and here in javascript mastery i always like to put you to the test so to finalize this application i would like you to implement at least a few out of these six remaining charts so what you can do is replicate the process for the line in the area chart to implement the bar pi financial or any other chart again reading through syncfusion's docs is going to be crucial you can give it a shot and if you get stuck the code for all of these charts is going to be down in the description you're gonna have access to a github gist containing each one of these files individually but i would strongly recommend you to check out the github repository containing the entire code for the entire project i entirely open source it and you're free to use it for your own personal projects even to make money off of them so feel free to try it on your own and then if you get stuck check out the code and implement them with my help with that said our dashboard application is looking amazing we implemented the home page as well as the table pages apps and a few charts as well as all theming functionality we also have some icons at the top right now they are not fully functional as if you click on one of these you're just gonna get this popup right here on the top right but again that is something that i strongly urge you to try out we have been working with syncfusion for the past few hours but now is the time that you actually try and learn it on your own we learn most when we try things on our own get stuck fix it and then learn it forever so i would urge you that after you're done with the charts definitely give it a shot and try to get these pop-ups to work as well you have the final deployed application right here as a reference guide so this is how it should actually look like again all of the code for these as well is down in the description with the entire project code with that said the last thing left for us to do is to deploy this amazing application for all of your potential employers friends and colleagues to check out and so that you can put it on your portfolio to get a job so let's go ahead and deploy it right away just before deploying it i would just like to fix one small bug i've just noticed if we collapse this a bit you're gonna notice that everything goes blank and i can replicate that by reloading the page and then opening the sidebar moving it around a bit and then kind of closing it and reopening it again if we go to inspect and then console you're gonna notice that the issue is with the spark line component as nothing was returned from the render i was unsure of what was happening here but then i read syncfusion documentation and they actually suggest that you use a class-based component for the sparkline chart so we can go to our sparkline component right here and then again down in the description there's going to be the finalized code for the sparkline component which is going to be almost the same as we have it currently but now it is going to be a class-based component if you do that and close the console now you can resize it however you want you can you can also close and reopen the menu and everything will be working just fine so i just wanted to get that out of the way as i always want you to have finalized products and production ready applications great with that said we are ready to get this application deployed for deployment we'll be using netlify allows you to deploy your react application in seconds the only thing you have to do is log in i'm going to log in using github you'll be on your home page you can click sites and then scroll to the bottom and then in here you'll be able to drag and drop your react folder in react applications we cannot simply take all of the code right here or just the source folder we have to open up the terminal stop it from running and run npm run build this command is going to create an optimized production build that we can then simply drag and drop into netlify so that everything works perfectly this process usually takes just about a minute so i'm gonna pause this video and i'll be right back there we go our production build has been created and you're gonna see a new folder in your file explorer let's right click it click reveal in file explorer and the only thing you have to do is simply drag and drop the build folder right into netlify the deployment process is going to take about a minute i would say but that's not the case as i was finishing my sentence the app already got deployed so before checking it out let's expand this window and let's go to the main settings in here you can go to options and then edit site name we can do something like sync fusion dashboard save and there we go now we can go to syncfusion dashboard netlify of course that's going to be something different for you and you're going to see that our app is now live and deployed to the internet we can go and switch between different tabs orders employees customers calendar or kanban and all of that is entirely functional as we showed during development that is phenomenal with that said we've came to the end of this video i hope you enjoyed building this phenomenal dashboard project and there's even more great projects like this one coming up on javascript mastery really soon so if you haven't already definitely make sure to subscribe once again huge thanks to syncfusion not only for sponsoring this video but also for creating such an amazing component suite with over 1700 components that you can use in all of your upcoming react and all other kinds of applications they're great and they are my personal recommendation with that said that's going to be it for this video thank you so much for watching and have a wonderful day [Music]

Channel: JavaScript Mastery

Views: 974,689

Keywords: javascript, javascript mastery, js mastery, master javascript, react admin, admin dashboard, react admin dashboard, react dashboard design, react dashboard template, react dashboard ui, react admin panel, dashboard react js, build a dashboard in react js, admin panel in react js, chart react js, tables in react js, react charts dashboard, react kanban board, kanban board react js, react js, syncfusion, syncfusion dashboard, syncfusion react js, react js website

Id: jx5hdo50a2M

Length: 234min 32sec (14072 seconds)

Published: Fri May 20 2022