MERN stack full project course for beginners

welcome to this MRN stack amazing course which  is going to teach you how you can get started   with a expense tracking application like this  from scratch and deploy it to the netlify for   the react and heruku for the node.js MERN stack is  a combination of mongodb react Express and node so   mongodb is the database we are using here inside  this we will going to use the Mongoose package   for the node.js then on the react side yes react  is there plus we have the material design for the   designing and react Redux for managing the state  along with that we are using the express.js from   the MERN thing e for Express we are using on the  node.js to create our server and creating all the   apis for authentication we are using the JWT and  using the passport package for the middleware and   doing a lot of things. let's first see what we  are going to create in this course and then we   will Deep dive into the structure of this course  so you can see this is the home page the expensor   and it's deployed on the netlify and the back end  is also deployed on the Heroku and it is directly   connected to the mongodb and mongodb Atlas so you  can see I have the expense of August and this is a   nice little graph of this expenses and showing all  the expenses I did on particular month this is the   aggregation and grouping from the mongodb then  we have a nice little form for the transaction   so let's try to add another transaction and if I  say 100 or maybe 1000 for Movie 2 and this is for   today click on server category server it should be  fun so you can see on the right side we have this   category tab that means if I click on category we  can create new category and let's say fun and this   is just uh icon thing I have created which is not  using but I just want to show you that how you can   connect different different things on categories  so click on submit and it will going to add the   the category on our list once we have this list  of the category that means we have it and now   once again we can go and say Movie 2 and this is  for the fun and that's good click on submit and   very soon it will be available here as a movie  too and since this is updated our graph is now   also updated because now in the September I have  spent 1210 rupees so this is the list of all the   transaction we did and it's for the August then  we have for September you can sort it any way you   want but if you don't like anyone you can easily  go click on delete it says are you sure I say yes   and finally it says deleted and it is removed  and graph is also updated 1200 instantly and   that one is removed from this list okay but what  about if I say this is going to be the new movie   instead of Movie 2 and if I click on update this  is going to update with Movie 2 to new movie and   obviously that is staying the same because we have  just updated the name but we can also update the   price and if I say update that's going to update  it to 2000 and you can see now September expenses   is raised to 2200 that is not the end yet because  we are logged in what if I click on logout you   can see I am redirected to the sign in page and  expensor that means the all the expenses I cannot   access if I try to access category I cannot do  that because these two are protected routes now   let's try to sign in and sign in here which the  account I have already created and you can see   I am directly on my home page now once again  click on logout and try to register register   as bit fumes and S and let's say A B C D at  gmail.com and not ABCD let's call it bitfumes   gmail.com and password is password click on sign  up and once this is sign up it's done we are   redirected to the sign in page and now we can do  the login with the credential we have created the   account and now you can see we are back with no  transaction and nothing even there is categories   available so whenever you log in or so whenever  you create new account on this app this app will   give you some of the demo categories you can edit  these categories and make it as your own if you   want so it is now updated and then you can add  another transaction for anything you say Pop Con   and I say this is fun once again submitted  once it is submitted it is added to the list   and graph is populated isn't it looks super  duper amazing application from beginning to   application deployment is all for you if you like  this video I'm going to share amazing tips and   tricks related to man stack and the best comment  will be treated as a prize money or not money but   price for some kind of course free course that  will be only be available once we reach 1000   plus likes on this course so make sure you  hit like and comment below about your view   about this course or anything the best comment  will be chosen after we reach the 1000 like   let's see in depth of what exactly this course is  including and what is the structure of this course now let's see what now let's see what  we are going to learn in this course   so we will going to start with setting up the mon  stack that means the react and the xos node.js   application then we need to add the mongodb atlas  and connect that with our Express after that we   will work on the creating the first transaction  form and then handling the cores and adding the   node mod why we are doing this you will see in  this course after this we will start with the   API body parser once again what is this and why  we are using it inside the course we will do the   first transaction from the form and store it in  the database after that we need to fetch all the   transaction we have completed inside the database  and show it on our application on the front-end   react side after that we can start with react  routes so that we can have a dedicated routes for   different different API endpoints we have for the  designing part we will use the material UI which   is going to give you the design you have just saw  on that demo after that we will do the designing   for the form with the material UI then we submit  the form and create the transaction table design   so all these things related to the material design  after that we will try to delete the transaction   and create the API for the delete transaction and  do the delete on the front end also after delete   we will complete the crud part of the transaction  by designing the update part and then updating the   API that means creating the update API for the  transactions after that we will use the react   router Dom to have the different routing system on  the front end on the react side not on the express   then we will do the registration form create  the registration form and actually perform the   registration form by creating the register API on  the express side storing the user with the hashed   password inside of the mongodb then once we have  the user we will use the JWT to create a token   from the login detail of the user and then return  that JWT token to the front end Now using that   jwd token we can authenticate the user and for  that we will going to use the password passport   library for the express.js so then we will use  the passport JWT strategy for the Authentication   now at this point we were all using the  endpoints and the secrets and the keys all   inside the hard-coded thing we need to move that  on the dot EnV file on both sides on the front end   that means react and the node site then after that  we will use the top level component to create the   middleware for our react site so that if user  is not logged in that user will not be able to   visit any protected route after that we will just  say how we can validate a JWT token so that every   time user doing something that token has to be  valid and then we can say that user is logged in   finally after that we will use the react Redux  store so that we will manage all the state on   our react side that will be helpful after that we  will create the auth store for the react and then   we will clear the express and node application  by creating the controllers in our application   then we will use the transaction of the users that  means the transaction only for the logged in user   we don't want to show all the transaction we have  in the database so then we will do that after that   we will work on the categories for the transaction  we will add the category then we will do all the   crud part of the category and finally the most  exciting and amazing part is adding the graph   monthly graph aggregating the data as the monthly  monthly and then finally deploying our application   to the Heroku for node.js and netlify for react  I believe this is the best course available on   the YouTube or in the internet to learn about  the money stack from scratch to the deployment   if you like this video Hit Thumbs Up And  subscribe to bitfumes YouTube channel don't   forget to do that because channel is having  a lot of amazing courses you will going to   love from these collections so make sure you  subscribe and let's now start with the money stack to get started with our man projects we have  created this month project directory which is   empty now let's create two directory which is  one for the client and another for the server   so I will create a client and another I will  create server and now what I will do I will   open the client with vs code like this or if you  want you can directly open this mon project full   project in vs code and then you will find these  two directories here okay so the very first thing   we have to do is we have to first go into the  client directory from the terminal and then create   a new react project for that once we have say that  CD into the client and like that and then we say   npx create react app and then we need to call our  app but since we want this project to be created   inside the client directory instead of giving the  name we can just say dot and then if I hit enter   you will see it's going to create the react  app in our client now it's asking for some   permissions let's say yes and then wait for  some time to complete this and now you can   see the react application is done so we can  simply say npm Run start and it's going to run   our project on localhost 3000 and here we have  the react application but since we also need to   work on the server so let's create another tab  in here inside the vs code go inside the server   and then first since we need to create  the JavaScript project we will say npm   init and give the Y flag so that it will  not going to ask me any question and once   we are done with these things  then we need to Simply install   Express and once this Express is installed  we can create a new file called server.js   now inside this server.js first we need to say  constip Express uh or I can simply say import   Express from Express and you will say that  hey sarthak this Express this import is not   going to work in Express but make sure the newer  version of Express supports this import system   so once you have this you can simply  say const app is equal to express   and then let's call this so we have this app  and now what we need to do app dot get when we   get on the home page then what we have to do  we just need to say here like response which   we can get from here risk request and then  response so response dot send and sending   hello world okay now we need to test  this thing so we need to start the server   so let's simply say app Dot listen and we  need to provide the port so at the top I   just say const Port is equal to let's  say 4000 because 3000 is for the react   okay so now I say the port which I have and once  everything is done then I say console DOT log   server is running at HTTP colon local host colon  4000. okay everything is done so what we have to   do let's go on the package.json and create a new  script this script is called npm run let's say Dev   and here we need to say node server dot JS so  we are going using node and then calling This   Server file so inside this make sure we are on  the server on inside our terminal say npm run Dev   and now it says some issue warning is typing  import so remember I told you that this import is   working with the new Express but still it's having  some issue there is one thing we need to do to use   the import statement here we just need to set  the type is equal to module in our package.json   so here we just say type is equal to module  like this once this is done let's try to run   the server and you can see Server is running  so let's just click here and see that hello   world is here so we have successfully created  our backend and the front end that means the r   from the Moon stack which is react and express  a node so we are using node and the framework   of node as the express so we have used the n and  the E it's only time for the M which is mongodb to get started with mongodb you need to visit  the mongodb.com and then we are going to use   the Atlas product from the mongodb which is  just the cloud version of the database that   means we don't have to install the mongodb  in our system so just click on the atlas and   after that you will land on this page click on  try for free we are going to use the free tier   scroll down and sign up with Google and it's very  simple just choose any account and you are done   so once you select your account you are done  with that you will be asked for some of the   questions like this kind of things so it's either  hey I'm done with these things app everything is   fine I accept your policy and after that it will  say welcome to the cloud database from mongodb   and then we will have another page where it will  ask you for the personalization so it simply ask   for what kind of what is your goal to use this  mongodb Atlas so I'm learning mongodb and what   kind of application you are going to create so I'm  going to work on a simple personalization and the   language I'm using is obviously a JavaScript click  on finish and after that it will going to ask you   for which cloud provider you want to use and which  tier you want to choose so I'm going to choose the   free tier you can see this one so click on Create  and then finally it says on the free tier you will   use the shared one shared server and I'm going to  select the AWS and at last click on create cluster   so you can obviously give the cluster name as you  want so let's give this bit fumes monsters Man   Simple create cluster and now there is a capture  thing so chimney is where the chimney chimney and   chimney okay so verify and now it's creating the  cluster so you can see here it says the cluster is   in provisioning and while it's provisioning  let's create the username and password   so username is bitfumes password is bitfumes at  the rate one two three click on create user this   user will be useful when we will connect to our  mongodb so you can see it says the finally the   cluster is finished and now its second step is  connect from from where you want to connect I   want to connect from my local but it's asking me  for the IP address instead of doing that from here   what I can do I can go on the database section and  then once we are here we can see we have this bit   fumes mon cluster we can click on connect and then  it's asking you for another option which is like   you can allow from anywhere which is just giving  this as the IP which is allowing from anywhere   click on ADD IP once this is done then you  need to choose from where we are going to   connect we are going to connect from our  application not from the terminal not from   the mongodb compass which is a graphical user  interface to use the mongodb and obviously not   from just the vs code so click on connect  your application and then we will get this   kind of code this is going to be useful when we  will connect from our Express server so here we   are and here we have our Express like this  but how do we connect to our mongodb server   for that we need to install our Mongoose so if  I search for Mongoose we can get something like   this or you can go on the npmgs.com to see how  this is going to work you can install this with   npm install Mongoose so let's install this and  see how we can use it so Mongoose is a mongodb   object modeling tool basically it just help you to  create the models interact with the models and do   lot of things so you just need to use the import  statement and after that you can connect on your   um database you have given so it's simple so  let's do that so I'm going to do import from   the Mongoose like this and finally we can say  Mongoose Dot connect and connecting where we have   that on here so let's copy this thing and paste  it like this we know the password is bit fumes   at the rate one two three and now everything is  done but since this is going to return a promise   you can see it's written as a weight so either  you can use this as a weight thing or you can   use the then so I can use the dot then part  where I will just say that hey console.log   console.log mongodb connection is successful  but if there is some issue then I just say   there is an error and I say console dot error of  error that's simple so we are connecting and if   everything is fine then say this message otherwise  just give me any error so let's see how it's going   to work so npm run Dev when I say Dev and you can  also change it to serve if you want so let's use   the serve or start whatever you want so I'm going  to use the serve so this time it says some issue   it says URI must include hostname domain name  and top level domain so what happened here is   our password is including this at the rate  and you can see we have another at the rate   so this is actually creating the issue so what  you can do you can go here on this and go to   the database access and here on this side you can  just edit your password so I can say edit password   and it will be a bit fumes123 only so let's just  click on show between one two three everything is   done update the password and now let's go and  remove the at the rate from here and then try   so first we need to kill this and npm runs  serve so you will see that first we are getting   the server is running and then we are getting the  [ __ ] connection is successful so congratulations   mongodb is really successfully connected but  instead of using then when we use the await   it will going to wait for the mongodb connection  because this is we want and after that we can do   the console log like this so at this point first  you will get the mongodb connection you can see   this and then it will start our server everything  is fine and now let's move to the next thing so how do we get started with our expense app so  first I need to have a form where I can add that   transaction amount transaction detail and the  date of the transaction so let's do that for   that I will go on the client side that means  on the react if I go on the source directory   you see a lot of files I have but the interesting  file is app.js here we have everything which you   can see here inside this so what I'm going  to do I'm going to just remove everything   and then I will remove this class name also and  here I will say hello world and then you can see   now I don't need this logo fit because logo is  not required then in this index dot CSS I don't   need all these things because maybe when we use  any CSS framework we will use that right now we   are not writing any tests and we don't have any  app dot CSS so everything is done we just remove   this app.css from here and let's see what we  are getting and yes we are getting hello world   now instead of this hello world what I can do I  can create a simple form so we'll create a form   and this form will include first one  input field which is for our type of   it's going to be a number and  we can call it placeholder as   enter transaction amount similar to this I also  need the description so description is going to   enter transaction details and finally we need  the this is not going to be the this is going   to be the text one and finally this is going to  be the date type and like this and at the last   we need a button which is just going to submit  so submit and here it's going to be the type of   submit okay so this form is done you can see  the form is ready let me Zoom this for you   which is looking very ugly yeah I know  but it's fine okay so how do we do that   so first what we have to do we need to say on  submit of this form I need to create a handle   submit so handling the submit inside this  form and then we have to create a function   which is going to just say console.log  of working that means our form is working   so let's click let's first open the console here  and then click on submit and you saw that it was   a glimpse of that that working and then its reload  so what we have to do we need to say that hey just   e dot prevent default that means just prevent the  default submission of this form so for that let's   click on submit and yeah it's just working and it  is stopped okay so that's good but we need to get   the amount so let's say we get some amount we get  some detail and we have the date then we need to   submit this but how do we get all these things for  that we need to create a form so we say use state   and we create a form an initial value for the  form is amount is going to be let's say null or   maybe we can call it 0 then detail or maybe  description is empty and date is also going   to be empty or maybe I can use the null nice  so let's import this one and this use state   you have to import it uh so I will say import use  state from react okay that's done now what we have   to do whenever we write something inside any of  the input we should fill the respective form field   so here on this input field I say on change I will  say handle input create a function called handle   input and here also we get the E that means  the event and then I will say console.log of e dot Target that means event dot  Target so whenever we write on the   number that means the amount it should  give me some value here so let's write   yeah you can see we are getting the target but  then also we can say give me the Target dot value   so that's also going to work so just reload it  and type you can see whatever I am typing I am   getting here that's cool so what next next is  we need to set the value as the default one so   I say value is equal to form dot amount and now  whatever this amount is it's going to stick here   so now this time if we try to change you can see  although we are getting but we are not changing on   the input field because then whenever we handle  the input we need to set the form so we say set   the form it's an object so spread the form details  whatever we have but only update the amount field   and that is going to be the value which user  is typing so reload and you can see everything   is fine we have removed the console log so that's  why it is here but if you are having this reactive   Dev tool then you can just click on here on  the component and you can see State amount is   whatever we type like this group that's good now  finally we just need to give the name as amount   here similar to this I will give the name as  description and name as date why I am giving   the name because now I will paste these two things  so that I can get the change for every input field   and instead of hard coding this amount I will  say e dot Target dot name so whatever the name of   that field is and we need to put that inside the  square bracket so that it will evaluate the value   of e dot Target dot name that means the input  name so amount description and date in this way   we can see okay so I think something is  wrong yeah so it should be description   description and this should be date wow so this is  good just type something type something choose a   date and you can see here all these things are  filled and now what we have to do whenever we   just submit this form we submit we can just say  that the console log of the form we have okay   it says the value prop on input should be null  should not be null actually so we are making this   date as the null so we can make it empty string  reload yeah that's good so yeah here we are here   we are choose the date submit and you can see form  is here so what next we need to just send this   form to localhost to 4000 which is our server  where we have our apis now how do we do that   we can say fetch and fetch with the HTTP colon  localhost colon 4000 slash we will call it as the   how we can call it transaction so transaction we  are going to create the new transaction but since   this is going to be a post request so we need  to give like method is a post and after that we   need to send the body body is form now we don't  have this kind of transaction API in our in our   server we will going to create that but for now  this is how it's going to work so we say const   response is equal to await and since this is  await we need to make this function as a sync   and finally we say uh console DOT log of response  okay let's see what's going to happen yeah we know   there is nothing called the transaction API but  let's see now what's going to happen so click on   submit we get obviously 404 but before that we get  this course error so course error is error which   is actually going to prevent any other website to  get or to post something to actually use any API   from any unknown URL so for localhost 4000 that  means for our server localhost 3000 that means   the react is an unknown for unknown URL so it is  not allowing it so how do we solve it let's see to solve the course error we first need to search  here and we say Express course and this is going   to be a middleware so we need to have this  course middleware so we just need to say npm   install course once this is done we can import it  and then we just need to say app.use course that's   it yes so easy so install this on our server make  sure this is on the server so CD on the server and   on the server side I'm installing the cores once  this is done let's then open the server.js file   here import course from course and then  once we have the app we say app dot use   of the course now this is done so is this  going to work let's see so we will go here   on our front end that means on the react side  we type something and then click on submit   and still we are getting this course why we are  getting this because we have not restarted our   server so first we need to kill the server by  pressing Ctrl C then once again run the server   and it's successfully running  reload the page click on submit and   what happened it's still pending and you can  see it's pending so we are not getting any   course error this is really good thing but we  need to take care of these this transaction uh   API which we have not yet created but before  that what we have seen is we need to restart   our server every time we want any changes on our  server so instead of doing this I need to install   node mon so node mon is a package which is going  to be useful to restart the server whenever we   do any changes for that on the server side let's  go on the package.json and instead of saying node   server.js I will say known monserver.js and  once we do that restart our server and this   time it's now you can see it says mode node  monserver.js so let's try to change something   or basically I just want to save this file and  as soon as I save this file it has restarted   our server that's true finally it says that  empty response from that transaction this   is we have to create but before that what  I really want to do is you can see on our   react side thus that means the front-end side  we have the git ignore file on the server end   we don't have and I want to push all these things  in a single repository so that you don't have to   go on two different repository to access it so I  will move this git ignore on the root of this file   I just want to add something here so you can see  the node module folder is inside the client and   also on the server so just like we have done here  dependency we just need to say client slash node   module and then we need to say server slash node  modules okay so once you are done with this then   you will see that you will not get lot of files  on our git file now since we have removed the   getting node file from the client we need to also  remove the dot git file so that there will be no   um there will be no git repository inside  the react so now react doesn't have any   git repository so we need to create the git  repository on the root of our file where we   have both of the client and the server  so right now we can just say git init   and yeah you can see git is initialized and  then since we have the get ignore file so you   can see this node module file folder on both  side is not doing anything so we also need to   say that this public directory is required then  is there anything else which we want to ignore   for now there is nothing but everything is fine so  let's say get add all get commit with a message of   man stack now every time any lecture is completed  I will do the git commit for that and that's done   let's go on our GitHub slash bit fumes and  here I'm going to create a new Repository   and I will call it man stack 2022 okay and  then it's a public one create Repository   once this is done then click on these three  commands and then we need to run these three   commands from the root of our project where we  have both server and the client everything is done   and everything is pushed reload on the GitHub and  you can see we have the client we have the server   and we have the git ignore file that's really nice  and now let's work on the transaction API because   our client is sending the data to the localhost  4000 slash transaction as the post request to start creating the API let's go to the server  click on server.js and here we have the get   request similar to the get request let's create a  post request inside the post request I'm going to   say slash transaction and this is going to return  hello world for now and let's see what's we what   we are getting so once again reload this page  this is the react one localhost 3000 now click on   submit and this is taking time so let's just go on  the course because this is really with the course   so we are using App dot course what about here oh  I forgot to call this course so once you are done   with that you can reload and try to submit again  so click on submit and you can see we are getting   the response that's really nice so now instead of  sending the just to the string I'm going to send a   Json because apis is going to send the jsons and  here I say message is hello world so let's click   on submit once again and go to the network Tab  and this time you will see that we are returning   message as a hello world but on the payload  you can see we have to send a form but we are   not getting the form here it's an object object  so let's go to the react side on the app.js and   instead of sending a form I say Json dot stringify  of the form and now once again if I submit   you will see that yes we are actually sending the  form we have and we are getting the message so how   do we get the message from here so what we can do  actually we can get from get the data from here   and we should get the data like here so submit  we are getting undefined so we get the response   we need to do the response dot Json so data  is equal to a weight of response dot Json   like this and let's log the data so reload  submit and you can see we are getting this   message as the hello world so this  is how we are getting the data but   what next instead of sending this form we actually  need to store the data we are sending or the form   we are sending from the front end now how do we  do that first we need to see how we can get the   form for that let's just try to see what we  have when we say request dot body when I do this   and open my console go to the server the react  actually click on submit yes we are getting that   but now we are getting undefined because whatever  we are sending from our reactive we are not able   to get that on our server so for that we need to  search for Express body parser this is going to   be an another middle fear and just like we use the  coarse middleware we need to install this one like   here so open and make sure you are on the server  and now install this body parser and how this is   going to work it's very easy let's scroll down and  here you need to import it and then use like this   body parser.json because we are dealing  with the Json right now so first import   body parser from body parser and then after  course we can add it and now since we have   added the body parser server is restarted  let's try this once again click on submit   and you can see we are getting empty but why  because we said that this is going to be only   accepting the Json and from our front end  we are not sending any Json so if we see the   request we are giving so request is having  accept of everything content type is plain   text we don't want to send the plain text  so we say headers is going to be the content   type as application slash Json just by doing this  if we try once again to send it you can see we are   getting amount description and date that's good  so now we have the data from our front end so we   can simply destructure all these things so const  amount data description actually description and   date from our request body that's good now we have  everything let's try to store this on our mongodb now we need to store these data on our mongodb  and for that we already have the Mongoose with   this we have connected to the mongodb but to  store the data in our mongodb we first need to   create a model or a schema so let's click on read  the documentation and here it says that you have   to create a schema for your model a transaction  model so how this is going to work first on the   server end we are going to create a new directory  called models inside that I'm going to call the   model transaction dot Js this is going to be  the transaction model you can also suffix it   with transaction model but it's okay for now  so first you need to import these two things   and once you are done with that you say  transaction is schema is equal to new   schema so new schema and here you provide the  details of the fields you want to have so first   is obviously the amount amount is going to be  a number like this then we have a description   is going to be a string and we have the date date  is going to be the date field now we want to have   a created at field also so suppose I'm going to  add a transaction for yesterday but I'm adding   that today so we have to have the created at field  also which is also going to be a date field but I   want to have the created add field to be defaulted  to the new date so something like that the type is   date and default is date dot now something like  that so I think for both of these I will say   type is date and default is new date and yeah so  date is this and date dot now for the created at   like this okay this is done and we have easily  created it but what next we need to now actually   send this outside so we need to say export default  and exporting default what we need to say new   Mongoose uh how do we do that we can check here if  you scroll down Mongoose dot model we need to say   Mongoose dot model and give the name of  the model so I can say transaction and   then provide the schema so transaction schema  is here something like that you can provide   with the capital T since it's going to be the  uh model okay so this is how you create the   model Let's test this by creating the new data  how do we create that so for that you just need   to say new and whatever model you have created  and then once you provide the data inside the   parenthesis then say save it's going to be a  promise so await and finally done with this   so let's open the server.js and here we have all  these things name description date so say const   new uh const I can say transaction is equal to  new transaction and this is going to be in the   transaction model like this but it has to be with  a capital T and maybe we can also call this with a   capital T the transaction file so that's done  and now I call this with a small transaction   because this is the one which we are creating so  new transaction with amount description and date   basically it has to be like amount is the amount  description is description and something like that   but but since the key and the value is same  so that's why key and the variable is same   so that's why we don't have to repeat ourselves  once this is done then we say transaction dot   save and this is going to be an await process for  that we need to say this is going to be the async   once everything is done so insert inside this  message I say success you can return success   or you can return the transaction itself but for  now it's going to be the success let's try this   so first I say it's going to be the 20 rupees  I'm from India so it's rupees we are from any   other country just use your currency I say I  got ice cream so ice oops not here ice cream   when I got it I got it today so click on submit  and it failed now why it failed so let's see   the connection reviews so I think it's taking  time to connect and something wrong happened   let's restart the server and see okay so still  we are having some issue it says uh can't find   module of transaction okay so what happened is it  says I can't find the transaction dot JS file so   something is wrong let's see yeah it's done I need  to just say dot Js so since we have it let's try   this once again click on submit and success that's  good but how do we really verify that the data is   stored in the mongodb so we need to connect to our  mongodb from maybe from the shell or maybe from   the mongodb compass but instead of moving into  the database it's not recommended because since   we have the data so why don't we fetch the data  from the database and we don't have to visit the   database directly so next task is to show all the  transaction we have just below this so how this is   going to look so let's go on the front end on the  react once we are done with the form then we give   a br tag like this and then we use a div or maybe  a section like here and inside that we will going   to see we will going to have a table maybe like  that and then inside that we have a table header   so we call it table header table header  is amount then description then date   something like this and these  things will move on table head   like this and then comes table body and here  we provide a table row inside that we have the   table data amount is one description is something  something date is obviously something something   so this is going to be something like this  but we will make it Beautiful by using the   CSS and CSS Frameworks later but let's first  fetch all the data from the mongodb foreign we need to send a request to our server which  is going to fetch the data from the mongodb   so that means we first need to go on the  client side and server The Source actually   app.js and inside this we are going to  use the use effect so we say use effect   and here we are going to first import this  use effect from react and then I say fetch   transactions this is a function I'm going to  create and let's create anywhere you want like   this function fetch transactions and this is going  to be response is equal to fetch and this is like   HTTP colon localhost 4000 slash transaction now  you will see that these two URLs are exactly same   one this one is to fetch the transaction this one  is to create the transition but the difference is   in the method here the method is post but here  we are not providing any method so it will be   defaulted to get so once we get that this has to  be await and a sink after that we simply say const   data is equal to await response dot Json like this  okay and finally let's just log the data if we   check this right now yes we are getting something  for say th cannot appear to be child of T head so   let's see here everything seems okay but we will  talk about that later first let's clear this and   once again reload and you can see it says not  found so transaction is not found yes we know   that there is no API called slash transaction  with a get request so if I go once again on the   server.js we have the transition for the  Post request we need to create another so   let's say app dot get on slash transaction  and then we call it async request response foreign now here we just need to first get the  transaction so const transaction is equal to   transaction model dot find and I want to find  all so I'm not providing anything so this means   if I say empty that means it's going to find every  other thing and finally we say response dot Json   is going to be the transaction or if you want you  can call like this but make sure this is going to   be await and something like this so let's see  how this is going to work reload and still it   says not found that's not good and I think yeah  I have misspelled this so transaction has to be   um transaction like this so let's copy from  here and paste it here yes this is done so   let's go reload this page once again and we  are getting the data like here so finally we   can also say destructure the data so that I can  get the transaction yeah you can see we have the   transaction which we have created like ice cream  amount is 20 created at field we have date field   we have everything is Right everything is very  very nice what next let's create another state   to hold all the transactions we have so use state  and this will going to transactions it's going to   build plural and it's going to be an array so once  we have the transaction we say set transaction and   put all the data that means the transaction we  have okay so reload and yeah we have that ignore   this warning that's good and now we need to Loop  through all the data on our body the TR so here   I say transactions dot map and inside that we  get normal transaction TRX I call it and then   I will return this TR field like here okay so now  I say this is the amount so I will use the TRX dot   amount then TRX dot description and TRX dot date  yes so this is good and you can see everything is   really really nice finally whenever we do any  map on the react we have to say key is like   transaction dot underscore idv half reload  everything is good everything is fine so let's add   another one so 100 rupees for my for my coffee and  this is again I did I bought it tomorrow and today   actually click on submit yes this is the success  reload and that's added here okay what we need to   do next whenever we add any transaction we should  have it real time update this means whenever we   do this handle submit after everything is done we  just need to say fetch transactions which is going   to refresh the transaction once again so we don't  have to do anything we just say if response dot   okay so I say like if response dot okay then fetch  the transactions once again so this time I will   do 150 for a movie and let's get it once again  today submit and yes you can see movie is added   but what next I want I want to have the latest  detail first and not at the last for that let's   go here on the server on the server.js and here  we say after getting it I say sort but sort by   created at field so let's go reload  this oh I need to say sorting has to be   -1 which is the reverse and yeah you can see  the latest transaction is at the first wow so   we have done that but you can see now we are  filling up server.js with lot of things and we   have to create some dedicated file which  is going to handle only the transactions next as we know we need to clear this  server.js file with the transaction API   we have created or we can say that  transaction routes we have created   so Express provide the routes here in this  server directory I'm going to create a new   directory called routes inside that I'm going to  say and create a new file called transactions.js and in this first I am going to import from  Express and I'm going to import the router   once you have this router then what you have  to do you have to create the new instance of   the router so const router is equal to router  and let's call it then whatever we have defined   here we can move to our router transaction  router actually like from here to here now   what we have to do instead of doing this with the  app.get or app.post let's use the router.get and   router.post we also need to import the transaction  we have so that's going to import it from import   transaction from we need to go up a directory  inside the model we have transaction dot Js so this is done and after that  you can see everything is fine   at last we can say export default the router so  this file is taking care of the routes related to   the transaction only now here what we have to do  we need to import this route so import transaction I can say transaction routes from we have the routes slash transaction.js now just like we are using  this course middleware body parser we have to say   app dot use and what is the base URL so it's going  to be the this thing the Slash and after that we   provide the transaction URL so what we have to do  this has to be here and now let's check this if   it is working fine or not so since we are using  node Bond everything is restarted the server is   restarted and if we reload yes you can see we  are getting everything as it is but since we   are we know that these routes are related  to the transaction why don't we just remove   the transaction keyword from here and here and  move these this transaction keyword inside this   expert.js where we are connecting the routes here  so slash transaction will go to the transaction   routes okay and after doing that it is still  working as it is that's so simple but one thing   more we can do we can see we here we are doing  lot of things and these are actually the apis so   instead of calling it as a routes you can also  call it API you want maybe I can call it like   this but it's all totally up to you what you want  to call at the end it's going to work as it is if   you want to distinguish between the transaction  model we have and transaction route we have you   can call it transaction API this is also going to  work with the capital T so that we have a proper   consistency in our code so it it's going to be  transaction API it's going to here transaction API   dot JS okay so instead of transaction routes you  can also call transactions transactions API with f   okay that's good and it should work it's working  absolutely fine let's try to add one more thing   and this time I will say 200 for apple and  I will take once again the same date and   yeah it's added and we are good to go but once  we add we need to just clear these things also   so let's go on the react that means the client  side on the source app.js once we are done with   this if everything is okay we are fetching the  transaction that's good but set form to initial   form so we have the initial form which is like  this so why don't we do one thing we simply say   const initial form is equal to this thing  and now we can put that initial form here   like this and here initial form like this okay so  these two things are done and it will be cleared   these fields will be cleared once we submit the  new transaction on our application okay so that's   good we have cleared our server file but now what  we need to do we need to clear this you can say   database connection also we can move this database  connection to some other place so for that go to   the client side create database directory inside  that we can say mongodb we can call mongodb.gs   and what we are doing here we can just cut  and paste it like this then we just need to   import mongoose from Mongoose okay and then  we can just say hey uh import database from   database database slash mongodb okay like this  and we can say the database and this has to be   a function actually so let's create a function  so function and we can we can name it connect   and everything is like this this is going  to be the async function and just say export   default connect okay so we are saying connect  instead of database we can call it connect and   here we say connect the database okay so this is  done and we have some issue here it says can't   find module of mongodb once again it has to be  mongodb dot Js okay so yes it is working and   you can see it is connecting with the database  and doing the server thing so maybe we can say   await for The Connect and mongodb connection is  first then server okay everything is fine let's   move to the next topic because we have  to clear our app.js the react part also to give some styling to our application I will  open this material UI for react the website is   mui.com that's super easy so let's go and click  on get started here we have installation and it's   very easy we just need to install these three  things and running this command so click on copy   go it's very important to go inside of the client  first so CD into the client and then run it so   while this is running let's see what else we have  to do after that we need to have this Roboto font   and the icon so let's copy this and we have to put  that somewhere but where we can put it's going to   be inside of this index.html so let's paste it  like here and of font also that's done once this   is done then we are ready to use our material UI  so let's go on the usage so it's very simple you   just need to import the button from material and  then use it like this so let's copy this from here   and go to our app dot Js import this  one and use it something like this   but for just for now I'm going to paste  it anywhere so that we can just see how   it's going to look okay so let's go and yeah  you can see it's working the original size is   this I just zoomed it for you but you can  see everything is working absolutely fine   so we don't want this hello world button  here so first we will get started with some   navbar so let's close this getting started from  here go to the components and scroll down you will   see that we have this surfaces and app bar we have  now we can choose anyone you want there are lot of   available toolbars here so it doesn't matter which  one you choose we can configure it anyway so here   we have and we can copy this from here and then  go on our application inside this I'm going to   create a new uh you can say directory and I will  call it components inside this I'm going to create   app bar dot JS and then create this or actually I  have copied everything so just paste it like this   okay so we have to use this app bar in our  app.js so instead of this button let's say app   bar and this should be like this and we need to  import app bar from go to components and app bar   okay so this is done and okay so this  is done and let's go on our application   and now it says cannot resolve icons so when we  have started with this on the getting started   installation part we can see we have to install  this icons if we want to use it so once again   we are on the client side and paste it so that  we will also have the icons the material icon   okay so once this is done and it is done finished  so once again we can check and yes you can see we   have the app bar right here this is looking okay  but we can customize it later as we will move   forward but first it's not going to be a news it's  called Spencer which the name I'm giving to our   application so instead of news I can say expensor  because it's going to track your expenses okay   now next I want to have this form in a card below  which is going to be just below of this app bar so   just below the app bar we have the card so let's  copy this card thing and to have the card we need   to use card and then we have the card content then  typography if we want to write anything and then   card action okay so we need all these things let's  copy this and this has to be below of this app bar   so let's paste this and we need to import a lot  of things so instead of doing this here I will   create a new component and I call it transaction  form dot Js okay so let's have everything we have   so instead of this I can copy everything from  here so that we don't have to do anything and   we call this as transaction form okay for now  we just have to import this later on we will   change it with the form only but to check we just  say run transaction form and wow it is imported   okay so that's done let's see how this is going to  look and card seems like this but card has to be   not with this action so we don't need the action  part on the card so no learn more thing okay so   this looks good and let's remove these things and  have the margin at the top so if I go here you can   see on the transaction form we have created we can  provide any CSS we want so CSS will be like margin   top is 10 pixel so just write 10 and it's done so  it is having like a margin at the top and then we   don't want this typography of these three things  so let's remove all these things and now since   we are not using any bull which we have created  so let's remove that also everything is looking   good we have a nice little card we can provide  also a background to our body of the HTML so here   we have index.html and we can simply say body is  going to be the background color but which color   we can use let's say gray for now but we need to  import this on our index.js so we just say import   index dot CSS and that's it so yeah but this is  too gray so in our material UI if you scroll down   on the customization you will find that we have  the color palette so we can choose color from   different range of colors but here I am going  to use the 100 for the gray 100 this one is   good so let's copy that and go to our index.css  and paste it and you can see it is very nice   little smooth degree which is going to give me  a nice card and it's looking good so what next   we need to have this card working with all the  uh like form fields from the material UI only so let's move this form into this card right  here we have the transaction form right here   inside this card we have a card content but then  we need to create a form so simple form is good   and inside that let's put this typography like  this okay that's good and it doesn't have any   reflection here because now we need to go on the  material UI and then we need to search for the   text field so let's say where is the text field  text in text text text text yeah here we have the   text field and I like this outline text field so  let's have that and for that we need to import the   text field from Material UI so like this and how  do we use it we have to use something like this   okay so after that I can put it like this how  this is going to reflect yeah that's right now   we need three of them so first is the number then  is the simple description so we have to put two   two is here and third one has to be the date  picker so that's good so let's search for date   yeah date and time figure and this date picker  is really nice so let's use it but how do we use   it so first we need to say desktop date picker  but it has to be inside the localized provider   localization provider so first we need to have  this localization provider but this localization   provider is coming from X date picker so this  means we need to install this x date picker   like this from the npm okay so that's good and  let's open install this x date figure and also   we want let's say day dot DJs instead of moment  both are same so let's install these two things   and now we are good to go so first we need the  localization provider so we are having it let's   close this localization provider now it  needs the adapted JS adapter dgs which   should come once again from the X date picker so  localization and X date picker we need to import   so like this it's done what next after  that we need to have desktop date picker   like this so we need to import that  so here we are desktop date picker   okay like like this then value and the change  handle change so let's copy this handle change   function we have to create just for now because  we will create everything later on to submit   the form and do everything everything is good  let's see how it's looking reload this page and   everything is fine and you can see our date picker  is working fine at last we need a form to submit   that means a button to submit actually so how  about button so once again we need to go on   uh let's let's go back and here we are go on  the buttons where is the button yeah here we   have and it has to be this kind of thing which we  already know how to use so this is the button like   this and finally we can use slide like this after  localization we have the button and we call this   submit and the type of the button is also  submit okay so variation is text I think   variation has to be contained instead of text  and looks good and finally we need to have all   these things spread full of this card and we  don't want these typography related things or   like this so maybe we can just say here that  hey I want to create a new transaction add new transaction okay this is good and this has  to be out of the form and variation has to   be title is there any title no so we can go  on the customization we have the typography   and on the typography we will find we have  the font sizes uh not font size we need   something else yeah so here we have so we can  see we can use the H6 also variation for H six   now add new transaction all these things  are here and we need to spread as I told   you so the simple thing is we just need to give  some of the you can say padding I can call it   and this will be having style or just  the margin left is going to be let's   say 5 pixel and how about this hmm so it is  it has to be margin right instead of left right margin right looks good and also on our  date picker and the date picker is having this   text field so we can provide it like this  and see yes it is working and we can reduce   the size of each of the text field by saying  size is equal to small and copy that paste here   paste here and yep it's looking  really really nice so this is done   and finally we need to change the you can  say label so label is like amount okay then   description and this is not dated desktop  I can say transaction date transaction date   okay so everything is looking absolutely amazing  what next we need to make this form working so to make this form work everything we already  have inside this form which we were using so that   form is actually inside source app.js and here  we have this input form we have and submit so   let's copy all the all of these things so first we  have the initial form let's open here and paste it   then create the state inside of this and import  this from react and we can directly import like   uh we can say from use state  from react it is imported   then what next then we need the transaction  which is not here but we need the handle input   so we already have created handle change which  is exactly same as the handle input or handle   change which will get the event and doing all  these things so let's remove which we don't need   finally we have the handle submit which is little  bigger so let's copy all these from here and paste   it like this now it need that switch transaction  we will do that later and this has to be on the   form so on submit we are doing the handle submit  okay everything looks good and let's try with the   value value is going to be form dot amount then  on change will going to be the handle change   so copy these two on the description  it is it has to be same so description   and here also actually it is given inside of  this and value is like here okay this is done   and finally let's try this thing okay we have  everything here and we can remove this form which   we have on our app.js because it is using a lot  of things which we don't need now that's nice and   this time what I want but you can see it's  not working when I change it's not changing   why is that because we don't have the name for  any field so let's provide the name is amount   and here we have the name as description  and here do we need the name here   date and done so can we change yeah we  can write we can write oh what happened so   this is not the amount this is the  date Okay so now transaction date and   it has to be the current date so what I'm going  to do I'm going to say this is new date like this   and yeah that's good change the date  but it's not changing this means   this date picker Works differently so we don't  need this name let's go here and open the date   picker and see how this is working so  in this case we don't have the event   and we don't have the name it's directly  getting the new value or updated value   so what we have to do instead of this we can say  handle date and this is going to be a new function   and it says handle date new value comes like this  and then we say set form and spread the form but   the date value is going to be the new value okay  like this so that's done and let's once again try   change to 9 yeah it's done okay so finally  let's add another transaction of 250 rupees   with the what we can buy with the 250 rupees again  another movie so movie two and this has to be on   yesterday so let's click on submit it's working  no error on the console we are not getting error   and it's not reflected because we haven't  done the fetching of retransactions so if   I reload you can see the new movie is added  in the list so now let's just to do do the   refetching of the transactions so if I enable  it it says that you don't have this function   so we know we have to accept this function as a  prop when we use this transaction form so here   we need to provide this like here everything  is good finally let's try with a random thing   click on submit it has done its job the final  thing we have to do is we need to list this in   a material design and then after we will do  the update and the delete for these expenses time to work on this transaction list for that we  are going to use the data table from the material   UI how this is going to work you can see this is  the basic table which we can use and let's just   open this and we have a lot of things here let's  copy each and everything and then understand it   so first what I want I want to have the data  table or transaction list instead of this table   before that let's create another  component called transaction list dot Js   and then paste everything which we  have copied from the documentation   now let's understand so we have some create data  which is actually getting all these things and   returning it as it is but it's returning in an  objective okay then we have the rows and in the   rows you can see we are using this create data  to actually sort or give you the date or give the   data in an object after that we have some basic  table container then table table head table row   table cell and all other things if everything  is fine let's just rename it to transaction   transaction transactions list actually  so let's rename this file also okay and   now what I'm going to do I'm going to the app.js  and here just below this I will say transactions transactron transactions list which is like this   and now let's see how this is looking wow  this looks really really nice but you can   see we are having no margin so margin at the top  we have to give so here we say x s and margin top   is 10 pixel okay let's try yeah it's look it's  looking good next we need to have all the data   we are having into this data so first let's move  the fetching of the data into this component   so on the app.js we are fetching the transactions  like this so we can cut both of these things   actually we have to cut all of these things  the user State use effect and this function   then move this uh I think we have to keep it here  because we need the transaction to fetch from here   so how about having all these things here but we  can send all the transaction as the prop so we   can say transactions is equal to transactions  and we will going to accept it as a prop here   and since we have all the transactions now we  can Loop over the transaction instead of rows   so we don't need this rows and we will take care  about these later but for now it should give me   this number of rows like this now you can see we  have row so row dot title will be here then row   dot disk script section and then finally date  so let's remove all extra cells we have so like   this and now name this as I think this is amount  not the title and then description and finally   date so it should be amount not the title  let's see yes it is looking very very nice   and this is how we can use the data table now  since we have the data table here we can remove   all these HTML table we have created so let's  just remove this and you can see app.js looks   so clean three components all dedicated to some  individual task and we have nice list so instead   of this we can have uh like titles like this  here so that we can have a description or we   can say list of transaction something like that  so we can have it here above this and for that   we can have the empty bracket so that react will  not complain and then we say I think typography typography or we can get it and we need  to import this so maybe trans from the   transaction form we have the typography we can  copy okay and now we don't need this create   data and inside the typography I can simply say  hey I need the list of transactions so lists of   transactions so list of transactions let's see  oh it's like that so maybe I need to give this   here on the typography yes and it also has to be  font of different size so once again on the form   I can check what typography we have variant is H6  we can call the variant is H6 nice this is good   but I think we have to move all these things into  a container so that it will have a reduced size   so maybe we can give container so do we have  the container here so let's say container yes   we have it and it's simple container so  maybe we can call this as a container   yes and finally we have to import  the container from material and that's done yeah so this looks  a little bit good and we have done   that maybe we can also move this all  transaction into container that will   be really nice so we can call container  here instead of on the transaction list how this it's good so I can remove the container  from here so I'll do just like this cool looking   very very nice and we have achieved now what next  we need another column here which will say that   hey I need some actions so what kind of action  I need so first here you can see I will provide   action and action is going to be here as the  table cell and this need two buttons one is a   simple edit and then delete Okay so like this edit  and delete so that has to be there and we need to   work on these two things also this is on the left  side maybe I can align it to write or maybe on   the center it will be like this okay so right is  there amount is also right maybe if I give Center how about Center yeah Center is good Center yes so center with the amount description  date date has to be once again on the center and here also okay and finally action also has to be  centered nice so why the description   has to be on the right everything looks really  really nice and let's work on that delete part to work on the delete part let's just  convert delete and edit to the icon   so here let's search for the icons and we have  this material icon and now search for edit first   so we can use the edit one which is for me is  this one edit location now this one pencil yeah   so this one is good and edit icon very simple  but we can do some variations if we want we can   have something like this rounded outlined sharp  so let's use the sharp one so edit shop so copy   this from here open the transaction list and paste  it now copy this and at the last where we have the   actions we can provide hey this is edit sharp  icon let's see how this is looking yeah looks   good and also for the delete so delete is also  there and delete shop is like this so once again   like here delete Sharp so delete sharp  will be like this and yep we just need   the margin on the left for the delete sharp  so x s margin left is equal to let's say 2   yeah this is nice but it has to be clickable  so can we do that on the button so let's   search for the buttons and here we will  see that somewhere we can have the button   so here is the icon but with the button so you can  see we have the icon button and we can use that this one is good so let's have one  icon button like this and this is   not a photo camera not input field and  I can button we need to import as usual   copy paste and aerial I don't need  label is component color is primary   how about this and you can see now it is becoming  clickable and we have to remove the margin   and now it will be circular yeah like this  cool and it has to be a warning do we have   the warning color yeah we have the warning color  great so we also have the danger then do we have   the danger no we don't have the danger anyways so  similar to this we also need to do for the sharp   okay and this time it is primary okay looks  very very nice so when I click here it should   remove the transaction but before that we need  the click event that means on the click event   so on the button we say on click we say remove  simple nothing else but it has to pass the ID for   which transaction we have to remove so we need  to provide a Anonymous function and then we say   row dot underscore ID so let's create this remove  function here so remove function and give me the   ID so here I just console log the ID and see how  this is working open the console and it says that   you need to provide the key I forgot to provide  the key key will be underscore ID and now if I   reload yeah no errors so if I click on delete you  can see we have the ID yeah so this is really nice   so let's just give a confirmation here and  then we say if confirm and are you sure   like this if it's not confirmed that means user  said I don't want it lead then just return do   nothing and this is say use of expect unexpected  use of confirm hey this is expected actually confirm window dot confirm okay yeah this is good we do not confirm is there  so if I cancel window.confirm that's not going to   do anything but if I say OK that means if I say  okay then it's going to log but we don't want   to log we want to give a delete request to http  colon localhost 4000 slash and once again it's   going to be transaction but transaction with the  transaction ID so underscore ID will come here   like this and it has to be template literal so  that we can have the ID but this is going to be a   delete method so method is going to be delete okay  we don't have to do anything else we just need to   say const response is equal to a weight of this  and a sync function and I say if response dot okay   then we can just say something do some alert  and kind of that so for now we just say   window dot alert delete it successfully okay let's  try this and see what's going to happen if I click   click on cancel nothing happening but if I click  and click on OK yeah not found because we have   not created the API so let's go on our server and  see how we can create the new API for our delete   of the transaction so it's very simple we have  to say route dot router dot delete deleting on   slash y slash because we are on the transactions  API and we are using this transaction API inside   our server.js where we have already defined that  whenever I am inside this transaction API that   means I am working with Slash transaction and this  is why we are just using slash and then we just   need to say async request response Arrow function  and then we need to First find and then delete   so it's very simple we just need to say await  and then we need to say transaction which is   the transaction model I'm talking about then  dot find one and delete this is the one and   then we need to say request or actually we  can first get the ID const underscore ID   uh how do we get the ID that's the problem  so there's no problem let's just log   and say request and then we will see how it's  working so we are here on the server and this   is localhost 3000 we need to go on localhost 4000  and then we if we try to send this still it says   not found why not found because the delete API  will be like colon underscore ID or simply we   can say ID so this is how we can get the ID so  here we should get the ID and we don't have to   say like let's let's see how it's working so if I  say delete yeah something else happening and here   we can see it says console log ID is not defined  it should give me the ID but it's not giving so   once again get back to the request and then try  to send once again and this time you will see that somewhere we should get the parents or  query maybe I can just search for ID so where is the ID let's search for request Dot params and C like this yeah we get the ID so request dot param  dot ID is the real ID we need so let's just remove   all these things and say request dot param dot  ID is this one and once it is done request a   response dot Json with a message of success it is  deleted and that's great now what next we need to   just try this so let's try to delete this one  which is the one we have created so let's say   okay and delete it successfully and that's good  but once we delete we need to refetch the data so   that the table will be updated but once again you  can see this is actually not deleted so something   wrong happened so there is some problem with this  so the problem is we are just giving the ID but   actually we need to say there that underscore  ID is going to be the object ID object ID this is maybe we can drive it just to the ID  let's see if this is working or not so remove   it says deleted but yes it is really deleted  so what I can do I can just refetch the data   so we have on the client side go to component  transaction list and here we also need to   need the fetch transactions so we have to  pass it from our app dot JS just like we are   passing here on the transaction form we need  to pass it here on the transaction list also   and then we will be able to refetch once we are  successfully done okay so let's add another one   and click on submit it's added and updated click  on delete click on OK and it says done and the   table is also updated this is really good but you  know with the mongodb you can do various things   you can also do the delete one so this is also  going to work so once again I just add another   one so that I don't have to delete any other  thing so click click on delete okay and this is   also deleted so there are various ways to delete  and we have done the delete Parts successfully before moving into the edit part let's just  format this date and then we will do the edit   so first we need to go on the front end that  means on the client side that react and the   component transaction list we have and here we  are just giving the date as it is so we need to   just create a function which is going to format  the date so I create a function and I say format   date here we accept the date and then remember  we already have the day Js so we can use the   DJs to format it so I can simply say import DJs  From DJs okay and it's very easy this dot format   and provide the date I think this is different  so we can just say day Js and we have the format   and how we are going to format it so we need to  give the date first and then provide the format   format format format so first it's date and  then what is the format of the date so DD YY so let's use it here so this will be like this  okay so yes 16 9 20 22 so maybe I can just say   with a hyphen and then comma  and it's going to be a small m   double small m okay what I want I want the  exact name so Triple M Triple M triple capital M   yes so 16th September 2022 this is what I  want and even if I can remove it yes so this   is looking a little bit better and what next  next is we need to click on the edit and then   whatever we have here wherever we are clicking  we need to move all the data into this form so   that we can update that form this is going to be  the real interesting thing and it's the front end   plus the back end part so how this is going to  work so first when I click we need to move the   data to the app.js so here we have the app.js  and we don't have any way to accept from this   component which one we are editing so I'm going to  create another use State and I call this as edit   transaction and set edit transaction and  this one is going to be an object not a   not an array okay so I'm going to pass the  set edit transaction to the transaction list   and what we will do with this let's  see so first accept this prop and then   when we click on any edit button then at  that time we need to pass it so on click   of edit we can say that hey this is going to be  an anonymous function which is going to pass the   row row means the actual transaction so we are  passing this and setting the transaction on the   state which we have on app.js and then we will  pass this edit transaction to the transaction form   like this and on this transaction  form we will accept it first   and then the initial form we have so we will  say that if there is something inside the term   edit transaction use that as the initial form  not the real initial form we are having so how   this we can do first we can create a use effect  use effect and like this and I'm going to log   edit transaction and let's see what's going  to happen so first we will open the console   and you can see we are not having anything in  the edit transaction but if I click on edit   still nothing is happening but what if I say that  hey I want to run this use effect Whenever there   is a change in edit transaction prop only going to  run this edit use effect when there is a change or   update in edit transaction so let's see click and  yeah whenever we click on edit we have the edited   data to the different component so we move from  transaction list to app app.js or app.js whatever   it is and then from App we have passed that to  transaction form this is how we move the data   from one component to another component via the  parent component okay so what we have to do we   just need to say set form with edit transaction  but only when if edit transaction is not equal   to empty object so remember initially it has to be  like this initially edit transaction is an empty   object so when I say that hey set the form as the  edit transaction only when if it is not equal to   the empty object this means what's going to happen  now if I click on edit the first one you can see   now all these things are here if I click on Apple  you can see it is now here so instead of submit   we just need to convert this button to update  because this is not submitting this is updating   okay so once again let's get at the bottom and  here we create like if uh there is a if like   this if edit transaction is not equal to like this  empty object then show a new button called update otherwise if edit transaction is  equal to empty object then show   simple button which is a submit button  now variant variant can be secondary like this okay okay that's good and what next now  we have submit button for the we have submit of   the form so whenever we submit the form we always  do the post request but once again we need to do   two things if we are editing we don't want the  post we don't want the patch request and if we   are submitting then only we want the post request  so how this is going to work so it will be like if   edit transaction is equal to the empty object  then I say submit okay or maybe I can say create   like this else I can say update this is very  simple thing so we need to create two function   create an update so let's say function create  and create is exactly like this this one and   like here and at last we return the response so  that it's going to be the sink so I'm returning   the response so that we can get the response here  so I can have a let response or I can simply say   const response is equal to I can use the inline  if statement if it is equal to then do the create   otherwise to the update like this and everything  is fine now next is we need to work on the update   so we have the update and this one is a patch  request but along with that we need the ID also   slash um it's going to be edit transaction dot  underscore ID with a patch request and there   is a form everything is absolutely same okay so  we have done that and now if I try to update it   it should give us update but we  have some it says uncontrolled what is this we can tackle this later  but for now whenever we update click   on update instead of Movie 2 I can say  2 like this and click on update you can   see it says patched request not found yes  we have not created it but if I open that   Network tab I can see the payload I'm giving  is movie updated and then this we have to   store on our database or update on our database  let's do that on the server and on the bongodb Now's the Time for the real update API so  let's go on here on the back end that means   on the server end so server we have the routes  transaction API this time we need to work on   router dot patch and this is going to be once  again similar to the delete one because we need   to accept the ID and then we will update the  data for that particular transaction with the ID   then we get the request and response and this  has to be async because we will do the await part   and now there is the update 1 function delete one  is the example we have already seen so similar to   that we need to do the transaction dot update  1. now we know that we can get the ID by this   so we have to find first like this and then in the  second parameter we need to provide what we want   to set so here we will say dollar set and all the  object we want to set so we know we can get the   data like request body is actually giving me all  the things we want to update so I can simply say   setting the request body which will have all the  data now I say response dot Json with a message of   success once again okay so this is this seems  like everything is fine let's try and see if it   is really working or not something bad happened  what happened okay so I think it is taking time   to start yeah this is taking time to start  while this is taking time what we have is this   uncontrolled Behavior so this is happening because  if I go on the component on the transaction form   we are saying that if this is UN not equal to  empty object instead of this if we can say if   there is amount is not undefined that means there  has to be some amount which ensure that this edit   transaction object is not empty then this is  going to work and you can see it's working and   everything is fine let's try to update movie 2.  this time I will use 2 like this click on update   and nothing happened seems like it happened and it  really updated with the success message but since   it has updated it should be converted to 2 when  I reload the page and yes it is there so let's   just do the real uh update on the form so you can  see we are doing we are fetching the transaction   it should fetch the transaction but it is not  fetching it again hmm so that's this is not good   after this if response is okay so everything  is fine we are returning the response   and Okay so we are having this create we are  having this update so let's do one create and   see if really we are getting any update you  can see it has to be uh it has something bad   happened once again so it has to be uh submit  by default it's not having a by default which   is once again the same problem because here  instead of this we need to say dot amount is not   undefined and here it will be like dot amount  is equal to undefined okay like this and yeah   it's done so let's try to create one once click on  submit you can see it is not still or not updated so we are having some issue on our  server server says something is undefined what is happening here so on the network tab if I can check by seeing  this if I can click on submit it failed because   it is having no ID still it is sending  update request once again remember what   we have the issue everywhere  is because of this edit Dot   amount is equal to undefined if it is undefined  then click on create okay so one last time   yes it is done with no error reload  the page and this is good so maybe   what we can do we can move this thing  into a new function and I call it   function called um reload something like that and  this will give me the response and I will get that   and instead of returning I say reload with the  response because I want to do this again and again   that's why I have created this function which  is doing the same thing okay finally if I click   on edit I say edited click on update yes you can  see it is updated so let's just do a delete part   yes it is deleted nice move it to back with a  2 as a number click on update yes it is updated   everything looking very nice and it is really  really amazing to see how our crud is finally   working with this man stack react Express  but but we have a lot of things to do here now let's work on the login form so if I click  on login it should redirect me to slash login   but right now whatever we say on our address bar  it's still loading only the single home page which   is app.js on the on the client side you can see  like this one so this means we need to work with   react router so let's work with react router  and here we are so let's click on tutorial and   here we have to actually install react router  Dom only so copy this and go to the client side   so here we are and run this react router Dom  okay once this is done what next it says that   you have to add a router but how it's going to  work wherever you have the react Dom create root   you can use the router provider with the router  you have okay so in our client side The Source we   have index.js where we have the react router Dom  we are using react strict mode and then we are   using this app instead of they are saying router  provider so let's have this instead of our app   so I paste it like this and I need  to import it I don't want app I want   these things react router Dom like this okay so  router provider is done what next it says that   you also have to create a function which is going  to return the router called create browser router   so this is what we are providing and here on the  slash that means the home page when we go on the   localhost 3000 it will return me hello world so  let's go to localhost 3000 and here if I go on   localhost 3000 you can see I'm getting hello world  but instead of hello world I want to actually give   the app we have the component app so let's have  this one and let's import this import app from   slash app now this will give me the exact page so  what is the benefit of this now we can move over   and start working on any other route so just by  this we can also say that if we go on slash login   it should return a log in component we don't  have that login component so what I'm going to   do I'm going to create a Pages directory and  inside that it should be directory actually   Pages inside that I'm going to move all the  component that is connected to the route or   any path so this app is connected to the home  page so I will call this as home instead of app   so I will call it home so now you have to see  this will become home okay so after this I have   to create a login.js and this will just give me  this login okay so let's import this login also   and which is imported so now you can see this is  working because this has now become the home page   but if I go on slash login yes it is working right  here but this is not that thing what what do you   mean by that thing I mean to say whenever I go to  any login page I should have this navbar that at   that place I don't want to start from the scratch  so in that case I can move back this home page to   the root or inside the source and then what I'm  going to do I'm going to make it once again app   so this become app and now here we have this app  and I'm going to make this login as the child   component of this so how we start with this here  we say children and children will be this thing   okay so children will be the new login what is  the benefit of this let's see so initially we   should get the app uh we are having some issue  so app is coming from here that's good so let's   see what we are getting in the console so it  says route.map is not a function so this has   to be children I think in an array so now it  is working so what if I go to the login yeah   login is again giving me the same exact thing  it should give me this log in so we need to tell   our react that you need to Output the router  related component not this component how do we   do that let's go to the reactor router and here  you will see that yeah we need to say that this   is the root element which we are calling app then  after that we can see we have this is error page yeah this one so it is having another but after  that they are saying that nested route nested   route is something like this which we have  already created but for the nested route you   need to use the outlet so this will comes  inside the root which we are calling as the   we are calling as our app so inside this app  we need to use the Outlet so I'm going to   say after this app bar this is going to be the  outlet so copy this and after this it's become   Outlet okay so now this seems to be having login  here you can see on the base URL we don't have   anything but on the login page we can see we have  this log in but when we go on the home page then   what's going to happen so instead of this having  path at the root I can say that this start with   like home page and home is another component which  I create inside the Pages directory because this   is a home actually home page so this is done and  let's import the home page like this and now you   can see when I go on the login I have this login  here when I go on the home it's home so yeah like   this so this is happening because we are saying  that yes you have to render this app but inside   the app if we change anything as a route inside  the children then whatever is the component of   the children just put that here now we want  these things to be from here to the home page   okay so let's use it like this and I think I  don't need because we have the container and   let's import all other things which we need so  we need the container then we need transactions like this and then we need these states like this and use effect also here we are so  use effect and use State we need to import   and finally this transaction fetching  the transaction everything is here and   everything is nice now our app is just handling  the different different you can say different   different components for different pages with  the app bar so that means app bar is always   going to be there no matter which page I am in so  this is how we work on the react router Dom okay   so that's good let's see if everything is fine  or not and it's not because this is having the   difference of the path so this means we need to  go up a directory and then we need to go on the   let's say we go upper directory oh so that was  correct we just need to go up a directory and yeah   you can see I'm here on the transaction if I go  on the login okay so I can go by here so login is   here now we just need to make sure when we click  on the login button it will move to the login so   how we can do that we can do that by using this  link tag so from the react router Dom we can get   the link which will give me uh which will move me  to the different page so we can go to the app bar   app bar and here we have this login button and  we input this login button inside the link tag   which we get from our react router Dom so  import link from react router Dom like this   and then just provide the two part as slash login  simple so if I click on expensor it should give   me it should move me to the home page so here  we have expensor and like this and it should   move me to the home page and okay so we have  some issue here can we do something like this okay that's working yeah that's good so we have  the typography and we don't need this icon which   we are having so this is good and now if I click  I'm on the home page if I click on login I am   on this login page it has to be color of white  uh maybe if it's working so white is not there   so we can get back with the inherit inherit  and we need to give a class name so that the   link is actually creating a anchor tag so  if I save this we are going to get back our   page and now you can see it's actually creating a  anchor tag for us we need to give a class to this   anchor tag so this is the class and I am going to  say white text is white this class I will provide   both places like here and then I will go on the  index.css and then I say hey there is a text white   class and whenever I add it you have to give color  as white text decoration as none and that's it   get back with the original thing so expensor home  page login is login let's work on the login page now before working with the login let's just  have a register button or register page where   we can register new user so that we can have  the login so first we have to create another   children route called register and this will  be like register component and why we have two   times I don't want that okay so let's create  a new page called register.js and here we will   create the register page okay so let's see  how this is looking so first and import it   and go to app bar and add another button for  the register so login and register is here   so if I click on register it should lead me  to the register page and click register yes   we are here but let's Design This and this  time I don't want to waste the time so I'm   going to use the template given from here and  we have this sign up and let's click on Raw   copy everything and go to the register  component we have paste it and since we   are not using typescript so we don't need that  and also this one okay and let's convert this to register button or component actually  now we don't need any theming parts we   don't need theme we don't need  copyright so remove the theme   like this remove this copyright component and  let's see how this is going to look okay looking   good we don't need to remember forgot password and  sign up so this is sign in what I'm doing this is   not the sign in okay anyways so we can move this  thing to login because this is we need it is sign   in so we will take care of this sign in later but  for now let's just move to the sign up so both are   signed in actually that's not good hey do we have  the sign up yeah we have the sign up also okay   so let's go to the signup.js click on the Raw  and we have it so paste once again and this   time once again remove these things which we are  not using and copyright and call this function as   register okay now let's see this is good first  name last name email password and I don't want   this checkbox I just want this one but it should  lead me to the login page okay so first I don't   want that checkbox so we have checkbox checkbox  yeah so this is the checkbox this whole grid I   don't need for the checkbox yeah so now checkbox  is gone and this will give me the two part two   slash login and the link we have is not from the  material it should be from the react router Dom   and default what happened here with the  link thing there is no variant in the link uh imported as react router  Dom okay so I think this is   not the default one and yeah this is good  but I think what I want is I want to have   the link link from material but also I need to  have link as router link from react router Dom   so react router Dom what is the benefit of this  let's let me show you so I'm going to wrap this   with react router Dom link and now I say two  part is slash login and this is not going to work   and yeah this looks good and now if I click here  it's lead me to the login page which is here so   let's just remove this readme remember me from the  login also so don't have account and yeah here is   the forget password we don't need forget password  and we don't need the remember one and just like   before we can also want to have as router  link which should come from react router Dom   and now router link will be similar to  this two part of Slash register and boom   see we have this so register login register yeah  now this is good and what we need we need to fill   these things and we need the data on our console  we have some issue it says a cannot be appear of   a anchor is cannot be a pair of anchor so  we have to Anchor one which is created by a   router link another is created by this link  so can we change it like component as span how about this this is on the login page so  let's go to the login page reload okay see   we don't have any issue but on the component on  the register actually I call it component as span   and reload boom that's gone so we decided  that hey the link component inside that is   not going to be anchor it's going to be the span  anyways so when we click on submit it should   create a form and we have the handle form here  which is actually handing form in a new different   way this is using the JavaScript form data which  is taking care of email and the password but   we have more than email in the  password we have first name   first name then we have last name then we have  password and then we have email so this is   first name last name email and password  so first name is this last name is this   and all of these are here so that's good  let's try so sarthak s email is sarthak   at bitfilms.com password is anything click on  sign up and boom you can see all of these things   are here just the first name and last name  are not here maybe we have some issue here   so what's happening here password is good email  is good text field last name with a capital N so   that's the point so it's it should not be email  it's the first name and the last name like here   capital n capital n okay finally if I click on  sign up you can see everything is filled up cool   so we need to send all these information to our  server this means we need to go on our server   and let's close the client on the server let's  create another API file which is I'm going to call   auth Dot or auth API dot JS with a capital a and  just like here we are having these things let's do   this once again and now I say router dot this is  going to be the post request to create new user or   register a user so I say slash register and here I  will just going to return response Dot dot Json as   message user is created and let's have request  and response like this so just like this default   router we are sending this and once we are done  with this go to the server and just like this we   will say this is going to be the auth width  auth API and we need to import it like this   and that's done okay so now we can first test  this by sending the request so open the client   and we have a page which is register.js and  now instead of console log I will do the fetch   so this is having I can say the const form  is equal to all these okay then I say fetch   HTTP colon localhost colon 4000 slash auth slash  register y slash auth remember on our server.js   when we are registering the auth route we said  it's going to be the Slash auth and after that   the route is register so auth slash register  okay so now let's go here and then we need to   say that this is a method of post and then body  is going to be Json dot dot stringify of our   form okay once we have this so we get the response  and if response okay then we say console DOT log   or simply say log of hello or  success actually okay let's see   open this we already have the data  click on send us we have submitted but   yeah we are returning it it says that everything  is fine so it should give me response console   but it's not giving that yeah because I need to  do the await part here I forgot to do the await   so this is a sync function and then await  everything is fine now if I say sign up you   can see I am getting success okay so this is  done and what next we need to see all the data   on our backend that means here we want to get all  form data then we need to Hash the password then   first we need to check if user exists  with same email and then if not then   hash the password then store user  store user that's good let's do that to fetch all the data and see if we are  getting it or not so let's do the console   log of request dot body and we have the  server running here let's click on sign up   and we are getting nothing okay so why we are  getting nothing let's see on the register so   the problem is headers we need to give headers  of content type as application Json if we do   this then if we try to see sign up yes we have  all the fields available here okay so now we   have all the fields so we can see we have first  name last name email and the password so that's   good but next check if we have the user so  we can get the email from request dot body   and now we need the user model because  how do we interact with the users so   let's go here on our server end so what I'm  doing here so let's go on the server side   go on the model and just replicate this  transaction with the user model and now it become   user schema so user schema and the model name is  user and this will give me first name as string   then comes last name as string yes we  need the created ad then we need the   email and finally we need the password but  we need more from that all these fields are   required so what we have to do we need to say  hey the type is yes string but it's required   so that we whenever we type something it's  not going to complain that hey this is empty   so now required once again and I think I need to  copy copy paste copy paste that's good so whenever   we try to add something it's going to say hey  this is required if you want you can provide the   error message like first name field is required  something like that you can provide it here okay   so last name field is required email  field is required like this okay and   password field is required okay finally we  don't need this created at because we are   going to say that time stamp is going to be true  so Mongoose model will always going to give me   the updated at and the created ad Fields okay  since we are done with the user model let's go   to the register route we have created and here we  need to first check if we have the user with that   email or not so first thing is like we need  to destructure from request body and we say   const user is equal to a weight of user model and  make sure we import it from the import user from   we need to go up a directory go in the model  say user dot JS which is very important and   now I say dot find one I'm going to find  only one with the email we have provided   this one now let's try to log and see if we  are getting the email getting the user or not   so yeah we are here click on sign up and it says  null that's really great so if user is there then   we say we will say the response dot uh Json and we  provide a message of user already exists okay but   we also need to give the status so I say status  is already there so what should be the status   to understand that we can go and say status  codes and this is a very nice website which   will give give you this thing so it is actually  not acceptable or conflict you can use any of   them it just up to you so I will use the not  acceptable which is 406 so 406 is the status code   if user already there but if not there and I need  to just return and actually terminate the function   but if user is not there then we need to create  the user so I need to say const I can call it   check user all right or maybe user exists so like  this and then we create a new user by using once   again a weight user dot uh not DOT I just provide  the empty object and then I say const user.save we   need to do so uh response or I can say saved user  is equal to user dot save and this is going to   give us the result because we said that on our  user model that all these things are required   let's see what's going to happen if I save this  like here okay so once again click on sign up   and this time it says that user validation fail  which is really we want and all the message we   have is right here right now that's good so  now this is ensuring that we will not able   to create any user if we are missing any field  now we need to just say request dot body we are   sending all these things or if you want you can  just validate these things and like just password   first name and the last name and then you can  provide all these things like here okay so   this is going to work so saved user is there and  finally we can say we need to Hash the password   okay so how do we hash the password because  password is right here so I can create const password and how do we hash the password  so let's comment all these things because   this is the time to Hash password we  are going to use the decrypt Library   which is going to be helpful to Hash  the password so I say Big Crypt npm   so here we have let's install this on the server  it's very important so install it and how do we   actually encrypt the password it says like  this so first get the Big Crypt imported   then create some kind of salt then we have a  my plain text and some other plain text which   is like this so basically we need to say decrypt  dot hash plain text then give the salt and then   some function which is going to store hash  password in your DVR you can use the I think   a weight also yeah so we can use this like  with a weight so hash sync is also there   so I like I like this one  so really good so have it   first this is the one and I call it hashed  password this and just log hash the password   and import the decrypt import Big Crypt from be  Crypt that's good and make sure these are await   await and what is my plain text password so  it's just the password and what about the salt   const salt round is let's say 10 is just for  security reason and making the password strong   okay so let's once again go to our server and  click on sign up yes you can see we have this   hashed password so now when we store the  user we say hashed password is the password   you need to use okay finally save the user and  console log the saved user I think saved user   and then user is created with the  status of once again what is the status   so it is status is 201 which has to be  created it's not given here but it has to be let's say 201 yeah so here is 201 created given  Okay so where is that 201 everything is fine let's   finally click on sign up and it says pending  I forgot to use the await so this time what's   going to happen let's see do we have the user in  the database okay so we are not having it once   again click sign up you can see we are not getting  anything it should return the user already exist   so let me see if I click on sign up 406 user is  already exist yes it's there that means our user   is already created in the database so time for the  login lot of thing we did and I just want to recap   this for you so I'm getting all the data from the  request body then finally we are checking that if   user is already exist or not so if user is already  there then we are doing nothing we just terminate   the function register function finally if we don't  have the user then we first hash the password and   then create the user with this hashed password  and then finally we save this password and we   log we just return the user so we just have to  do something like this okay and say that user is   created on the user model we have these required  fields and the type which we have given and also   the timestamp we will see when we fetch the user  we will see that the created ad and the updated ad   will be there wow so much amazing thing we  did this video and let's Now work on login finally is the time for the login so click on  login and here we know that we have sarthak at   bitfilms.com as the email and the password is I  think the password I forgot what password I have   used but what if I click on sign in nothing is  happening because we have some issue okay so let's   just reload this and reload this page we don't  have anything we say password click on sign in   everything is good now open the client side with  the Source component login page and here we have   once again this as the form data and we can say  const form is equal to getting the username email   and the password then finally we need to do the  fetch HTTP colon localhost colon 4000 slash auth   slash login with the method of post and then the  body is going to be Json dot stringify of the form   and remember we also need the headers so content  type is equal to application slash Json okay once   we have this then we get the response and this  is going to be the await process so it's going to   be the async and finally if we are done with this  so if response is okay then we say console.log of   uh done okay so this is good but let's try  this so if I click sign up not found because   we don't have that route for our backend or  API for the login so we need to create the API   now router Dot post for slash login and here we  get response request and response and finally we   will do the thing and we know we get the  email and password from request dot body   once we have this we need to first check if user  exists with this email we already have the data   so why don't we write just copy and paste so it's  simple we say that hey it has to be a sync first   so hey user find with this email if not exist you  say that credential not found I can simply say   credentials not found and after this we need to  verify the user password if this is right or not   how do we compare so it says that compare sync  and simple compare is also there yeah so compare   plain text and the hashed one and this is going to  return the promise so I can say const uh matched   uh what they call they call it nothing so await  decrypt dot compare first the normal password and   second the hash password so if there is a user  that means we should get the user dot password   okay so if we say this is not going to match  because it's going to return either true or   false as the result so I can say matched if it is  not that then I am going to return once again the   similar thing credentials not found but if user is  there password is right then we need to create the   GWT token how do we create the JWT token create  JWT token for that let's use the JWT npm Library   so which is called Json web token so let's install  this on our server so here we are on the server   and how do we create so here we can go we need to  import it then we we just say JWT DOT sign Foo bar   or whatever data you want to provide and then  some secret okay so this is the normal behavior   so that's going to be the secret and the data  we want but what kind of data we can put inside   this JWT so we can put full fledged user inside  the JWT it doesn't going to affect us so how do   we do that it's very simple as we know it says  import Json or I call it JWT from Json web token   okay then we say const token is equal to JWT DOT  sign and here we provide the data and there has   to be some secret uh secret like this later on we  will do these things in a DOT EnV we will move all   these data into the all these all these logic into  the controller we will do that later on but first   we can see we have very nice little token so let's  just try to log this token and obviously return   response dot Json actually with a status code we  want status is going to be 200 which is normal   and if we want to have the 200 we don't have to  provide it the 200 is the default one message successfully logged in okay and basically we  need to provide the token also so we can say   the token is the token okay so let's  try to see how this is going to work   so let's go and see the email is this password is  two three four two four three and clear everything   click on sign in and now it says credential not  found why is that so user exist if user exists   oh so you can see we are saying that if user  exists then says that credential not found I   need to say if user not exist so now if I click  on sign in yes you can see we are getting this   long token and a message of success with the  status code of 200 everything is so amazing   and now we have this token that means we can  do anything with this token on the front end so   login is done and login is successful but still  we have a very important thing what we need to   send inside this token so we need to create  a payload thing and payload is actually going   to have a email which we already have and you can  also provide the ID of the user if you want so it   will be like user exist dot ID and if you want  you can just type it as user not as user exist   okay so user dot underscore ID will be the  underscore ID here and now we provide payload   as the payload on the JWT okay so this is good  but you know for some reason I'm going to call   it username and we will see why I'm calling  it as a username here inside this so just two   Fields username and ID and creating the JWT token  is going to done with everything we want okay so when we do the real login in the front end what  we have to do we have to store this token into our   cookies so here if we go on the application tab  we can see we have this localhost quiz so we can   store that cookie inside it and from anywhere  on this website we can retrieve that token and   send it for the authentication so let's go here  and first we need to go on our client side then   we can open our page for login and here once  everything is fine then we need to store it in   a cookie so how do we use the cookie for that  we need to get a simple npm package for cookie   and it's simple JS cookie is the one which  we can use yeah this is the one so JS cookie   and this one is very easy so click here  and go to the client side so CD into client   and then paste it so it's going to install  the JS GUI how do we use it so once it is done   then we can import from cookies from cookie  from JS cookie and then cookie dot set okay   so that's good so import cookie and I say cookie  dot set and setting the token as we should get   inside the response so first we need to say that  const data or I can destructure the token is   like a weight response dot Json and first we  can log to see do we really get token or not   so let's go here click and yeah we get the token  so now we just need to store this token like this   so I think it's when it's again cookie imported  and that's good now what's going to happen when   we click store you can see now we don't have any  cookie but if I click on sign in and now you can   see the token is stored inside the cookie and if  we move anywhere inside this application we will   easily able to get the cookie from this token  from this cookie okay next important thing is   once everything is done that means cookie is  stored look at this user is authenticated then   we can redirect user to our home page okay so how  do we redirect the user remember we are using the   react router Dom so react router Dom and here  we need to search for the navigation so route is   navigation and here we are we have  this component for the navigate   so this is navigate component but we don't  want component let's search on the tutorial   navigate here we have navigate anywhere  else so use navigation and navigate to   -1 is the thing so they are using something like  this let's try this if this is working or not so   import this use navigate which should be  from react router Dom so import use navigate   from react router Dom like this and then navigate  to the base URL okay that's done so once again we   can say uh two three four two four three and click  on sign in and I'm redirected to this home page   and you will see that yeah we have the cookie just  like we are using the redirection on the login we   also need to do redirection once the successful  registration is done okay so we can get these   things and go to the register once everything  is done then on this part also as soon as the   user is registered we need to redirect user to  the home page so just like that const navigate is equal to use Navigator is this navigate or  navigation navigate like this and this will   come from react router Dom so this is become  very easy and we don't need console log of   success okay so this is done but actually once  we are logged in once the user is registered   we should move that user to the login page so  that after successful registration we will be   able to log in okay so this is done our login  and registration is working but seems like we   are already logged in so user should not able to  visit this login page and this login and register   button should not be there and how about creating  a protected route basically the home page which we   have this one is a protected route so we should  not allow user to visit this page before log in so whenever we log in the user with the correct  email and the password you can see we are having   this token now we need to get this token and then  we only want the authenticated user to fetch these   transactions so that means on this transaction we  need to write a middleware but how do we write a   middleware how do we get the user from the token  and how do we send the token a lot of questions   everything will be answered in this episode so  we are going to use the passport package and   especially we are going to use the passport  authenticating with JWT so we will going to   install this first and then we will see how do  we move forward so this and also the original   passport package we need to install on our server  so CD into the server first install JWT passport   JWT and then install only the passport okay so how  do we get started with this passport very first   thing you need to do is create the middleware for  the passport so here we have lot of middleware   so we say app dot use of passport but we need to  import this passport so let's say import passport   from passport and then we say initialize so  once this is initialized then we are ready to   use the passport uh you can say passport with  the JWT and apply it on any middleware as any   middleware on any route we want so first ever  thing how do we apply the middleware so if I go   on this JWT authentication for the passport you  will scroll down and then finally you will see   that in any route you create then you need to just  say passport dot authenticate JWT and the session   okay so this is the thing we need to copy and we  want to allow only the users authenticated user to   up to fetch the transaction so we add this here as  the second argument and third is the real thing we   want now here we need the passport once again so  I say import passport from once again the passport   everything is good this means all the  authentication is applied middleware is applied   let's reload this page and as we reload you can  see it says hey it's having 500 error because   it says unknown strategy for JWT now what is mean  by strategy so if you go on the passport you will   see that there are lots and lots of strategy that  means basically how you want to authenticate the   user via better Facebook Google oauth local a lot  of other so we choose the passport and we want the   passport to be there so how do we tell to the  passport that hey passport use the JWT strategy   because we are going to use the JWT strategy  of the passport for that we need to create a   configuration file for the passport okay once  again on the server here I have created a empty   directory called config and inside that I'm going  to create a new file called passport dot JS okay   now here we need to put all of our strategies  basically for the GWT and all the code is given   here so I'm going to copy this uh like here and  then going to paste it now since we are going to   use the import we don't want to use the require  so what we have to do we have to first say import   um package from passport JWT and then we say const  JWT strategy is equal to package dot JWT strategy   and extract JWT package dot extract JWT and in  that case we have to remove all these two and   convert this to let and what secret we are using  we don't want these two things but what secret we   have used when we create the token when we do the  authentication for that let's go to the auth API   and the secret is this one we will use the EnV  file later on but for now we can copy and paste   here some secret with a DOT okay this is the  done and here we have passport dot use but we   need to First export default default and this is  going to be a function where we pass the passport   and then we do all of these things inside that  function so we are exporting a function where   we pass the passport now how do we use this  configuration we can go to the server and just   below the initialization we need to First import  the configuration so we say import passport config   config from is config passport dot JS and now  I will say hey this is the passport config but   it needs the real passport instance so this is  the passport we have initialized and then we are   passing it here okay so this is done and finally  we are on the passport.js so what we are doing   here so first you can see if I can just cut all  these things so that it will become clear we say   that passport dot use new JWT strategy I told you  lot of strategies are there but we are interested   in JWT strategy we are providing the options which  is giving you the token from the headers we will   pass that later on and the secret to decrypt or  we can say extract the user from the token and   then we have the Callback so inside this callback  we are doing this thing so we are using mongodb   and we need to import our user model so from uh  then we can say hey give me that models and then   user dot JS this is the user model we are using  and then we say find find by ID find by ID which   is where is the id id comes here and then we say  that if we get the user so if there is any error   then give that done done means either yes or no so  done with error and we say that there is no user   the false if there is user then we say there is  no error but there is a user so first one is for   error and second one is for user but if there is  no user although there is no error but there is no   user also then we say that hey there is no error  but there is no user also okay everything is done   so what we can do we can just try to see if  this is working or not reload and it's failed   why is that so I think there is some issue on  the server so maybe I can re-start the server   and server says JWT strategy is not a Constructor  so here on our passport configuration JWT strategy   it's actually just strategy not the JWT strategy  from the package okay because we already know this   is a package for JWT it's just the strategy but  later on we named it as a JWT strategy for our   convenience now if you see that server everything  is fine reload it and now it says unauthorized why   because the passport is trying to see if there is  any authentication credit token or not but we are   not providing any token how do we provide the  token for that we need to go on the client side   and open our Pages component actually and yeah  Pages home page and here we are fetching all   the transactions but along with this we need  to pass the headers which is going to have   authorization which is Bearer and the token  but from where we can get the token we get the   token from cookie so cookies dot get the token  and we know we need to import the cookie from   JS cookie okay so that's again done and let's try  to reload and you can see we are having this uh   list of the transaction but what if I remove this  token so to remove the token we can have a log out   button here so open the app bar and just have a  button called log out and then we say on click   click we need to say log out and logout  should be a function which will be like   here log out and the first thing we need  to do is import the cookies from JS cookie   and then remove the cookie so cookies dot  remove yeah and remove the token cookie   and after that we need to redirect user  to the login page so we say const Navi   Navi gate is equal to use Navi I can copy  here I can get from use navigate and like   this and finally I say navigate to slash  login and this is all about the log out so   we can see we are on the home page we are  having the token click on logout there is   no token we are on the sign in page or login page  now if I try to open the expensor this is you can   see we are not having the transaction because  user is not authenticated let's try to log in   so here we are 243 243 sign in and you can see  this time since we are logged in we can easily   get the transactions wow that's great we have  done with the registration login persisting   the session on the login or authentication  with the token but next point is you can see   it's not good even if we log out yes we can not  get the transaction but why we want the user to   visit this expensive page if user is logged out  we need to do something for the front end also   that means middleware on the react side just  before moving forward I just want to change   this from find one to find by ID and in this  case I am just going to say it's going to be   JWT dot underscore ID because this is what we  have on our uh like if we go on auth API if we   see here we are passing this username and ID  we don't have any sub thing inside the payload   so that's why we are using this ID that's  it and now let's forward let's move forward before creating the middleware in the front end  let's work on the dot EnV file for client and   for the server so basically what we want we  want to have a DOT EnV file where we provide   the API URL which is HTTP colon slash localhost  4000 and then wherever we are using the fetch   just like we are doing that on the home page  so here we are so instead of this we want to   have the process.env dot API URL and this  we want to do so if I try to do this thing   and you will see it's not going to work and if I  do that click on network and you can see it says   undefined local slash undefined so basically  it's not getting that API URL so how do we do   that there are two ways to do one is you can use  the dot EnV npm module so if I say dot EnV and PM here is the one we can use this one or if you  are on react then you can just prefix any EnV   with react underscore app underscore  and then you can use this name here   like this okay so if I do that then if I reload  you can see uh this time it says ASDF basically   we need to restart my server because I was  trying this Envy thing so now if I reload   yes you can see now it become localhost 4000 so  whenever you made any changes in the dot Envy   you need to restart your server and make sure  whatever you provide is prefixed with react   underscore API underscore URL so just like this  we can do same on various other places like on   the login page we are using it right here and make  sure it's template literal like this anything else   no so let's go on the register out and once again  do the same thing and like this okay so this   become good and now since we are having these  things we have the transaction form so inside   the transaction form also we have to do it like  this okay similar to this here on the update part   yep we are done with this and on the  transaction list when we delete or update   when we delete yeah so this is for the delete  and update we are doing uh on transaction form   which is already done so everywhere we have  done so now let's search HTTP colon localhost   colon 4000 we only have on the EnV  file that's good on the client side   this is done for the client side what about the  server side on the server side yes we need to   use the dot EnV module so copy this module and  open a new terminal CD into the server install   the dot EnV and once this is done then we need  to import the dot EnV here so import dot EnV   from dot EnV and let's see what we have to do  next so we need to create the dot EnV file once   again on the server side also so dot EnV is here  that's good so it says that you need to require   the dot EnV then you need to call the config  so since we are using the import we did this   dot EnV and after that we can say dot Envy dot  config like this okay so that's simply done and   if that is done you can see it is given and you  can do something like this also everything as   Dot tnb and config and do all of these things  okay next what we need and where we need the   dot EnV once again if you go on various places and  let's start with the config in the passport config   we are using this secret so why can't we do this  secret from the dot EnV so we can say process dot   EnV dot JWT secret okay so let's open this and say  JWT underscore secret is equal to this thing okay   so that's done anything else we are using no so  there is no hard code now on the database yes we   are using this username and the password which  is for our mongodb and basically we have lot of   other things like this URL um this one mongodb so  let's have all these things so we say first const   user name is equal to process.env dot [ __ ]  underscore DB underscore username similar   to this it's going to be the password so I say  password and finally uh what what is this URL or   what so basically we are having all these things  so let's open the dot EnV file for the server   and we call all these things and paste it then  for the password paste it and then for the URL   and paste it okay let's start with the username so  username is this one and now instead of this I can   say give me the username so which is this one okay  now make sure it is a template literal like this   then we have the password so  we call it with the password   so once again password is there and what about the  URL so at the rate URL is this so at the rate URL   is this one okay now everything is done once  again on the database part what about the model   okay so inside the model we don't have  any other thing which is using any uh   magic string so here also we have  yeah this is a secret so we can say process.env.jwt underscore Secret anything else  which we can replace with the dot Envy thing   and that's done here we are using JWT everything  is fine yeah so that's finally done with all   of these things let's see if there is some error  yeah there is a there is a lot of error so we can   restart the server to see what exactly  we are doing wrong so it says that hmm   directly required a secret or a key  so basically jwt's secret is not there   so we need to go to the passport configuration  and here if we try to log this it's not getting it so you can see it's undefined this is not  good so we need to go on the server and we   can see that yes we are calling it so we can  simply solve this by saying like hey we need   to use the dot Envy here also so we can do  the same thing here like import the dot EnV   and then configure it is this working yes  you can see this is working on the passport   configuration okay so that's good but this time  we are having unauthorization because the front   end is not getting the token so what happened  on the front end so if I go on the home page   here we can see is this having a correct  URL yes it's having correct URL do we   have the token now we don't have the  token so we need to First do the login   so 2 4 3 2 3 4 whatever it is and yeah we are  getting the token everything is fine and we do the   log out we are logged uh to everything is working  absolutely fine okay so there is no error anywhere   else and this is how we add the dot EnV and which  is separating all the magic string to protected   place where we have everything okay so that's  done and now let's really work on the middleware now we need to restrict our user to visit this  expensive page if I am not logged in so even   if I do the logout I can visit this page easily  this is not good so let's see how we can do that   so first we will go on the client side and here  we have index and inside that we have these routes   so first thing I am going to do is I'm going to  create a new directory called routes and inside   that I'm going to create index.js or if you want  you can directly create a file called routes dot   Js so anyway you can do that but I am going to  use something like this and move all these routes   from there to here and obviously we need to say  export default so export default is this router   and we can directly say something like this now  we need to import each and everything we need   so all these components should be here and  these should be I think these are right yeah   then we need the app and the react router  Dom so yeah and we don't need this provider   here everything is good here and now we need  to import our router so import router from   the router dot JS file so we are back with the  same position but all the logic for the routes   is now available on our router.js file okay so  here what I want to do I don't want anyone to   visit this home page if that person is not logged  in but the question comes how we determined that   the people or the user is not logged in or  logged in so the first thing we can see is   if we are locked in like this then at that  time we have the token on our cookie so we   can check this if there is a token then yes user  is logged in so at the top I can simply say const   cookies so I need to import the  cookies so cookies from JS cookies   and I can simply say token is equal to cookies dot  get for the token now if I am here and I say if   token is there then show the home page otherwise  show the login page this is the very very basic   so let's go here reload this page and yeah token  is there so it's working now what if I change the   name to token to anything else and you can see  now token cookie is not available so what if I   reload this page you can see it instantly moved  to the sign in page this is exactly we want so   if I am still trying to visit expensor it's not  doing that it's showing me the sign in page but   still even you can see it is having the home page  the component is changed so you can see login is   having this slash login so what exactly we want  we want user to redirect to the login page when   the user is not logged in or I can say the  token is not available so how do we do that   thing so for that let's go to the react router  Dom and here we need to search for the redirect   or maybe a component so here we have lot of  components and the one we need is this one   navigate so navigate is a component which we can  use to move any move user to any other route so   we can use this one very easily and then we can  instead of log in component we are going to use   the navigate from the reactor to Dom so we can  say Navi gate is here slash login and that's good   so this time if we check and if I try to visit  the expensor you can see I am on the login page   instead of the home page it's not making me to  visit the home page and if I get back the token   like this and now if I try to hit the  expensor hmm so maybe I'm on the login reload   go and yeah you can see I am easily able to visit  this expensive page because I am logged in but   this is not the 100 foolproof way of logging  in because even if I change the token then also   it's saying that yeah user is logged in which is  not good so we need to validate that this token   is correct before validating I just want to do  one more thing I want to create one auth uh you   can say top level component which is going to wrap  this home page or any home page or any component   which I want to be protected so in that case we  don't have to do this authentication Logitech   inside of this routes so what I will do I will go  on the front end that means on the client side and   here I'm going to create one more file a directory  called utils and inside that I'm going to say   art or maybe I can call it check auth dot  JS so this file is going to be responsible   for taking the component and checking if the  component or checking if the user is logged   in or not so how this is going to work first  we will get the children children is actually   the component we will going to pass inside it  and then we will go and simply render children   like this so what is the benefit of this you  will see right now so if I go on the routes   instead of doing all these things I'm  just going to comment it so that I can   use it later and now I will say hey there is  a component called check auth check auth and   inside this I'm going to have the home page okay  like here so I think I need to yeah everything is   fine now what I want next is let's see if this  is working or not so if I go yes you can see it   is working and that's really good and because  this check auth is not doing anything right now   but since we know we have this token logic so  let's move this token here and also this cookie   like here and now according to this token I can  do the check for the authentication now if I go   I can do this now instead of home I just say hey  render the children and then obviously we need the   navigate from react router Dom so navigate  is this it's very simple what we are doing   we are creating a top level component which is  wrapping this component which we want to render   now if everything is fine user is logged in then  go and render the children or the component is   inside this checkout otherwise navigate user to  the different page yes so you can see if I click   on home page or maybe on expensor I am redirected  to the login because this is not having any token   now if I just log in and you can see now I am  able to move into this expensor page that's the   way we can do anything for our uh authentication  so similar to check auth like if user is logged   in then we do something we can do another for not  check auth or we can say guest so this one will be   the check auth another will be the check guest  so login and register will only be visible when   user is not logged in so inside this just like  we have check auth we can also create a guest   so guest component is exactly same but this time  it's going to be the opposite so not of whatever   the logic we have okay so it's similar  to that so maybe we can just say guest   and we can move this like here and we  need to import this guest so check auth   and guest okay so here we have the guest and  similar to this we can do that on our register   now register and login will not be visible or we  will not go inside the login and register if user   is not logged in so that means we need to redirect  to the home page which is the authenticated page   okay so right now I am logged in if I try to  visit the login page you can see I am not if I   try to visit the register page I am not able  to do that but if I log out yes I can visit   the login and the register page but not the home  page or not the expensor page so we have created   very nice middleware kind of things with the  use of top level domain but still our logic of   authenticating the user is not foolproof so  whatever we are doing here first is we are   repeating ourself with this token thing and the  validation and second we don't want this just   having the token so how do we do that so there  is a very nice way of doing it let me show you you know the only way to validate a token is to  send this token to the user uh to the server and   then see if this is a valid or not we can do some  kind of verification of this token on the front   end but that's not that secure so what we have to  do see we have on our utils we have a check for   authentication now this is actually a component  so we can basically use any react thing here we   want so what I want I want to have a use effect  and let's import this and here I want to fetch   user and fetching the user will only going to  work if we have the valid token so let's create   a function called Fetch user and here I will say  this is going to be the await of Fetch with the   process dot env.react app API URL slash user and  this is going to be like here but along with this   we need to send the token on the authorization  header so authorization is going to be the bearer   and the token we already already have the token  so let's move the token at the top and then   we are done so now just make this a sync  function and we are calling this async   function in this use effect which is going to run  only once so let's see if this is working or not   so now it's uh working but it's saying that not  found because we don't have any route for the API   on our server so go to the node and the server  we have to create another API which is going to   be the user API and this is going to be similar  to this but with some all with some other things   like first we need to say router dot it's going to  be the get request for the user and since we are   going to use this on our server end so instead  of writing as a user I can write slash and here   we can Define that hey this is going to be  the user and then user API will be like this   and yeah so that's done now this is  good and we get the request response   and we just say response dot Json and this is  going to be user but how do we get the user   so since we have the passport installed on our  backend and this is the middleware we can add   this middleware which is going to authenticate our  token and once we have the token then we will get   the user in from our request so this is how we  work on the back end now this is done so we need   to import the passport also import passport from  passport that's done reload and now you can see we   are getting the user that's really really amazing  so since we have the user what we can do on our   front end with the check auth component we have  created let's create a state so I say use state   and we call this like here and I say is  authenticated initially it's going to be   the false but then I say const response and I  say if or simply I say set is authenticated and   response dot OK is the thing if response dot  OK is true then that means is authenticated   user is authenticated otherwise user is not  authenticated so instead of token I can just say   is authenticated and do all our logic okay let's  once again try reload and it says it's going to   maximum update depth exceed so something bad is  happening and we can see we have the token but   it's keep on loading loading and loading why this  is happening uh uh let's just explore so it says   that component call set State inside use effect  but use effect either doesn't have any dependency   array of one of one of the dependency change on  every render so basically what is happening let   me just close it otherwise it's going to be keep  on working so this is changing the a check auth   which is triggering this use effect again and  again and again so that is creating the real issue   so instead of using this navigate as the component  we have another thing from the react router Dom   which is called redirect so at as soon as we say  that hey user is logged in or token is valid then   we say okay go ahead otherwise if the response is  not okay then redirect to the login page in that   case we don't have to use is authenticated State  and then we just going to return this children and   no navigate function so returning the children use  effect is here we can make it in line like this   and everything else is fine so let's try  this on our localhost 3000 and what is   destroy is not a function where destroy is  coming check out is having error boundary   okay so I think this need to have a returning  function like this we cannot return that   and yeah you can see it's having me on the  expensor so the token I have changed so maybe if   I make this token a valid token and now if you see  very soon we are having the the transactions and   everything is working fine since we are logged in  and that is working because this you can see user   is uh we are getting so first it it seems like  it is taking time to fetch the user and uh since   it's taking time what we can do we can create  a loader so next point is to create a use state   and I say is loading initially false and then I  say set is loading of true and once everything   is done then I say set loading to false and  I say if is loading true then just return   A P tag which says that loading dot dot so this  will show me the loading until the fetching or   the token validation is done so you can see right  now it's loading loading loading lots of time it's   doing this and because there's some issue it's I  don't know why it's taking so much time to fetch   the user with the token see the transaction API  is already done transaction is easily done but   user is taking time and after that once that  is done you can see we are having this page   now next point is once again all the logic of  authenticating the user is inside this check   auth the responsibility of check auth is to just  see if user is logged in then show the children   page otherwise redirect to other page that's  it so why we are having this in this case we   need to use the react Redux so that we can  manage our state throughout our application and now let's install the react Redux and have  the State Management so first thing is we need   to install the react Redux like this so go to the  client side only this is the one so I am on the   client side then install this react Redux along  with that we also need to install the Redux so   how do we do that so yeah npm install Redux is  the thing we need that's good and then how do   we do that first we need to wrap our application  with the provider which is coming from react Redux   and then we have to create a store which we will  have all the state there so let's go on our index   .js and here we have all these things which is for  our react so now let's say the provider is this   and provider will come from react Redux so  provider come from react Redux like this and   yeah we have it but it needs the store so we  have to create the store so let's create a new   directory called store and inside that I'm going  to create a new file called index.js and export   default store and store is just an object  so const store maybe I can do something like   this const store is this and then export  default store right now we are not doing   anything we are just having this and now let's  import store from our store slash index dot Js   so this is we are done and now let's move to the  next thing so it says yeah we have done with this   store then inside the store you have to create  something so let's go on the quick start and the   quick start says that you also need to have  the react Redux JS toolkit which is going to   simplify our react Redux if you have ever worked  with the react Redux with the previous version   you will see the difference and how it's making  your experience of Redux very easy so you need   to install this one also and let's install this  redux.js toolkit once that is done then we have   to create our store which will be like this so we  have this one and copy that now paste it and it   need the reducer so what is reducer is going to  do so here I'm going to create more reducer but   let's see first what we have to do next we have  already done with these kind of things and then   we need to create the state slice so basically  we are going to create the dedicated store for   different values so they have created it for the  counter we are going to create for Authentication   okay so we will going to say auth.js and this  is going to create a slice so let's copy these   two lines paste it and here it's not counter  slice it's auth slice okay then what it says   that you need to name it and you need to provide  the initial value so that's going to be the thing   and so inside this I'm going to name  it as auth and initial value of is   authenticated to false and user is empty object  okay next it says you need to create some reducer   which is going to update the value of these  initial States so how this is going to look is   very simple let's just have one to understand  the name okay and then we get the state this   is the state and then we can do anything with our  state so instead of decrement I just say get user   with a capital u and then I need to do  user and the user will be like name is   sarthak that is the only thing and state DOT is  authenticated is equal to true this is what I am   going to do when we call the get user reducer  so we need to just export all these things and   Export this reducer both of these things  okay so what is these I'm going to do with   so it's not counter slice it's auth slice and now  we can call this just as actions or you can just   return all the functions you have so I'm going to  return the get user function and return auth slice   reducer okay so store is ready for auth so what  we did we created a slice which is having the name   with this name we are going to call this store we  have the initial State and to update that state we   have the function which is going to update that  function okay everything is fine so what next   how do we use it that's the important thing so  it says that add slice reducer to the store so   we have created the slice now we need to add it on  our store so right now auth store is there but our   Redux doesn't know that there is the author auth  store available for that remember on our index we   have only imported this store so store is this  index.js file which doesn't know about the auth   so now as a reducer I say auth is auth reducer  which we are returning you can see as the default   so auth reducer and let's import it import auth  reducer from the auth dot JS file okay so this   is now connected auth reducer is now connected  with the Redux so use Redux State and action in   react component so wherever you want to use it  you can just say use selector which will going   to give you the value of the state and to you  know to run the reducer functions just like the   function we have in this one get user we need to  use the dispatch so we will use the use dispatch   okay just to check where we are going to use it  we will going to use this on app.js so first I   say const is authenticated or maybe I can just  say auth is equal to use selector is a selector   yeah selector and that will come from react Redux  use selector and it will give you the selector as   the state and I will say state DOT auth now  how this is coming as auth remember on our   store index we are providing it as the auth  and here we have given the name as the auth   okay so let's just see what is the value  we have inside the auth so let's go on the   react application open the console and here we  have the object and now you can see it says the   value we have is is authenticated false user  is not having anything great that's good but   what we have to do we also need the dispatch  so const dispatch is equal to use dispatch and this will come from that once  again the react Redux so what I'm   going to do I'm going to say use effect and  inside this use effect I will say dispatch   dispatching what so let's go on the application  and it says that dispatching the function name   and we need to call that function so dispatching  get user and let's call this function and it says   get user is not defined so how do we do that we  need to import it from the slice counter slice   or basically from the store we have created  so import get user user from store slash auth   dot JS so this is the auth store and we have  exported this get user and we are going to use   that get user and getting the user and setting the  value now let's go on the react and you can see   initially it was false but after that when the  use effect ran it become true and we have the user   as sarthak now what we can do instead of this  we can really fetch the user from our backend so now we need to fetch the user from our app.js  not from our check auth higher order component   this one so we have this function so let's cut  this function from here because we don't need   it right here but inside this app.js we are going  to use it so we need the set loading also so set   loading will be here and also we need the token so  that we can verify the user and this means we need   to have the cookies and we also need the user  State we will do that okay so first is import   the user State import it and then we are not going  to use any redirect right now because it's just we   want to authenticate the user and set the user  if we have the response is okay so if response   okay then we need to set the user but we need to  set the user with the real data we are getting   so if we say like user is equal to a weight of  response dot Json this will give us the real user   so let me show you by doing this and  let's call this fetch user function here   okay so fetch user is not defined is loading is  not defined which is here so let's comment on   this check auth yeah you can see we are getting  this user so we need to fetch we need to send   this user information to the store of auth store  we have created so here as a second parameter we   can get the payload from this and let's log the  payload and here we are going to pass the user   okay now let's reload so you can see still  once again we are getting the user and   we can get the user here by saying payload dot  user so now we have the full object of the user so   instead of this user I just say payload dot user  and authenticated is true that's really good and   we already have this is loading which is we are  doing initially when we start fetching then we   end the loading and initially we can make it true  because obviously when this page loads it should   start loading and when according to if user is  login or not we will finally close this is loading   so we say that if is loading is true then return a  P tag with loading dot dot dot and if not loading   then show all other things or all other apps so we  don't need this selector so comment that for now   and now reload and you can see it's working there  is one more issue with this if I just log anything   you can see this lock is doing two times one and  two and this is just for Dev tools but there is   two times and this is happening because of if  we go on the index.js of this strict mode we   can remove this strict mode totally because  this is creating rendering two times and now   if we see it's only going to log once so if I  reload it's only going to log once but it is   still locking it two times that's a bad thing and  this is because of I'm I have not logged on the   use effect so on this use effect it's going  to log only once okay so that's done and   what next next is we need to go on our check  auth function or higher order component   let's go inside this I don't want  any other thing but I want this state   and we use the use selector from react Redux  import use selector from react Redux and now   according to the authenticated information dot  is authenticated if the user is authenticated   well good go here we want wherever you  want and otherwise I will say navigate   and this is going to navigate to slash login  make sure you import this navigate from react   router Dom and before checking if we right now  check it will load again and again so before   checking this you can see it's authenticated  but what if I just say the token is invalid so   I just cut this token from here and paste 10.  invalid token you can see it is now redirected   me to the login and since we have guessed one  guest one is checking for the token and token   is not there then it's loading this so we can do  the same logic here so we need to do no not this   we need to do this and from react we  need to use selector from react to   Redux and we don't need cookie and now we  say if is not authenticated so is authentic   dictated not then show the login page or any guest  page otherwise redirect to the home page so these   two functions are really useful so if I reload  it's uh okay so there is some issue once again   it's loading many times okay so right now I am  on login page that's good so let's open the guest   and log dot is authenticated see if this  is logged in no this is not logged in okay   that's really good and same if I do this log  auth dot is authenticated and we need to go   on the expense at the home page you can see  it was false and redirected me to the login   page that's good let's try to log in first log  out so that I can clear the token we have now   we say sarthak to 34243 and then clear it sign  in and it should it is having a correct token but   if I reload yeah it's redirected here so this is  good and we are working with this but as soon as   we log in we need to make sure our state changes  okay so let's remove this authentication these   two functions are working these two higher order  components are working let's go to the login page   and here once the login is complete we are  setting the token that's really good thing but   also we need to dispatch and dispatch of get user  because this is going to return me the user so   it's returning the token plus user so we also need  the user so go to the server side on the auth API   when we do the login we return the token  message and user also so user we already   have the user okay now everything is good  so we pass the user and it's not dispatch   event it's just the dispatch so inside login  I say const dispatch is equal to use dispatch   and this will come from import use dispatch  from react Redux and also we need the   get user so get user from it is from our auth  store then auth dot Js okay so this is done and   we are doing we are setting dispatching this means  it's setting and we redirect user to the home page   okay so click on logout it says unauthenticated  finally it has to move me to the uh login page   so we will do that later but first let's try  to log in so so here I am and try to login and click on sign in you can see I am  redirected to the home page that's really   nice and there is no error let's work on  the log out finally so we have app bar   we have this log out once we remove the  cookie then we need to once again dispatch   and we say log out maybe this is a function  we have to create and once again let's import dispatch from react Redux and  import log out from from our   store slash auth Dot JS so let's open auth.js and  create a log out which is going to get the state   and now I say State there is no State change  yeah state DOT user is equal to empty and   is authenticated to false okay that's  good and we are having this log out   Okay so maybe we can call it underscore  logout this is the function we call it yeah now everything is working fine so import  it as log out okay so I have to export also   like this log out   yep that's done and import dispatch we have not  imported dispatch so const dispatch use dispatch and use dispatch will come from like this  okay once again let's try to log out and   I'm redirected to login that's great try to log  in and do that yes that's working log out that's   good and it's working absolutely fine everything  is so smooth and so clear that we are we have to   proud of ourselves this is how you work a lot of  nuts and bolts a lot of things here and there but   we finally did that so this is done with the  authentication and middleware and lot of other   things but next we need to go on our node side and  clear this apis with the controllers let's do this and now let's clear up the routes we have so first  we have this transaction API and we want this   logic to be on the controller so I have created  this directory called controller inside that I'm   going to create transaction controller dot JS  and here we will first cut this function from   here and export const and we call this index you  can call it anything and then paste it so we need   the transaction model also so transaction model  should be imported and make sure we have correct   Imports so I will say like this models transaction  dot JS right this is done but how do we use it   so it's very simple first you need to say import  everything from transaction controller everything   as transaction controller from our controller  slash transactioncontroller.js so since we have   imported everything we can easily do something  like transaction controller dot index and this is   the function we want to call on this place okay  so you can see if I reload some issue is there   it says that invalid token somewhere  we have oh this is the invalid token   okay now if I reload you can see it's working and  all the transactions are here that's really great   and we can do the same for any other places so  this is for the create so transaction create   so something like this it's going to be the  create and do it like this that's once again   done so it will be like transaction controller  dot create that's done and finally we have delete   so export const delete is equal to this one and  delete is not allowed so we can call it destroy   so this is good and transaction controller  dot destroy and we have then update   so let's call it with the update one so  export const update is equal to this one   transaction controller dot update now see this  real amazing thing this becomes so easy to read   all the logic is now moved to our controller and  this controller is taking care of each and every   update we want to do on our our transaction model  second you can create a middleware and we can call   this middleware here but that's okay for now but  let's do the new controller for user controller   so user controller dot Js go to the user site and  here we need this thing to be export const index   and this is the one it need the user model  so user from models slash user dot Js   what happened oh I think it doesn't need  the user model also so now user controller   dot index and we need to import the user  controller so import everything from   everything as user controller from  controller slash usercontroller.js   this is for the user controller and finally  auth controller is there so auth controller.js go on the auth controller and this is for the  register which is having a lot of things so we   can cut all these things go here we say export  const register and put all these things here   and what are the things we require here so let's  put all of these things so that we don't need any   other so yes we need this router to be here that's  great and I'm going to show you a different way so   we can directly import register like this from our  controller so controller slash authcontroller.js   and I just say register so this is a more  easy way of doing it instead of just calling   it everything as something controller and do that  okay so next is export const login and paste all   these things right here and that's done and just  like this we can say hey I want to do the login   which will be like this okay so once again  this becomes So Clean login is there and   all the logic for the authentication is  here the login and the registration okay   so finally let's check each and everything  so yes we have it we can create one more   transaction ABC and click yes it's  there change ABCD update it's there   click on delete yes it's deleted click on  logout yes it's logged out and it's our third   and login yeah everything is working absolutely  fine now what next remember on our server we are   using this again and again and again so if we have  to add lot of routes then it will become very big   file so in the routes we are going to create index  dot JS and then all these things we have we will   go and move it inside this index.js so just like  we are doing in any route file we first need to   import the router from Express then we need to  create a router instance and then we will move   these things here and convert this to router  and what is the benefit of this let me show   you just by export default of router and now  I adjust the app dot use slash and our router   and or I can say routes routes like this  and now I just need to import routes from   routes slash index dot JS that's it and it is  going to be so clean because now everything is   there so reload oops something is not good so we  are saying transaction API is not defined where   is transaction API okay so I forgot to import all  of these things which we need on our index route   so index and paste it yes everything is now  done still we have some issue it says can't find   module router okay so this is inside the same  directory so I don't have to do with a router   keyword and now server is running everything is  absolutely fine okay so this is how it work and   we have cleared a lot of things on  the server and this is how we work   with the controller inside the express or node.js next we need to work on this thing like  if we login as a ABC user you can see   I'm getting all these transaction if  I log out and sign in with sarthak   like this still we are getting all the same  transactions transaction has to be connected   to the users so I'm going to remove all the  transactions here and I'm going to create the   transaction with the user ID of the logged  in user before that we just want to remove   this login and register if I am logged in so go  to the app bar and here we can simply say const   is equal to use selector and use selector  will come from Redux and here I say state   State dot auth dot is authenticated and we call it  like here and then we will show according to that   so if user is logged in that means it if user  is authenticated show the log out button but   if user is not authenticated  then we will do something like   this okay so let's go and I just have the logout  button okay now how this is going to work so   whenever we create a new transaction we need  to add the user ID because we know that this   page is only be used by the authenticated user so  go to the server and we have the controller for   transaction controller and where we are creating  here so just here let's just log request dot user   and see what we are getting on our server  so when we try to create a transaction it says undefined that's not good why because this  route is not behind the middleware of uh passport   so go to the routes we have transaction  route and here just like we have the   middleware for this route we can get we can have  this route for all of these routes we have created   so instead of adding it here what we can do we can  go on our index and here we say that this is going   to be the transactions with this middleware  okay so now let's see we have some issue here   what happened I think we have to import  the passport yes import passport from   passport okay from passport now everything is  fine let's reload and yeah everything is good   now this means if I go to my console  and try to create another transaction   send and it says unauthorized that's not good so  just to check do we send the are we sending this   token so let's go to the form and here on the  transaction form submit part we have the create   and we are not sending the token so let's send the  token also while we do the create or update of the   transaction so here I say authorization is equal  to Bearer and some token so we need to get the   token here so anywhere we can say like const token  is equal to cookies dot get the token and import   cookies from JS cookies okay that's good same  thing we can do on here nice let's just save   this and go and try to edit and I want to edit it  click on update it has updated and now if we can   see oops we have to do this log on update so let's  create another so a lot of things are here oops click on submit and this time we get the  user so we have the user ID and we can use   this user ID and we can add this user ID on  the transaction so first we need to go on the   transaction model we have and we need to add the  user ID also user ID is going to be the number   okay and this is going to connect the  user with the transactions so here we   say user underscore ID is equal to request  dot user dot underscore ID and this is done   let's remove it from here and let's try  to First Clear or remove all these things okay so it's not deleting what happened it  says unauthorized okay so when we delete   then also we need to pass the token so  that will be from the transaction list   and on the transaction list we have a method we  need to find the headers and authorization is   Bearer token and now const token is equal  to cookies dot get of the token import cookies from JS cookie like this so it's  going to now delete so delete working okay let's create another one  so let's click on submit and now   we have some issue so that issue says  that it's failed why it failed because   to number field value of new object so this is  actually having a new object objective which   is like a object ID so we need to go to the  transaction model and instead of number we   say it's going to be the Mongoose dot types dot  object ID this will make sure that if we send   the object ID for this field it will be the real  object ID from the mongodb now it's very easy we   just need to say on user underscore ID is equal to  request dot user dot underscore ID so that's the   simple thing sort of is running remove any other  transaction we have and let's say 100 movie and   click on submit it's there without any error  and this means that if we see the transaction   here we have the user ID given like this okay  so let's create another transaction and then we   will say I scream and add it so it's added now  let's log out and try to log in with sarthak   and like this two three four two four three oh  that was the same thing so this user and now we   need to get the list of the transaction only for  that particular logged in user so once again on   the transaction controller when we are fetching  all the uh transaction we need to say user   user underscore ID has to be request dot user dot  underscore ID so this should be the case finding   with this thing so now if I go and reload you  can see now we don't have any transaction but   if I create new transaction Movie 2 hit on submit  and yes it is there so let's just once again try   to log in with different user and see these are  the transactions only for the authenticated user now let's add category to our transactions  and we will going to have this kind of drop   down which will have lot of things and we can just  search and if we get we can just select it that's   really easy and that is with the help of this  autocomplete so let's have this and go to our form   after our date picker we can just paste it  now a lot of things we need to do first we   need to import the autocomplete so it will be  from the material UI and then what it need it   needs the value so value will be like we have  the form so initial value so category is empty   so value we can say it's a form dot category  then if this is done then we need to set the form   with the new value for the category category  but we also need to spread all other form data   okay so what is the initial  value initial value I think   is going to be the same like this and I think  what is this on change and on input change   let me see so options now what are options  we need so we need the different categories   to be selected from so here at the top we can  create some categories so categories will be   like we can give the label first and label is  travel and then there is shopping investment   and bills oops build so so this is bills now  we have this category here and the label is   category okay d g o r y yes  let's see how it's looking   it's on the new line so we need to make sure  it is first having a size and the margin also   so this is good so it becomes the size at with  with the height of others matching that height and   width is going to be 200 only that's good but  how do we make this in line so you can see we   are using this form and a native form HTML form  so instead of that I'm going to use the Box   from Material UI and this is going to be a  type of so I will say component component is   form and since this box will treat as a form so I  can easily say on submit so let's import this form   also this box also so this is the box and remove  the form because now our box will be treating as   the form but what is the benefit of using it  we can simply say display as Flex that's good   and now everything is here but why don't it don't  have the margin on the right so what we can do we   have the margin right here on the text field we  can put that margin right on our autocomplete   that's good now let's see how this is changing  the behavior and I can search for autocomplete   and actually I can search for the form the  transaction form so transaction form inside   this we have the state and state category is  not having anything so let's select investment   okay so it says label is investment so I don't  want to have the label I say new value dot label   like this so if I start from scratch so reload  this page and select investment and yes investment   is here that's great so we have this categories  aligned with this kind of form and now it's the   time to submit this form with the categories  so how this is going to work everything is fine   but on the our back end where we are going to  store this category is this going to be on the   transaction is this going to be on the user and  from where all the other categories are coming   so we will going to provide user ability to  create new categories so suppose user want to   have their own category so it's a user connected  category so there are two way of doing it yes you   can use another collection for the category and  connect that with the user or you can add embedded   document inside of the user data so when we create  new user we need to have the categories connected   to that user so how this is going to work first  let's go to the user auth controller and here   we have registered new user so when we create new  user so like this we need to add new one which is   called categories and this is going to be an array  of different different categories so we need to go   to the user model first and then we can provide  categories is going to be an array an array of   first an object and this is going to be the  label as a string and I also want to have a   icon so that we can associate the category with  some kind of Icon okay so this is done and what   we have to do next on our auth controller we are  having the categories but we need to have some   categories which will be like exactly similar to  the categories we have on our form so let's copy   all these things paste it and just like we have  this I am also want to have icon of user right   now I'm having any random string like a user as  the icon later on we will provide the ability   to change the icon only for these categories or  add new category update new category anything   so whenever user is registered I'm going to have  the categories so I can do something like this   also so everything is fine let's now uh go and  register a new user so let's log out and I say   ABCD at gmail.com password is password register  oops it's sign in actually so click on register   so ABCD ABCD ABCD password sign in yeah that's  done password click on sign in yes we are here   now how about having the categories from the  user data so right now we know we have the   Redux and inside Redux we have all the user  so we can say user is equal to use selector   which is going to have a state and I say State  dot auth dot user and if you want you can just   destructure categories from here also but first  let's import this from Redux import this from   react Redux okay that's good and now it says  cannot re-declare block okay so it's we already   have one category so that's why it's giving  error now it's it should not give any error   cannot read declare yeah so that's done  and on here we are doing everything we need   so it says cannot destructure property that's gone  and now if I click you can see these are actually   coming from our back end from the user categories  so instead of giving the label we should give the   ID so that we can verify what uh category we have  so suppose by default the user has created two   categories with the same name with the same label  actually so that's going to be difficult for us   so we will select and add the ID as the category  so maybe we can also call it the form will be like   category ID not the category so category ID like  here okay so in that case this will also become   underscore ID good so everything is fine and  let's try to select a category that's good check   on the component for the state of transaction  form so Tran section form and state is having   the category ID wow that's so amazing so that's  final and this means when we store the category   or when we store the new transaction actually  so go to the transaction controller create part   we should also add the category underscore ID  inside this so category ID will come from request   dot category ID this means on the transaction  model we need to add category ID also and it's   like category ID and having the same type of ID  good that's done and let's try to add one more so   100 movie same but this is uh when when I am doing  the traveling so I just spend this amount click on   submit yes it is added so let's have the category  on our list so let's go to the list and let's   have date and before date we have the category  and we can just show the category ID so because   we just have the ID right now it's not having  it why is that so let's see the transactions   is not giving me the ID so that's an issue so why  it's happening let's just try to check on that   State category ID if we select yeah this is become  category okay so one problem is this you can see   it's on the category not on the category ID  and that is because we need to say category   ID like this okay so this is done but once again  and yeah you can see now it become category ID   but also here it's having the category ID it's  showing the category ID so instead of category   ID we need to show the name but on the form we  need to set the category ID how we will do that   so here we need to create a function which  will be like get category name by ID and   this is going to be like when we pass the ID or  maybe just do this and let's create this function   and how this is going to work let me show you so  get category by ID name and then we already have   the ID on our form so we can just check that so we  say return of this up now this just categories Dot   find we need to find it so it's going  to be the category and then if category   dot underscore ID is equal to form dot category  ID then return this and if it is available like   if we find anything then return it otherwise  return an empty uh empty string okay so it's   actually giving me the function that's not  good so let me just see okay we need to call   this function because it's a value not then event  now if I choose bills so on the state you can see   it's category ID but here we see the real string  for that one that's good finally let's create one   more so 100 movies and this is good travel click  on submit and once again we are not having the   the ID here it should be like it's not  stored what is happening so once again click on travel submit   so payload is not sending oh it's sending actually  here is the category ID we are sending so why it's   not storing on the transaction controller hmm so  request dot body dotic category ID that has to   be or we can just restructure from here and in  that case we don't have to do anything finally   let's delete all other categories we have or  transaction we have not the category so one movie   travel submit yes we have the ID now instead of  this ID we want to have the category name we will   do that later but for now yes we are connecting  the ID with our transactions that's really good the very first thing we need to do is to  show the category name instead of the ID   so it's going to be super easy what we have to  do we need to go on our list of the transaction   and here we are showing the category ID now  let's create a function called category name   and pass the category ID and let's create it  so first go at the top and create a function   like this which is going to accept the ID and for  now let's return not available or n a so you can   see it become an a now next we need to First fetch  the user from our Redux store so use selector   state dot auth dot user and  use selector will come from react Redux react Redux okay so that's good but  now what we need to do we need to filter out the   categories so we say category is equal to user dot  categories dot find and we get a single category   then we say category Dot underscore ID is equal  to the ID we are giving so if we get any category   from the user category so then we say if we get  the category then show me the category dot label   label otherwise show an a which is not available  so this is good investment and travel super duper   easy and that is the power of using mongodb  since we have the categories inside of the   user collection we can easily do whatever we want  that's good but next what I want I want to have   another tab here which is for the categories so  that the user can add his own category or delete   or update the existing categories they have how  do we do that so first we need to go on our app   bar and here let's create another  button just like this button we have   and maybe I can copy this link button and  after this expensor I'm going to say categories   which will lead me to category route we are going  to create or maybe we can just call category   okay so that's going to be easy reload  it's not available why that's not good   hmm seems like everything is  good it should show us the   link oh it's here on the right side you can see  so that's not an issue we get it here so we need   to click here and it lead me to the slash category  route we don't have the route so on the front end   we can create another route for slash category so  this will be like slash category and remember this   one is also for the user who is authenticated  so check auth will be like this and category   component we have to create inside the Pages  directory because this is a new page category.js and that's good let's import it nice so now  you can see we have the category page available   okay so just like we have the expensor and we have  this kind of transaction form and transaction list   if you want you can just copy the same structure  or you can do something else so yes for now we can   have this kind of table which will show me all the  category and the icon okay so how do we set that   we can go to the cat we can go to the  list of the transaction we have and we   are going to copy everything from there  and paste it here and I call this one as   category and this doesn't have any transaction  detail because it's not a transaction so   I don't need this function which is for  the remove so remove that format date is   okay list of categories and category label  category icon that's the only thing we have next it has to be categories and this will  come from the user category so maybe we   can just call it user categories user dot  categories and obviously we are going to   map power over it so row dot label and row  dot icon that's the only thing we need and   that's good so let's remove this one  and for now we don't have this on click   and this one click okay sounds good let's  see so here is the list of categories that's   great and finally let's move this inside a  container and I really like the container thing   okay list of categories category is this  icon is this and it has to be action so   this is on the header actions for delete or edit  so very first thing I want to do is the delete   part so when I click it should delete so let's  say function for remove we get the ID and then   we say const response is await and it's going to  be the async a weight of fetch for our process dot EnV Dot react app   API URL slash category and we want to delete  so it's going to be the method of delete and then after it's going to be the  headers as authorization is going to be   Bearer token and from where we can get  the token we get the token from the cookie   so at the top we can get the cookie import  cookies from just cookie that's good but   this will remove will work like this so row dot  underscore ID that's fine and everything is good so let's try to create the API because if I now  go and click on delete you can see it says 404   because not found so let's go on our server and  here I'm going to create another route and that   will be just for the categories although this  is inside the user you can also create it like   inside the user API but I like to have it with  the different API so the category API will be   like this slash category and this category  will also be like only be accessible by the   authenticated user so that's added with the route  okay so one more thing we can do we can say const   is equal to this thing and now I can replace  this with auth so that it will look good and like this yeah seems like a nice  thing is it working and it's not working what it says the server says something server says auth category API okay so we have to  import the category API just like we are importing   any other API like this everything is fine and  yeah finally let's go and create the category API   and inside this category API we have copied the  user API and created this file so now it become   Easy by saying category controller instead of  user controller so I can just say get a category   controller and let's create this category  controller so controller is here let's copy   and paste user controller and name it as category  controller good and index is okay but what I want   I want to have a delete for now so let's call it  destroy and how this is going to work so first   we know that all the categories is inside the user  collection so const categories is equal to request   dot user dot categories so this will give me all  the categories so let's just log the categories   and let's call it with destroy dot  destroy and this is a delete request   everything is fine yes and now let's  see what we are getting so click   on delete and you can see we are getting 200  and we are getting the user but on the server   you can see we are getting all the array of the  categories we have for the user okay that's good   now we want to find or basically we want to create  new categories new categories is equal to we get   the old categories and then we say filter out  with the category a single category and we say   category dot underscore ID is not equal to the ID  we will pass as the parameter so it will be like   we are passing we have to pass the category ID  here ID yeah so the ID we are passing on the   remove will will be here like this so that we  can delete that now if we get the ID which we   can directly get from request Dot params.id and  this will give me the categories which does not   have this ID which we are passing and finally we  say that we have a user model so import user from   models slash user.js user model Dot update 1 where  underscore ID is request dot user dot ID and then   as a second I say setting what setting categories  with new categories so after we remove the   category from the collection we have or from the  array we have then we set that with the ID here   okay so we need to go to the category API so  that we can update our route it will be like ID   and good everything seems very very  nice and it should return the user   with the await and return me the  user only so making it a sink so everything is fine just make sure it's not  triple equal to a triple not equal to because   it's not exactly similar because this is an object  ID this is a string so that we are just matching   like this and now let's try to remove the last  one click and network tab says that everything   is fine acknowledged and if I reload you can see  it's removed we just need to remove this from our   Redux store also so let's go on the front end  and once everything is fine so if say request   dot okay then we need to dispatch dispatch and say  uh dispatching off set user we already have on our   auth so uh it's it has to be set user not get user  so let's search for get user where we have used   so it is not get User it's set user okay so here  also we are saying that export set user finally   and now on our here we need to set  user import so import set user from   store slash auth dot Js okay and let's remove  these two and also we need the dispatch   use dispatch and this will come from Redux store  Redux react Redux and how do we set the user so   first we need to update the user with the category  so const underscore user is equal to user spread   the user and then we say that hey inside this  user there is a categories but categories will   be like user categories dot filter filter  with cat cat means category cat underscore   cat dot underscore ID is not equal to the ID we  already have so this will give me the updated user   with the updated category and we pass this user  like this so we say something like this user is   going to be here so just like we did on our  set user is just the user and it has to be   this so I'm not sure if this is going to work  so what I'm going to do before deleting I just   want to check if it's really updating our store  or not so here we are let's go and log payload and it says get user in auth store we already  have done that get user is not available   oh so here also it's going to be the set user done okay so let's try to remove the builds  and you can see we are getting user and we   are getting user inside it so maybe we can just  say here we are we need to just say like this now what if I do something like this then I get  no I didn't get anything I get the user directly so if I do this if I click on travel travel  is removed so this is working absolutely fine   so let's just try to delete the category  and then we will move forward so click   on bills and bills is removed even if I  reload it's back so that is not deleted   on the back end so let's once again try  to delete and it says that it is deleted   and yes it is really deleted so try to  delete investment it is deleted reload   and yeah it's working absolutely fine so  finally this is done and let's move forward now let's have a form to create a category and  that's become going to be easy because we already   have the transaction form and let's just rename  this to category form and we will make it category   form like category form okay so it will need we  will see what it need but for now it's going to be   like this and let's import this on our category  page just above this I will say category form and it has to be with all of these  things so first add new category   okay this is not amount this is label  or title and this is once again text   and small is okay label is okay form dot  label about change is good next we need the   list and that is going to be the autocomplete  one for the icons we will do that icons so icons   icons and icon is going to be the new value  and I can that's good so edit transaction   dot amount it's not like edit transaction  it's going to be edit category so I say edit category okay and it seems like everything is good  we need the icons let's go at the top and maybe   at the very top we can have const icons is equal  to uh array right now and this array will have a   label of let's say user and we will also have  the real icon okay so that's good on the form   as we know we need the label which is going to  be the empty and icon which is going to be the   empty okay so next is we need to pass the edit  category from here edit category we are not going   to have anything fetch transaction just for now so  that we will not get any error and like this null and this is good let's now see reload now it  says amount of null somewhere we are using amount   okay so let's now go once again  and search for amount so on the   use effect we are doing this so  if edit category dot underscore ID   is there is there any other amount yeah so a lot  of amount we have that will become underscore ID once again underscore ID okay so finally we have  done and now it says reading of underscore ID   null of underscore ID so what we can do  instead of null we can provide the empty object and yeah we have a new category form that's  good okay so we need to submit this form and   then we will see how we can create the backend  so we submit the form where we have the submit   and this is again same first if we have  the edit then we do the update otherwise   we do the create create is for category like  this and everything else is going to be same   instead of reload we will say reset and  there's also be category and edit category   and it seems like everything is good get  category name is not the thing anyways we   will see that later okay so let's go on the  back end and we have the category controller   inside this we have just the delete one let's  create the export const for create a sync   request response and finally we will say that  we need the label and icon from request dot body   okay then we will we need to update the user and  updating the user with the categories we have all   the category so array and we say yeah since we  need to create we have to add a new category that   will be like request dot user dot categories  comma another where we have label and icon   this is how we add a new uh you can say category  and finally let's return the response actually response and responses like this so let's try  here but first let's see what we are sending so   let's go on the form and before doing this  let's just see what we are sending so log   of form okay so reload and open the console  and select so instead of sending label and   icon we are sending icon as a object what  if I just say it's a list of a string and is this going to work yeah  it's working and this time we   are sending icon and the level that's  good so where we are logging this user   we will see that later but for now it's good  and finally we can send and add new category   so XYZ icon is user click submit it's done  reload and yes it is there that's good and   at last we need to reload so just go to reload and  here instead of fetching the transaction we need   to first dispatch and then set the form reset the  form so we need to First do use the dispatch then   use the set user and then we will pass the user as  underscore user which you have already seen on our   category where we have done something like  this so why not copy all these things and   paste it here so what we have to do first we  need the user then dispatch and set user all   of these things so here we are already having the  user but we are destructuring with the categories   so we just say user and wherever we are using  categories we can change it with the user category   user dot category next just like use  selector we need the use dispatch   and let's create dispatch instance use dispatch  and also we need to import set user from our store auth.js okay now here how do we add the new   category you can also do the push like pushing  and pushing the form but it's going to be like   spread the form and then it should work  okay let's try this with new category   and it says cannot add property 3 object is  extensible whatever it is it is done here but   let's remove it and once again try so what next uh  how we can do that we can do it in a different way   we can simply say that this is a user categories  spread all the user categories in this array and   then spread the form this is I think become more  easy so a b c okay and form is not iterable really so one more time yeah this is there cool so we can remove and  we can once again try ABC it's done okay so we   have added it but finally it's time for the edit  of our category so just like we are passing this   fetch edit category here so fetch category we  don't need but edit category we need to pass so   passing from the category component so category  component is here whenever we click on edit button   we need to say set edit and this is just I'm going  to call so we should have a set edit function set   edit we get the category and then we say that  let's have a new state use state edit category   and initially it's empty and then we say set  edit category is the category we are getting   now this one we need to pass here instead of empty  object and now we don't need any fetch transaction   so this will become like this and now go to the  category form if we have the edit category then   we set the form with the edit category details  so we need to import the use state which is   here import that's good and let's try okay  so let's have this and try to update it   click on update it actually added here but if I  reload you can see it's there this is really good   and now we need to do this when we do the update  only so on this form we have this reload which   is actually giving all these things so instead  of passing the response or maybe just after the   response we can also pass the user so I can just  pass underscore user like this this means when I   do the create I need to update the category and  pass the user and when I do the patch or update   then also I need to create the user and pass the  user with the updated categories now this time   what I need I need to First Loop over  the categories and then say dot map   category category and it will be like if category  dot underscore ID is equal to the ID we have   then return the form so return the form means  like this otherwise return the category we have   so if this is matching then we have the  form and it says ID is not defined because   it's going to be the edit category  underscore ID okay let's try this one   once again travel has to be updated three click  on update yeah you can see it's very smooth and update it cool so this is how we  update and add and do a lot of things   with the category and when I do when  I go here here we have the categories before moving to the end of this course and  before deploying I just want to have a graph   here at the top which will show me the month  wise expenses I have done so total amount and   we can show at the top of this form so  for that I'm going to use Dev extreme   reactive and here we have this react chart  so let's go to explore component get started   and since we are using material UI so they have  a specific material UI related Library so I just   want to install this one for the client side make  sure we are on the client run it and this is going   to work now how do we get started it's very easy  you can go on first on series and you can see we   have this bar Series so copy this and what I'm  going to do for now I'm going to copy each and   everything from here and then on the client  side I'm going to create a component called transaction chart dot Js and I paste it  and then I will name this transaction transaction chart okay this is good and it's a  class based component it doesn't matter if you   want you can use the simple you can use the  function based component also and that's it   this is the simple thing and let's import this  on our home page above this transaction form   so we have this transaction chart and let's  import it that's done so let's go and yeah we   have this chart let's give some margin at the top  so maybe we can do something like this margin top   is 5. and yeah we have the five but we need  some more information on the graph so here we   can go to the access and then we can add the X's  here so we just need to add these three things   value X argument Excel and argument scale so  how do we do that it's very easy just paste it   and import all of the component we need so like  here then for this one you can copy and paste it   let's okay it is good and now if I go and see  you can see we have the number properly given   but what next we need some kind of animation so  there is animation also and we just need to add   the animation component like here after the chart  and let's import this one also so animation will   come from DX chart action so DX chart action we  don't have so copy that paste it and let's reload   yeah you can see very nice animation  and after that we can also see we have   the this one tooltip dual tip is give me when I  hover over it it gives me the information of that   particular chart so how dual tip is going to work  tool tip is very easy yeah just another component   like this after this animation we put that tooltip  will come from DX material UI so yeah like this   and finally if I hover over it it should work but  it's not working I think it also needs something   else so event tracker okay so event tracker  and event tracker is coming from DX chart nice nice and yeah you can see now it's working so  we have designed the chart and now what we need to   do we need to group the transactions by our month  and then connect that transaction data with this   chart so basically we need month here and total  expenses here so let's go on our transaction   controller when we are fetching all the  transaction let's see how we can Group by   so just for now I just say demo await transaction  Dot Aggregate and in this aggregate first thing   I will do is dollar match so what I am going  to match I'm going to match user underscore ID   with the request dot user dot underscore ID so  let's see how this is going to look if I just   give the demo and now reload and you can see we  are getting the data once again as we get from   the find that's exactly similar but next  we need to group so next we have to say   we have the group and grouping which need  first the ID and ID will going to be the   month value with the date so it's going to be  get the month from the field date we have so   remember we have this date field which is like  when we have added the transaction and that is   showing here and which we need to fetch or  group by so this is done and now if I reload   you can see we have ID 8 and 9 which is  representing August and September the data we   have here but along with this we need all the data  for that particular month that means we say Tran   transactions is equal to Dollar push we are  pushing first amount which will be like dollar   amount then description which will be dollar  description and then we also need the date   which will be dollar date like this okay let's  reload and this time you can see uh we have the   transactions to transaction on the eighth  month and two transactions on the ninth one   along with all these things we also need the  count or total expenses which will be the sum of   the field called amount so that means how many  what are the expenses for that particular month so   for this month of ninth we have 110 so it  become 110 for the next month we have one   thousand and thirteen thousand so it becomes  fourteen thousand and this is exactly we need   so first let's work on this graph and then we will  list out the transaction according to the month   so we have to go to our page like home page  here we can send the data so data is equal to   the transactions we have okay now here we should  get the data as the prop so here how do we get the   prop so data is this one so maybe I can say that  props Dot data this is going to be the data and from here we need to first remove this and check  if we have the correct data or not this dot state and you can see we have the  data but it says data is empty   so maybe if I can say props dot data like this  instead of defining the state yeah we have it   that's great so we don't have to create any  state and we don't have to do something like   this I don't like these class based  components I'm going to just create a functional component and then I'm going to  return all these things like Here and Now   Things become super easy when I just say hey   data is here okay now instead of chart data  I say the data okay and now what are the   fields we need so in the year field we need the  underscore ID and for the population we need the   total expenses from the data we are sending  but data is in two form so first is expense   ID and you can see which is populated like this  so this is 14 000 and this is hundred and ten   this is the only way we have to show the data  but final part is here on the transaction we   need to Loop over the transaction we have so we  are sending this transaction which is like this   from here we can call it data not the transaction  and then go to the list phase this is the data   and then first we will Loop over the data so data  dot map and this will give me month so each month   we should have the month Dot and then comes the  transaction so if I can remove it and remove this   move all of these things here so it will be  like First Data mapped through all the data   and for each month we have some transaction  and show the transactions like here okay   finally you can see yes everything is fine we  have the September is here and August is here   and this is showing me like 110 for the August and  this is for the August actually and this is for   the September so now let's convert this number  to name so first let's remove this and import   DJs From day JS and then we create a new chart  data and we say data dot map and we get the item   and then we say hey I'm going to return the item  but I'm going to say item dot underscore ID or   maybe we can create another field called month  is equal to DJs Dot we need to say dgs dot month   and call this month is item dot underscore ID  which is the month value we know and then we say   format formatting with mmm okay now use this from  this chart data instead of this data okay reload   and it should give us if we convert this to  month and yes you can see September October   no this is not correct so what we have to  do actually the DJs month start from zero   so we just need to decrement it by minus 1 and  now we have August and then we have September   so sometime it is September is first sometime  September is on the last that's not good one two three four so September is there and  August is there and September is here wow so nice and finally we are going to deploy our front end  and the back end both on different platforms so   the back end the node application will be deployed  on Heroku right now Heroku free tier is active   but after 28th November 2022 you need to pay for  this and that's going to be a very minimal charge   so it's not going to be that much so let's  first create the app and I call it bit fumes   man course create this and once this is done we  are going to use the Heroku CLI this is going   to be useful because it's so handy that you  don't worry about this so first you need to   have the Heroku CLI you need to install it via  the installer or if you are on Mac you can use   this or you can directly run this command to have  the Heroku once you have the Heroku you just need   to go on your server and check first if you have  Heroku or not so yes I can see I have the Heroku   so I can go ahead and do the Heroku login so first  I do the Heroku login and it says press any key to   open the browser so just press this and it's going  to open the browser so that I can click on login   button and it will say that yeah you are logged in  let's close this and then you need to do the git   in it and this is super important because this is  going to initialize the git repository inside of   the server and since we have another git which  is holding both of them so we need to actually   have git ignore inside the server so that this  the git inside of This Server will not going to   include this node.js so I'm going to remove this  and say that hey this is not going to include   the node.js and now you can see node.j has become  dull okay so this include this represent that the   node.js is not included finally we need to say  Heroku git repository is this one like here and   very soon it will be done cool what next now  we need to do a commit so we say git add all   then after that we can do a commit and you don't  have to do this but that's done and finally we   need to say git push Heroku master and if this  kind of error you are getting then you need to   make sure it is head colon master and now this  is going to work and this is actually pushing   everything to heruku and this is also doing the  deployment so you can check that on the activity   section so click on the Activity part and you will  see that something is going on here like this very   soon this build will be completed and then we can  click on this open app to open our app and finally   you can see it's done deployed so click on app we  should get the hello world and let's see what we   are getting here so we are not getting anything  it's keep on loading and loading and loading   so couple of things we need to do to resolve  this thing first we need to make sure we provide   that process.env.port if it is there then  use that Port otherwise use 4000. so Heroku   provide the port by default so that's why we are  providing it second I'm going to call this as   a start not the serve why because if you go  on the overview and maybe on the resources   you can see there is no dinos this app has  no dinos why is that because you need to   add a proc file to your application in order to  define the process so let's have this proc file   and a proc file will say uh process type and the  command so let's go ahead here on server and say   proc file not the type proc file is there and  then it's a web which says npm which is actually   serve so we need to see what kind of web and  then the command so we can simply say npm build so maybe just say serve or start   let's see what's going to happen so if I say git  add all get commit with a message of using proc   file and once again do the push okay let's  see after this what's going to happen   so since we have defined the proc file it should  include any Dyno that means a server so once again   if you go on the activity it will just to keep  on building so once this is finished we will see   that so I just did one thing is I just added npm  start and then I just pushed and you can see it   is working absolutely fine we are getting the  hello world but what if I do the transactions   so simple transaction it says unauthorized because  you know we need to do uh first we need to connect   it with the uh mongodb so we need to provide  the envs so first EnV is [ __ ] DB username   which is bit fumes not sarthak  and after that mongodb password   is between one two three like this  [ __ ] URL is going to be full this one and finally the jwtc credit it's  very important so that we can log in   and make sure in real application you have very  strong JWT so all these things are done and now   we can trigger another deploy so that it include  all these variables so how do we trigger another   deploy can we run it okay maybe we can just push  from here and we can push Roku once again and it   says everything is fine but we can just say hey  I am adding added envs it says nothing to push   so maybe I need to change a little bit so  something we can add so maybe I can add a new and now you can see it's going to push yeah so  it's rebuilding and while this is rebuilding   let's go to netlify and here inside this netlify  I will deploy my react application you can also   check for reversal it's up to you where you want  to deploy so I want to deploy with GitHub so first   do that choose the organization then just find  Mon and search if it's not available you need to   reconfigure it so it's available boom and now we  need to go inside of our client and then run npm   run and what's that so check for client  package.json and it's npm run build   okay so npm run build and click  on deploy site so while this is   deploying let's search let's see our back  end so backend is this one and if I do the   once again transaction it will be reflected  once we have our front end ready so let's   just see how this is doing so it's building our  application and very soon it will be available   so we are getting this error because of this  process.env.ci as true and it is treating   warnings as error so we have some warnings which  we don't care but it is doing that so once again   we need to go on the settings so deploy setting  is there and we have this npm run build so we say   CI is equal to false and then npm run build and  one more option is publish directory we need to   do the publish directory on client slash build so  whenever we do any npm run build it will create   a build directory like this where you have the  real project so save this and click on trigger   deploy once again and this is going to  trigger the deploy and start deploying so   yes this is going to deploy but you  know we need these EnV files so first   it says the react API URL that means where  you have the node so for that you need to   once again go on the deploy and this time go to  the environment and here we have the environment   settings so react deploy uh like node application  is here inside this so we need to open it   copy this and paste it that's great and click  on Save and then one more deploy because every   time you do any changes you need to do the  deployment so this is deploying our front   end or the react application and let's see if  this is really connected to our backend or not   so finally it is done let's click on preview and  if you open this and click on expensor once again   so maybe on the category and anywhere you will  see that we are redirected to the sign in page   now let's try to log in with the account  we have so pass word which is not two three   four two four three click on sign in now it says  reading category is hmm but you can see from our   backend we are getting this so This is actually  problem with our application but if you try to   visit you can see boom we have the application  ready everything is here and if I go on category   there is no category we can easily log out we  can log in with ABCD at bitfumes not bitfumes   gmail.com password is pass word hit on sign in  and it's not doing the sign in why let's see   okay so now it says credential not found ABCD  at gmail.com is there pass word is the password   and once again it says so how about ABC and again it says it's not found so the only  one we have is this one click on sign in and   yeah we are here but we have some issue and that  issue we will be solving so you can see this   is the application we already have and this is  working absolutely fine let's try to add one more   transaction and this is Heroku Heroku and category  is not there so let's first create the category   category is server I can is not having  anything category is created and once again   hey Roku and server submit and you can see at  last it's there on September now September is   become 2 10 from 1 10. boom so this is  how you create the monastic application   and this application is so amazing so  that's really great and hopefully you   learn a lot from this if you like this video  that will be helpful for me and don't forget   to subscribe to bitfemes YouTube channel and we  will meet in some other videos till then goodbye

Channel: Bitfumes

Views: 31,512

Keywords: mern course, mern stack course, mern stack

Id: 35sYtKbg_Y4

Length: 337min 47sec (20267 seconds)

Published: Wed Sep 21 2022