Build a Dashboard using ReactJS, Tailwind CSS, Framer Motion | Money Tracker | Frontend Project

hello everyone in this video we are going to make a money tracker dashboard so this project is not a full stack application but it will be a front-end application which you can include in your portfolio projects so the main motive of this project that we will be using frame of motion Tailwind CSS and the chat Library in react.js so it will be so you will be able to learn like how we can you know include all these things in the reactions application right so we have this template which I created in the figma we have a navigation bar and we have this dashboard component which includes some dummy cards and the chart which I created in this Sigma and we will be using charges library to create it in react and another some dummy cards as well so we will be using framework Motion in it so like when this button is clicked right we want this navigation to be uh shrinked like this right and when it is clicked again we want it to be open like this so you will see a little animation over there when we will be using framework motion right and in the right hand side we have some dummy components in the dashboard and for this chart we will be using charges Library okay so let's start this project so the first step which we will do is let's open up terminal and let me go to the directory where I'll be creating these uh this project so I'll create one directory and let's uh give it name dashboard YT I'll just simply go to it and I'll install the react.s so for compiling reactions I'll be using ygs like you can use CRA right create react app which comes with a built-in webpack bundler and you know compiler but that is slow so we'll be using ygs so let me just write white with react installation and you can you know do that example you can go to get started white and let me see okay you can go to getting started I think and you'll see some examples over here yeah let me just use this example and I'll just mention the template okay as you can see for npm 7 plus we need to use this okay so yeah let me open up my terminal and I'll just simply paste it and I want to use the react template and for this I'll write dot I believe it should work because I want to create all this in my current directory let me just click enter and it will download all the libraries package name can be similar yeah so let me just do LS as you can see it uh downloaded all the files which are necessary for this project and now I'll download all the libraries which is required to run this project it will take some time and after it is done we can open up vs code and run the startup server right uh let's wait for it yeah it has downloaded it now you can write code dot to open up VSCO terminal and let me open up my terminal over here so what I'll do is I'll write npm run Dev and it'll start the server right yeah so it will have this default page which comes with white but we don't want it so let's clear all this so I'll clear all the code which is here we don't want this extra code and let's clear all of this and I just want simple hello text right you can write it inside the paragraph and I don't want any CSS as well you can delete it I don't want any index CSS as well you can delete it so yeah for now we will be having this now next step which I want is to install Tailwind CSS in our project so you can write Tailwind CSS Docs and I want it to be with white right and it will show you these steps you can follow these the first step is you need to copy this and paste it over in your terminal so the first command line is installing all these libraries which are required you know for tell me CSS and second command is generating some files which is required for the table CSS let's press enter so after it is done you will see two files have come over here first one is post CSS which is including these plugins and the second is Tailwind config.js file and we have to do some changes in this array so you can find that from the documentation so you can just simply copy it and let me just paste it over here and you can save it now uh we need to include these uh three things in index CSS you can go to index CSS and paste it and you need to restart the server now so let me close the server which was running you can press Ctrl C and you can start the server again and let's see so yeah Tailwind CSS is working to verify it you can use the table in CS classes so let me write text Center to make it Center and as you can see it went to Center so it means Kelvin CSS is working now the third step is we want to make this navigation bar right so the first is this logo so let's do that let me clear all these logos which is not required for me I can delete it let me just delete it okay let me minimize everything I think yeah so I have this assets folder which you can use I'll be including its Link in the description so let me just uh use it directly you can just simply you know copy this folder when you will be downloading it oh wait it should not come here let me undo this okay wait I'll be deleting it I don't want it to be why it's not deleting yeah so I want one assets folder inside our SRC and it has some like logo and as well it has uh the icon right now what I'll be doing is insideapp.jsx I want two components so the first one will be navigation bar and the second one will be our main component right where you will be seeing your dashboard so for now it will be empty and here we want our navigation bar so when you will be saving it obviously it will give you error maybe because you don't have this weight um let me minimize it yeah so let me go to Chrome uh yeah for now you will be not will not be able to view anything because this component does not exist let me create one components directory over here and here we will be creating our navigation bar for creating a template directly I like I have this extension where you can just simply type rfce and it'll give you this you know template so this extension name is es7 plus react Redux you can also download and install it so let me just save it and let me import it now as you can see we are able to see it so in navigation bar what I want is so the first thing I want is to have a logo right so this will be loaded and the first thing will be image which will show you the icon and the second thing will be the logo name for our case it is money tracker okay you can save it so it'll give you some error because uh you haven't written any image over here so let's import the image you can write import logo from uh assets and inside assets we have this logo.png let's save it and yeah include the logo over here now you will be able to see the logo but it's coming in the vertical line so for having it in same line you can use flex and let's give some spacing as well between it yeah and we want everything to be like centered and yeah let's get some padding to it px10 pya 12 and everything will be in vertical line yeah now it's looking good and we also want some border k yeah and we want it to be with one by five this yeah and we want it to be full screen yeah like this now we will include all the navigation links that we need so as you can see we have one two three four five five navigation links right so you can create a array over uh for this so you can write nav links and it will contain an object so the first will be containing the name first is dashboard and second one is the icon so for Icon we will be using uh Lucid icons I will do that later let me just simply copy it okay so next icon is I think activity then we have Analytics fourth one we have transactions then we have health center right now what we will do is we will basically Loop over this array and show all the navigation links so let me create one more div over here and you can give classes empty nine [Music] and everything will be vertically aligned and spaced between all of them will be maybe eight so let's look over all of them and what I'll do is I'll create one more div let's give key to it as well because react gives you error if you haven't give a given key to the elements which are you know you are showing in the loop right so inside this for now I'll just simply show the navigation name inside a span element so you can access the name using item dot name right so as you can see all our links all links are coming let me give some little margin yeah this one is fine now what we will do is yeah we need to include the icons right icons are not coming so for that we will be using uh Lucid dot Dev you can go to lucy.f you know it has some beautiful and consistent icons which you can use you can go to view all icons and you can search the icon which you need so let me just first install this so for react you have npm install Lucid react Library you can install this and after it is installed let me import it and you'll see react yeah so we want at least five icons the first icon we need is layout dashboard second we need uh let me see so for activity some clock icon is there right so I can write clock um three and third icon is analytics for that we'll be using bar chart two fourth icon is uh transaction one so you can search it over here if you're not sure what will be the name of the icon so as you can see we want something similar to this so its name is Arrow right left in the tooltip you can see right so we will be writing Arrow right left and the last icon is help Circle icon so you can include these icons here so the first one is layout dashboard second is clock three this one is bar chart then we have Arrow right left and then we have help Circle icon right okay now what we will do is we will show these icons over here so you can write uh item dot icon yeah you can save it and wait yeah let me see so as you can see all icons are coming perfectly fine but we want it to be like aligned horizontally right so I can use uh Tailwind CSS class flex and we want at least space to be three yeah it's looking good now and yeah it's fine now let's create this uh division with this color so color for this is this one let me just copy it and I want it to be background color uh wait so basically what I'll do is I want to include background color only if the element is active right but for now I'll just because I'm making only the one navigation and the one main component right so you can hard code it like the first element is active right you know I'll um leave it to you guys like how you can handle this it would be a great learning process so basically what you have to do is whenever any link is clicked you have to maintain some state right uh to be able to remember like which navigation was active or which navigation is currently active so for now I'll hard code that okay the first navigation is always active so let me create one state over here its name will be active now index or name whatever so sorry set active nav index so for now I'll just hard I'm hard coding it like always zeroth index is active initially and I can write over here if active nav index equal to the current index right uh I want it to be background uh this one and I want it to be text White with text font semi board right let me just okay yeah and like basically if negative uh active nav index is equal to the current index we want it to be having this background color else we don't want anything okay let me include space as well before this because we will be combining all these classes so you need some space right let me just verify it yeah as you can see this is coming and also uh we want some padding as well so I can write P2 yeah uh we want uh rounded as well nice so this one is done if you want me to do this one as well like when this is clicked you want to you know change this as well that is fine also basically you need to uh include one on click over it and here what we'll do is we'll basically set the active nav index to the current index that's it it will very simple right see it's working so that was very simple like I just left it to you because I wanted to you know you to try it but yeah it's fine because it took just one second so I explained it to you uh you can also mention in the comment if you have any doubts still so basically what we are doing is we are basically setting the active nav and here we have written a small logic that if both of the index are same we want this color to be there right it's pretty simple now we will make this uh like make main component uh but one thing is left I think we have this Arrow over here right in the design yeah and we also need to include framework motion here and we will see how we can glue the frame of motion right so basically when this button is clicked we want this navigation to shrink and vice versa right and we'll be having some small animation over there and for that we will be using Primo motion so yeah let me create that icon okay I'll write div and I want it to be a little small circle we can write W5 H5 and PG color I think I have copied it already yeah and I want it to be rounded full let me just check it whether it is coming yeah it's coming and I want it to be absolute right negative top 12. let me see yeah it basically it's basically become absolute to the parent div but we want it to be absolute to this navigation div so what you can do is in your navigation div you can write relative yeah so we want it to be little over here so you can decrease this maybe three would work fine or two yeah still it's not that accurate let me check whether we can given point I'm not sure yeah we cannot maybe it will be in pixels right okay 4.5 still 7.5 9.5 okay this one is perfect yeah this one is perfect now we want to include one icon inside it so I have that icon already inside the icons directory so I can import it I'll write image source and that icon name that icon name will be right arrow and I want it to be with maybe two let me import it over here you can write import right arrow from SX icons and name of the icon right arrow.spg let me save it yeah as you can see icon is coming but it's coming little to the left so what we will do is we will make this Flex items Center justify Center yeah icon is coming nice let's decrease this width Maybe yeah or maybe two pixels will be fine no 6 pixels I mean you can experiment it uh according to you whichever looks good so yeah this is looking nice but it's not Center to this so maybe we can increase top yeah it's looking nice now what we want is like when this button is clicked we want this to shrink I have some little animation and vice versa right so for the free uh for the motion we will be using frame of motion let's go to its website and like it has a lot of uh you know examples over here in this you can see it right and we'll be using one similar example which we have in the example section I'll be showing you in a bit so let me just first install it so for installing what you can do is you can you know copy this command uh you can paste it it'll basically install the frame motion Library which is required for a react project now let's include this here you can write import sorry motion from frame emotion right you can save it and with this div we will write motion dot div and in the last as well so basically uh with this prefix your div will be able to use the motion libraries you can say commands or features right so in inside motion.dev we can access one property which name is animate I think I imported wrong let me check in the documentation okay yeah I have to include this curly braces which I forgot so yeah because it's not exporting it by default so that's why you have to write curly braces so yeah now you can use the properties which motion exports right so first property we want to use animate and inside animate what I will be doing is I'll be writing one condition like when this navigation bar is expanded I want to use uh expanded variant otherwise I want to use the non-expected variant right uh okay question mark will be here right yeah so but we haven't initialized these variants right so what you can do is you can go over here you can initialize these variants inside variance variable so the first property is expanded so basically when the navigation is expanded what I want is I want width of this to be maybe 20 percent right and if it is non-expanded I want my navigation bar to have width as little as five percent maybe let's experiment these values I'm not sure what will be the values exactly how it will look so let's experiment it okay so we have a similar example like this in the example as well if you want to check it out you can check it out you can go to example section and you can scroll down and we have this variance example in this example what they are doing is they are animating this navigation and when it is opened they're using this open variant otherwise they're using close variant and as you can see when it is open basically opacity will become one and X Position will be zero and when the navigation will be closed like it will be vice versa opacity will be zero and X position whatever you want to keep it and how they are changing this uh variance basically when the toggle is clicked they're basically uh you know toggling this variable so that's pretty simple so we will be using similar example like this um so yeah we created the variance now how we will be using these variants uh yeah so you have to mention variance and inside this you will write variance object right now but we don't have this is expanded property for that we will be creating is expanded state foreign like initially our navigation will be expanded by default let me see in the website how it's looking so yeah when you will click on this you will see nothing is happening uh okay yeah because you didn't write on click right so how it will happen so you can write on click and when it is clicked what I want to do is I'll basically set is expanded to the opposite like whatever value it has initially it will be set to opposite like if it is initially false it will set true then vice versa let me click on it yeah as you can see navigation bar is becoming like it's getting shrinked right but still some issues is there with the icons because of padding we have to fix it so let's fix it one by one so the first thing we need to do is when it is shrinked we want this name to be invisible so let's do that first so you can write class name and you can write one condition over here and condition will be if it is expanded we want it to be having block class as I want it to be hidden it's as simple as that so when you click on it as you can see name is invisible but yeah our icon is also getting invisible because of the padding issue we need to fix it I think so let me check it yeah for that what you can do is I think we need to also write condition on this let me just decrease the padding yeah as you can see now it's working nice right logo is not getting disappeared so for padding also we might have to include the condition then it will work fine so what you can do is you can write if it is expanded I want it to be the same sorry PX 10 I think right and otherwise I want very less padding maybe px2 let's see yeah px2 or maybe PX4 would also work fine I think yeah so the next thing which we will do is the icon names which is here so you can write the same thing I think it'll work fine uh where it is um [Music] yeah this one you can write the same classes uh uh where where here I think it will work fine yeah save it and it'll work fine so our navigation bar is working fine and we wanted this exactly right so when it is clicked we want the name and links to both come and when it is again clicked so this should shrink and only the icon should be visible so it's working nice we wanted this right now the next step is we want to include the components which is in the right hand side so let's create that you know whatever say so let me save everything let me uh close all the open files here so basically what I'll do is I'll create one more component over here and you can give it name dashboard right you can press rfce and you can save it and inside app.j6 you can include your dashboard component it will be automatically imported because I already created this file if it's not you can press control space and it'll give you some suggestions to import it or you can include it manually both options are correct right let me save it and you will be able to see the dashboard okay what's the mistake it didn't come right great let me give some classes as well you can give it Flex crew this will be a bit full okay it's still not coming right let me inspect it where it went I'm not sure okay we have this dashboard but it's not visible where it went strange okay as you can see it's it went to like little end so basically it's a small issue what you can do is you can write Flex that's it yeah it was pretty simple you can close the inspect so yeah this one is fine so what I'll do is uh here I'll use H2 dashboard and I want it to be Flex Flex column and padding to be exactly same which it was maybe more padding as well if you want and yeah it's quite nice it's just that arrow is not vertically centrally aligned let me see in the navigation bar how much is the padding it's where is the padding yeah P by 12 I included right right okay um yeah for this maybe we can do like 14 pixels let me check how it's coming uh I mean it's not a good practice to be including the pixels because it always changes right let me see 15 would be nice or 16 would be nice 18. yeah I mean it's all experimenting experimenting it's not getting refreshed I think top 20. I don't know maybe it's some issue related to okay sorry I was writing brackets that's why it was not coming that was my mistake yeah it is fine for now so let's create dashboard components so what you can do is I can go and you can give class name Flex space I want at least maybe eight I want two div inside it so the first will be having div two by five and height would be maybe 100 pixels or 150 pixels inside it I'll just simply write my name your third Verma and you can write um your balance is peace twenty thousand you can save it yeah and we want it to be having some border if we want it to be rounded and wanted to be Flex X column yeah and we want some padding an empty five this one is looking nice and I want X to be a little in the range of 600 that'll look nice and for this I want it last name text Gray 400 Maybe or 500 yeah this one is looking nice you can uh simply copy this again and this one will be your expenses around forty thousand yeah border can be little lighter I guess or I think you don't even need to write it that will have by default like the Border you can remove this yeah it's looking much nicer now we need to include the chart and these two components again let me just uh copy this again and inside second div I only want my expenses chart you can include this Insider div or maybe H2 mm-hmm okay um yeah it will be uh if you're sorry your activity um here you can have like uh you sent rupees ten thousand to your mother it can be anything for now I am writing dummy data but it's just for showing you reference like how you can you know create all these components uh second will be uh let me check in the figma it is your activity and pending bills so let me just simply copy it and write it over here right let me see it how it's looking it's not looking great we need to give some spacing and okay wait wait wait wait wait yeah here space y another fine idea okay it's too much Space by six okay we don't need to give the uh this one I think why I have given it this one is not required I think I don't know why I have given it it's creating a mess okay now it's looking good now we need to uh just include this expensive chart let me improve this one as well so for this I want it to be little uh have a top margin um same here sorry class name mt4 yeah now it's looking good now we just need to include this expenses chart so for chart we will be using uh charges too you can go to its documentation it has some examples yeah I'll be including this link in the description so they have a lot of examples right and we want to use this example uh this one that's coming yeah we will be using exactly this and they will be modifying it and I'll be showing you how we can exactly modify it and make something similar to this right so let's see so the first thing which you need to do is install the library so for installing it you need to you know install both of these let me just copy this one so you can paste it and it'll install uh both charges and react charges now let me go to my dashboard component and use it uh I think you can directly copy these examples and just slight modifications will be required and I'll be showing you what are those uh just simply copy it or maybe you can do one thing let's create a different component so that you don't uh like so that we don't write message code over here so I can create one more component you can give it name chart Dot jsx and rfce just copy this code and paste it and also it's not exported correctly so you can write export default function and we need to change the data sets over here we only want one data set not two data sets right so you can delete this and I'll write the data in in some time and this labels are correct it's just we want in this format we'll write Jan Fab March June in July August September October November and the summer right and we're not using typescript so I can remove it also okay we'll I'll do that later on okay so these are some small small modifications which I did so the first modification was this I added more labels and the second modification was here we don't need these two data sets so basically what are data sets let me show you in these in this example you can see we have two data sets right we have two lines which we are coming which are coming and we want only one line so that means we only want one data set so that's that was the main reason why we wanted this cool let me just enter some dummy data over here maybe 10 000 uh twenty thousand fifteen thousand twelve thousand fourteen thousand eight thousand save it yeah let's import this component in our dashboard so we want our chart to come over here it's going to write a chart let me just sorry let me Auto Import it I think if it's coming yeah if it will not come because I've given the name which is already there in the charges Library you must give a different name I guess but for now it's fine you can write import chart from chart let me see whether it is coming or not as you can see our graph is coming great now we need to do one thing because chart is coming little big let's uh let me just decrease this width first there it is yeah I want it to be in less width maybe four by five okay let me see whether it is working it's still not working uh it might be here I guess yeah so yeah this is fine and we want everything to be vertical okay now it's looking good now the next thing which I need to do is as you can see it's not coming like it's coming straight line right and in our graph you can see we have uh this line in a curve form so we only have to add one property uh okay I'll show you what is that one property so in charge yes you see we have we are providing some options right so in option we have this one property which name is tension you can give it 0.3 or 4 let's test it so you'll see it is becoming somewhat curvy right so yeah you can experiment it according to you 0.3 is fine I think yeah so let's add more data sets then it'll look much more nicer so let me include maybe twenty thousand this one is very high value 12 000 8 000 3000 I think this one is fine yeah it's looking nice maybe we can increase decrease it to make it good looking this can be 15 this can be 12 this can be 14 this can be 6 17. um yeah this one is looking nice I think okay let me take this up so yeah uh let's change this title as well we won't uh we don't want this I think uh you can change that property where it is in the options where it is option yeah we don't want title or if you want to show the title you can change it uh change this you can write your experiences yeah it's coming and also we uh you want to show a meaningful information over here so you can write uh where it is yeah you can write basically amount of money you spent right and if you scroll over here you can see the amount of money you spent in June was around fifteen thousand so in this way you can create a beautiful looking chart I believe so I hope you learned a lot in this video so basically two or three things remain over here in this video the first thing was like how you can create this uh you know Dash this navigation bar which I created right and also when you will click over here like how navigation like how you can make it sharing or expanded and also how you can you know make these uh navigation links invisible and only show the icons and also you can see we have a beautiful looking animation so that's what framer motion does right it automatically creates animation for you you don't have to write a lot of CSS classes for the animation so that's what exactly cool about frame emotion and second we learned how to include charts so we have a very beautiful Library react chart GS2 which you can use and modify basically internally it uses charges and also uh like you must be thinking like why did I mention this tension right so I'll leave it to you and you can go through charges documentation and you'll find a lot of options which you can provide to this object because internally it's using charges API right so you can see all these properties there like what it does so yeah that was all for this video and I hope you learned something in this video I'll be including uh the necessary links in the description like the figma template link and all the links which I used in the description so that you can look at and if anything is missing go through the video again maybe and yeah I'll store this in my GitHub I think it's already stored I'll go to my GitHub because I created this project before making this video so this project is already here in the dashboard we do Repository uh yeah you can start this repo you can you know Fork this repo and yeah they can share it as much as you want I hope this video was helpful and yeah like the video and subscribe the channel guys thanks

Channel: Yatharth Verma

Views: 13,913

Keywords: frontend project, dashboard project, money tracker project, framer motion, tailwind css, react, vite, chartjs, frontend project from scratch, portfolio project, build a dashboard, react dashboard

Id: zPuSbYRmGyo

Length: 44min 56sec (2696 seconds)

Published: Sun Aug 27 2023