Build & Deploy Full Stack Next.js Expense Tracker app using React, Tailwind Css, Drizzle ORM, Clerk

hey there and welcome back again today in this video we are going to build expense tracker full stack application with the help of nextjs react telin CSS and most important thing the drizzle orm let's walk through the application first if you see we have this beautiful simple landing page for our application where you have you can able to log in to your application so we are are going to provide a social authentication in order to login inside our application once you log to our application you will land on this beautiful dashboard here you will see all the analytics about your expenses you can see the total budget how much uh money you spent and number of budget you created here you will see this beautiful um stack bar chart okay I'm going to tell you how easily we can add this uh bar chart then below that you will see the latest expenses and on the right hand side you will see the all the budgets now if I go to this budget section here you will find all the options or all the budgets uh which you already created now you have option to create a new budget now over here you will find that we also integrated the Emoji picker so that you can add a unique Emoji for your unique budget that sounds great right once you create the budget the budget will display over here without refreshing the screen so with the help of drizzel orm I'm going to help you to set up this uh complete back end for our application and for database we are going to use a postrace SQL and whatever content we are going to use in this uh particular course it's completely free now if you want to add anything inside your budget you can go to this particular budget click on it and boom you will find the budget detail here you have option to add an expense also you have option to edit this particular expense okay you can change the budget size if you want and immediately you will see the budget will get update here we will show the beautiful to message and there are lot of things going to happen here now if you add want to add any new budget you can just add for example for shopping I say I buy a Nike shoes and which cost around $120 you can add this expense and boom the expense get added and you will see this beautiful toast message as well I'm going to teach you how easily we will add all of this uh component together to build this beautiful application now if you want to delete any of this latest expense just click on it and that expense will get delete you know in order to delete the budget you have option to delete budget and obviously with uh before deleting any of the budget it will ask you for confirmation so this kind of alert dialogue box I'm going to tell you how to add it inside our application but not only this this complete application is a responsive friendly so depends on your screen size this application will change the layout see how quickly this application changed your layout of your application and nothing getting broke also inside the expenses you will see all the expenses which you added when uh you want to add something inside your expense tracker and now if you see as soon as we added anything you will see this progress bar along with how much money you spent and how much is remaining everything is calculated behind the scene and that's guys a very cool feature that we are provided now obviously whatever the budget you are budget you created whatever the expenses you added automatically it will deflect it on the dashboard here you will see on the hover of the bar chart you will see the details of how much money you spent what are the total amount for that given budget here you can modify the color scheme everything I'm going to tell you in this particular course and as I told you this complete course is a beginner friendly if you are new to the react application nextjs application don't worry because in this particular video I'm going to teach you everything from the basic from starting from the creating the application to the app deploy to the Deploy on the server if you see we deploy our application for free so that you can share this application with your friends and family so guys if you did not subscribe to my channel yet please do subscribe like the video and press notification Bell icon so you will not miss any video from me and also if you uh did not join my membership please join so that you will get a exclusive access to my all the courses and the source code on tub guru.com so guys without doing any further delay let's begin to develop the expence tracker budget planner application in order to create and react application we are going to use neck JS neck JS is one of the best react framework for the web application if you go to this nj.org this is the official website where you can see the all the documents the feature that nextjs provide the most important thing about using the nextjs is the routing nextjs provide a folder based routing and which is quite efficient when you are implementing a big web application so uh in order to create an application uh this is the command line so just copy this command or you can access it by going to the get started and go to the installation here you will find this same command now open the folder where you want to create a project and open Terminal at that folder here you just need to type npx create next app at latest at latest means it will install the latest version of The nextjs Click enter and say Yes here and then you need to give the project name so in this case I'm going to give expense tracker click enter the next question they ask would you like to use typescript say no the es link say no then telin CSS say yes so once you um create this next days application the telin CSS already there so by creating this next application it will also install the taing Cs for us the source directory say no and the app router obviously we want say yes and then for allies say no and then if you see it installing the some dependency like react react Dom next and some de dependency like post CSS and tellin CSS now if you see our project is get created now go to the vs code and inside the vs code open the folder where you just created that particular project so go to the documents in this case uh I created inside the documents projects and here you will see expens tracker click open and say yes I trust the author and you will see on the left hand side some of the files get added now let's talk about each of these file very first we have the app folder and that's where we are going to add all of our files the first thing we have the global. CSS which is the uh CSS file so whatever the CSS which you want to appli globally or throughout the application you can mention it here then inside the layout. JS which is the uh layout for your application and if you see here we have the metadata which is quite helpful for the SEO purpose then this is the font uh which is applied for this application then we have the HTML and body tag and inside the this body tag we have the children so whatever the pages which going to render it will going to render inside this children okay so inside this body tag through the children all the pages all the component going to render through it then page.js which is the default page for the application now once you run this application you will see this page.js getting rendered next we have the node modules so whatever the dependency we install that packages will be inside this node modules folder now obvious obviously we are not going to touch this node module at any time next we have the public folder in which we are going to store all our images the fonts or whatever the files which we want to store locally then this G ignore file when we want to push any of our code right you can mention what are the folder which you want to uh ignore it so you don't want to push it to the GitHub repo then we have the next. config MGS file this file help help us to add a configuration which is related to the nextjs application now once we started start developing this particular application you will get to know how and where we are going to use this next. config.js file then we have package lock. Json and package.json file this package.json file help us to provide the name of the application the version along with the script to run this application and here you will see the dependency which is installed for our application so these are the dependency which is installed by default and the D dependency and P package. loock dojon file is helpful to maintain the version of the installed dependencies then we have post css. config MJS file and T.C config.js file which is helpful for twin related configuration now here you will see inside the content uh section the whatever folder name or folder path you gave only in that folder only you will see that telin CSS is applicable if you want to add a telin CSS in specific folder you have to mention that one over here now let's go to the ter uh terminal and here click new terminal here you will see the terminal get open now here you can run npm run da and then it will open the port 3,000 on Local Host now open this particular URL on your browser and boom you will see this is the default page getting rendered on this local 3000 Port now I will put this side by side and let me walk through this particular page so as I mentioned inside the app folder the page.js which is the default page going to render inside our application once you run the application very first time and here you will see whatever the content you write right it is getting rendered over here for example let me clean this out and here if I say subscribe to tube guruji if I save it you will see the change over here see okay so whatever I type it will immediately reflect on the screen okay now obviously if you don't want anything just clean everything and let's put empty uh do and inside that I'm going to add h2 tag and here I'm going to say subscribe now and then save it now you'll see the all the code is getting deleted and only text the Subscribe now is showing on the screen now if you see on the background that we have some gradient lines okay that's because inside the globals docss inside the root uh class we have this background added by default let's remove it and save it and boom you'll see the plain background with the text showing on the screen so that's how you can create application and run the application next we going to install the Shaden UI Library so just search Shaden on Google and here you will find this website called ui. shen.com which is the TN CSS popular library and it has a lot of predefined component which will help us to develop the application much faster now in order to install it go to this particular website and let's get started here on the left hand side you will see the section called installation now select the framework you will see the uh the sh SC is compatible with a lot of different framework as we are using nextjs so select the nextjs and here you will see some of the steps now obviously we already created the project so we'll skip this tap and this is the uh command in order to install your chat here so copy this command go to your project and inside the terminal let's uh stop the server and paste this command click enter and then it will ask you that would you like to use default theme or New York themes click select the default here the base color I will select the neutral and the Cs it will ask you do you want to use CSS variable for a colors say yes and then it will install the shat CN now as soon as you install the sh CN Library you will observe inside the root directory the two folder get added one is a components okay right now it's empty but as soon as you install any of the component you will see that component get added will get add inside this component folder then we have the library folder called lib and obviously that also get created by shadan and inside that we have the .js file obviously we are not going to touch to this particular folder as well and the last we have the component. Json file also get created here you will see the configuration related to the Shad CN and the last inside the Tailwind doc config.js file you will see a bunch of code get added so it has a colors defined along with the primary color secondary color and many of the things obviously you can update on your own whatever the primary color and what the type of parameter you want it's you it's your choice you can update it later on now open open a terminal again I will clean this and then run npm run Dev so once you run our application again you will see nothing get changed but now in order to install any of the components from the session you'll see in the inside the component section you can select the component which you want to install let's say we want to install the button so this is how the button will look like here you have a command to install the button component copy this command go to your project add a new terminal from here and then paste this command now as soon as you install uh this particular component right inside let me uh close this terminal and inside the component folder the new new UI folder get created and inside that now we have the button.js jsx file now this particular component get added by sh CN okay so obviously you you will see there are different type of variant the size and so on it's up to you that you can also modify or customize this shadan component as well now in order to use in your application right you can just use the button and you will see the button components now getting imported from at theate component /i/ button that is nothing but from this particular folder now click enter and inside that for example I will see sub subscribe button and let's save it now here on this in our application you'll see the Subscribe button and if You observe you don't need to add anything padding or background anything right you will see that button on the screen also inside this button.js we have some different type of variant right you can also provide some kind of variant over here for example if I say variant is equal to outline and save it you will see that button get changed to outline only and now the other example you can find it to this documentation that uh different different type of button along with the icon and so on okay so that's how you can install the San inside your project now one more important thing that we going to update in our application is a font now in order to uh add a custom font or your own choices from you can add it from the Google so let's go to this Google font and select the font which you want okay and here you will find a bunch of different font I mostly use this outfit font so in order to use this outfit font right let's go to this layout. JS in from the app folder and over here you will see the inter font is by default uh is added inside our application and this font font is getting added from the Google Now in order to add your own font I can add it like this for example if I want to use outfit you can just type outfit and it will give suggestion like outfit okay now here you can Define the outfit font like this I will change the uh name of the constant it's up to you and I will replace it over here and then save it and you will see the font now get changed immediately and that that this particular font is now applic throughout the application that's so cool right now next thing and uh to install the two um important extension inside the vs code so here we have option called extension inside this one you have to install this two uh extension called es es es7 plus react redu snippet okay this will help us to add a template okay within a couple of uh words that I'm going to tell you uh later in this course how to use it and other is to add the telin CSS Intel sense this will give you when you write a CL H uh any telin CSS classes it will give you the suggestion so that this is also very helpful so guys uh that's all for this particular section if you have any question while set uping up the project let me know in the comment section in this particular chapter we are going to build a landing page for our application and this landing page will keep it simple so for this one if you see we have the header on that one we going to show the logo on the left hand side and the button on the right hand side now once user log to our application obviously here we going to change this uh button with a user profile image then uh inside the hero section we going to show a text the Bold text and some tagline for a button in order to log to our application and the below we going to show a dashboard so first thing first let's uh create a header first and then we'll go to uh add a code for the hero section as well so let's go to our application and over here inside the page.js which is our which will be our landing page okay before that inside the app folder we going to create a new folder and we can call it as a underscore components now if you give the folder name something like dashboard or you can say component right then this particular folder will be considered as a drought let me show you how so right now if I create a new folder called dashboard inside this dashboard I'm going to create a page. jsx file and here with the help of the extension which we installed you just need to type RFC which stand for react functional export component click enter and boom you will see the template get added here you can rename the template so here I will say dashboard just rename or you can add whatever text you want and dashboard let's save this one now if I go to our application and here if I search for the dashboard you will see the dashboard text is showing on the screen it means it this route is ready if you try to search for example slab as this particular route is not available and it will show the 404 error obviously if you want to create a route name about you need to create a new folder inside the app folder called about okay but in order to avoid the or you want to create a folder but you don't want to add a route right you want to avoid the route so you can give the folder name start with the underscore components or anything not components but you can say anything so right now I want to add this component folder I want to rename as a component folder because whatever component we want to add on the home screen I will keep inside this particular folder now inside this part again uh inside this component folder I'm going to create a new file called header. jsx now add a default template and let's save this one now obviously this heer will be constant throughout the application but as this is uh this particular heer is for the home screen or landing page so we'll add inside the page. jss and let me clean this code and here we're going to add the headers not heer but our name is header and if you see this comp uh this particular header component get adding get added from this particular path okay make sure that you imported this header component and then save it here you will if I go to this local 3,000 you will see the text call header now uh this is a website called logo IP sum where you can get the placeholder for the logo so in this case you can uh search a bunch of different logo I will select this one click on it so it will copy the SVG file now let's go to the public folder as I say that this public folder help uh you you can add all your assets now click add new file and I will create as a logo do SVG and then paste the code which you copied this is just a placeholder you can add your own logo as well now let's go to the header and inside the header let's display the logo first so for that one I'm going to use image so so import this image tag okay from the next SL image and here you need to give the source now you can directly access the uh the images or assets from the public folder without giving the complete path here you can just write do slash logo. SVG here I'm going to give alt tag as a logo the width you can give for example 160 the height can say 100 let's save this one and let's see and if I go to our application you will see the logo is showing on the screen so for this de I'm going to give class name and add some pack padding so here we'll say padding of f now this is a telin CSS class and if you h on it you will see the corresponding CSS property so P5 means the padding 20 pixel now if I go here you will see some padding get added to this header next we want to add a button so we add the button from the Shad CN UI component make sure to import this and then here we will say get started okay and save it and you'll see the button also get added now we want this button on the right hand side so let's first make the button on in one line so here for this de I'm going to make it a flex okay so it will be in one line see and now we want on the right hand side so just mark it as a justify between and and this is how it will look see make sure to make item to be in the center so both the things will will be aligned vertically Center and that's all the header is ready now you can even add some border or some Shadow effect and this is how it will look once you add the shadow let's add a shadow little bit lighter so we'll say shadow small and this is how it will look okay now if I go to the inspect panel and this will be a responsive see so on mobile this is how it will look like now you can even change this mobile view to some other so for example you can select the iPhone 14 pro and you can change the layout as well so I hope you understand how we beautifully and easily added this header section now let's implement the hero section so let's create a new component under the under components for folder and we can call it as a hero. jsx add the default template let's save this one and make sure to import that one inside the page. jss which is our default page so obviously we going to implement after the header and here I'm going to import the hero and then save it now you'll see on the screen hero text is showing now let's go here inside the hero. jsx and and let's implement it now in order to add the landing page right I'm going to use this hyper UI da okay it's a predefined uh pre-build uh component you will find on this one and it's based on TN CSS so here you will find a bunch of different uh type of components so for now for this particular purpose I'm going to use uh one component let me search it so this Banner component I'm going to use and obviously I want to show my content like this on the landing page you will see the different different example and there are a bunch of different option as well so here click on this View and here you can select the jsx and then copy also just for the information you will see the how uh this particular design will look like on the small screen mobile view medium large and full okay now once you copy this code just paste it here and then then save it now if I go to this our application you will see the landing page with this particular text right now obviously we can modify this according to our need so here uh I will remove this line of code okay also uh instead of showing this text in the red color I want to change it to our own primary color so here you can add your own primary color as well so if I type the primary right we have the primary color already defined inside inside the twin. config.js file okay now here you can change the default one with your existing one so here I'm going to change this default primary color to my own so in this case I will select this color and I will add the he exxa code for the given color and then save it now you can type this text. primary okay and save it here you will see the change okay same thing I'm going to do for these particular uh buttons as well so whenever I see red I will change this to primary move this down and on Hover again I will do something like blue let's add a blue and little darker so and save it okay now you will see the change perfect uh I will remove this learn more button from here and save everything now let's update this text okay so if you see in our mockup so this kind of text I will copy it and paste it here same thing uh for the next Tex so this particular uh code change you can update it okay according to your needs and save it now if I go back to our application you will see the beautiful landing page now below that I want to add the dashboard image okay so for now I just downloaded from the Google or Internet uh this particular dashboard. PNG file okay obviously once we have the our dashboard application ready we will replace it with the our own dashboard uh image okay but for now below this particular de I will add that one so here let's add image tag the source let's import image tag from copy this from here and then we'll say Source you can access it using dot sorry slash dashboard. PNG okay let's go all tag as a dashboard placeholder you can say or width I will give, for now and hi let's get 700 let's save this one and let's see how it looks so right now we are getting error that dashboard. PNG if using image start with the slash okay so let's remove this dot let's save it and now you'll see this dashboard okay let's bring it in the inside Center so first thing uh let's add a class name and here I'm going to give margin top to five we'll make rounded Excel and we'll add a border of two okay now for this particular uh section I will make it Flex item to be in the center and make Flex column now save it and you'll see it is inside the center now okay and this how you can just simply add your own landing page obviously I don't want to spend much more time on this particular landing page though that's the reason uh I will keep it uh simple and now uh also you can just make sure that it is uh responsive so on the smaller screen this is how it will look like okay if you think you want to give add more styling you can add it so for example let's add margin top minus 5 so it will come up let's say 9 perfect and I think that's good in order to add uh access the user dashboard obviously user need to login to our application and for in order to add authentication inside our application we are going to use a clerk authentication Service with the help of clerk we going to add our authentication and then once user log to our application user can access the dashboard so we are going to use a clerk and clerk is one of the best H authentication service provider in the market right now clug is so popular that it has provide a lot of different feature and fully control on what you want to display and what type of authentication you want to add so first thing go uh to the link which is in the description and create a new account the most important part about the clug is free to use okay so up to 10,000 user per month for active user per month you have get for free if you don't have an account create a new account and then let's go to the dashboard here you have option to create a new application so I already have a bunch of application because in many of my uh tutorial or in project I use a clerk because it's efficient and the you don't need to create the different uh customized login screen or sign up screen for you clerk is already taking care of that one now once you want to create a new application give the application name here I'm going to give for example let's say expense manager okay or we can say expense tracker then here you have you will see the bunch of option like uh you can enable email login or Google login you can also enable the Facebook login and you will see a bunch of other option as well on the right hand side you will see how it will look on the screen okay you will see this in a moment now once you create an application you will see it will jump to the dashboard okay so here obviously you can change to any other application if you want now obviously uh it's again it's taking some time to set up okay but in meantime what we are going to do we are going to install the clerk okay so copy this command and go to your project so open a terminal click new terminal over here and install this clerk inside your nextjs the next step is to add this public sorry public key and the secret key inside your env. loal file okay so we don't have that particular file so go to the root directory create new file and add. env. loal here paste this two key and then save it next this is the simple way that you can add the uh Club okay but we will see in that moment so click on this continue to the nextjs guide and it will Reed you to the uh next year CL documentation okay but before that there are some of the step that we need to take care of so first thing uh we need to grab our application inside this clug provider so copy this clug provider make sure that you install this cler NE JS hdk and then let's go to the layout file so layout. Js file here I will drag our application inside the clu provider like this make sure to import this clu provider as well and then save it next you need to add this mid. TS file so copy this and then inside the root directory we need to create that particular file called middleware dots let's say uh create that file and copy this content so let's save it here like this and save it okay now if I go to our application okay let's refresh this local 3,000 you will see it get redirected to the signin page okay that's wonderful but if you see the URL which is we right it's not belong to our Local Host 3,000 URL or with it not belong to our domain so because when you add your clerk provid inside our application the clerk already uh redirect you to to their own signin or sign up page right but in this case we want our own sign up and signin page so here you can go to this continue to the next JS doc where you can add your own sign up and signin page okay so we going to follow this particular documentation now so first thing you need to create this particular path uh so inside the app folder we need to add a sign up folder then this particular folder and then page. TSX file so so simplest way just copy this particular part okay like this then go to your application and inside the app folder now for the authentication I'm going to create a new folder and I will give a name start with this bracket okay again when I give the name uh starting with the circular bracket then it will not consider as a route okay then inside that click on this plus uh new file icon and paste that complete path only thing that we need to change is jsx because we are not using typescript so convert it into a JavaScript XML click enter and boom if you see inside the O It's created a sign up page inside that we it's created a signup page and again the page. jsx file perfect next copy this content and paste it here let's save this one same thing we need to do for a sign in so copy this path make sure you are inside the O folder click this plus file icon and make it jsx save it and obviously copy this content and paste it here let's save this one as well now you need to add this environment variable inside your env. loal file so copy this one go to your env. loal file ands let me me bring this down and paste it here and next thing we can visit to the local 3000 sign in okay so let me go to the local 3000 and then now if you see it's showing the signin page but now it's showing on our own domain okay now this is our own signin and sign up page now before log to this page right let's uh redesign this page because like right now it look little weird so for that one I'm going to use hyper UI da here just search for the O forms something like this you will see this particular design right so we'll copy this one so go to the view copy jsx copy this one and then I'm going to go sorry I'm let's go to this signin page. jsx here wrap this and paste your code okay now obviously we need to add this sign in component before that let me remove this comment and then if you scroll down the where we have the form right okay I will remove this one and I will paste this signin page okay let's save it and let's see how it looks so if you see how beautifully our signin page will look like now obviously you can change this image you can change uh the content it's up to you okay now another important thing I want to tell you right now if you see the uh if we want to access the landing page right still it redirect me to the signin page and we don't want that particular Behavior because obviously user want to access the signin sorry the um landing page without any uh Au authentication so in order to add that particular or to avoid authentication for the landing page we have to add the public route inside the middleware okay so go to this middle.com sorry middleware dots file inside here you need to add the public routes inside the O middleware okay here you can add it like this for example by default the on the home screen right or default page you don't want authentication just mention here like this inside the public routes let's save it and now let's if I go back to our application local 3,000 boom without Au authentication now you can able to access it right but if you want to go to the dashboard page which we already have right then it will ask you to the signin page and that is what we wanted okay now let's log in with the Google select the account and then you will see it will redirect to this dashboard page okay it means dashboard page is a protected route and obviously in order to access the dashboard page user need to sign in or to uh sign up to our account okay or to our application so that's how uh you can add authentication now let me go back to our cler dashboard okay and inside the home if you see now one user is sign up okay so that's the reason it's showing under here obviously you can see all the users inside this user uh section then they have a new um feature that they added called organization okay and if you want to know more about the organization feature then please let me know in the comment section then inside the user and authentication here you will see that uh we have the email and phone username sign up sign in method where you can have a different different option to enable it okay then for social connection you will see you can enable uh all other social authentication is up to you you can disable if you don't want it okay then we have web3 Enterprise connection multiactor authentication as well you can even restrict depends on the domain name okay we have the block list as well and there are lot of different feature you will see also we have one option called customization here you can add the logo the icon okay for your branding so when you see the login page you will see your logo over there you you can change this outar you'll see the uh email invitation how you want to send you can change this design design and all of these things okay there are lot of different feature you will find it now uh under the developer section you will see the API key the path you can even connect your own domain as well and everything is free okay so uh give a try guys uh the link is in the description and you will find the cler very helpful for your application and the most important thing is easy to use now now once you add the uh log to our application right cler is also provide a very important and Powerful component called user button so let's go to the dashboard page where right now we are showing the dashboard right and over here you can add the user button like this for example if I add user button so it's not getting imported so we need to import it user let me copy this one I just paste it here like this and then save it and now you will see this particular user profile who log to our account along with this beautiful option to manage account and sign out okay now if I go to the Local Host 3,000 here we want to show that particular button once user sign sign in with our account right so let's go to the header and here we have this button call get started right so obviously we need to show user uh profile icon if user is login and if not then we can show the get started button so in order to know whether user is sign in or not we have uh one who call use user so here we'll Define user first is equal to use user okay now this particular hook we need to import from the clerk SL nextjs and here we have option called user then is sign in as well okay so inside the user you will get the user information and is sign in it will return true or false depend on the user is sign in or not so now here I will add is sign in if user is sign in then I'm going to show that user button let me add the button over here and if if not then I'm going to show the get started button like this and save it now if I go back to our application so right now as we are using use user hook we have to make this particular component as a client use client okay let's save this one and if you see now you have this user profile icon okay another thing that when user click on this button called get started right we need to redirect it to a signin page so simply I will wrap this button inside a link and if you see uh I don't know why but not getting suggestion let me import link from next SL link I think we need to remove this one perfect and over here we need to Define H reference and close the tag like this okay and inside the H reference you need to give the path so in this case we need to navigate to signin page so which is inside this signin right so it will navigate to the signin page so let me show it so for example let's sign out okay and here I will go to the local 3,000 if you see right now the get started button is showing if like click on this one see it navigated to sign in page same thing we will going to implement this particular link for our inside our hero section when we have the get started button right so let me oh we already have H reference let's add a sign in like this and let's see boom see okay now here we'll say continue with Google click on it and then it will you will see the user is loging and showing the profile image perfect now here obviously you can even access the dashboard page as well so that's how you can add authentication inside your application with the help of clerk now let's implement the dashboard if you see on the screen we have the side navigation bar on the dashboard where this side navigation will be constant throughout this dashboard UI on that sideboard uh we have this logo then some option like dashboard budget expense uh upgrade and profile and also we have the header at the top this header and the uh side navigation will be constant throughout the application only is going to change is this particular content so whatever the page we got R it will only affect on this particular space and this side navigation and the header will be constant okay so let's go back to our application let's close all of these tab first and inside this app folder right we already have the dashboard and now if I go to our application and if I enter SL dashboard you will see it jump to the dashboard correct but here uh for for the U file management purpose right uh for the or organization purpose I'm going to add a new file over here and we can call it as a routes okay so all the routes regarding dashboard will keep inside this folder so now I will put this dashboard inside this routes let's say move and now if you see inside route we have the dashboard okay now inside dashboard we already diding page.js but but I will also add layout. jsx file okay now add the default template and here we can say for example dashboard layout okay so this layout is nothing but dashboard layout and on where we can add side navigation and header which will be the will be the fix on the screen right here I'm going to render the children obviously here you have to replace with the children like this okay and then save it now if I go back to our dashboard if you see nothing get changed okay perfect now inside the dashboard again I'm going to create a new component called undor component folder inside this folder I will add Sid now. jsx file okay and this will be our side navigation let's save this one and now let's go to the layout. jsx file so first thing let's add one D and inside that I will add side now okay then I will add one more du and inside that I will put the children like this and save it right now if you see the side navig uh first is side navigation is showing and then this particular dashboard okay let me do one thing so inside the dashboard which is we are right now showing button I will add a text called dashboard okay okay and save it now if you see first the side navigation dashboard but we want the layout like this the side navigation bar and then dashboard so in order to do that let me go here we can make this class name okay uh for this side navigation as a fix and as soon as I make this as a fix you will see it's overlapping the dashboard and the side navigation bar right now here when the screen size is medium we can give width of 64 and when it is the width is smaller then I will hide this one and obviously when screen size is medium we'll make it block okay now you will see the change if I refresh it okay nothing get changed right now because we also make sure that we'll give margin to these children so cars name margin left to 64 only when the screen size is medium okay now another thing uh just for your information I will add the background red and R and for this one I will add background green okay and save it now let's go to the screen and if you see now we have the side and dashboard for side navigation we are assigning this much space which is with 64 and the remaining for the dashboard right now for this side ation will give the full screen height so go to the side now bar and let's add a class name we'll say height to screen and boom see now obviously when this I will if I put the screen smaller right like this see right the side navigation bar hiding and when the screen size is medium or larger then we are able to see side navigation bar that is expected next let's implement the side now so first thing I want to show the image which is the logo obviously so let's add image I don't know why it's not getting I'm not getting suggestion let's me put the image from the header sometimes the vs code uh act very awkward weird so here we'll add add a source so here I will say logo do s and here I'm going to use alt tag as a logo width I'm going to give 160 height let's give 100 and save it now if you see we have the logo let's put some padding so here I'm going to add a padding of 10 let's see how it looks uh let's add padding of five only okay and obviously I'm going to remove let me go to our layout this particular background okay and let's save this one and for this side navigation I'm going to add a border let's add Shadow small perfect see now we have the proper border to this one okay now after this one I want to show the all the menu options so for that one let's go here and let's add a menu list we say constant menu list and this menu list obviously we will iterate it okay so let's do that so we'll say ID one name we'll say first dashboard and the icon we say now this icon you can import it directly so when we install the S Shad right uh the one there is one Library icon Library which is called Lucid it also get install okay now if I go to this package.json file right you will see the Lucid react Library also install when we install the Shad CN okay so this library is very rich and it's you'll find up of uh icons over here okay and very easy to uh use it so for example for the dashboard you want to add any icon light you just need to type layout okay so again if you I don't know why we are I'm not getting suggestion but here if I type layout grid right you can import that icon so we'll say layout grid from and just need to type Lucid react Lucid react see see like this and this layout grid will add next we'll add id2 We'll add a name and we'll say budgets and for the budget I'm going to add icon we'll say piggy bank so this icon I will add it here so here I'm adding couple of more uh options okay along with the icon now let's iterate this all the icons so after this image I'm going to add one du and inside this du let's add h2 tag okay but before that let me iterate this menu list map here we say menu comma item or sorry index and then the arrow function now over here I will just use the S2 tag and inside this S2 tag I'm going to add the name name of the uh menu so menu. name okay let's save this one and let's see so and now if you see over here you have the options along with that one let me bring this down uh we need to add icon so for Icon if you see we have this icon over here for the icon field right so you can just access because this is a component you can access using menu dot icon and this will be the component Okay so so let's save this one and let's see and if you see we have all the icon now apply some styling so for this h2 tag I'm going to add a class name here we'll say Flex gap of two we'll make item to be in the center I will make the text of gray color so gray 500 if you see we have the all the option okay along with the how lighter or darker you want then I will make the font um medium so you can select the font medium type and let's save this one and if you see this is how get change obviously we going to add some uh padding so add a padding of five I will add cursor pointer okay and round it MD so if you see now we have this beautiful options for this particular de I'm going to add margin top to five and also now now in order to hover on the particular menu right I'm going to change the text to be primary and then again on how I will change the background to be blue 100 okay let me show you how it looks so if I how on this one you'll see the beautiful background get changed immediately as soon as I hover on any of these items okay and that's how our beautiful um uh menu or side navigation is ready okay and next I want to show the user profile icon over here so simply I'm going to add one D inside that I'm going to add user button like this and then sorry user button from the Expo make sure that we have this user button uh imported from the clerk not Expo sorry and then after that I will say profile okay if I go here you will see the profile is coming now obviously we want that in uh to the bottom so here I will add a class name we'll make it fix at the bottom and for bottom I will give bottom 10 so this is how it will look like also We'll add a padding of five make it flex and give gap of two see like this okay also I will make item to be in the center so it will be vertically Center perfect if you think you want to change the color similar like this you can add that one okay so I will keep as it is and let's save this one obviously if I click on this one you will see this beautiful menu option where you can manage the account um you can see all the history when you log to the account from which device you log in and everything you will find on this obviously this is provided by color only now we our side navigation bar is ready now let's implement the header for the application so let's create a new component under the component folder and then we can call it as a dashboard header. jsx because we already have one header right here I will add the default template let's save this one and and inside the layout. jsx file I will add that above the children so we'll just add dashboard header okay let's save save it and make sure that you are getting dashboard header now obviously I will remove this background green color that was for just for the understanding purpose now let's go to the dashboard header here I will add a class name first let's add a padding of five then I will add some Shadow effect to small we also add a border let's see how it looks something like this let's add a border to the bottom only so we'll say border bottom that's all see now on the right hand side you need to we want to show the user profile so let's add it here now inside this one uh let's add a two de okay so in this first du I we can add the search bar okay and other de we will add the user button like this okay now let make it flex and we make chy between if I go here you will see the search U the search bar obviously if you want you can keep it and on the right hand side you have the profile icon now uh we want this fix so let make it fix and let's see obviously uh we need to make the WID to be full let me check how it looks so so it went out of the screen let make it let remove this one and for now we'll just make it Flex if needed we can update it later on okay so that's how our header is ready obviously you can add the search bar if you want right now I don't want the search bar on the screen so I will keep as it is here right now if the dashboard uh user is on the dashboard then we have to make sure the dashboard is get selected when user is on the budget then we have to make sure the budget menu is active one so let's Implement that one so first thing uh for this menu list I'm going to add one more variable called path and here we'll say dashboard SL dashboard only same thing I'm going to do for all other over here and over here obviously is the path for this uh budget will be this budget um dashboard / budget uh for this one we'll say expenses and here we'll say upgrade okay let's save this one now in order to get to know which is the uh mean user is on which route or path so for that one uh next JS has one uh hook called constant here we will Define the search params is equal to use not you uh search param but which I think it's called let's say parents for now and here we'll call use path name now let me show you what is inside this path name okay so we just use uh consolid that one so we console.log and we'll say here we'll say path only and path let's save this one let's go back to inspect panel go to the console and here you will see the dashboard see let me clean and refresh it and right now on the top I don't know why it's not showing sometimes but as we are under the part dashboard but actually it's showing the path name dashboard I don't know why it's not consoling maybe we need to add a path over here okay that's fine but now once we have the path over here right we will we can add a dynamic U styling over here for this h2 tag so let's wrap this class name inside the curly braces and add this code I will remove this single code and inside this I will add dollar sign here we'll say uh path is matches with the menu do path okay and then we'll add add a condition here we'll simply add text to be primary and background blue may we say 100 and save it now if you see Let me refresh the screen and you will see the right board is active if I go to the budget if I type dashboard SL budget you will see the budg okay so budget is not active because we give the incorrect part name that is called budgets and now if you see budget is active perfect also on the click off menu we have to make sure it will navigate so um we'll wrap this inside the H uh link tag from the next link here we give H reference and we'll add item menu dot path okay and it will navate to to that particular path let me wrap this like this let's save this one and refresh the screen now if I go to the dashboard it will go dashboard if I click on budget it will go to the budget okay so that's how you can navigate from one page to another through this side navigation bar as well uh you can give some space between these two item so simply I'm going to add margin bottom to two so we have some space like this perfect so in this section we are going to set up the back end but before that let understand how and what we are going to use for the back end so for example on the dashboard we need information right and obviously for the database purpose we are going to use post SQL but in between that we are going to use omm called drizzle which is very popular om right now in the market and it's kind of alternative to the Prisma so once you make a request to the drizzel orm drizzel orm has their own kind of query okay and then it will make a request to pog gra SQL and then it will return data to the orm and then orm will return data to our dashboard it's very simple and very easy to uh configure as well so first thing let's go to this drizzle uh or site okay I will put the link is in the description so you can access it and here you will see all the things uh features which uh orm is providing go to the documentation and inside the documentation uh search for the Post Grace SQL as we are using post Grace uh database for our application now these are the some of the uh services or companies who provide a post SQL for free Okay so you can use that uh database it's a serverless so very easy you don't need to maintain anything or don't need to buy it so first thing if you see neon we are going to Neon uh postgrad SQL database so let's go to this neon dote and they provide a serverless Pog SQL database so it's completely free uh to use so it will give you the half GB of storage which is um more than sufficient for the uh any developer okay you don't need to anything just make sure to login to the account okay but before that let's jump back to the drizzle and make sure to install this two dependency so copy this to dependency go to your project and inside the terminal I will add new terminal and paste it here okay so obviously I'm going to install two at a time so that's fine if you scroll down right here these uh this is the simple uh configuration that they did it okay so just copy this two line because this is the uh example that how to face data right but we don't want to do that right now so copy this two lines go to your project and then let me close this one inside the root directory I'm going to create a new directory and I'm going to call it as a utils okay inside that I'm going to add a new file and we can call it as a DB config do jsx okay and then paste these two lines right like this now over here if you see uh we want a dzal database URL okay but right now we don't have the URL so for that one in order to get a database URL let's go to the neon and then create a new account okay so I already have account so I just log in and you will see the dashboard where you can create a new project if you don't have and I already have project so I will go in the existing project and you will see a bunch of different option over here okay but let's focus uh to our database so let's go to the database if you see I already have one database but I will create a new database over here and let's add the name of the database so I will say expense tracker here uh you can keep the account owner as account and let's say create now if you see our experence tracker database is created okay now inside the table you will see all the tables over here okay as you can select the your own database and right now we don't have any table now let's go to the dashboard again and here we have the connection details okay now select the appropriate uh database from here so in this case is experence tracker so I will select the EXP expense tracker and then copy this connection string okay this is the connection string that we want so copy this one now let's go to the. loal file here I'm going to add um post press database we we'll just say database URL simply database URL and then paste that database URL which you copied okay now copy this one and make sure here I will just remove we add process. EnV sorry EnV dot that particular URL and that's all that's what you have to do now our DB config file is ready next thing let's go back to the uh our documentation again and here you find a bunch of different option now if you don't want to use any service like neon or zck data you can use your own post gra SQL using this HTTP proy so if you go to the HTTP proy here you can need to set your own server obviously and then you can add the connection string whatever the connection string you have for the your database now next we need to configure a drizzle so go to this drizzle kit okay and as you know that we already installed the drizzle kit okay so if you see over here yeah we already installed the diesel kit as well so you don't need to install it again now this diesel kit is very helpful when you want to F data with their own query okay now if you scroll down little bit here you will see the configuration section where you can add the configuration so right now we are using JavaScript so I we select the second one and then copy everything as it is now obviously over here you need to create a new file called drizzle. config.js file so inside the root directory I'm going to create add a new file we'll call it as a drizzle do config.js okay like this and then paste this particular line of code now here obviously we don't have schema yet so we'll add a schema in a moment but we have the Deb credential and over here you need to add the connection string which we referred over here okay so I will copy this process. environment. database URL and same thing you have to paste it here like this okay and at the last you can just write satisfied config okay so this config we need to import from the drizzel kit okay make sure to add the config from the Z K okay let me import it manually so I will just import it here is already there uh I don't know why it's not getting imported properly so import type say config and config prom DZ kit okay like this okay so my bad actually we don't need this config because we already using JavaScript okay so uh we don't need that one okay and I think we are good now now we need to add a schema okay so inside the util folder I'm going to create a new file called schema do JX okay and inside this one you can add your own schema so so here let's go to this uh document and go to the schema manage schema overview right here you will uh here it's explain how to use uh how to add a schema okay so basically as uh as I told you early right uh you can use a post GD SQL MySQL or SQL light with the dzel okay uh so it's uh mean it it provide P SQL database as well or MySQL or SQL like to so first thing you need to do is uh to add the schema now if you face any issue while U adding schema you can refer from here but let's go back to our application and inside this uh schema file we will add our own schema so let's add export constant for the budgets schema okay so here I will say budgets then you have to write PG table which which is correspond to Pro uh postra SQL table and if you see it's importing from the dzal orm then enter this one and inside here you need to provide the database name so I will say budgets then inside uh the curly Braes you have to provide the column name so first thing I will add ID okay so the ID uh Will Be A Serial which is importing from the PG core okay now here is thing uh as ID will be AO increment so you have to provide serial and then provide the table name sorry the column name and then you have to mention as it as a primary key then we provide the name again name is of type Ware make sure you are inputting from the PG core okay and then you have to give the name of the column which is name and here you can say not null now here you will obviously uh have all the types and indexes and how to add that all the column and column type you can refer always this document now after that we'll add amount column we'll say where care we say amount and also this is not null column next we'll add icon so this icon will hold uh because in our application we going to add icons okay obviously I will let you know how to use that one so this icon will be a Ware and type icon so it might be a null so we'll keep as it is and the last is created by okay so this created by will be the user email so just we'll simply add whereare and then we'll give the name created by okay like this and obviously we need to add not null column to this one as well now obviously here you will if you see right you will get a bunch of different icon if I do control space you will get a different different icon the reference unique array okay you can make it unique as well if you want now our budget schema is ready let's save this one and and then let's go to the def config.js after this SQL you have to write schema like this okay so we have to provide to the this D that okay this is the schema which you need to access it and in inside the D.C config.js file if I go over here but before that let me import this schema okay so so let's import manually so we'll say import Star as schema from and then give the path so in this case is schema and save it inside the drizzle as well you have to give the complete path over here so in this case we do/ utils slash schema. jsx and then save it now the the last part is if I go to this package.json file here we need to add two important script one is to update our database so for that one we'll say DB push and for that one we have this command called npx dzel kit SL push and our database which is post gra and for the studio so studio is nothing but that you can actually access your data you can add that data as well okay so obviously I'm going to tell you how to use that one so here right now just type DB studio and for that one the command is npx dzel kit then we say Studio okay and then save it now let's go here and let's clear everything and now we will just type npx sorry uh sorry npm run DB push Okay click enter and right now if you see we got error that either connection string or host or database is required for the database connection so sometimes if I go to this uh sub of the connection right here you need to uh sometimes the process do means uh this variable is not accessible from the environment variable so for now what you can do uh just copy this URL and then then paste it here okay and same thing I'm going to add for DB so over here as well let's put it here simply okay let me close all of this tab for now let's clear everything and then again run this npm run DB push okay and now if you see it's saying the changes are applied okay now if I go to this neon okay and go to the database sorry uh go to the tables and here make sure to select the expense tracker and here you will see the budget and under the budget that these are the column get added into your table perfect right now the next thing we need to do is uh to run the studio okay so you just need to type mpm run DB Studio okay and then click enter so it say the studio is in beta so some we have some error is saying the please install required package called PG okay so just type npm ipg so it's a d dependency so we'll say iPhone D and PG so click enter and then run studio and now if you see our digital studio is up and running on this particular URL so open this URL so I will open this URL inside the browser and boom We if you see we have this beautiful studio if I select the table called budget and here right now we don't have any data but you can add some data for example if I add uh some data like this see created by you can put null if you want okay and then click save change okay so you cannot put the created by and some ID we want okay and let's save the change and if you see the new record get added okay so this is nothing but the drizzle Studio where you can manage your data you can view the data whatever data you added all of the table and everything not only that but you will see this two option called D drizzle Runner where you can actually run the query along with you can even run the SQL statement as well okay and whatever the schema you wrote inside your uh schema file you will see that schema over here so that's how you can set up your your dzel studio now obviously uh throughout the application you going to learn how to add data or how to uh delete data how to edit data and lot of crude operation along with the dzel omm so guys uh please stay tuned and if you did not subscribe to my Channel please do subscribe as we completed our backend setup now next thing we going to learn how to use that D orm and the post SQL along with with our uh application here uh we Define this database URL okay but as we are using in the nextjs here we need to write like this okay and then we will use this uh complete variable name inside this hardcode DB uh DB config so I will replace this with process. EnV do this URL and same thing I'm going to copy and use it inside this dig config as well like this okay and save it so make sure to update this so that you will not expose your database URL with any other now once user land on the dashboard right we going to check if user is already created any budget or not if user don't created any budget before it means user came on our dashboard first time then we will redirect user to the budget screen where we have option to create budget from there otherwise you can access any page from the dashboard okay but we have to make sure that at least one budget is created by the user so right now right uh we only have the dashboard route so let's create a new route called budgets so inside the experience tracker uh application inside the dashboard uh folder right we going to create new folder and we can call it as a budgets inside this budget I'm going to create a new file called page. jsx add the default template and then we'll add budget like this let's save this one and now if I go to the dashboard SL budget it will uh it's supposed to be budgets so let's enter budgets and if you see the our navigation and header is still constant only thing is getting change is this budget only this particular component okay perfect now let's go back to our application and inside the layout. JX where we can check whether user is already uh budget created or not right so first thing we need to make this component as use client and from our database which is uh this is the studio right where we can refer so from this one we can check if that user uh has any of the budget cre created or not right so uh first thing let's add a constant we check check user budgets and then we can add a condition over here so first thing constant result is equal to aoid and then we can refer the database so so in order to get the database reference over here inside the DB config.js make sure to export this constant DB let's save this one so that you can use over here okay so now if you see you can import it from at theate util DP config then we have option called select because we want to select the data Dot from inside the from you need to give the name of the schema okay so this is very simple that's the reason with the help of dzm you don't need to give a table name you can give the schema name directly so in this case we'll say budgets and you can import this budget from this util schema and here we need to add a condition okay so we'll add a condition call here and we'll say equal to and then we need to add a column name which is created by so you can just write like this budgets Dot and you'll get the suggestion created by and here you need to provide the users email also we are using await so make this as a sync and in order to get the user information you can get using constant user is equal to use user hook now from this one you'll get the user information and here we will pass user email so user do primary email address. email address okay and that's all now here I will write the console.log and the result okay obviously we need to call this particular method inside the use effect and we can call it here like this and that's all okay so whenever we have the user information then only we'll execute this use effect now obviously use effect will execute whenever the component get at very first time and obviously if you did not pass any array or something like this then it will execute a infinite time so make sure you'll pass empty array in order to execute this use effect once or if you want to execute this use effect at certain condition or some value change then you can pass it like this now AR look good let's save this one and let's go back to our application so we have error that it's saying the equal is not defined so make sure to import this equal from the dzel orm okay like this and then save it now if I go to the inspect panel because we are just consoling and if I go to the console Let me refresh this once and right now if you see we got the empty array okay and obviously length is zero so when it means the user did not created any or did he did not have any budget so here we can write condition if result dot say dot length is equal to equal to zero then we should redirect to the budget page now in order to programmatically redirect we need to Define constant router is equal to use route use router like this and then you can just type type router dot push okay you can write replace as well so just type replace and here you need to pass the route which is dashboard SL budget okay and then save it now let's try this out so if I let's if I if you are jumping to the dashboard and click enter Then it redirect to the budget page see okay let's try it again so I'm on dashboard page let's click enter But immediately it jump to the budget page and that's what we wanted okay so that's how you can check whether the user already has budget created or not if not then we will simply redirect it to the budget page where you have we are going giving option to create a new budget now in this section we are going to create a budget screen where you user can create a new budget and also can see the existing budget which he already created so if you see on the screen uh this is a budget screen prototype where user have option to create a new budget and along with that we going to give option to uh display the all the budgets and once user click on this create new budget we going to show the popup message means popup window or we can call it as a dialogue where we can have option to select the icon enter the budget name amount and once you click on create budget button then we want to save this information in in our database okay so let's go back to our application and inside this budget page I'm going to create a new uh component called underscore components and inside that I'm going to add a new file called budget list. jsx now add the default template and save it now to in order to create this create new budget uh component right I'm going to create add a new file but inside this uh let's add in the same component folder and we can call it as a create budget. jsx and add the default template now this budget list we need to add inside the budget uh page so here simply I'm going to add a budget list component over here I'm going to give h2 tag we'll say my budgets let's add a class name we'll make font hold text 3 Exel and for this de I'm going to give class name padding of 10 now if I go back to our application you will see the text my budgets next inside the budget list uh obviously I'm going to add this create budget component for now and save it and you will see the create budget now let's go to this create budget component and let's start adding that particular layout so over here uh I will add one de and inside that let's add h2 tag so first thing I will add plus sign I will add one more h2 tag and here I will say create new budget for this S2 tag I will add a class name we say text 3 Excel and save it so right now this is how it will look now let's add a class name we'll make background slate color of 100 padding of 10 We'll add rounded Corner MD then item make item to be in the center okay make it Flex Flex column and let's add border of Two Perfect now you can add even dotted border here you just need to write border and of type Dash then we'll add a cursor pointer and on H I want to add a shadow effect so we can add a shadow effect of MD see like this okay perfect now uh one more important thing inside the page here you can give or inside the budget list right here can you can add a class name margin top to seven so it will come down and now you have option to create budget okay so let's go to the this uh budget list and inside this budget list let's add one D and here I can add grid sorry the class name grid now when the screen size is smaller I will add grid column one when the screen size is medium I will add grid column of two and the when screen size is larger I add column of three let's save it right now if you see the screen is larger so we can add two more column similar like this and that's where the create new budget will come at the first level every time okay we will set up in that same way now on the click of this create new budget button we want to open a dialogue so for that one I'm going to a Shad CN dialog component it's very easy to use so first thing if you see if I open this one this is how the dialog will open now copy this come on first so copy this one and install this so let's add a new terminal and here I will add that uh dialog component after this uh we need to import this statement where you want to use the uh dialog component so obviously inside the create budget I will import it here then we want to import this uh all the dialogue uh code okay this is sample code so we will just paste it outside of this D and then if I save it you will see the example so if I open our application we have this button if I click on this one this is how the dialogue will open now obviously this is the trigger okay in order to open the dialogue so in this case we want to copy this du and inside this dialog triggle we want to our this create new budget uh components okay again inside the dialog trigger here you need to make it as a child let's save it and now if I open this create new budget or click on this one you will see this dialogue okay so that's how you can add your budget layout in order to trigger the dialogue now you can give the dialogue title for example here I will say create new budget now inside the description obviously we want to add couple of things first thing we will add the icon to pick right so we want to add one Library where you can pick the icon and for that one we will add the Emoji uh Library okay so just simply user can select the Emoji whatever the Emoji user like and then he can add it there so uh let's go to this Emoji picker uh Library okay which is very powerful library and very easy to add it so this is a command in order to install it so let's uh clear this one and import this Library called Emoji picker now in order to use this Emoji picker Library you just need to add this Emoji picker like this so here I'm going to add one de and inside this D I'm going to add the Emoji picker so we'll say Emoji picker and if you see this Emoji picker is importing from the Emoji picker react and save it now if I go back to our application so right now it's saying that we it's throwing some error because uh this is on server side so make as a client and only uh Emoji picker is uh workable inside uh in client side only now if I open create new budget and you will see the dialogue obviously that's how do we don't want right we don't want in such a way so for now uh let's do one thing let's comment this code and about this de I'm going to add a button okay and here I will say button from the components but Shan component and here I will add a simple value so let's do one thing uh here we'll add a constant one state which will hold the Emoji value so we'll say emoji icon comma set emoji icon is equal to use St okay and by default I want to select for example let's select this particular emoji and I will paste it here I don't know why so I just pasted this uh default emoji and I will also hold one more state which will open our dialogue Emoji dialog okay so here we'll say open Emoji dialogue or Emoji picker we say Comm set open Emoji picker is equal to use State and initially we'll make it false now if I go ahead here right on the click obviously before that here I will add a button and here I will render the default one okay here will say emo icon and I will put the variant as a outline if I save it you will see that one okay so button is not defined make sure to import this button and if I click on create new budget you will see this icon um let me wrap this in complete One D and then we can give margin top to file something like this now on the click of this one we want to open that emoji picker dialogue so we'll add on click event on click and we'll set open Emoji picker as the opposite of open Emoji picker okay and then here I will open this Emoji picker like this and it has a property called open and for that one we'll just select pass the open Emoji picker like this let's save it and let me show you the result now if I click on this one you will see the Emoji picker is open if I click again it will close it but if you see it's taking a complete space right so uh you can simply add a class name and make this class name the the position as absolute now you will see this particular Behavior okay that's what we wanted now whenever I select any Emoji right it will replace this particular Emoji so it has a one more property called on emoji click and it will take the Emoji value okay and let me show you the console so what the event value so let me go to the inspect panel go to the console and here if I select this Emoji for example right you will see the value so this is the value or this is the event which we are getting in that you have all the information now we only want this particular value called Emoji so you can directly get it from e. emoji and save it now if I try to select something right like select this one see you got the value only the specific value okay okay same thing uh obviously once we have this value we will set the Emojis we say set emoji icon that's all and as soon as we set the value we also want to close this Emoji picker so I will add two method we'll call two method on one click so you can wrap this in a curly braces and then you can set open Emoji picker to be false and then save it now let me show you so for example if you click on this Emoji right see the dialogue is getting closed immediately as soon as you select any of the Emoji not only that but even you can search the Emoji which you want okay see if you want car can select the car and that's all now um for this button you can give the size as well as a large let's save it and oh that's not good let me go to the button component and here we have the site called LG only so it's LG perfect see if you think you want to use um bigger font you can add a class name and here you can say text large perfect okay let me remove this sides next thing we want to add inputs in order to user can add the uh budget name so for that one let's go to the shatan and here we have have the input component so copy this uh command and in order to install this input component and once we install now after this du I'm going to add a du again and in that one let's add a h2 tag here we can say budget name and after that we'll add a input so this input we are need to input from this uh shatan component now we once we add this budget for this input I can add a placeholder and here we can give example as home de or something like this now if I go back to our application this is how the input will look like let's add some styling to this uh label so I will add a class name here we'll say text black font medium and margin y one so we also give the vertical margin uh for this du let's add a class name margin top to two perfect now one more input we want so I will just copy this D paste it here and here we'll say budget amount and here I will say for example $5,000 something like this see now we have the budget name budget amount and then we want to to show button so after this de let's add a button and here we'll say create budget and save it see obviously we'll give some styling so add a class name first We'll add margin top to five we'll make it with full something like this okay now we have the beautiful uh dialogue where user can select the budget and then user can in enter the input as well now obviously we need to save this users uh entered input value so for that one we going to Define state so which can hold the value so constant uh we'll say name only set name is equal to use State and another for Budget sorry amount set amount is equal to use State now for this input right it has one property called on change right and inside the on change it will produce the event e and simply we'll set the name which is a budget name using e do Target do value same thing we're going to do it for the amount so here we'll add the amount and here we'll just set the amount now here we have to make sure us will only enter the uh numbers okay so you can give the type as a number now even if I if I go here even if I try to add something right uh some text it will not allow only button sorry number is allowed and obviously here you can add the budget name now until unless you have the budget name and amount uh entered in that time we have to disable this button once user input a name and amount then only we will enable this button so for this button we can mark it as a disable only if uh we can add a condition over here we'll say name and and amount okay is not there so we add not equal to sign and save it now if you see right now budget button is disabled but if I add something we'll say for example home decor We'll add some amount and then only the create budget button is enabled okay perfect also uh we already saving this information with emoji icon as well now next thing we need once user click on this create budget we need to save this information so for that one let's add on click event so we'll add on click and we'll say on create Budget on create budget now let's uh Define this particular method so we'll add a constant on create budget and inside that we need to add the logic in order to add the information inside our database so simply write constant result is equal to await so make this as a sync we'll refer the database from our database config dot it has operation called insert similar like the uh select which we used at before now we want to insert so we write insert now uh the table name we need to mention in this case is budget make sure you importing it uh from the budget schema okay then uh we need to add all values so we'll say values and here you can give the name uh the fill name along with the value so in this case I will say name which is the name then amount as amount then we'll say created by okay so in this case created by we need to give users uh email address so let's get the user information so here we'll say use user and then we'll get the users email address primary email address sorry primary email address do email address and then the last is icon so for the icon we'll say Emoji uh not Emoji the emoji icon okay so this value so on the right hand side you will see whatever the value we make mention and these are the field name which we already defined inside our schema now we can also uh tell our uh dzel orm that you can return once we have the data so in the return you can add inserted ID we'll return the inserted ID you can get whatever you want and we'll add budgets. ID okay so it will just return this budget ID once user is inserted and over here if result is successful we can show some kind of to message that this particular uh budget is get created so for in order to show the toast message I'm going to use this sonar uh component okay it's similar like a toast message if I click on this to see you got this particular uh toour message right so let's import this first so copy this command and install it here and once you install right you have to make sure that you will use this toaster component inside your root layout so let's go to this root layout and let's put it here make sure to add the toaster as well from this com uh we need to add from the toaster so not sonar let make sure from the component so let's add from the component let's save it now in order to use it right as soon as we have the result here we can write tost from the sonar and then you can write any message you want so in this case we'll say new budget created something like this and then save it that's all now let's test this out here I will just write use to create new budget now if I go here uh Let me refresh it and create new bu here I will say um some icon then here we'll say um travel I will put a budget of for example $22,000 and then click create budget so right now we got one error that uh duplicate key violation unique constraint a budget key so here uh let's delete this uh previous record okay just to make sure everything is clean now let me refresh it again create a new budget select the name sorry icon here we'll say travel and the budget value for example 2000 and I will click on create budget and if you see the popup message the tost message is showing that new budget created now if I go to the studio Let me refresh this one and boom you will see the name amount the icon and ID along with the who created that particular budget and obviously this idid is ATO generated okay and this how this is how you can generate this budget now obviously as soon as we create the budget we need to make sure this dialogue get closed right so in inside the shadan dialogue documentation and if you scroll down we have option over here called custom close button okay here uh in order to implement that particular custom close button right uh let me yeah so over here you can go to this custom close button section this is the example right so you need to add that particular button inside this dialogue footer under the dialog close child so copy this dialog footer and I will just add after this header like this and we'll put our button over here okay everything will be same let's save this one and let's go back to our application okay obviously we need to import this dialog footer so import this dialog footer and the dialog close as well so make sure to import from dialog close from this component you add dialog let's save it and then test this out now everything is same so select something some sort car say car maintenance we say $1,500 and click create budget and boom the dialogue get Clos and our it's saying the to message that new budget created inside our database you will see the budget is also created inside our database and that's how simply you can insert a record inside your uh post Grace SQL with the help of drizzle orm so guys if you have any question any doubt until this point let me know in the comment section in this section we are going to display all the budget list which is created by the user so as you know that these are the budget we going to display it and the budget layout will be look like this where we going to show the icon the name of the budget how many items is added into the budget then the total budget amount and how much is spent how much is remaining and this beautiful progress bar now the thing is obviously right now in the studio we only have the budget column now here I'm going to add one new schema or new table called expenses and here that in that one we can a user can add the all the expense okay so let's go back to our application let's close all all of these tabs and then go to the schema. jsx file inside here I'm going to add a new schema we say export constant expenses is equal to now first thing PG table inside this we need to give the table name we'll say expenses and then we need to add a column so first thing ID of Serial we'll call it as ID and this will be our primary key next we want to add the name name of the expense so this will be a Ware and uh the name will we can call it as a name again and we it will be a not null okay next uh we need to add amount so for this one we will add Ware amount do not null after this we want to connect to our budget ID okay uh so we need to refer this um expense record with the budget so here we can say budget ID now obviously it means in under which budget this expense we need to add right here we need to uh Define in uh integer make sure you import it from the PG core the type you are giving as a integer okay here we'll say it as a budget ID Dot and we need to reference add the reference so we have to add like this and then we have to refer it with the budgets. ID simple right so uh easy to uh add it and the last is created by so whereare here we say created by and this will be again not null okay so all of these uh fields we added along with the column now whenever you make any change for example uh you want to add this new table or you want to remove particular this column right whenever you make some change inside your schema you have to make sure let's stop we have to stop the studio first let's stop the studio and then here you have to run the let me go back yeah npm run DB push again okay so if I enter it now you will see okay so we got one error okay so it's saying invalid type so let's see where it is this so message required so we have some invalid type in our application so let's check it out so here we'll change this amount to numeric Okay so let's say numeric PG core and also uh I will add the default value to zero then we have the serial primary key everything look good to me here is Ware here is integer I think we are good let's let's try again and do npm push okay we again have that same error okay so here we make a mistake so this need to be numeric like this this is not null so look like this okay also um as we already connecting uh referring this particular experience with the budget where we have the created byy right so actually we don't need this created byy again so instead of that one we'll add the date so we'll add created ad okay and here as well I update to created at and let's save this one and let's take this out so I will clean everything first and hopefully this time it will work and boom if you see now changes applied now you can uh run the studio and now our studio is running let's me go back and refresh the screen and now here you will see the new table is added called expenses perfect right now obviously uh we have the budget we have the expenses okay and right now uh we don't have anything inside the expenses now from here as well you'll you can see whether you can uh what are the expenses is under this particular uh budget now let's go back to our application okay and inside this budget list where we we are going to fet all our list of budget which user added so let's define method constant we say get budget list like this uh we'll make this as a sync and over here I'm going to write constant result is equal to await DB do select make sure to import DB first do select and inside that now you can select the specific column as well but now if I want to join two column together right because in this case I'm going to join the budgets and expenses together in order to get the expenses uh data as well so simply what I'm going to do here I will write dot dot dot get uh table columns okay make sure it's inputting from dzel orm and here you can Define the column name so in this case sorry uh so in this case is budgets from the schema and then I want two more column we'll say total spin okay so how much user already spent and here I will write like this SQL UT from the dzel orm then you can simply write sum of the amount so whatever the amount you see here right that amount value I'm going to submit so simply I will write dollar expenses dot amount and that's all so once you write like this drizzle orm already taking care of adding all all of this uh amount and do when doing the addition and here we'll map with number okay same thing uh I I I also want the total item so total count means how many expenses item is added in that particular budget that count I'm going to add it here so same thing but instead of sum in this case I want to count so here I will just say count and in that I have to write X es do ID because you can select any field because we just want count right and then we'll map with number like this okay here after this we need to add a from so obviously our first column is a budgets then we need to join it so we'll do the left join and inside that we'll add the expenses comma equal to obviously we need to uh when we are joining the two table we need to Pro on which column we need to add a joint so in this case we'll say budget list dot sorry not budget list budgets do ID is equal to not equal to but the second will be the expenses do budget ID because we refer right and then we'll say group buy because uh we are calculating some and count so obviously we need to write a group by on which column so here we'll simply say budget do ID and that's all and now if I console this result over here and we'll see what result we are getting this need to budget list here I'm going to add document used to get budget list now over here obviously uh we'll add a use effect like this and we we will call this method called get budget list now obviously right now if you if you observe we did not added the condition where use uh to get only budget along with the expense information for the given specific user right so we need to add that condition as well so here we'll say where and then you can add the equal and here you need to add budget Dot created by and there you need to give users email so let's get that one so we need to get user information first and then we'll simply pass it here so user. primary email address. email address okay and now uh with the join with the we clause and group by we will get the result now obviously I just uh call calling this method inside this use effect and make sure whenever we have the user information then only execute this particular method now let's save this and test this out also as we are using use effect make sure to import WR use client now save it and let's test this out so let's go to the inspect panel go to the console and let's refresh the screen once and boom if you see for the budget list we have the two items which one is for travel and one is for car uh maintenance in that if you OB let me Zoom it little bit so we have the amount which is the total budget then who created the name of the application along with that we have the total item and total spending amount okay perfect now next we need to save this in one state so let's define one state called constant we say budget list comma set budget list is equal to use state so make sure it's budget and then here simply add set budget list with the result okay perfect now we will remove this and save it now after this create budget so maybe uh inside this D only I'm going to iterate this budget list so let's write budget list do map here we'll say budget comma index and the arrow function now um instead of writing code here I'm going to get new component for the budget item so here we'll say budget item jsx add a default template and then we'll iterate this budget item and for this Bud budget item I'm going to pass each of these budget like budget so whatever the budget we are getting right each of budget we have pass to pass to this budget item and inside the budget item we will accept it as a prop now we have the budget information correct now let's go here and let's implement the budget information or sorry budget UI so first thing let's add one du inside this du I'm going to add h2 tag and here uh if you see our mockup first thing we need to display this icon so we'll say budget do icon now you can give the type I'm not sure but obviously we are using JavaScript so you don't need to mention the any type now we have the budget icon let this save it let's go back to our application and here you will see the two icon is displaying on the screen perfect obviously I'm going to add some style to this one let's add a style uh let me bring this side by side let's see uh whether this look good or not yeah perfect now not style but here we need to add a class name so class name uh we'll say text of 3 XEL then padding of two we say background slate 100 rounded full something like this it's look weird I know but that's fine next we need to add one D and inside this we'll add a h2 tag where we going to display the item name means by buget name so we will say budget do name and one for the total item so here we say total items right now is zero so it's showing zero and here will say item next we want bring everything in one line so for this du let make it class name make it Flex let's do gap of two make item to be in the center perfect now for this complete du I'm going to give class name let's say padding uh of five let's save this one let's add a border as well make it rounded uh let's add large and uh let's give I don't know but let's see in bigger screen this is how it looks and here we'll do cap of two make it Flex I don't know why it's not showing but you can give a gap over here something like this see perfect next uh on the right hand side uh we want to show the total budget for this one also for this icon let's give a padding of three I think that's enough and we'll say text L smaller let make it to Xcel okay uh on the right hand side obviously uh we'll add h2 tag over here and for this h2 tag I'm going to add budget do amount obviously here I will put a dollar sign and we want on the right hand side so let's put this two uh tag in One D or better we can keep this S2 outside of this du and we'll wrap this de again like this and here we'll provide the class name and same class name over here and here as well and save it now for this one we'll say justify between which is on the right hand side now for this amount I will add a class name make it font bold text primary and text we say large like this now after this one we want to add the progress bar so let's create our own progress bar so after this de I will add one more de here inside this de let add a class name we same with full background I'm going to give slate uh 300 and then we'll give height of maybe we'll say um two and save it now if you see we have this ver horizontal line obviously for this do let's add a class name margin top to five and then here I will say rounded corner to be full okay and this will be our progress bar now if you want to show the progress here inside this du again you need to add one du and we'll keep the same class name except instead of withd full you can mention the dynamic we for example let's add 40% and obviously this color I'm going to change this to a primary and this is how it will look like now obviously once we have the proper expenses right then we will update this uh progress bar width and all but for now we will hardcoded value and we'll keep as it is now above this uh progress bar I'm going to add one more de and here on the left hand side we going to show the how much he spent and on the right right hand side we'll show how much amount is remaining for that particular uh budget so I will add h2 tag here we'll simply say because we need to calculate value right so simply we say item do total span if to Total spin okay and save it obviously uh it's not item it's a budget and now right now obviously it's not showing anything total spent is null uh so here we can add a condition if total spent is not there or is there then show the total spin otherwise show zero and here I will add a class name we'll make text extra smaller text slate 400 and save it on the right hand side uh we want to show the total remaining amount so for that one we need to calculate so so we'll say total item do budget do amount minus item do total spin let's save this one oh will be a budget and save it now let's save this one now if you see we have this uh total remaining amount so let's bring everything in one line so for this one let's add class name make Flex item to be in the center and make justify between now here I will simply say zero spin spin and will say remaining something like this perfect um here I'm going to add margin bottom to three so we have the clear uh value and if I increase the screen size this is how beautiful it look okay now on the click on this one right we are obviously we are going to the navigate to the new screen that we will uh Implement later on but a couple of things I will I'm going to modify here so first thing uh for the budget name let's add a class name and here I will add a font bold and for the item I'm going to add a class name text smaller and text Gray find and save it something like this so it will give a good effect now obviously here we can add the H effect once user hover on any of this item so over to this D let's add H we'll say uh Shadow medium and obviously I will add a cursor pointer so now if i h on this one you will see this Shadow okay so that's how guys you can bring data from our database and you can join these two tables because in this case we join the two table and we calculate the total amount user spend and the total count and we display over here next what we are going to do we going to add the all the expenses okay when user click on any of this particular budget okay then on the next page we want to give option to user to add expenses in that particular category and depends on that one we going to uh update this progress bar so guys uh that's all for this particular section if you have any question any doubt let me know in the comment section so before moving forward to the next section I want to uh update something on this particular page so when we add a create new budget and when we add that budget right we have to make sure we we are updating this budget list and all the budget list will immediately uh fet it from our database okay as soon as we add a new uh budget so let's go back to our application where we adding this budget inside the create budget so as soon as uh we are showing this toour message right and obviously we are closing the dialogue here we going to call one method and we can call it as a um refresh data we can just call refresh data now this method we going to pass back to the parent child through this params okay let's save this one and inside the budget list obviously if you remember we have added this create budget component over here you will find the refresh data and as soon as this method get trigger we have to make sure that we'll call this get budget list like this okay and that's all and save it now if I go here and try to add a new budget Let me refresh this screen once let's add a new budget here I'm going to add it for uh also um before adding right you will see that button uh this particular uh Emoji picker is going behind the button so let's fix that issue as well so inside the create budget where we make this du as absolute over here we'll make Z index to be 10 or 20 and now it's above the uh this particular button now here I'm going to add for the let's say YouTube earning okay so we need to add something like let's add a red dot We'll add this particular icon here we'll say earning we add budget of 5,000 and now click create budget and boom the budget is get added and immediately without refreshing the screen our uh budget uh updated list is getting updated on the screen okay so that's how you can update your list without refreshing the screen now another part if I refresh this screen you will see it's taking uh few second not or maybe less than a second to get this data so instead of that one we have to make sure we will show some kind of loading and for that one we are going to add a skeleton loading now if you don't know about the skeleton loading so let's go to the shatan component and just search for the skeleton component over here you will see this kind of uh loading okay so this is a placeholder for the given component but before uh loading your data it will show some kind of loading effect so obviously uh we going to add the skeleton effect but we going to use our own method to add the skeleton effect and we are not going going to use the shadan skeleton component so uh let's go to this let's go to the create budget uh inside the budget list right over here I'm going to add a condition if budget list do length is greater than zero then obviously we will show the budget list otherwise I'm going to add a other condition and here I'm going to add um some array okay so this is the hardcoded array I added and we will iterate that array using item comma index like this okay now inside this one I will add a d let add a key as a index and over uh inside this d uh for this D first let's add a width we'll just say class name We'll add a width to be full the background I will add a slate or maybe 200 the rounded I will add a large and the height I will add maybe let's add 80 pixel and save it now for the testing purpose I will rward this condition let's save it and let's go back to our application now you will see this particular uh placeholder now obviously I will change this height to let's say 180 let's say 150 perfect now this is just a background and nothing is showing right in order to animate this one like a skeleton effect you just need to add a PR property called animate pulse okay and then save it and now you will see it's getting darker and lighter it adding the animation effect to our application and that's what we wanted now once this is done now just R this condition to original one let's save it and boom now if I refresh it you will see the skeleton effect and and then you will see the actual data so that's how you can add the skeleton effect here I will just add six and now if I refresh it boom so this is how you can add the skeleton effect and obviously uh we also updated the logic so that we'll get a updated data as soon as we added a new budget now as uh right now uh we did not order by anything right it's by default ascending order you can um also add the order so here after the group buy you can add the order buy and inside that you can add the descending or ascending order for example if you want descending order you can write descending and on which column you want to add descending order here is the example if you h on this one you'll see the example so in this case we want the descending order using the budget. ID and save it now you will see the YouTube earning will come first so refresh this data and boom you will see the whatever the new budget you added recently that will come first now here once user click on any of the budget we will navigate to the expense uh screen or page where we going to show the selected budget information for that one we are going to use existing component we will reuse that component then we going to give option to add the expense name expense amount and once you click on ADD we going to show that list of of expense over here and in the same time we going to also update the our budget item as well so let's go back to our application and first thing uh we need to do is to create a new route so inside the dashboard component We'll add a new route but before that let me tell you how the route the the way we want the route so we want the dashboard then over here it will become like expenses comma and the ID of the budget for example if you want 18 right and if I enter it then it will get the route the expense will be S uh will be fixed over here only thing going to change is this uh budget ID so it will be a three it will be a seven right obviously we cannot create that much route so we need to create a dynamic route where uh depends on the user selection the route will go change so inside the dashboard uh folder I'm going to add new folder and we can call it as expenses inside this folder we need to create a dynamic route so in order to create a dynamic route you have to mention the variable which you want to pass so in this case I want to pass ID and that variable you need to wrap it inside the square bracket like this and then we will add page. jsx file let's add a default template here I will add the function name as a expenses and and then save it now if I go to any route any ID right see it's still showing me the expenses okay so that's what we wanted now obviously uh it's expenses so we have to make sure in the side navigation route you'll mention that one as expenses dashboard expenses if I refresh it the expense is showing now next let's go to the expense page and over here we'll accept it as a pams now in order to give get this ID right so whatever the ID user click on it we need to get this ID so that ID we will get it through this params and if I console this ID using the console lock lock params and if I go to the inspect panel go to the console Let me refresh this one maybe we will uh add it inside the use effect here I will say params and then we'll consult the params so as we are using use effect you have to make this page as a use client and now if you see we got the ID of 19 so whatever the ID you pass you will see over here see now in this case is 40 next thing uh let me clean this out and here we'll add a S2 and we here we'll say my experiences I will add a class name we say text uh to excel font Bard and for this de I'm going to add class name padding of 10 perfect now we have this page now first thing uh we need to fish is the budget information so let's say constant get budget info and uh let's say constant result as we are using await say make this as a sync is equal to await DB so make sure to import this DB do select and you have to give from here uh we need to get from the budgets so just write budgets okay you have to make sure that you will import the correct uh field okay then after this form we need to write uh left joint because we want to get the uh information of total expense and all okay instead of this one right let's use the existing query which we use inside our budget component okay so inside the budget list if you remember we use this particular query I will copy this existing query and then we'll use it here because we want everything as it is except we want to add uh we operation okay so obviously we don't want order buy and before group buy I'm going to add one more we clause and here I will add where equal we'll say budget list me budgets do ID is matches with the params do ID something like this okay and save it now obviously you'll get only result which matches with this uh budget ID and along with the email address as well so here now we just console the result and then we need to call this get budget info inside the use effect so whenever the parents information is available and make sure you have the users information available because we are passing the user's email ID so make sure to get that so constant user is equal to use user like this and whenever the user information is available I will execute this use effect let me remove this console need to add and and operator let's save it let's go back so right now we got one error it's saying the DB get table column is not defined so make sure to import this get table columns and make sure to import this equal as well and then save it if I refresh it we don't okay we have one more error saying that SQL is not defined so make sure to import this SQL and let's say group byy okay we don't need that one we have couple of more errors so we have that error because if you see we are using the expenses schema but as uh the uh function name is similar okay so let's update this one we'll say expenses uh component I will say expenses screen okay so we need to update this component and make sure to update over here I will rename this or we can keep as it is it doesn't matter and now save this one and then make sure to import this expense from our schema okay and let save it so make sure the name you can make sure is a different now let's test this out for example if I refresh this I'm passing the ID as a three go to the inspect panel go to the console and if you see inside the page we have the array one and inside that we have this information which is the budget information for the ID3 now if I go back to the dashboard okay and let's go to the budgets where we have this budget now on the click of that obviously we want to navigate okay so let's go to the budget item here I will uh wrap this inside the link tag so let's replace this with a link add a h reference and here we'll simply say dashboard slash expenses slash and then we need to pass ID which is budget. ID and make sure to close the correct tag save it and refresh this once and if I click on this YouTube earning for example if if you see now it's navigate to the expenses SL 6 which is the 6 ID for that given budget and if I go to the inspect panel as well you will see the information about that particular budget okay perfect now obviously we need to save this in one state so I will Define constant inside the expense screen okay and here we'll simply say um budget info comma set budget info is equal to use state make sure to write collect spell Ling and then here we'll simply set budget info as result okay and obviously we need to uh put result as a zero okay because if you see it has array one and obviously every time when we Face the single record it will have only one uh object inside that array okay so that's the reason I mention a result of zero now the next thing uh we want to display the budget uh item right so here I'm going to add a du for this du I'm going to add a class name we'll make it grid grid uh column one when the screen size is smaller and when the screen size is medium we'll make GD column two okay now inside this one the First Column will be the budget item so we'll say budget item now we are using the existing component which we already have and now for this budget item if you remember we are passing the budget information so we'll pass that budget information using this budget info which we have already this particular State over here and we just pass it there now let's save it let's go back to our application and boom we have this particular expense information now if you see we use existing component and we just pass the data which we have let's give some margin from the top and perfect now if I go back and if you open for example hope Decor so right now if you see we have the error saying budget. name is not defined right now what happened obviously uh to get this information right and update inside the budget uh info state it takes some time because we are fetching data from the server so in meantime we can show show some kind of loading and that's where we can show the skeleton loading so here we'll say if budget sorry if budget info is there then show budget item otherwise show the skeleton effect so for the skeleton effect I'm going to Simply add class name height of 150 pixel then withd full background slate maybe let's say 200 rounded small let's see me large actually and then here also I will add uh animate pulse effect and close the tag let's save this one and make sure everything is correct now if I go back and open for example travel see now we don't have that error and also you'll see that as animated effect as well over here right if I RSE this condition just for testing you will see the animate uh animated scalen effect now next once we have the budget item now we need to create one item in order to add the details right here on the right hand side we will add that information so uh inside the experence ID component let maybe inside experence we'll create a new component folder and here I'm going to add called uh add expense. jsx add the default template and then here I will just simply add expense component over here and save it now you'll see on the right hand side this expense component um for this du I will go gap of five so there will be a distance from the all the sides next thing inside the add expense let's go here and save it and over here we need to add couple of things first let's add h2 tag we'll say add add expense here I add a class name we say font uh bold text large then we'll add a du so I will just copy the existing du which we added for the create budget so this particular D I will copy we'll paste here and paste here let's format this one and obviously we'll Define two State one for the name and one for the uh uh amount so here we'll say amount obviously we'll Define that state so we'll say um name comma set name is equal to use State and constant for amount okay and obviously we are setting over here that's good here we'll say expense name and expense amount now for example I will say um bedroom decor for example and for here placeholder I will say $1,000 and save it perfect now we have this all the information ready uh let's see how it looks so right now we have error it's saying input is not defined make sure to import this input component and then on the right hand side you will see this small uh form now let's wrap this one so class name we'll say border we say padding of maybe let's say five rounded Corner large perfect now after this we want to add the button so let's add that one uh so after this de We'll add a button from the component sh and component here we'll say add new expense let's add a class name we give margin top to three and save it see obviously I we'll make this wi to be full so let's make it full and we'll disable this once uh if the name and and amount is not there okay because this is the required field and now if you see this information is required okay now obviously this is the information about the uh detail and this is on the right hand side where you can add the information now here you will see that the we are getting this empty space because this uh is aligning this uh particular component with this uh form component so in order to avoid that let's go to this budget item and here you can Define the height let's say height of 170 pixel and then you will see now we have the we don't have that particular uh expanded or empty space okay now as soon as you add a new expense uh name and the here we need to change this with amount so let's update this with the amount and then obviously on the click of add new expense we have to make sure this information get update and our also the data is getting added inside our database so let's do that so uh let me bring this down and over here I will add on click event and here we'll say add new expense and this method I'm going to create over here constant add new expense like this and inside that we'll say constant result is equal to await because in this case we want to add a new record right so DB so make sure you I import that the DB do insert on which uh uh table you want to insert so in this case is expense then you need to add values so first thing we'll add a name as a name then amount as amount and if you do the control space you will see what else column you can able to add okay so again budget ID will match with the params I me correct uh so we don't if you see right we don't have parameter information so what you can do uh let's go to the page and here we have this param information from here as well you can pass this information so here we'll say budget ID and we'll say parents. ID okay and in add experence here we'll accept budget ID and then we can use this budget ID over here make this as a sync and the last we need to add created ad so this information also we can get it so user and we already have the user information over here so we'll just send to this particular component see this user information we'll pass to this add expenses and inside that we accept over here and obviously we need to face this users email address so I will copy this complete fill path and I will paste it here okay now we are sending all of this information obviously ID will generate automatically and then it will return the data so we can say return the inserted ID as budget list sorry budgets. ID and then we'll console the result so console.log result and if the result is successful we'll just toast the message saying new expenses expense added okay and save it let's save all the components all the files and let's test this out so let's refresh this once here I will add a new experience so I will let's go back and for the home decor I will add okay so we'll say bedroom decor and I spend around for example 1,500 and click add new expense if you see the new spend get added to mat is showing obviously it's not getting updated if you see it's still showing zero item zero spend and value remaining but make sure inside the database we have the value now if you go to the expense table you'll see the value we just added along with this budget ID right if you go to the budget obviously we added inside the home decor click expense and you will see the value which uh added under this particular budget so cool right that's how the studio is quite cool to look your data immediately now obviously as soon as you add this experence you have to make sure this uh data get updated so for that one the similar way what we did before right in the last section to update uh the data here we will pass the new uh pass this met called refresh data and not here my bad as soon as we add the experence before the to you can pass refresh data and this particular method will pass back to a parent child through this prop and if I go to this add expense here we'll add refresh data and we'll call this particular meod called get budget info okay and save it now let's test this out so if I refresh it you will see one item is added I have spent 1,500 let's say for example new uh we'll say kitchen decor and I spent around $4,000 now as soon as I add a new expense you will see without refreshing screen this value is also get updated along with how much you spend how much is remaining and obviously this is total Okay so this how you can add your expenses and update your budget as well now we have all the information right now let's update this progress bar in order to update this progress bar let's go to the budget item where we have this progress bar okay and inside the budget item we need to write one method to calculate the percentage first so here I will write constant calculate progress percent the arrow function and inside that I will write constant percentage is equal to budget dot uh so logic uh the method is simple we have to uh write a total sorry not total but spin divide by total budget into 100 okay so this will calculate our uh percentage how much percentage user uh means uh user spend the money right so here we'll say budget do total spend divided by budget budget do amount H into 100 okay now we will just simply return percentage into two fix here we say two only and save it now this calculate progress percentage we going to call over this particular method right now if you remember we had coded this with 40% right I will delete this one and I will simply add a style inside that I will Define a width and inside this width width I will oh sorry it need to be width and then I will Define the tag dollar sign inside that we call this calculate progress percentage method and here we'll say percentage sign like this okay and I think that's all let's save this one and let's test this out so if I refresh it you will see the percentage this much percentage is completed let me go back to other one and if you see for other only 0% is pain and that's the reason it's showing the empty but if I open something like this here I will say uh mytle Beach I spent around $1200 okay and if I add a new expense see boom everything updated along with this progress bar see and now right now the progress by you will see it's complete I mean it's showing more than 50% is already used Spain so that's how guys you can add the progress bar uh along with your own logic so that you can complete you can add a complete control on your progress bar it's very simple just the thing is you have to uh complete uh one component at a time finish the one component and then move forward guys uh before moving to the next section I want to talk about this tube guruji Pro membership where you will find an exclusive courses on the tube guru.com and just you can join the tub guruji uh Pro membership for $7 per per month or you can buy it for $14 per year or you can buy it for Lifetime just for $99 also you will get the source code along with that you will get uh you can see all the chapters over here you can learn or you can uh get access to each chapter chapter by chapter okay and uh you can unlock all the courses once you buy the membership now we want to display the list of expenses which we added now inside the our uh expenses table we have all the list for which uh we added the expense for the given budget so let's go back to our project and inside this um expense page right we we already fing the budget information now over here I'm going to create a new method and we here we'll say get expenses l and we'll make this as a Sync here I will write a method like Doc like uh get latest expenses and here we'll say get budget information now inside the G latest expenses we write constant result is equal to AIT DB do select and we'll sa from we say expenses then we add a we condition and inside the we condition we'll write equal to and we'll say budget dot not budget but expenses expenses. budget ID matches with the par. ID so obviously we have the parameters. ID and this is that is nothing but a budget ID and we will match that ID and we'll make sure the latest uh expenses will be at the top so we will add the order by on the ending order uh on expenses. ID and that's all now here we'll just console the result and this get expense list we going to call inside this use effect method now as soon as uh we add any new uh experence right obviously right now we are calling this gate budget information same thing uh we also going to call gate budget info so instead of calling this gate expense list over here me this I can call it inside the get budget info like this okay and then save it now let's uh go and check whether we are getting the data or not so go to the inspect panel go to the console let's refresh this once and right now we got error that this sending is not defined so make sure to import this descending and equal to is already there so let's refresh it again and if you see for line 45 we have the expense list okay for the travel we added this modal Beach information and then that information we got it now once we have this information we have to make sure to we save in one state so here we'll say expenses list comma set expenses list is equal to use step and over here we'll just set that value now once we have the expense list we going to create a new component inside this component folder and we can call it as a expense list table. jsx add the default template and then we'll add that after this D so here I'm going to add one D inside that I will write h2 tag we will say latest expenses and below that we'll add uh expense list table now to this expense list table we going to pass the EXP expense list as a expense list uh for this h2 tag I will add font bold text large and that's all will here will give class name margin top to four okay now inside the expense list table will accept the it as a prop so we'll get the expense list because we send it from this uh this particular file and we sending this experiences this to this experence list table so that we can accept it here now inside this expense list table let's create a table so first thing for this du let's add a class name we say margin top to three then I will add one D inside this du we add h2 tag we say name here I'm going to add couple of more we'll say amount then date on which is added and the action in in order to delete that particular expense now for this du let's add a class name here we make grid grid column 4 and we'll add a background slate maybe 200 and we'll give padding of two now that this is a header now let's save this one let's go back to our application and you see we have this beautiful uh header for the given table now I will just uh use the same de okay but obviously we have the expenses list so we'll just iterate this expenses list so let's add expenses list not like this expenses list table oh sorry my bad expenses list do map here we'll say expenses comma index and arrow function now inside that inside this particular D We'll add same D because we want a same column and everything only thing in instead of S2 we'll add expenses do name and here expenses do amount here we say expenses do created at and here we'll add a trash icon so we'll add a trash icon from the Lucid react and for this one I'm going to add a class name make text red 600 and then save it now if I go back to our application let's refresh this once and you will see we have this particular data but let make sure here we add a slate 50 only perfect and if you see we have the uh expens information uh for this h2 tag I'm going to add a class name we'll make font Bard and everywhere let's see how font board will look I think that's good and save it okay and then we have the latest expansive information now if I go back to the budgets and if I open this home decor because it has a two item and you will see these two items now instead of date uh I think this is uh incorrect so let's go let me go back to the expenses here if you see we have the created ad and but we are passing the users uh email address instead of that one we want to pass the date okay so that is the uh fix we need to do so when we are saving the or we are creating the expense inside the add expense right right now if you see we we are adding this created add uh date in sorry instead of date we are adding the users email so let me remove this one and in order to add a date uh for that one I'm going to add one uh Library called npmi moment so this Library help us uh to format the date according to our need okay so let me show you the example so in this case let's add a date called moment if you see this moment is importing from the moment only let make sure yeah and then here we say do format and here you need to give the format date formats for for example I want uh month we say sorry let's say uh date month and then we'll say y y y okay and I think that's good enough let's save this one and let's test this out so now if I go to our application let's add some expense inside the home decor we'll say um bathroom we'll say 350 or let's say 3,500 let add this expense and boom if you see now we got the actual date okay now obviously uh from the next time we will get the actual date okay so this is the quick fix that we did and now let's go back to our original expense list table now once we have this one right now on the click of this delete icon we have to make sure we'll delete this particular record from the table so let's do that so for this trash I'm going to add on click event and we'll say delete expense and obviously here I will pass the expenses information here I will write a new method constant delete expense like this and we'll accept the expenses just write expense I think yeah now inside that we need to write uh Delete query now here we'll simply addite constant result is equal to await so let make this as a Sync here we'll say D do delete operation and from uh for the delete we need to provide the table name from which you want to delete so in this case we'll say expenses and Dot uh here we need to write where condition inside that we write equal and here we simply need to provide the ID so expenses do ID is matches with the expense do ID as simple ASE that and Dot returning okay so it will return some information and now once we have the result we'll simply toast the message that um expense deleted and save it okay now let's test this out so for example if you want to delete this expense right we you can delete it just to make sure one more important thing here I will make the cursor pointer okay so if I delete this one so we got one error it's saying the equal is not defined so make sure to import this equal and save it so if I delete this one so it's saying experence deleted see but if I refresh it you will see that change now obviously we have to make sure whenever we uh Delete particular information we have to to refresh the data so here we'll simply uh return some value we'll say refresh data so this method we going to pass back to a parent child from this prop now if I go to this page.js where we added this expense list table component here I will use this ref data and simply I will call this get budget information similar like this in order to update our list okay now if I refresh this once now we have to record if I delete this one you will see the change immediately not only uh we are updating this latest experience information but the budget information also get updated now if I add something we'll add for example kitchen decod and here I will add this particular value let's say 4,000 we click add new expense boom see it's get added if I delete this expense see immediately it's get deleted and you will see this two operation toast message as well same thing obviously you can do for for other uh expenses as well okay here we'll say uh I change it cost me 12200 dollar I will say add new expense and boom okay so that's how guys you can add the expense uh and you can maintain the expense according to your need even you can add it you can delete it and depends on your amount obviously this uh budget is also get updated so I hope guys you understand how easily we added this uh or fet the latest expenses and add action for that one now we need to give option to delete the given budget so inside the my expense once user open the or budget right um for example if I open any of these budget and here on the right hand side we want to give option to delete this particular budget so obviously we going to ask confirmation uh before deleting the complete expense and the budget as well so let's go back to our application and inside this uh expenses page we have this my expenses uh text right which we are showing over here so on the right hand side we want to add a button so and simply We'll add a span tag inside that I will add a button and then we will call it as a delete here I'm going to add a trash icon as well so simply uh from the Lucid react I will add a trash icon uh for this button I add a class name is equal to flex and gap of two and this is how it will look now we can add the variant if I go to this button component from the shads here it has a variant called distructive so let's go here and add a variant is equal to destructive so it will convert into red color now let's bring everything in one line uh let me remove this span tag and let's see so it's coming down so let make it this as a FX and just do justify between something like this see uh also I will add item to be in the center let's bring this down and save it now on the click of this as I told you we need to show the confirmation so let's go to the shad and it has a option one component called alert dialogue so if I open this one it will ask it will show the dialogue like this okay so similar kind of dialog we wanted so first copy this uh uh let's install this component first and then in order to use it let's import this all the import statement let's paste it here and then copy this alert dialogue and here on the click of the delete button we want to open that particular dialogue right so let's add over here so I added this alert dialogue and then this is the trigger okay where uh it opens the alert dialogue so I will put this button as our trigger and make sure to add as a child let's save this one and let's see whether it's working or not so right now if I click delete button if you see we have the confirmation okay so here I will just change some text message here I will say delete your current budget along with expenses okay and remove your data home the server so let's save this one and it has option called cancel and continue now on the cancel obviously if you see uh it will close this window but on the continue means uh obviously user want to delete then we can add on click method to this one so here we'll say delete budget and then I will create a new method called constant delete budget like this okay make this as a sync and save it now for the delete we'll write constant result is equal to a we DB Dot delete and the uh here we need to provide the table name now if you if you wondered where did I get this query right if I go to this uh dzer orm uh documentation right here we have the option called delete and here you give the example how to delete okay with this uh we can you can add the condition as well so same thing we are going to do over here so obviously we want to delete from the budget uh table and we put where condition and inside this where we'll add equal U make sure to import this equal as well it's already there and inside this equal we need to give the budget uh let me add budgets do ID is matches with the given budget so from the par. ID okay and then it will returning something some data now we console do log and we'll just print the result now we might get an error okay let me uh first uh run this one this particular uh logic here I will add documentation like use to delete budget let's save this one let's go back to our application and Let me refresh this once now if I click delete let me open the inspect panel to observe our uh error so if I click delete so here we got the error that on click it will be ignored okay so let make sure the spelling is correct let's clean everything and click delete now and click continue so if you see we caught error that update or delete on a table budget violate the foreign key constraint okay it means this particular uh budget key is already connected with our expense table so inside the studio if you go over here right and the current experience of the budget ID is three so if you see for the three we have some of the expenses attached to this particular record so we have to make sure first we will delete this particular record and then we'll delete the budget so let's go back to our application and inside this logic here uh let's delete the budget so here we say delete sorry uh Delete expense result is equal to a wait let me bring this down DB Dot delete here we'll say the table name which is expenses then we write where condition inside that we have to provide the on which column we want to delete so we'll say expenses dot budget ID comma params do ID okay so this is how you can delete and then once you here we can write the condition if delete EXP result is successful then it also delete the budget okay and even though if you did not write result that's fine so let make sure everything is correct here you can write do returning and save it now let's test this out so let's clean everything we I will click delete say continue and obviously we are not getting anything because we did not returning or consoling any data but we did not get any any error as well also it's showing on the screen because uh we did not update or redirect our screen right if I refresh this screen you will see nothing on the screen it means this particular ID 3 is getting deleted Let me refresh the screen and You observe the ID3 record is now deleted not only budget but it also deleted the expenses as well okay so that's how you can delete and at the last you can write the toast message budget deleted and then we want to redirect it to the uh previous page so it means to the budget page so let's add that one as well so if I going to dashboard this is our budget page this is the route so before that one you have to define the initialize the route is equal to use route use router from the navigation and where we are Del in here I will just say route. replace and then you have to give the path as simple as that and save it okay now let's test other one so for example uh let's say uh car maintenance okay and we want to delete this record so I will say delete continue and boom if you see it's saying budget deleted and also from the dashboard budget our latest data is also updated and it's not showing that deleted record so that's how you can delete your existing budget and obviously make sure that obviously before deleting it right you will show the confirmation message otherwise it will get directly deleted by mistake as well so make sure to uh add the confirmation dialogue as well now it's time to add an option to edit the given budget in order to edit the budget uh we going to give a button over here okay so we'll add one edit button button along with the delete button over here and once user click on this button we can show the similar kind of dialogue which we use for to create a budget obviously we cannot use the existing component because this functionality is different than what we want to do also everything the layout will be same only thing that uh by default uh we will pass the existing selected budget in order to edit and we will set the value or default value for this input and once you are click on update input after changing the value then we will update value accordingly so let's go back to our application and then inside the expenses where we have option to delete right so over here let me yeah if you see we have this uh Delete option correct uh nearby that only we going to add one more option so after this alert dialogue let's add a um button and here we'll say edit let's add it before the delete on okay let's save it and let's see how it looks so if I open this budget we have this edit that's good but let's wrap it in One D so edit and delete so it will be on the right hand side like this obviously we need to make this as a class name Flex gap of two item to be in the cender and to this edit I'm going to add a pin icon something like this let's see or we'll say pin box yeah and then for this button I'm going to add a class name we'll make it Flex gap of two okay now we have this edit button now on the click of this edit button obviously we want to show the edit dialogue correct so inside this component folder let's add a new file and we can call it as a edit budget. jsx add the default template and save it like here okay now obviously uh on the trigger of this edit we want to open the dialogue right so instead of keeping this button over here I will put it inside this edit budget like this for now okay and here I will add the edit uh budget component let's save this one and make sure nothing get changed obviously button is not defined inside this edit budget so let's define that one let's save it and obviously pin box is also not defined and now if you see nothing get changed okay now if you remember we have a component in order to create the budget right similar kind of component I will copy it so whatever the dialogue import statement we added I want to use that one so I will copy this one we'll paste it here and then from the create budget uh this dialogue I will copy the dialog everything as it is and then I will paste it after this button but only we need to need to update is the trigger because we we want our button trigger right so I will copy this edit button and paste it here okay and everything will be as it is we will keep this open Emoji picker uh make sure to import the button which we already did we need to import this Emoji picker as well and if you go to the create picker right whatever the uh use State you have copy all of this used State because we want that one and then we'll paste it here okay make sure to import this use State obviously we need to mark this component as a client and then save it and make sure everything as as it is obviously here we'll say on update Budget on update budget and then we'll create a new method we'll say on update budget and save it now let's go back to our application here we need to Define use user so let's define that one the input is not defined okay so that's how because we just copy paste and there lot of things is missing so make sure to add this all the input sorry all the input statement and now everything's good now if I click on edit see you got the box right but this is all the empty obviously we have to make sure this information the budget information we will pass to this uh budget uh dialogue right here we need to say update budget and the but name also we'll change this update budget okay now uh the thing is we need to update uh sorry we need to pass is the budget information so to this edit budget I'm going to pass the budget information which is selected okay so if you see we have we are getting this budget information right this budget information we will pass to this edit budget so here we'll say budget info as budget info okay I'll copy this go to edit budget and here I will accept it here as a props my bad like this let's save both the files now you have budget information so by default if I go to the input right here you can provide the value as budget info. name let's save it and let's teste this out if you see we have the home decor now you obviously right now if you see you are not able to change this one because you said the default value right so so instead of providing value you can add the default value like this and then save it and now you can able to update this value as well okay same thing you have to do it for the other input so here we'll say default value and we'll say budget info. amount uh here we'll need to say amount and then save it and one last important thing is to update the Emoji picker so here right now uh we need to add the default Emoji picker here we'll set the emoji icon as okay so we'll copy this icon from here dot uh emoji icon or just icon I think so we we have icon property right and save it now if I click edit you will see everything is there right now if I change to him home uh if I want to change this budget for example now if you see I can able to type this budget as well okay also you have to make sure to update the value over here so here if you see budget info. name and then budget info dot what is this uh amount okay so here I'm going to add a question mark so that you will not get any error and now if I click edit see you got the everything is there now the button is also enabled because previously button was not enabled right because we just provide the default value which is not considered as a inputed text now we need to write logic in order to update the data so here we'll say constant result is equal to DB sorry await make this as a sync we'll say DB dot update we need to provide which uh uh table you want to update so in this case we'll say budgets then value uh so here we need to set the value and then here we'll pass everything okay everything in this is name as uh name then amount as amount then and the last important thing is the icon as well we need to update so here we'll say emoji icon and then that's all I think okay because we don't want to pass update ID or any created at and all and here we need to write um where condition equal sign make sure to import this equal and then here we'll say budgets. ID matches with the budget info. ID okay and then here we'll say returning and if the result is successful mean if I result we just tost the message that budget updated and then save it so let's test this out so right now we have 30 3500 budget we'll make it 4,000 let's click update budget and boom if you see budget get updated if I refresh the screen uh okay we have this error so let's fix that one because this is important the question mark adding question mark is important so that it will give the option but if you see the budget get updated but it's not refreshed immediately so obviously you need to return as soon as you uh updated the budget here we'll say refresh data and then we'll pass this into the previous component which is parent component and to this edit budget I will just call get budget info and save it okay now let's edit here I will make 5,000 Let me refresh the screen once now click edit so if you see something is missing so here if you see if I click edit right the budget name and the icon is not getting updated so in order to do that let's add a use effect over here and in that one we will update the value so whenever we have the budget information then we'll set the value for example here we'll say set the emoji icon and then we'll say in budget info do icon let's check this out so if I click edit now we have the icon okay if I refresh this screen so if you see we have this uh error so let's add this one and here we add option that if budget information is available then only set the emoji icon okay so if I click on this one see we have the icon same thing we will do it for the other one so here if you even though if you did not set here that's completely fine and now set the amount as budget info do amount and set name as budget info. name let's save this one and teste this out if I click edit now we have the information now if I change this to 5,000 and update it see immediately here as well it's updated if I change this to for example 300 3,000 sorry and update it see it's updated okay so that's how you can update immediately not only that obviously you can update this one Al so if I change this uh house to something like this and home decor um budget will say and update see everything get updated immediately so that's how you can update your current budget information along with the budget amount also now in this section we are going to implement the dashboard screen so on the dashboard we going to show the users uh name we'll say hi and what are the name of the user then we going to show the three cards okay which will Define the total budget uh with what the user added then how much user spend from that particular budget and number of budget then we will learn how to add a bar chart and also you going to learn different bar chart and uh how to add it inside your react nextjs application then below uh to the bar chart we going to use the existing component and we'll reuse that component to show the expense list and on the right hand side you can show other content for example we can also show the all the latest budget and the list of that budget and obviously uh we will try to use the existing component so now let's go back to our application let's close all of this tab and then go to the dashboard page so right now if I go to our application this is the dashboard nothing is displaying on the screen so first thing uh let's add a d okay uh let me do one thing here here we'll add a class name we'll add padding of five then inside that we'll add h2 tag and here we'll say high and then we want to give the username so in order to get the username you have to write constant here we'll say user is equal to use user as we are using hook so make this component as use client now many many of view uh our uh students or viewers have question why I'm using use client at every uh page and why not using as a server see it's it's up to you how you want to develop your application right most of the things we are implementing on the client side so that's the reason I I make sure it's on the client side when we want to use some uh um information which you want to face from the server side right and uh which is quite quite independent then obviously I will use the server page but it's up to you it doesn't matter okay now once we have this uh user information here we'll simply add user do full name okay let's save this and you will see Let me refresh the screen once you will see the name of the user now obviously I will uh add a font bold text 3 XEL and after this one I want to add these two emoji icon okay so I will add it here and and then save it now if I go back to our application so this is how it will look like uh let me increase the size and after this S2 tag I will add a P tag and here we will say here's what happening with your money let's manage your expense and this is just kind of headline see like this and obviously uh here I'm going to give padding of it uh for this particular paragraph text I will going to add text of gray 500 little lighter now we want to show the cards so for that one I'm going to create a component inside this underscore component folder and we can call it as a cards info. jsx now add the default template and make sure here I'm going to add the card info page so card info and save it now inside the card info obviously we need to get the information first in order to display it on the card so here I'm going to write constant gate uh budget info so in order to get the budget info if you remember right inside the budget uh page we have okay let's go to the budget page here we have the budget list and we already know how to face the gate budget list right so I will copy all of this code because we'll just uh use the same logic so I will copy this code and then inside the dashboard uh let's paste it here okay now make sure to import all of these things obviously we already have the user then make sure to import use effect uh then we have to import this database the get table columns as well along with map withd oh that's already there let import the SQL to and here equal okay I think descending uh yeah descending order that also we need it and now it will return the budget list for us and it is we are setting it inside this set budget list de now this information we will pass to the budget list so here we'll say budget list we say budget list and inside the card info we'll accept it as a budget list and save it now if I go back here is saying use stage is not defined let's define that one and okay so it's still not defined oh here we have to Define and I think we are good we have one error it's saying the budgets is not defined so let's define that budgets uh schema so here we are using budgets so make sure to import that one and expenses as well and Let me refresh this ones and now we don't have any error now inside the card info we have the list of budgets now we have to calculate couple of things okay first thing let's define find the card and then we'll replace uh value with with actual data okay so inside the card let's define One D over here and then inside that we'll Define h2 tag here we'll say total budget then another h2 tag here we'll Define actual budget for example let's say 15,000 now let me wrap this S2 tag inside one more D like this okay let's save it obviously uh here for h2 tag I will say text small and for this 1500 I will make class name font bold text to excel let's save this one let's see how it looks see this one now obviously for this du I will give class name we'll say um margin top to 7 and for this du as this is a card du here we I'm going to give a padding of seven we'll add a border we'll make rounder rounded LG we'll make it Flex as well but wait just a second because we want to add the icon over here so for the total budget We'll add a piggy bank icon here I'm going to get a class name we'll say background primary let's see how it looks so this is our card okay and this is the icon which we are working let me bring this side by side side so it's little bit uh easy to code as as well now we have this uh piggy bank let's add some style to this one so we'll say padding of three height I'm going to change to 12 with also 12 and we'll make grounded full and take white perfect now we want this icon on the right hand side so for this particular do will make Flex item to be in the center and then justify between so it will be on the right hand side perfect next uh for this particular de right uh because we want uh three more like this see and on this if I increase the screen size right it's still coming as a stack so we want in one line so here simply I'm going to add a I'm going to add a grid here when the screen size is smaller I will set the grid column one and when the screen size is medium we say grid column three let's save this one and let's give a gap of five now if I increase the screen size see this is how it looks but if I decrease the screen size uh on the medium screen is two is not good let's do medium two on large screen we'll say grid column 3 okay and now try to change the size perfect now now it's look good now obviously here I'm going to change this icon uh here we'll say total Spin and here we number we'll say number of budget now for the total spin I'm going to add a receip text as icon and over here I'm going to add wallet icon from the Lucid react see it get Chang uh I think this value obviously is right now is hardcoded but we will change this in a moment now if you see right now we have beautiful all the cards now let's update this uh value with the actual value so here I'm going to add a constant we say calculate card info and for now I will I just want to console the budget list and here inside the use effect we'll call uh this particular method and save it now if I go back to the inspect panel go to the console here you will see the length now we have to calculate all the total spending together and uh obviously also we want the amount right now if you see this amount is coming as a string so we have to make sure this will be as a uh number so let's go to the schema and just f cck that one so inside the schema um where we have this amount uh not here actually uh let me go to this page uh dashboard let's go to the dashboard and here we are fetching we need to fetch amount as well so we'll fetch amount adds I'm not sure why it's not showing but let's do one thing or we we we'll convert it into the number uh when we are calculating okay so right now we have the budget list Let's ignore everything for now and here we'll Define a constant we say total budget comma set total budget is equal to your state and for now initially I will put it zero now uh here in order to calculate the total budget let's define l total budget underscore because it's already there we Define okay and this is the uh just uh sample one okay here we'll say budget list dot for each so for each element we calculate total budget is equal to total budget plus and then element dot amount now this amount if you see in the form of string so make sure to convert into a number so just wrap it like this and obviously we need to also calculate total spend so here we say total spend is equal to Total spincore plus and it's already number so we don't need to convert that one here we'll just say element I'm sorry element do total spin okay now U here we'll just console that one and make sure to Define this total span variable here we'll say total budget comma total span and I think that's enough let's save this one and let's refresh the screen once so right now we are getting 0 0 because okay so we have to make sure as soon as we have the data then only execute the calculate car info something like this and we have one error let's see what's the issue so refresh it and let's see if you see we have the total budget and the total Spain perfect now for in order to hold the total spin let's define that so we say total Spin and say total spin okay now over here we say set total budget as a total budget and then set total spend as total spin okay now simply inside our card let me bring this one here we'll say total uh budget and here we'll say total spend not this one this one and save it now if I go back let's refresh the screen and boom if you see now we have actual total budget and the total spend amount now number of budget is quite simple we just need to give the length of the budget list so here we'll say budget list do length and save it and if you we don't need a good dollar sign something like this if I refresh the screen this is how it looks and boom now instead of uh showing this car because it takes some time to load the data right you can also uh show the gradient effect or skeleton effect right it's quite easy so let's do that as well so here we'll simply add a condition if budget list is there then show this du otherwise obviously we need to wrap it in one de so let's put this inside one de here we I'll wrap it like this and then not outside we want this in side and here something like this and now you can Define One D and inside that you can add the skeleton effect and then over here we'll simply add our empty array so it's one 2 and three dot map we'll say item comma index and the arrow function here I think we need to W like this and inside that we'll simply add a du here we add class name height of let's say 160 pixel width we'll say full background SL 200 animate Spin and then rounded LG so I think that's enough let's save it and let's test this out I don't know why it's not coming because maybe we have the budget list and you can add a condition for example budget list do length is greater than zero maybe this condition will work I don't know and then we are showing this particular du obviously for this du you can add the same class and save it so here make sure to add circular braces okay and make sure to add animate pulse instead of Spin and now if I refresh this one see we got the animated effect uh let's change the height to maybe 110 if I save it boom see so that's how you can add the skeleton effect to your cards now next we want to add a bar chart so in order to add we want to add only in the 1/3 of this particular section so let's Implement that so inside the uh dashboard so this is our dashboard over here I will add a du and inside for this du We'll add a class name we'll say grid grid column uh one when the screen size is smaller but when screen size is medium we set G column three now out of this three column we say do here we say class name column span uh one sorry uh let's add one uh not one but let's add a two over here when the screen size is medium okay and one for the other content so here we can show the chart and here we'll say other content let's save this one and go back to application and if you see we have the chart uh the chart column and the other content column perfect uh for this du I'm going to go add margin top to six perfect now the next thing in order to add a chart we are going to use this rechart so this is the very powerful library in order to add a chart inside your react application and it's very easy to use as well so let's go to this uh first obviously we need to uh install this rechar so let's go to this site and go to the documentation in order to install the rechar this is the common line uh to install this one so just uh install this through the uh command line and then in order to add a bar chart go to the API here you will see a bunch of different type of chart that you can add it along with the properties you have area chart bar chart line chart pie chart as well okay but obviously we will focus on the bar chart and this is a simple examp example that's how you can add a bar chart inside your application okay obviously you can modify according to your need but now let's go here and let's start adding the bar chart so for this one I'm going to create a new component inside the component folder and here you can call call it as a bar chart. jsx let's add a default template uh before adding bar chart I will rename this one so bar chart dashboard and then we'll add a default template now let's import this bar chart uh dashboard component let's go here now to this bar chart dashboard component we need to send the budget list so here we'll just say budget list and the budget list and inside the bar chart dashboard component let's accept it here as a budget list now obviously with the with the help of this list we want to uh uh display our bar chart before this one we need to add a bar chart so here we'll say bar chart and if you see it's getting added from the recharts inside uh this bar chart we need to Define width and height so here we'll Define the width 500 height I will Define 300 the data we need to Define so in this case is a budget list then you can give a margin as well so we say top uh five then right we say five left five and then bottom five and obviously uh if I save this one let's see on the screen what we are getting display so just refresh this one and right now nothing is getting display on the screen now here we need to provide the xaxis what we want to display so we'll say xaxis see it is inputting from the rechart and to this x-axis we need to provide the data key so in this case is name okay so we'll Define like this name because on the bottom we want to show the budget name y- axis is automatically will get calculated depends on the value that will Define in moment then you can show the tool tip as well I'm going to tell you what is tool tip then here we'll say Legend and then last is bar so if you see this bar is importing from the rechart now you can Define the bar how you want so here you need to provide the data key here we say total spin uh stack ID I will add like uh a and fill fill in the nothing but the bar color here we'll say hash for 845 D2 and close the tag same thing I will copy here but in this case I will say uh data key which is amount obviously whatever the you this you are passing to this budget list that field name I'm giving over here only thing that now I'm going to change is color so C3 C2 FF and save it now if I go back to our application and boom if you see how beautiful our bar charts is looking on the screen where we have the total span and everything now if I hover on this one this is nothing but the tool tip okay which actually show how much you spend and how much amount or budget it has next uh once we have that one let's add a border so we'll add a class name we'll say border rounded large okay we can give some padding so we'll add padding of five and let's see how it looks perfect if you don't want to give margin you can just remove this margin and that also works okay now obviously if you have more budget it will display that budget as well now for this bar chart here I'm going to add h2 tag and here we'll say uh activity uh let's add a class name font bold text large something like this and let's add a margin top 7even perfect okay so that's how you can add the bar chart chart inside your application now you can change this color depends on your requirements so I hope you understand how we easily added the bar chart with the help of rechart uh library now on the right hand side which is uh the other content right which we want to show here we can show the budget list so simply we we already have the budget list we'll simply iterate that budget list uh in this particular section so let's add budget list do map here we will say budget comma index and the arrow function so here we'll add a budget list item because we already have the budget list item and to this budget list item we can provide the budget and as a budget and here we'll add a key as a index let's save this one and let's test this out so if you see we have the list of budget so if you see right this is not correct the layout is not properly aligned so that's because let's fix this issue so inside the budget item if you see we wrap it inside the uh link right so let's do one thing uh let's wrap uh one de or maybe we'll add it inside this link and wrap everything like this okay now whatever the style you give this to this link I will cut from here and we'll simply paste to this D and then save it now if you see everything is working fine if I go to the budget nothing get changed perfect let's go back and now we'll give some margin so inside the page for this grid I'm going to add a gap of five let's save it and perfect for this budget item right here I can give uh let's add a class name We'll add a grid and we say gap of three let's see how it looks let's add five perfect and now we have the list of all the budgets uh here we can also add h2 tag and we'll simply say latest budget okay uh let's add a class name we say font bold text large and save it perfect and here now you can access the budget list if I open any of the budget immediately it will redirect to our expense page where you can add expense okay because we already have this particular budget item just we reuse this item inside our com uh this particular dashboard component so that's how you can add it now obviously you can add the expense list over here uh let's give a try and let's let me know in the comment section if you face any issue obviously uh we will add it add this one as well now it's time to display the expenses list as we already display this cards bar content and the other content which which is nothing but the budget list now in order to fet the expenses list we have to make sure we will fet all the expenses irrespective of the budget list but the only thing that that particular expenses will come under the given user who whoever user is loging to this dashboard so inside this dashboard here I'm going to create a new uh method and we'll call it call it as a get all expenses we'll make this a sync like this now let's define result is equal to await DB dot select from okay and here we'll Define the budget now inside the select we have to make sure we'll fet the only data which is uh belongs to expenses right so here we'll say id fet expense. id then we want uh name of the expenses so expenses do name next we want to use um amount again so it will come under expenses do amount and created at so again expenses do created at okay and we need to connect these two table budget and the expenses together so once we have this from here we'll say for example if you say right join or left join doesn't matter we'll say right join then right join with the expenses table equal and on which column you want to connect so in this case we'll say budget. ID comma expenses. budget ID okay then we need to write a condition where equal and then we need to write a users email depends on the users's email right we'll check if the budgets created by is matches with the users login email so here we'll say budgets do created by is user. primary email address. email address okay also We'll order by this one so in descending order on expenses. ID and that's all here we'll console the result first and we'll call this method inside the gate budget list over here we can call it right and then save it we can call it inside the budget list as well but that's fine now if I go back to our application let's go to this uh dashboard open the inspect panel go to the console and and then refresh this data now if you see we have the P at page number 50 which is nothing but this one we have the result here we got the six expenses perfect right now let's save this in one state so here we'll Define constant here we'll say expenses list comma set expenses list is equal to use State and then save it now if I come here we set the value of the expenses is result that's all okay I will give the documentation light used to get all exp expenses belong to users now once we have the all the expense list the only thing we need to do is uh to add into the existing component so after this chart dashboard here I'm going to add expense list table and to this expense list table we need to provide the expenses list so here we provide experience list it also has one more prop called refresh data so whenever we delete the particular experience right we are we already implementing this refresh data so in this case I will refresh uh refresh this G but budget list and obviously inside the gate budget list we also have the gate all expense data and everything's look good let's save it and let's go back to our application if I scroll down I don't know whether we have the data or not but if you see now we have the data with the expense List information obviously uh let me check why the text is not showing so if I go to this any of the budget okay we have this latest expense same text I'm going to give before this one we can simply uh add this text over here okay so instead of adding the text let me bring this down over here right we can add it inside the experience list something like this let's save everything let's go back inside the dashboard and boom we have this led expenses if you think we want to give margin let's give some margin so for this one uh we'll add margin top to three perfect and now we have this beautiful latest expenses along with all the latest expenses irrespective of whatever you have now obviously if you want to delete something for example if I delete this one boom it's get deleted not only that but the budget is get also updated immediately okay so that's how you guys you can add the expenses list as well if you have any question any doubt let me know in the comment section now uh before moving to the next chapter let me show you one more important thing right now as we are developing our application completely responsive but if I go to the inspect panel and if I go to the Chart section if you see this chart is not responsive even if I select the budg uh this mobile see the chart is not responsive as we expected okay the question is how can we make this responsive so for that one uh the react rechart also provide one more uh components so let's go to the our uh chart component first so this is our bar chart right let me close uh all of this tab if you don't need it just close that one and this bar chart we have right so what I'm going to do um we I'm going to wrap this bar chart inside the responsive container see and this responsive container is importing from the rechart so let's import that one and wrap it wrap your bar chart under this response container then to this responsive container we'll provide a width okay for example let's say you can provide a width of 80% okay and then you can provide the height you can keep the height as you want for example uh I think I give a height of 300 let's say 300 now you can remove this width and height from this bar chart and then save it now if I refresh it if you see nothing get changed but the magic is here now if I refresh this data let me increase the size if you see depends on the size the bar chart is getting updated immediately it doesn't matter you are on mobile view or V see okay so that's how guys you can uh add the responsiveness to your bar chart also if You observe completely not only bar chart but our complete layout is getting updated see okay now this expenses the budget list and everything so you can also update depends on your choice if you face any issue any doubt let me know in the comment section or you can access my source code the link is in the description also uh guys uh let's visit to tube guruji uh.com and here you can get the exclusive courses along with the source code just you can join it for uh $7 per month now now here I also implement the expense uh screen where I'm just showing the all the expenses okay and which we already uh defined or implemented inside the dashboard same thing I added inside the expense screen next thing we want to add uh the on click event means on the in the inside the budget section right once we added the expense name and expense amount we have to make sure it will be C I mean this particular text input will be clean for example if I add for example B we say $2,000 and add expense see now the B expense name is still there right and user have user again if you click by mistakely is get added right that's what we want to avoid it so what I'm going to do let's go back to our application and over here once user add the new expenses right here we'll just set the am ount as empty and then set name as empty okay but along with that we have to make sure we'll set the input value as for example for this uh name we'll set the input value as a name and for amount we'll set the input value as a amount okay so this default value you need to mention now save it and let's test this out so if I refresh the screen now if I put B for example there th000 and I click on add new expense boom if you see it's get added and not only that but expense name and amount will be clean out so next time again user need to add and that's what is expected another thing uh once we adding the data to the server right it takes some time to uh insert some record in that meantime we have to make sure we we will uh disable this button and not only that we will also show some kind of loading so let's do that so for that one I'm going to Define one state we'll call it as a a loading comma set loading is equal to use State and initially I will make it as a false here uh I just I will give here some documentation here we say use to add new expenses expense now whenever we add a new expense right here we'll simply add the set loading as a true and once we added the data we set the loading as a false not necessary if the result is true or false here also I will add the set loading as a false and now for this button here I will just Define if the loading is true right so if the loading is true then I'm going to add a loader so here from the Lucid react I'm going to add loader otherwise just show this add new experence as a text okay and for this loader I'm going to add a class name here we say and animate spin oh like this perfect let me format this document perfect okay so what we did if the uh it's loading right we are showing the loader and then uh it will show some kind of loading otherwise it will show add new experience as a text and inside the disable here I will add all or condition with the loading now if I go back to our application just refresh the screen if you see nothing get added here we'll say for example uh living room I will spend here $800 and click add new expense so right now we have opt error that it's saying loader is not defined so okay let's make sure to import this loader from the Lucid react save it and then uh let me delete this one okay because I want to again insert this one so we'll delete let's add it there and click add new expense and boom if you see we have that beautiful um spinner dialogue but in meantime it's get added as well okay so that's how you can manage your data also here if you observed I added this arrow for a back button okay it's quite easy just add this arrow and then with the help of router. back you can navigate to the back screen see so guys if you have any question any doubt let me know in the comment section so it's time to deploy our application on the cloud so that you can share your project with your friends and family so first thing first we need to deploy or push our all the source code to to the GitHub repository and from there we will connect our GitHub repo with the veral where we can deploy our application so go to the GitHub and if you don't have account create a new account here you can create a new repo and you can give the name for example let's say expense tracker uh you can make it public private I will keep it private and then create repo once you create this report right here you you can see you can connect this to the remote origin so make sure to do that but before that go to the terminal let's clear everything and then initialize the git once you initialize the git let's connect with to the remote origin so I will add uh use this command then you have to add git add space so it will add all of these files then you can add git commit d m and here you can write commit message here will say initial commit you can write any message and if you see now all the changes are now uh committed now only thing you can do is to push now you are pushing for a first time so in order to push uh for first time you have to push it to the origin main so I use this command and boom now your all the code is push to the uh GitHub repo okay except the. loal file if you see we don't have that file correct now next thing you need to do is to go to the worel and if you don't have an account create a new account to the wor.com once you create the account you will see the dashboard like this here you have option to create a new project so click on that one now inside this uh g g report right here you might get option to connect with with the other provider like you can connect with the gitlab you can connect with the bit bucket now I connected with the GitHub and you will see my project name along with that just now I push right then click import here you can give the whatever project name you want I will say expense tracker to then you can add the some variable if you want now don't touch any of this setting because obviously on versal will ATO detect that this is the nextjs project and depends on that one it will set all the variables and all then inside the environment variable here you need to paste all the environment key or variables which you have so inside the. loal file copy everything as it is and then just paste it here and automatically it will detect each key and their corresponding corresponding value okay and now just you need to deploy this one so let's say deploy and then it will take a couple of minutes to deploy your application now it's getting bill then it will deploy the summary and then it will uh add a custom domain so we'll wait I will pause the video over here and boom our application is now deploy and it's live on the given domain if I click on this preview you will see this particular domain which is experience- tracker. tugur g.v. apppp and here you will see the landing page of our application now here if I go to this get started okay and and try to login with my any of the account continue and obviously I redirect to this one but if I go to the dashboard and boom everything as it is all the data and everything will be there if I go to the budget here I can obviously can create new budget and here you will see all this information so obviously you don't need to do anything from here and everything is set up now now here one more important thing I want to inform you that currently the clerk inside the clerk if you go to the dashboard this is inside the development mode right and for development mode you can only sign in up to 500 user now if you want to uh go to the production mode you can change this and you can create a production instance okay and you can clone the development instance as it is Click continue here you can add the application domain before going to the uh deployment now you cannot use this existing um overell domain right you need to be have some specific or own domain so that you need to add it here and then you need to add if I go to the organization and user authentication over here if you see right now it's a share uh credential but you can add your own custom credential by providing client ID and client secret key okay and this URL you need to add inside the Google Cloud uh service from there you will get all of this client IDE and client secret key as well so that's how you can add your own credential and then you can uh deploy it to the production mode or you can change to the production mode okay so this is very important but rather than this everything is now live and you can ready to use this application guys uh let me know how uh you like this video or not and if you really like this project let me know in the comment section share this video with your friends and family and let them tell that okay this is the one of the best application you will find on the internet and you can start learning this beautiful application send me the message on the Instagram about how and what project you are building with the help of the tube guruji project Channel okay so guys if you have any question let me know in this comment section if you still did not subscribe to my Channel please do subscribe like this video press notification Bell icon so that you will not miss any update from the tube guruji so see you in the next video

Channel: TubeGuruji

Views: 12,290

Keywords: next 13, expense tracker app react, expense tracker app free, expense tracker app project, expense tracker app nextjs, next js expense tracker, NextJs React Drizzle ORM tutorial, drizzle orm, Drizzle orm with nextjs, deploy nextjs to vercel

Id: pQoHvx0SoiA

Length: 245min 13sec (14713 seconds)

Published: Sun Apr 21 2024