Transcript for:
Techinfo YT Lecture Notes: Building Blue Bank Application

Hello and welcome to Techinfo YT, in this video we are going to create a complete platform project in which we will create Blue Bank application which you can see on your screen, so first we will see the demo here, after that we will create it step by step. What we are going to do in this is we will see multiple roles, as you can see on the screen, we have roles here, Data Admin, Hospital and Organization, so according to the number of roles, we will change the functionality, I will login to all of them one by one. Let me tell you and here we have made this form simple, that is, it is a single form, there is only one form in the login and the register form, both are on the same form, we have made it a ray, if you see it in the code, then here you will see See how the switch will be available, in which we have done it on the basis of cases, you will see how we will do it later, but we have made a single form, here you can also do registration like if I click on the hospital, then see dynamically our The pass fields will be changed here. If we keep it on Organization in this manner, here we will have to do the same for Organization name. If you want to make further modifications in it, you can also do so. You will also get the link to the source code. First, I will give you the demo thoroughly. Let me tell you, after that we will go towards the source code, so let me login and tell you, first start by logging in with the organization and for that you have to add its email ID and password here or else I will also tell you the validation first . How in this, if I did not provide anything here and click on login, then here we have validation A. Please provide the friends so credential, I added it here, now I click on login, then see the spinner is also there. Pass and login successful here. Instead of this, you can also give a notification to him. I will click on OK, then see such an organization has been logged in here in which we have all the blue records in which the type of blue is where is it in and out . What is its quantity, who has done in and out here, then it will show here in this way, at this time also you will get to see all the donors in donor, how many donors here, send your application to him, whatever organization this is. If there is any other organization 's ID , then whichever hospital will be registered on it or it will be blue in and out like I am. Let me tell you the form and if you click on the inventory then there will be a model like this and this is the model of bootstrap which we have done here in this way drop on mother you, basically all of you will know this, after that You can see all these sir records here, now I am the administrator and tell you by logging in, I am late and logout successfully ok and in this project we have used read x and complete this sir process of reduction. You will see with the help that it has been set and the token has been set here, so we have reduced it also related to authentication and in this manner we have done the reduction here, let me tell you once, the services separately . What is create, reduction, features inside it and then inside action, we have done action function and we have done it in slice, you can see here, builder is used and reject key is also handled, so all this functionality. Also we have seen in this, with the help of reduction, so the project is complete, now I will tell you to login like this and you have to click on the donor and here you will write donor.com, then you have to add the password and here I will login. Let's go ahead and donate as if both of you are logged in then see it will show you here Welcome Donal and yes, I have not told you anything, still I will tell you right now, okay here to which organization did you donate your blue ? It will show where and how much blue you have donated, it will also show here, so see which one is how much, we will get all these details graphically, along with that you can also see the recent transactions, how much blue is in and which is out. And whose quantity is there, they will also be shown equally here, so we have also kept this functionality inside it. Now along with it, I will also tell you the admin panel or if you want to see the hospital, then I will also tell you the hospital. We have kept it in this. Tha AIIMS, you will meet him, it will happen and people here who are successful will show something like this here. Now what is this Apple Care, this is the organization and we can see the consumer and who has consumed our Blue here, along with this I will also tell you the admin panel, this is our admin, you have to login in this also. We have seen almost all the functionality in this, from here I get logged in from the admin, like if I login from the admin, then in this way there is an admin panel in which the admin can manage the donor, can manage the hospital and from this in this way, If it can handle organization also , then this is a complete project. We will use the track that we create in this video. Its usage is also in the description and here see the complete code of the head. If you want what you want in terms of functionality, then what do you want? Click on this comment, you will get the comments here, you will get the code according to how much change has happened, whatever is the time stamp, then mixer, you also check its comments, you will get the code according to the comments also and complete project. You will also get it here, if you are pasting it now, then you can modify it as per your requirement, then I hope you will like the project in this search project, one more time you follow step by step, if any error comes then your Do compare the code with the source code, there may be some spelling mistake or you may forget to write something, even then you may get some relief in seeing, then you can comment below and message me on Instagram. I will try to reply as soon as possible, so let's start the project [Music] So, before working on the project, let's see the software requirements, what all you have to install in the system and what all we will see in this project. First of all you have to install Note GS, with the help of which we can download dependencies or packages, then you can download its STS version, its website is very simple, if you even Google it, you will get note gs.org . You have to go to the website, your operating system will automatically detect it here, like in my case, I am on Windows, if I am doing it on Linux, then it will automatically detect it here, after that I will STS you from here. Whatever version you have to download, installation is very simple, click on next next and it will be installed automatically. After installation, you can check it. What can you do? You can do it using command prompt as I tell you by opening command prompt. And you have to type here load das ve, so whatever current version is installed in it, that is, whatever STS version you have downloaded, it will show here, in my case, 18.4 and all STS versions are 18.60, along with this you get There is Note Package Manager, you can check that also, Nam Das also wrote and along with it, by default Note Package Manager comes with the help of which we can download the packages, so along with 18, there is version 9.5. Now if you want STS version. If you download, then it may show more shows in it and if you download the current present, you can get to see more future versions in it. Now what is the meaning of current, in this you can check the letter feature ahead of time. But there are some problems in it too, then it has the power to effect you, if you are on a mobile, then only download the current version, otherwise you can go with STS, it is a table version, you do not see any problem in it. See you until you have a problem with it yourself. After this we are going to use the Mango TV database for the database. So what do you do? Login to the cloud. If you already have an account then there is no problem. Enter the connection string . You just have to copy and if you are watching for the first time then from here you can click on Train Open and from here you can sign up, in this you have to file your details and here then your account will be created like Account will be created, I will tell you again in a separate video how we create a cluster inside it, what you have to do with this is to come back to its home page and click on this products, inside this you get an option of compass now. What is Compass? This is a tool in which what can we do? We can check our database. We do not have to come to Atlas i.e. this browser again and again and login to Mango TV Atlas. We will have the connection string with its help. In this Mango TV Compass Software , you can also check out all the data bases available in the database, so download it and keep it, later we will do the same. Rest AP will use the express for this because there is a moinstall project in it. What is express express at this stage? This is the frame of Note GS in which we can create rest up. Now it is not like this, it is just express but we are seeing one strike. That's why we are going to do it on Express and it is very easy and it is not such a big project, otherwise you will not see any problem in it, still we will try to implement as many features of Express GS as possible later. We will do it here further en front and library, so what we will do for UAE and if you see the documentation in the current also, then here we told you that this website which is there is not updated, this website has been shifted. It is React and then it has been moved, if you open it, it is currently showing for native, so do not go to this website, whatever is the previous one, React GST and Legacy, see this, do some legacy and here one more. If the domain has been added, then this is what you have to do. If you want to see the records, otherwise we will do it directly, so we will not have to see much of the documentation, but if you have not understood anything, then you can see the documentation again from here. You can click on the docs, here you will get all the concepts, what all we provide or you can also watch any crush course, there also you will learn to react well, after that we will check it. Village is there, you can check out using Postman tool. Another software comes with it, Insomnia, if you want, you can also use Insomnia, but I have no idea about it, I have not reduced it, but I am directly there. I will do the postman here because I am more familiar with it. What will we do after this? Will we do the song? I will do the song at the end but you can manage your court from the beginning as per your wish. Make comments as per your wish. You can also create different branches and if you want to upload even small parts on GetUp, then you can do that of the song. If you are watching the gift for the first time , then ignore the post I have given in the last section. I will tell you how to do this also with the help of Jio or you can watch a crush course on this also on the side, after that we will do the Visual Studio Code for text editor which is quite popular. And we get very good intelligence in it and it is available for all the platforms, you will get it, so you keep it installed, the installation is very simple, click on Next Next, you must see it once and whatever software is there, you can Install and keep it. What we will do in the next video is to see the project setup. Now we will create a project folder here and open it in Visual Studio Code. For that, wherever you want to create a project of my type, you have to go to the text like That I want to create here inside the HA drive, so here I will create a new folder and I will name it Mall Blue Bank or lower Kaise, so here is the name of our folder, let's open it . And what will we do with this, if we open it with code, then you can open it directly by right clicking, so what will happen from here, this folder will automatically open in our Visual Studio Code. You can see that our project folder can be opened here in Visual Studio Code. It is done, now inside it we can create our server of Note and can also create the application of React. First of all, what we will do is create the server of Note, after that we will reduce it to React, now this folder is completely empty. What we will do is initialize the note package manager in it, if you want, you can also do it in integrity terminal, for that you simply open the terminal, open a new terminal and what we will do here, first of all we will initialize the note manager and mixer. Please check the text once, the name of our folder is Blue Bank. What you have to do inside it is if you have to write Nam Inhinata, then what will happen with this. Here, we will ask you some questions related to our package, how you have to initialize the package manager like You can see that the first thing you are asking is what to keep the name of the package. I am going to keep the name of the folder as it is, I will press enter, I will also keep the version as, I will press enter, you can add description, Mall is Blue Bank. After writing this, press enter and then it asks Which will be the entry point file, then in our case we will keep the file of server.js, then you have to type here server.js, write this and press enter, after that it asks for test command, we will leave it, we are not going to add the repository as well. We will leave this, you can write your name as I want to write, I will press enter, after that it asks whether the above data is India, that is, the data you have filed is correct or not, then simply press enter. A file like packet will be created with us. What I do in the beginning is that I close this terminal and from here I will open the file of package json, then see that the data of whatever we had filed here has been added here. Inside it is optional, this is your script tag, so what will be there if you want to know how to run your application or if you want to add some more comments in the application, then inside this script tag we can add all those things. And at the same time, if we download any dependency, along with it we will get to see another object of dependency, all our dependencies will be inside it, that is, for all the third party packs that we will download, there is a separate script for that . Dependency object will be created with us, in a little fear, we will see. I will tell you after installing the Express package and what we will do is create a small server and test it, then what we have to do again is go to the terminal. Because we have to download the dependency, so we will go to the terminal and mixer, you are connected to the internet, what we will do inside this is that we will install the express server, for that you have to write install, you can also write but in short IVF, you can do it after that. Here we will use express package. After writing this, you press enter and this package will start installing in your application. You can see that it is a small package, it will not take much time to download and you can also see this download here. It has been done and also we have a package file created for them and a folder for Note Underscore models has also been created. Now what will this package file do with these files? To reduce all the dependencies you have, you can use them from as many and third party practices as possible. If we have any dependency, then its main version is maintained here, so we do not need to tamper anything in it, after that we have load underscore models, inside this, all the dependencies of the saree are added here, so in this also we have to There is nothing to be done, to reduce our dependency, the files which are required are added inside this folder, so here we have the dependency added. I cross the terminal and if I open the packaging file , See, here the dependency object has been created and in it we have the first dependency by the name of express, with the help of this express we can create a server, how to do it, we will create a new file in the root because we see here our root file i.e. The name of the file is server, so what we have to do is to create a file from the root with the name server.j. Now what we will do inside it is that we will create our first server, so for that you have to import express first. Here we will see the syntax of this file i.e. Required. If you want, you can also see the modal base i.e. you can also see the syntax of Import Export. So, first of all we will add Express here, if you retire then you will also get automatic suggestion here. You will get which extensions, I do that again it will make you a little less comfortable, so here we have imported Express. Now what we will do is create a REST object here with the help of which we can create a server i.e. Express. We have to store all the features of a variable inside a variable so that when we do it, we name it equal, then express. If you have to do it tomorrow, then here you will write express and then parenthesis, so what does this mean? All the functionality of Hoga Express is now stored inside this variable named up. Now what we will do is create a port here. I write to you mostly in all my projects so in this also I am going to do 8080 and what will we do in this. We will do the method of the lesson tomorrow, that is, if we have to run our application, how will we do it and inside the function of this lesson, first of all we have to tell the port number, which we have already stored inside the variable named port, so what will we do directly? to this If you tell us then here you will write port, we have told it, after this there is a call back function in it, what we can do is, we can handle the response we are going to get in it or we can add console dot lock statement in it. We will do it like note, we have added this message inside it, let's do this, our basic server has been created here, now if we run it, we will not see any output right now, what can we do, it also has roots in it. If you can add, then what will we do before the port, here we will also create routes, make a test round, I am late and add it in another comment, first start, write I am late, testout and make it a comment and here you will write up. Dot, then after that you can write the method, then I will do the direct get method. We can also check the get method in the browser. Apart from this, if we have all these methods like post-delete, then we will have to give it some client i.e. front. We will have to connect it by hand , like we can do it through Postman or we can do it directly through our React application, so the first thing we will do in this is we will put a slash here, what does it mean, then our but will be created in this way. I will tell you by typing http colon / localhost followed by the port number and after that the test will be created then this big n point will be ours, if we have to access this route then we will have to type this big n point. If we remove the test from here and keep only HD, then this round will be created like this: HTTP colon slash slash localhost colon 8080. I am going to cut this and lay down and what will we do inside this, we will add the back function tomorrow . In this we have request response and middle ware, we will handle it separately, now I will tell you the request and response. In request, we can take request from the user and with the help of response, we can send some response. Now in this you can You can also send direct HTML response. Mostly we send the GM response which is there in it, as I tell you, here it tells you whether it is succeeding or failing, what issue is there in it. If we are able to see it then you can check the status. You can tell this with help and you can also Google the topic of status, there are different courses of status, so it is important for you to have knowledge of that too, like what does 200 mean, ok is the request, what can we do after that. Here you can send a Jason response like I have to write to you, now Jason is Jason, that is, there is an object inside it, you can also send a response like I create a key with the name message and add a value inside it, welcome you blue. Now we will test our application, what you have to do is first of all run the application, then you have to open the terminal again and with the help of note, we will run our application, then you have to write Is loaded, after that the name of the file is our how to write the server.js file and press enter, then see here we have a message, note no server, now what will we do, here we will test this URL, how If we do this then we can test it directly, you will write 'hat school' and slash 'slash local host' then write 'Cologne 8080', press 'enter', see, we have received a message here, 'Welcome, you blue bank up, our note server is running successfully' But what is another problem here? Mother, I have made some changes in it, I make it a welcome user, I will do it from somewhere else and then I refresh the application. After coming here, see, I am getting the same response as the previous one. The code of Note GS which is for automatic is not updated, for this we have to install another third party package, demonetization, so in the next video, I will tell you what we will do, we will make our application MBC compatible and reduce the security a little. We will take it in the next video, then what will we do, this is a very basic example, right now we will modify it as if we are within some file and add it here, everything is not suitable for the design pattern like MBC pattern with this. But if it is reduced, then we will see that next and according to that, what will we do, we will create our folder structure, now what we will do, here we will reduce on MBC pattern, if you do not know the pattern from B, then you can simply Google it like you If you Google, you will get a lot of results like this. As I will tell you by opening the first link here, see the full form in MBC, it is very easy, if you see in the model view controller shortcut, we keep the logic of our UI inside the view, that is, whatever front you will see, it will be on UAE. Reduces We have business logic inside the controller, we have a database in the model, so what we do is divide our project into three separate parts and with the help of this architecture we create our application. So what happens with this is that we can reduce the number of developers on the project and a lot of our code gets cleaned. For the rest of the details, you can read its definition here, how it reduces, then you can get many tutorials about it here. You can get more information on Google directly here, I am going to tell you the MBC folder structure here, so let's go back to Visual Studio Code and also cut the application for a little fear and I will delete it in the terminal here. What will we do? Everyone will create many folders. First of all, we have a folder with the name of model. What do we do inside the model because here we are looking at the no sequel database, so all the scheme related parts will remain in the database, designing will remain in the collection. Inside this, we create it, after that we have the routes, that is, all the routes in the application, so inside this folder we keep them, if you take it as related to the user, related to the administrator, then you can do all these things by creating a separate file. You can see what we did earlier here, this is our root, so what is better than adding everything in one file, we divide it into small parts, so this gives a little clean relief to our code. And in future, if there is any problem, then we can directly update and modify our code by going to the file. In the same way, see if this is a back function, then we will call it controller. What will we do for this? We will create separate logic. So you have to write a controller, we can create all the controller functions here, then there is some configuration in the application, like for the database, we will create those files inside this folder or else if any third party can do it. This is also its configuration, you can do it by creating a file inside this folder, in the same way we have one by the name of middle bears, so what is middles, simply next function we call it middle vest, so this is also a normal ara function. Next we will see how to do this, so we keep the middle weeds separate also, in this way there is one by the name of Uturns, if we want to create some more utility files from these, let's do that in the folder of U tails, then here is our MBVC. The pattern is complete because here we are using third party library for front end i.e. React GS, we are using it, hence we will not see the public folder here, directly we will create a React application in the name of a client. And we will reduce it there if we do not have UI or if we load guest's template engine then what will we do, here we will create another folder with the name of public and inside this public, we will put the static file which is here . But if we can add, then now there will be no static files in our how because we are going to do that, so I delete this folder, so this is our normal MBC pattern. Now what do I do, this is the test one here. Whatever is there, let me split it and tell you how it will be divided. What will we do? We will create a round file inside it and I will name it as Test Round Shop Test. So that we have the idea that we have created it for test. Now what will we do in this, first of all we will import Express, which Express is equal to you, then we have to require it, we will require Express and after that what will we do, we will create a router object here, see what we are doing here, separately routing. First we created a REST object here in server.js. What will the REST object do? Here we will do all the functionality of express and what will the router do. The router object that we will create will only store the functionality of routing inside the variable. We will store it as I tell you in Router Express, you have to write it and put a dot inside it, so all the functionality of routing has been added inside the router, what can we do with the help of this, we can create routes here. are like That I create here with the help of the router, you will do the router, then we will have the method gen and after that there is a slash, after the slash, I create it with the name test, so this basic has become our route, after this you will Which is a controller function has to be created which we call tomorrow with function and tomorrow back function also. What will we do with the help of MBC pattern? So inside this controller folder you can create a new file, I will name it test controller dot jens. And what we will do inside this is that we will create a function and I will export it. You can name the export and function anything, I want to keep it as Test Controller and what will it be like, it will be this function, handle this normal airplane inside it also. You can say, I send a response and give a status of 200, after that I perform the send function and add a message inside it like Rao and make a boolean value of success, I will make it true. Let's do this, now what will we do? If we do this inside the test out, then you have to import it on top or if you are doing it in Visual Studio Code, then you will get the intelligence. How to see, you simply write test controller and control here. If you press space then you will see the option shown here like if you click on it then the file will be automatically imported here. If it is not there in your case then you will have to import it manually in this way and also there are some extensions. Let me also tell you that first let's complete it, let's do it, here our test out has been made, now if we have to simply export it then how will we do it. If we have to simply export the router then what will happen to it in whatever future we are here But if we create routes then automatically the router will export them and we can do this, so the basic routing is setup here but still our server.gs does not know which routes are which which are controllers like Now let me make it a limb, it is not necessary. Now we have divided it separately here in this way, our router test, inside that we have a back function called test controller and after that here we have created it separately. Business logic is kept inside it, now what will we do in the server, we will tell it here, now what you have to do is up dot, the method of doing it, so what is this, we will reduce it towards middleware, what were we doing earlier here up dot. You were doing the gate, now what will we do directly, after that you have to follow the naming convention like v1, so this is the version of our AP, now it is the first, that is why it is B1, after that we will test it here, that's for sure . No, they will take it automatically. And here we have, first look at the export syntax, we cannot do that, so what will we do, whatever is here inside the controller, we will export it below, so from here you can remove the export and here we will write the audio because we will write this file. You see, we cannot do that directly by exporting the syntax. We will write modal export here. Then after making the braces, what will we do? We will square it. We will do it from the test controller and if we learn the application again, then I will clear it. I do CLS and here I have to write the note server.js. So see, our server has been successfully run. Now we can test it. Let's go to flash test. The flash test is already ready. Okay, so what will we do? Or will I remove the test from here and get late otherwise. If we have to give double test, then we will remove it from one of the two files, then we removed it from the test out and again we will restart the server, so see what we have again and again, we have to restart the server. Whenever we are making changes in the file, we will prevent this also, first I clear it and run the application again. Note server.js, again both the applications are done. Now I will refresh, so see the output, we have the same. Here is the message Test Raw and Success Pro I hope you can see that I have zoomed in a little bit so in this way we have output A which means successfully reducing our MBC pattern. Now what will we do, here is a note mode. There comes a package of which if we want to keep our code on in watch mode, then we will import it here, then what will we do for that, we will go to the website of NPMGS npmgs.com, just like Google is a search engine, the same package you have, Nam SP Search. You can do this and download them from here, here you will get its documentation, gender, everything like Let me tell you here, I search load mode, after writing this much, I click on search here, then see what is there, you will get the exact match because here we knew the name of the package, if we did not know the name of the package. So whatever name is similar to it will be shown here, so now we have the exact match, we will open it and install it in our application, then from here you can see how to install it, you have to copy this command and From here you can also see its official documentation, how to setup it, you will get everything here, so what I do, let me tell you directly, first of all, what we will do is, we will terminate our application here, then control. C, our application is terminated here, now what will we do, we will paste the command that we had copied, we will write 'I know one', if you press enter, then this package will start installing inside your project, you can see the small The package will not take much time, now if we start it first and configure it, then I will minimize the terminal a little bit. You have to go to the packaging file and the script which is here, now we will minimize it, so here I come on new script and its We will name it Server and what will we do here because Notebandi is already installed, you can see what we will do with its help inside the dependency, then you will write, then after that we will write what will happen with it like we execute the command of the server. So, whatever our note is, whatever our code is, now it will not be colored with the help of note, it will be run with the help of noteban, I will tell you how to see, first clear it and here you will write the script that is run server. To run, you have to write 'nam run', after that you have to write whatever is the name of the script, like in our case, we have written server here, after writing this much, you press enter, then see that your project is noteban. It will be run through and in this way you will also get to see colorful messages. You can see that note server running is reducing its perfection. Now what will we do? First we will test it once. I will freshen up what is there. I am late, we still have the message, now what do I do, I change it here, I go inside the controller and I change the message, I do this, I say welcome user, I am late, so notice here, we start. Now if I go back to the browser and refresh it, you will see that our message has also changed here, so in this way it reduces nodemon. Along with this, many more utility packages also come which you can install. Like what can you do with the help of Colors, you can show color message on the console like when you open it and in this way, when you get to see the options of colors in multiple terminals, in the same way we also get to see more. If you have to install a package, one comes in the name of Morgan, then what will Morgan do? Whatever URL is being hit in your application, it will print it on the console, so this is only for development, you can check out what is there in dev mode. Which URL is getting hit and what response are you getting inside it? How does it reduce it? See, when you do this then only you will understand well, all these packages which are one by one and you can search on Maja. I am directly going to install many packages, after this I will also add the cost package, so what will the card reduce? When we have to connect the React application with an application like Note, then this package will be less, see how. The server of Note is on a different code, that of React is on a different port, the default is ₹ 3000 late, we can customize Note, so this card package enables us to interconnect these two ports. This means we call it cross origin, so we also need this package, what is this, this is the middleware with which we can do it, after that what will we do, here we are going to import the Mongoose package also, so what can we do with the help of Mongoose. Can be Mango TV Data Basic Connector, you can open it and check out how it reduces or you can see it separately. Home page because it is a little big, so you can see it separately. Mongoose and Documentation. You will get everything in it and how to connect it to data, you will also get it here and also if you want to see something in it like Redox and its There are many functions inside, you will get to see all these things, so you can check out and what will we do with it. Another package comes in the name of dot env which is very important for security purpose. What will we do in it? If we store our confidential data inside the key value Friends or inside the variable, then you can open it and check it out, then you can do it directly in React and you can do it separately in Note GS also. This is a popular package, you can check on weekly download if you like this package, you have to download it, then whatever your confidential data is, you can make it separately in a variable in this way and then with the help of the process i.e. Process and you get it by default in Yes mode in which we can access environmental variables. Again our application is a little bit seeker because whatever our secret or token is, it is not exposed directly. It is inside a variable which we call process environment, it is stored inside it, I will tell you how to configure it now, but we will also package it and there are many more packages which are still pending, I think for now . So many packages are enough, so I download all of them together, go to the terminal and for some fear, we will band the application, then control clear it and I add all the packages to it, customize it on the side. Let me do it, here you will write Nam Aai, first of all, what will we do here, colors package, after that what will we do, we will also add Morgan here, Morgan Mongoose, you have to import the Mongoose package as well, after that also and you If you want, you can do it for body parcel also but now it is definitely not included in its express, by default we get its support, so here you install so many packages, write so much and press enter, then all these packages which are note servers. It will start installing, there are small packages, it will not take much time, so here I will check all the packages which have been installed, this time I will go into the packages and files and will minimize it a bit, so see all the packages. Once installed here, the first thing we will do is, what you have to do in the root is to create a new file with the name of dot env. If you want to configure it, then you will have to do its configuration separately, first let me tell you about it. What we will do inside is that we will create two environmental variables. First of all, what will the port do? What we will do here is that we will set the port to seeker. I am doing it with Forth, I can also give you other port numbers and after that I will create another variable. Note or Then the score board inside under the name of dark mode and what we will do after that, we will tell it here and yes, it is looking a little colorful in it because I have its extension also installed, let me tell you first of all the extension. Let me tell you, look here, I have an extension by auto close tag, there is an extension by auto import, if you keep it installed then you will get a good special suggestion, after that see here there is auto rename tag, this is also what I do for that. Later there was community material, if you want to change the theme then you can do it, there was community material and after that I was talking about the package, this colorful show you are doing, this is happening with the help of extension. Dot NV, so you can install it, after that for react, I do this 7 react reduction reactions, so you can install and keep it, after that you can also do this cylinder and then HTML, then GS, this is You also have to download and keep this extension, it is with the help of this, so here you can see many options, you will get it, it shows almost all the programming languages, after that we have I think this is enough. You can do the talk intelligence also, it also shows you good special suggestions and also you have to install it and then if you do Talwin then you can also install Talwin but I think this is enough, keep it installed after that. Keep the material theme and icon theme in it. At least if someone else also thinks about it, then there is no problem, but for the icon, you can do it and after that in HTML, one of them is Salim's extension, these are 7 react reduction graphical reactis . It is of NV, you keep it installed and the imports are enough, now I will close it, I hope you have understood, still if you have any problem then you can comment below. Now what do I do in the mode, I do this, what will the development initial do, later when we go to production, then we will change it, now do this with you, now what will we do, name it with this , only then you will conflict it if If there is a story, then you have to create an object inside it and then you can add the text inside it, like you will write five and then you have to tell it inside the talk, like take mother, if someone has put it inside confused, then How to write what I do here, start by cutting it first because in the condition of else, we will add this also, how if our env file or environment and variables do not work, then we will optionally add a port inside it so that Our application should not be crushed, like I have to write here first process env and then the name of my variable like our how is port, then the same thing we will do here, port and here I add the else condition . Double pipe symbol and after that I have to put ATKT in optional also, I will do this and what I do is from here I make the console dot login dynamic and also what we will do is whatever package we have imported. If it was not installed then what will we do with it? Here we will add Glass first. Colors = Colors. After that we had Morgan. We will add that also. Records and Mongoose need to be imported here and this should be added inside the string. If you take it then I will add it in single quotation. What will we do for Mongoose? We will see it in a separate file. We do not need it right now. Now after this, what you have to do is add it in the middleware, then what will we do? One comment We will add the middle here and what we will do in this is we will do the configuration. First of all, you have to write what we will do in this, first of all we will enable the chords, so you have to do the card tomorrow in the same way, if you have to deal with expressions. What will you do, here you will also enable Jason, then by default this feature comes with Express, you do not have to install any separate package, then what will you do, here you will enable Express tomorrow, express dot, so now you can use it in your application. You can also handle the Jason response. After this, what will we do here, we will do it for Morgan, now when we do Morgan tomorrow, inside this you get all the other options like if you do control space, then see combined then shot, what do you If we use dead mode here, we will get a small message which URL has been hit, what is its response and how much time has it given, then we will get all these details on the console, on which console is this the developer console? No, this is going to be found, I am a little scared, let me tell you, so this is the normal configuration, now what will we do, first of all we will add the colors and here I will change the message here and I will make it dynamic. I will give it, so for this you back check it, first of all we will write note 7 running on fort and then we will check the fort dynamically, so do the dollar and with the help of the process, we will access the port here, start the process, this and that. And after that, porting and what I do is, the mode that we had created in the dot, inside this dub mode, we can also do that, server running in here, I send a message in this manner, in test mode and What I do before the mode is I will gate it, whatever name you have given in the environment variable, you have to do it till this is done, after this now we can do it with colors like I will make it BG, it will be blue. And then what we will do is we will change its font color to white, our code will be visible in this way, I hope you can see it, now what we will do is we will restart our application, then you will write. If you press enter then see our console message here, it is showing in color, you can see here it is showing in blue. Now what will we do, we will hit the server and see, so here we have the help of Morgan. The URL hit wire will also show in the console. Let's go back to the application and this is ours just refresh and let it go. Okay, now if you see the console, then see here we have the method show will show and after that what is the response and that too. If it shows, the whole thing shows here, so a little bit of idea is a relief. If any error occurs, we can put a little idea from here too and when we send it to production, we will remove it from here, so here it is. Hope you even understand We must have seen the MBC pattern, we reduced it a bit on security and then we also added many utility packages inside it. Mostly we saw the middles in it which are necessary for us, if not now then later , we definitely have the power for it or else. Whatever project you do in any company, no one even tells about these dependencies these days because everyone knows that they have to do it. Note that along with GS, there are many other dependencies which we will see in the letter or otherwise. We will see in some other project, this is enough for now, what we will do in the next video, how we can establish connection with Mangu TV Atlas and how we can connect it with our note application, so we will see this in the next video. So now we will connect to the database here, so if you want to do the cloud database then you have to go to the products and here you can also go to Atlas Mango TV atlas.com or on Google, you will get it if you first If you are looking at the time then click on the dry offer here and sign up, then here I am already a user, so I will sign in and if you are doing it locally then there is no problem, you can skip it. If you login first , then after login you may see the interface like this or you may also see a little change in it if you sign up for the first time, so what do you do with Mixer? Click on Create. And from here you have to create a new cluster and mix it and you click on set here because you have to do the free one, it is probably hosting and in this you can select any database like Avs Google Cloud, whatever you have to select here and whatever is your near by region, then select it, like in my case, it is Mumbai, so I will keep it here and then the cluster tier is this one, see the head hosting which we have. We are going to do that and after that you can change its name, you have to click on every create, I have already created, that is why I am not going to create, after doing this, what do you do, go back A, so I go back A and like you If you create something like this, you will get to see the interface and look here, you will get the option to browse collection. If you have any collection i.e. database, then it will show here. Click on it, then all the databases are here. But we will show it, see if there is a little load delay, then we will show all the things here as you can see, drop cap, all the databases you have will be shown here, in this way, what you have to do is go to database access here. So from here you have to create a new user and give him the permissions so that we can access the database with the help of Mango DB Compass or our application, mix it and create it and then what we do. Will go to network access and you have to do white listing of whatever IP here, so mixer, what you do is click on add IP address and just fill it with zero zero, something like this here i.e. any application, your database will be available in it. There is power, if you are working on a specific project, then you can enter its IP address, that is, you can connect to whatever IP is yours, but what is the problem in that, then it will be accessible only from this IP, if someone If you access from another IP then you will face problems in it, that is why I have kept zero zero here i.e. from the story also i.e. I can access it in any IPC, so mixer you keep doing this, let's return the data also in this and from here. You can create a new database, then we will allow the collection to be created along with the project because by default we have one or the other document inside it. To create the collection, what you will do after this is that you will click on the connect option and Like if you click on the connect option , then from here you get many options as to how you want to connect it, so see, we already have Mangodi B compass, so what will we do, see here connect your application or you can also use the compass. If you can then click on it then blanket after that it asks for the driver here it is not necessary and in the last look you have the connection string so what to do with it you have to copy it then let's go back to Visual Studio Code And inside this dot env file, we will create another new variable inside which we will add the connection string of Mango TV data base, so for that You have to write Mango Underscore URL and what you have to do inside it, see here we have you copy it in which there will be mistakes then your database will not connect properly and also I tell you what you have to do here is by cutting this user name and your Whatever user name you have, you have to add it. After cutting the password, you have to add whatever password you have and along with this, this is a test. Instead of this, we can write that when portal is the name of our application, then data is also its name. I have kept it as, when the portal opens, automatically like we will create a scheme, the database will also be created, after that you have to change the password and go to the database and assign the permissions properly which I told you in the beginning, there is a section inside the conflict. We will create a new file and I have to name it and what we will do inside it is that first of all we will import Mongoose and what we will do with its help is that we will create a new function, so here I have to write, you can write anything and export it below. If we do this then we will write connect D so the export is also done, what will we do inside this, we will do it with a block so that we can handle it properly with success and error, what I do is, I also add the colors package here. We also added the colors here, after this, what do you have to do? Inside the catch here, first of all, what we will do is lock the console dot and put it in the back, I will let it go and inside this I will add Mango DB Error. Or we make Mango TV database and after that we will print whatever error is coming here on the control page, so do the dollar and then pass the error object here, after that I change the color. And we will make the text white, after that how we have to check the success, we will operate it directly here and we have to use Mango and after that we have the connection of Mango TV in the retirement variable, we have to do that tomorrow. Here I have to write process.nv, then whatever name you have given for the environmental variable, you have to add it here, then we will write the name ask for underscore URL, then you have to do the same here also and like it will be connected, neither I What do I do, I lock the control dot here, I will back check it and dynamically we will add a message here, connect, ask for DB database and after that, you can also check which data is connected here. We will do that and inside it we have the function of host which tells us whether it is a local database or a cloud data base. Let us do this. This function has been successfully created. What will we do after this? We will add this in the server.gs file, so you have to go to the server dot in this file and after dot env, we will configure it, so here I have to write and inside this you have to simply write this function, which function is connect TV. If the function we have created has to be done tomorrow, then here you will write 'Connect TV, watch your option is showing', click on it, the file will be automatically imported here, if it is not there then you can import it manually, simply. You have to do it tomorrow, let's do it and now we will test it. To test it, simply what you have to do is go back to the terminal, new terminal and what we will do is run our application here, if everything is correct. We will get the message, so here I have to write 'NTR Run Server'. After writing this, I pressed enter, moved it a little higher, see it here, our database has been successfully connected and we have not given it a color. Okay, I go into it and change its color, I sign it as BG and whatever text is there, I make it colorful, it will appear colorful to us, then I change its color, and we have the option of We will check and do BG control space. Our note server has been connected to the database. Now what we will do is create a user model in which we will enter the details of the user because we have to see the login register here and after that all the functionality. If you want to see, then first of all what we will do is create a user model and create the functionality of login register on the basis of the model. So what you have to do is to create a new file inside the folder of this model and name it user model.js. And the first thing we will do is import Mongoose here because with the help of Mongoose we create the scheme No Sequel There is a data base i.e. we are using Mango TV database which is a no sequel database, so with the help of the scheme, we will have documents inside the collection, what we do is create it with the help of Mongoose, we will import the Mongoose and Here you will be able to see the syntax, you have to import it here, ask for it from its package, now what will we do, we will create a limit here, for that you have to create its mother's variable, it is the user's scheme, that is why what we are doing is for the user. We will create with the name Constitution Equal Tu New, then we will use Mongoose, you have to write Mango, then put a dot and with the help of this, what will we do, if we create a scheme, then S capital, after that the scheme is the function inside which there is an object and this object is our Documents are to be called, now what will we do here, first of all we will add the name and not the name, first of all what will we do here, we will add email ID, email and many more, the only thing we have to add is currently I am adding email here, what is email? Its type will be string, after that we will add the attribute of required here, then if the user likes this thing then he will have to provide it, inside the required, you can do it sometime. First of all, you can add the bid item here. We can do this like we will retire and after that we can also add a message in it like email is required, we have added this message and after that we will also add the unique property, what will it mean that There should be a user . What can we do with one email ID? If we register only one user then it is enough for you to write. Email is created and then we will also take the password. Then you have to write the password and we also have to encrypt the password so that no one can access it. If you don't have it or if they also have this database, then that hash password will not be decrypted, without the password, the security of the application will remain, its type will remain. Again, you have to add a string in this also, after that we will retire it also. So you will write and make this also required, Required, after that I add the message Password is required and if you want, you can also add minimum length in this. I am also not going to perform validation, that is why I will skip it after that. Website is the string of the website so you can write it here and if it is not necessary to retire then you can add it otherwise it is optional. After that there is the address. The address is great. We will also take the user's address here so you have to write it. We will add the address as string, so you have to write it and we will throw it and we will also add the message here, the address is required, after that we will also take his phone number here, so phone and we will add its type as string. Retiree will make this also true and here you have to write and here we will do it and here we will also add the role so you have to write here and we will do that because here we have to check or it is admin or it is some organization or Then there is hospital and what we will do inside the role, first of all we will write the type and after that we will use the enum here, so what happens in the reward, here we can add the value inside Eric as if it is admin. He is not an administrator, what will we do after that, go here and check, go or we can also make it an organization, organization, what will we do after that, we will check here whether he is a user or not, what will we do after that here? If you add one more thing, hospital, then we have added this in the reward. If the user is happy that he provides the role, then the role is done and after that we will add the name here, what is there in the name again, its type will be string, so you Here we have to add the type of spring, after that we will make the requirement here, here we can execute a function like here I have to write the function and what we will do with this function, we will tell here like here we will write if this If we add even one valentine or any other condition then if these two conditions are there then what to do is return here otherwise what will we do we will burn whatever is there in the direct return i.e. if he is not an administrator or a user then he Even if you do not provide the name , it will be fine, but if he is a user or an administrator, then he is happy to provide the name here. What can we do in this way? Here you can add the name of the organization, so here you Will write more grammar and spelling mistake, I think in this organized session, I copy it from here and will correct it in the reward also. We will write the name of this organization next to it and here you can also add its type of organization. So in this case, we have to return the true condition, otherwise what will we do? We will return the water, that is, it is not necessary, if it is not an organization, then Even if they don't pass, there is no problem, we will hide it in the form, after that we have the hospital name, we can also check the hospital name and in this also we will add the condition, let us write the hospital name, first we will add its type. In the given function, we will check if it is equivalent to hospital, then what to do, return it here, otherwise what to do, return it, I hope you understand, finally, what we will do is, we will create another object here and inside it If I add it, whenever a new user is created or whenever a hospital organization administrator is created, its time stamp will also remain with itself. Lastly, what will we do, we will export it, then you have to write modal exports equal tu, then what will we do here. But if you use Mongoose, then if you have to write then what will be the reference type in which we have Role Name Organization Name Hospital Name Email Password Address Where is this email being closed? Well, here before the email we have not closed it . Let's put a comma, now it has equal lines and it gets automatically formatted in my case because I have enabled Format On. For that, what you have to do is go to Simple Settings, Settings and you can search here. The format is this much, if you search then see inside the editor you will get this option, with format on, here as I do it, automatically the file which is mine gets formatted, then if you also want this behavior then you can enable it. Otherwise, you can select the control or you can format it by right clicking, then both the options are available to you. Here our model has been created. Now what will we do, with the help of this we will create controller functions and routes. Now what will we do? Here we will create a register controller and for that we also have to create a route, so first of all what we will do is create a route file like we did for test, now in actual we will create it for the user and its name will be different. I want to keep it as we will have login register in it, that is why we will name it and so we have some idea relief from this, there is something related to authentication in this, so here you will write and routes and in this, first of all we will import express, add here. Done, after this we will create a router object, so constant router equal tu, then express it has to be Our router will be exported here and along with it I will also create a comment, Routes. What will we do after this ? First of all, here we will create Rawat. To register, you have to write 'Router' and then after that the method will be posted. I have to name the URL pattern as Register and after that the controller function, then you can also create the call back function directly here or the best practice is to create a new file inside the controller file and I would create it with the name of controller. And controller torch and inside it we will create a function and I will name it as register controller again we will have a little idea this will be ara function so simply you will create a black ara function and also I will export it modal exports equal you then We will send it in the form of object because we can have multiple functions in it, so first of all, what I do is I export it here, now what we will do from the register controller, we will do this here, we will write register controller here, see the suggestion for you. Will show simply, what you have to do is to click on it, this file will be automatically imported here, you can see, let's do it, here our roots are done from the file, now what will we do and reduce it in the controller, first of all What we will do here is this function, we will convert it to Asia so that we can apply it. If you want, you can also unblock dentures but it is a little hard and the weight syntax of this sun is a little like this. Now This is a call back function, that is why we have request and response, we will receive it and handle the error and response inside it well. That's why we do it in trick block, so you can also do it in this. What we will do inside try catch block catch is simply control dot lock, whatever error is there, print it today, after that we will also give the response here. Will send the status Status of 500 Internal server will send it and pass the object inside it, first of all I will add a message and in this we can write the value, I will add it here along with success and whatever error I see. Right, and what will we do with the error also, we will pass 100 errors here, whatever is the error object, what will we do, we will check it once in our development tool, what will we do after that, first of all we will declare it inside try and one I make it a variable because we will also receive the response, which rest is equal, then you have to assign weight to what thing, here we have to do that with the user model, then you will write, see the user model, it will show you suggestions, if you click on it then The file of the model will also be imported automatically. If it is not there in your case, then you can import it manually. Whatever is in the S code, your suggestion is automatically available for which you can do it and I had also mentioned the extension in the beginning, so you can use it. Now the user model is done, what will we do inside it, here first of all we will find the existing user that we have to find because we have only one email ID and want to login only one user or Then we want to create his account, so what will we do, first of all we will find the user and in return of the response, what do I do, I give him the user name or we will give the name of the existing user, his existing user and what will we do from this? We will make it point one of one function and then inside it, if you want to find the object and on whose basis, then on the basis of email, we will find which email which we had just created inside the model, here is the email, so on the basis of this email. What we will do is find it and this email ID will come from where will it come to us from the client, so how will we access it, for that you have to write request and body and inside the body we will have the field of email, from that you get it. And after that, what will we do, we will also add validation here, validation if an existing user, if it is an existing user then what we will do is we will return it from here, so you have to write this i.e. OK request, just the user who is already existing. Then after that we will send it and then we will add a message here, the message User is Already Exist or User is Already Exist, we have added this message and from here we have returned. If this is also not there, then what can we do ? Here we will do it through the user form and we will also have the password in it, so what will we do if we hash the password then a package comes for that, I will tell you that first we will search it on moist gas, you have to write the decryption as is. You search by writing, you will get the first link, see here you get the link, click on it, first of all we will copy the installation command and how to do it, you have to simply import it and after that we have to create it below. And then on its basis we can hack the password. Along with this we also get a compare function with the help of which we can retrieve the hashed password i.e. we can compare and decrypt it back. So what do we do? First of all, we will open the terminal and here what I do is paste it, press enter, then this package will start installing in your server, it is a small package, it does not take much time, you can see that it has also been downloaded. I have closed the terminal, what will we do after this, we will import it on the top, import, then what was its name and we will require it and while requesting, you have to write the full name of the package, so this is B clip, initially what name did we write ? Its B is great because you have to follow this naming convention, you can also write the full name but there can be confusion later because it comes in two packs. Simple B group will also come and Vicrift GS, you can see both these packages. So what we will do here is that we will validate the password, so here we will hack the password, what we will do is create the salt, first of all, what will we do with the help, we will create the salt, then you have to write, the function comes. Inside this we can tell how many rounds we want, so we will keep 10 in it which is Normal practice is that the more rounds you add to it, the more processing power it will take to decrypt the password. So here our sort has been created. Now what will we do? We will also add the password from the user. How to do it? First of all, what will we do? We will create a variable and name it #password equal tu then what will we do, here we will replace the normal password that we are going to get with this. How to apply first of all, what should we do? Again we will use Bicrypt. If we do that then you have to write B clip, what will we do after that, here we will use the ash function and make it hash and inside this, first of all you have to add the plain password, then what will we do in the request body, if we get the plain password then You have to write request and body dot password and after that I have to tell you the salt here, so see, we already have the salt stored inside a variable, so we can do it directly, so here our password will be hashed and now we What will we do, like we will replace our normal password with this, so if we replace it with the request, then you have to add it in this way, our password is already hashed here, I will also make a comment here. Here our password has been hashed, what will we do after this, we will access the rest data i.e. whatever data we will receive from the talk, we have to do it from us, so what will we do for that, we will create a variable here and assign it to the user. We have created a variable with the name, what will we do inside it, will we store it, how will we store it, what will we do, new, here we will create a user model, so you have to write a new function, here we will write a new user model and what will we do inside it, whatever. We have data in request and body, with the help of that we will create a new user, so here you will write request.body, you will add whatever is in the new user model, after this, what do we have to do, how will we do it, we will wait here. And we have user user, we have to do it simply, then you will write this function, do it tomorrow, your user will be correct, after this, what will we do, returns will be returned from here along with the response, dot status status of 2001 i.e. something has happened. Bin created, after that here we will send the send function to it and what we will do inside this is first of all we will do success so because there is OK request here and then we will also add a message here user creative or register the user. Register successfully and if you want, you can also pass the entire user here, but we do not need anyone so special, I will remove the user from this, for now let's do it and if there is someone else, then you are different. We will check the pass, where is Bicrift equal, you are good import, we have written the import export syntax by mistake, it is a habit, that is why there will be a little problem, it is because these spies are watching, from now on, let's format it in this manner. Now we will test it in Postman tool but before that we need to add server.dot in its file so that it knows that we have to access whatever authroots we have, so let's go and here we did it for test. You can see in this way what we will do now and for that and for that also we will create from so you have to write it off and inside it the URL root we have to add gaming convention we follow slash ap slash v1/ and its What we will do later is that we will recover our file which file and proud, so here you have to add its text, then we have the root's folder, inside it we have, let's do this and our server. Once we run it, keep the bus also open so that when the user is registered, we can check it, so from here I will open the compass and link it to your connection strike which you might have added inside dot nav. You have to login as the page shows, here you paste it, I already do Mango TV, I have it in Recent also, so I connect directly from here, so we connect here on the cluster. New database has been created, Blue Bank has been created, if you click on it then there is a collection of users, now this is the opinion, you can see 00 records are showing here, now what will we do, if you go to Postman tool then you will see Postman tool. Open it, I hope you have downloaded all this stuff and here you can see a different theme, then simply go to Settings. You can also change it by going to Settings, you have to click on Settings and after that you will get many options here, you can see inside the theme, selected here has customized it a bit, you can do it as per your choice. Now what we will do is create a new request here, click on plus, our method will be post and after that our URL, we have to write http local host and here I have many suggestions, it is showing because I already do it, so here. The option is showing, I click on one of these and modify it as is, how will our URL be SDP Golan slash slash local ho sport eta after that slash api /v1/ then after that and and then After that register, this is our another point, after this you have to click on the body, row data and after that instead of text you will select Jason here and here you have to create Jason data, first of all we have role in role. What we will do is that we will keep the user name after that, we will add it here, you can add any name like I am letting him, the name has to be provided in this manner, we have the preparation inside the string. We have to provide after the name, we have email and you can also add the email as I have kept it by name from here, after that we have password, you also have to add the password, whatever you have added in the model. And requested that all that thing, you have to do it here, we can write anything in the password, 1234 56, I will do it for now, later and we can explore it and see what I do, make one more change . Let me give it to the user and check it by printing it and what we will do in the controller is to print it to the user and check it, because right now we are seeing it in Postman, so I will print it directly to the user so that If we want to know which user has been created, then here we have the user and we will definitely cross check it in the database too. Let's go back to Postman, then the name became the email password and after that we again have the address. You can write anything inside it. Mumbai India, after that we had the phone, you can write anything in the phone also 123456789 and what else was there, once I checked the model, it was late, user model, email password, website was also there, website is also there if you want, it is optional, isn't it necessary? No, later we will see that it is not a hospital and it is not an organization, so we do not need to write this, the name is the role, okay, that is enough, now I am ready to check by clicking on send, if everything is correct. We will get to see the success response, if not then we can see the error here and the message has also been received here that the user is registered successfully and the user's object is also coming to us and see in this that the password is now our password. If we have to retrieve it, then we will have to do the compare function tomorrow, only then this password will be decrypted, we will also check it in the database, let's go, right now initially no rate is showing with us, as if I will refresh, then see, create a document with us. If it is done then it is successful then we are reducing our register function in the same way what will we do now we will reduce it on login function now what we will do is we will reduce it on login here and also I have created a comment this is for register and its method I have created the post in this manner so that we can have an idea later, in the same manner you will do whatever you want for login, this will also be the method for you post and here you will create a new route louter.com will be slash login and then Later, the login controller, so what I do is first start by creating it, then what we will do here is create a comment, login tomorrow back and what we will do inside this and export it below, copy this and paste it below. Let's take this file and what will we do with it, we will import it, then after this I have to write here, login inside, login out, login controller, after writing this, click on it, this file will be imported automatically . You can see that the login controller has also been imported. Now we will reduce this login controller. Now what do we have to do at the time of login. If we also have to seek our login then what will we do? We will use open here. If you have any idea. No, what is Jason Web Broken? So simply you can search its package. Go to npmgs. You can search here. You will get the exact match here. Or what is it? How does it reduce the security in our application? We use it. use Our token is decrypted, so what you do from here is that first of all copy it, after copying what you have to do is to open the terminal, so new terminal and what we will do from here is paste it N PM I Jason After writing this much web token and press enter, this package will start getting installed in Pay Note Sarwal. It is a small package. You can see that it did not take much time and it has been successfully downloaded here. You can also check the packet. Like go to their file and here you can see that Jason Web Broken has been successfully installed, now we can do it and with the help of it we can create a token, so here at the top, what we will do is we will create a variable in the shortcut. For Jason Web Broken and we will recover it, for this you have to go here, I will create a secret key of the shop, which I will name as Jut Underscore Secret and here after that you can write a strong password like I am a friend at the moment. I will do the same as I keep it but it will be white 123. The stronger it is, the better it will be, the token will be secure. Let's do this in the dot nb file. If you change it, then restart the server, otherwise it does not have any effect. Let's go . We are back in our login, inside Kal Back, we will first add this function, Icing Arrow Function, now this is Kal Back function, that is why we will do the same for request and response in this also, so you have to write request and response inside this, how can we try block also. If you add it then you have to write try and catch. What will we do inside the catch? We will lock the control dot. Whatever error we have, if we print it today then I will also send console.com error response. Rest dot status of 500. What we will do inside dot send is that we will hit success here, you have to write here, we will add the message like and after this, whatever error is there, I will pass it to the object here and inside try, what will we do? First of all we will check the user i.e. if the user exits i.e. we will create a variable for him constant existing user equal to you come then we have to do the user model dot find one and what we will do here is email. With the help we will find the email and where it will come from, it will come request and bodies so request body dot and given here and this is the request so today a body dot email and then will conditionally check a note existing user if it is existing What to do then if the user is not there then return it from here and will send the response and what we have to do here is to burn the success whatever is there, user note found or you can also make it invalid, for now I will keep it in this way. So here we also checked the condition of the user, after that if we find the user then what will we do, here we will compare the password, so here I have to write compare password and from and create a variable with the name equal tu. Then what will we do with the week we will do it here then you have to assign it here then what we will do will be using the week ript you have to write b clip dot then do the compare function tomorrow and what will we do in this first of all the user has If we add the password given to us, then we will get the password which we are getting from the request password user. After that, what will we do? We will get the password of the existing user, so from here I copy it. Copy the existing user. And inside this we have it, so we are gating it here and if you want, you can change its name also, simple user can also do this, like I have simplified it as user so that you can know it well and then This will be the compare function here, ours has been executed successfully here, what will we do after this, we will also check this, once again the note will be compared i.e. if the comparison is not happening, then what will we do again, we will return from here, the return status will be status of five. Inside Hundred Dot Send, I set success to false, then you have to write success small, after this I add the message here and in this you can add any message like invalid credentials and other things, I do the same here also. So that our email is also protected, we will copy and paste it here and after that we will have a success response, that is, if everything goes right, then what will we do? Here we will create a token. How will you create a token? Simple one variable. Let's create it, we will do it and in this we have to tell first of all, so on the basis of user ID, that is, I am creating the key here and Where will the value inside this come from? What will we do based on the underscore ID field of the user we are getting? If we encrypt the token, then inside this user ID we have the details of the user, so if we have to extract the token. And if we want to get the details of the user with its help, then we can simply use the user ID, after that we have to add the secret key here which we have stored inside the environmental variable, then we can get it. We will do the process and env, then we had written 'Jat Underscore Secret' and what will we do after that, here for how much time you want its validity, then for that you use 'expires', this is a function, brother, default comes inside this, you base You can tell in Wix or you can also tell in Hours, we will do it once, we will keep the stroken valid for one day, like the token will expire, if the user is happy, then login again, after that I will return from here. I get return status because now it is success response, so I will write 200 here, I have written 200, then I will send 200, what we have to do inside send, first of all we have to turn success, after that I add the message, message login successfully and then Later, I pass the token here too. Whatever token is there, we will send it in response today. If you want, you can also paste the user here, like I pass the user after the token, do this. Let's take this and we will test this AP also, so let's go back to Postman and here we will create a new request, its type will be post in the URL, I will copy from this, copy the last one, I will change it in the end point and paste. The login will be there from the register and here it is not showing anything. Once I check on the control, now I run the server once as neutral, then I run the application again here, damp run server. Here our note server will be done, we can see that our application has been run, now we will test it again, now we are seeing the error i.e. empty password, we have passed it, then we should show the error, click on send. So see on success and the message is also coming equally. These are valid credentials. Now I add valid password here. See one two three four five six and center click. Then see login successfully token is also being created equally. And the details of the user are also coming to us regularly. You can see what we will do now. Here we will create a middleware for authentication with the help of which we will protest our Rawat. As of now, we have login and register out to protest it. It is not necessary but in future we have to protest whatever credit related AP we have, hence what we will do is create an authentication middleware, so what you have to do is to create a new file inside the middleware folder and we will name it And midlevel dot cheers because it is related to authentication, that is why we have named it and middleware, what is middleware, we call the next function middle, whatever logic will remain in it until the next tomorrow, the thing after that will not be executed. Let us first. What will we do, we will create it and then after that, we will lift it up a little and do that. First of all, what we will do is import the broken one because we also need the token in it. Earlier we had encrypted the token, now we can see that we have encrypted it. With the help of ho method, we encrypted it and then concreted it. Now what will we do? We will follow the method from here but this time we have to verify it. First import the WT requirement token and after that we will directly create the function. With the help of modal exports and after this we will create Ara function here, this is our normal airplane function which I have added to it so that we can see this synchronous operation in it, now in the middleware also we get the object of request response and then next. If we can do that then mostly it is the next function because this is the middleware, when the next happens tomorrow then only our logic will be executed like now I am trying to do that in the try block then you have to write the control inside the tree and catch catch. We will control the error or you can also do 4001, I will do it tomorrow, we will give access to it, after that, whatever error is there, we will print it today and also I can write a message here . Like and then what we will do after this is we will check the token here, where is our token? If we have token inside the pass headers, then we will get it and store it, that is, we have created a variable with the name token, after that we have it inside the request, then what will we do with the help of split function which is space. We will divide it with the help of because inside this we have a caste which follows the naming convention, so when we do it on the front, we will do it in the start and after that our token will be there, so here we are getting the position of error in the first. There is bear text, after that there is token, that is why we wrote it as split of one, after this we will do cut and in this we have verify function and what we will do in this verify function is that we will pass whatever token we have in the headers. And then to decrypt it, we will process what we have in the environment variable i.e. secret, env dot cd underscore secret, with the help of this it will be decrypted and after decryption, what will we do here? We will also execute the back function tomorrow because it may take time to execute or an error may occur, so what will we do, first of all we will check how and after that we will check the decode, what will remain in the decode, whatever we have. There are details inside the token, there is ID, we will decode it and give it to us, so what will we do here, first we will check the error, if there is an error, then we will return it from here and send the response, we will succeed and inside it we will have the body and User ID which we had added while creating it, let me tell you once, it was created inside the controller, see inside the user ID sign, so we are using it and what will we do with it, whatever record value we have, right? What is inside decoded is the user and what is inside this user is its ID, we will do it here and after that we will do the next function tomorrow, after that our logic will continue, let's do it here . Authentication has become a middleware function, now what can we do, we can protest any of our doubts with its help, until we get the output token and that token is successfully verified, the code will not be executed. We will show the error , so it has come, you keep completing it till now. Next, what will we do, we will gate the current user. Now what we will do, here we are going to gate the current user, so for that I create another separate route and here I If I have to write get current user and its method will be get then you have to write router chart then after that get method and here url pattern so I have to write here current user and after that we will also execute the middleware function here so you You have to write and look at the middle ware, we will show you the suggestion, click on it, the file will be automatically imported, if it is not there in your case, then you can import it manually and after that, from controller function, I have to name it as current user controller and this If you want to create this too, then first of all we will create it and import it back here, then I will create it below here, Get Current User, so I have created this comment, what will we do after this, we will create a function, user controller equal to normal. Let's do this with the function and export it below, copy it here, paste it from here and import it back inside the throat, do control space, it will show you suggestions, click on it, automatically this controller will also be imported . Now what will we do, we will write the logic here, first of all we will make this function aging and this is a back function, that is why we receive the request and response in this and also tried this block inside this, we will do that. If you take it then you have to write tree and catch block, we will lock the console dot in catch, whatever error is there, print it today, after that we will return it, return response status of five hundred dot send, inside send we will create an object and in it Which is there and we will write it inside the message, so what will we do in it, we will find the user, so first of all we will create a variable which user is equal to you, then we will apply illegal, after that we have the user model, so you have to use the user model. After that we will use the find one function here and what we will do in this is find the user on whose basis, on the basis of the underscore ID and where will it come from, we will have this angle request and body dot user ID which is the user ID we have token. I added, with his help we can gate it. What will we do after this? We will check here or there is no need to check. We can also return directly. Return will then send the response here. Late start date status of 200 dot send. What will we do within send? First of all we will check the success, success is true, after that we will add the message and pass the message successfully to whoever is the user. Here, we have created a function to gate the current user, we can do that. And with the help of this, what will we do, we will create a public and private route in our frontend, in Postman, we will test it to see whether it reduces properly or not, then it is running in Postman, and what we will do here is that we will create a new URL, get method, this And from here, I will copy this URL and paste it here and change its other point, instead of login, I will once again check what is in the roots, this is where I am and the other point is current user, from here. I am going to copy it, copy it and then paste it and what we have to do here is to click on authorization. You can also pass the beer token from here or you can click on the adult area and write authorization here. See the authorization and you have to pass the token here but right now you do not have the token, so first of all what you do is login, you have to login with whatever details you have, like we had created the user earlier with the help of that. I get logged in, first I run the application, then I run the terminal and from here I run the note server. Server, our server has been successfully run and has also been connected to the database. Now I get logged in first. Login After this we will have a token, this is the token, you have to copy it, what will you do after copying, here is the authorization in the adult area and here what we will do is click on send, then see here we have success true but the user is our If the pass is not showing then once we will cross check it in the middleware back and here is our 8 middle well in which we have see here the user ID is getting and in the decode the ID is A, right this ID is also user It is ID because here we have named it User ID. Once I tell you that when the token is being created, we have named it User ID, so it is not a direct ID, we will also use the User ID even after decode. Let's do this with the gate itself and test it once again. Let's go back to Postman and I click on send again. So let's see what we will do now. Here we will reduce the inventory model. What do you do for that? Create a new file inside the model and you can name it Inventory model.js and what we will do in this is first of all we will retire Mongoose with the constant Mongoose equal tu Required of Mango and with the help of this we will create its mother which Inventory Scheme equal tu New Mongoose and I will also export it below so you have to write the model. Exports equal, then after that we will use Mongoose, Mongoose Start Model, after that I have to name the model with the name I am Inventory and after that the reference type will be reference, this inventory will be copied and pasted here, now inside this we What will we do, that is, we will scheme the objects for our document and its type will be friends and I am taking it so that we can add the validation message required inside it, after that you can add the message that which is the blue in word and which is out. We are going to tell this thing here, after this, which blue group is the blue group, we can also tell here, its type will be string, so you have to write the type string, after that we will recruit it also, it has to be made true as required. After that, you have to write the validation message blue group is required, after that also we will do it for the reward, and you can do it for all the blue groups that are there, like what we will do here, oh, we will do it positive negative . After that the value comes to us, now and I convert everything into capital, okay you also have mixer in capital, then use it in capital. If negative value has come, then we can use it. What can we do with the help of this, manage inventory. We can check which blue we have and how much, after that we will also check the quantity, then you do it, I will make the number, I will request it and we have to manage where it is going, what will we do for that here. but most First we will target the organ position, Organization and what will we do in it, that is why what we will do here is using Mongoose, you have to write the object ID and after that you can give the reference here, from where you have to get it, so here we are. We will write and what will we do, we will create a reference with the name of organization, later we will see, let's make it organization from here, from here we will gate it and then make it required also, so here you have to write square, we will do it. After that, here we also added the organization is required validation message. After this, when we will enter the hospital details, then you have to write the type from the hospital, you have to type it, then I will use it from the collection we have in the name of the user. After getting the gate, you have to write user and after this we will retire this also, required and inside this I have created a function because the types of hospitals are specific, so what will we do here, if we check it conditionally, then you have to create a function here. And inside the function, what will we do here, we will return when, when the type of inventory is out, then here we will write desktop inventory type, if it is equivalent to out, then what will we do here, we will do that, after this, user is user's . Or you can use the name giver, then what will we do, we will use user or there may be naming confusion. If we use giver here, then we will have to change it back to reward, so let's fix that. Here I have to write toner, then what will you do, what you have to do is to return, return inventory type equivalent, you do this with these and we will add it in the last, then after this object, times time, we will do this and here we have If you have added a donor, then you will have to copy it and change it in the user model as well. Then this is the reward, we have a user in it, so instead we will do the donor. Let's check once in another database also because If it is related to the name of the user, then we will have to change that too, that is, whatever role it is , I get connected by playing it and the name of our database is Blue Bank. Open it and see, there is a user here and in it we have Look nearby, the role is there, if it is a user, then we will update it. We will do toner and from here click on update. Now what we will do is that we will have to create inventory here, so what we will do is first of all we will create the round like we did for Ode. We will create a new file in this manner, for the inventory, you can name it or whatever name you want, you can write it as per your choice, as I have written, Inventory Roots and here. Once we require express, we will store it inside a variable and with its help we will create a router object. We also get the function of the router, so we can access it. Below in the express start router companion, I export it so that Later we do not have to export module.expot equal to outer, so whatever new routes we create here will get exported, what we have to do is simply import it, how to do it is very simple, server. js you have to go and yes f.js no sorry server.js see here we had imported more tests in this manner so in this manner we will do it in the middleware up dot it off after that slash api / v1 and after this we will keep the entry point in Inventory and then after this we have to import the Inventory route here, so directly we can write the syntax here and make it required and inside that then we have the folder of routes. Inside we have inventory dot gs. It is not necessary to write it. If you do these 6 then you have to write dot jas also. So here we will create the first round for credit or you can also add it by writing let here. I am add inventory and its method will be posted, so let's create router.com here, the user should create it and also import the middle ware, after that the controller function, so first we will create a new controller function here. You have to create the file inside the controllers and name it I am InventoryController.jazz and what we have to do in this is if we want to create a function, then how will we create a simple ara function, we will create it here, we are doing it for the rate, so what will we do. First of all, we will name it Create Inventory Controller Equal Tu Ara function and leave it here, for now we will leave it as is and below you also export it Modal Dot Exports Equal Tu Create Inventory Controller So here we have exported it, now we What will we do, we will add this to our routes, then here you have to write Create Inventory Suggestion, we will show it to you, click on it, the controller function will automatically become important here, you can see, we will do the color outs, now we will do it here like this. To reduce and also you can create comments at the initial time so that you remember like I have to write here create invented response and in this we will create this because we will receive this asynchronously data here and try's S block You can also do it, then inside try catch catch, simply console dot log of error, i.e. print whatever errors it is here today and return it from here, response will also be sent, rest status of 500 after that. Then we will send, inside send we have to say success and after that you can add any message like error in create inventory app and spelling mistake inventory and after that whatever error is coming, it is here today. But if we print it then you have to pass the error object here. Now what we have to do inside the tree is that first of all we have to perform validation whether we get the user or not, then what will we do for that. We will gate the user and import this also. Check that it has been imported here, what will we do with the help of this, will we use the find one function and among whom will we find? First of all, what I do is, I will deconstruct some things here, const request from the request and body . We will gate some things from the body here, like email is email for now, so here I destructor the email and what will we do in the file, will we write the email directly, why are we writing directly because the name is from our model. If you notice that we have inside the user model, let me tell you once that the field of email is from and in the client we will send, we are going to write only email, that is why we have written here one time if the value is Again, we will write it once if the spelling of these two is different, after that you have to pass whatever value is there by putting a pen in front of it. In our case, both are going to be from the same, that is why we have written it only once. What we will do here is check if note user, if it is not a user then what to do, return it from here and after this you can do it directly, you can convert the error into new error and add any message inside it. Like user note is found, here our validation is done, after this what will we do, we will check the type of inventory and what will we also do with the type, we will get it from the body, see the type of inventory we had created from the thing, we will get it from the body. We will wicket and from here also we are going to gate. We will keep the name of both in the client and server. What will we do with this? We will check here, then you have to write IF Inventory Type, if it is equivalent, I will check once and let us know in this. Had added this model, we had in and out in it, so we will do that and check here if the time of inventory is in i.e. we have blue A and one more condition we will check here which is the role of the user. We have to check that here too, so here I have to write, if the type of inventory is in and its role is not given then what to do here, immediately terminate whatever is there and show here which one it is, we will do it. Here inside this we can add a message note giver account, after that we will check another condition here for out so IF Inventory try equivalent then out if it is out or we will add one more condition so And the condition is that we are doing it here and whatever is inside it, we will check the role of the user: user dot role note equal to hospital because the hospital has some permission to sell that blue thing, so we have to check this also. I also return from 'Return' and here we will row 'New Error' and if you do not return then there is no problem because 'S' is performed in Chrome too and you can add any message inside it. Note N Hospital So here our basic validation has been done, now if all these validations are checked successfully, then what we have to do from here is to inventory to inventory. Or record it, record it and what we will do in it, first of all we will create a variable with the name I am Inventory equal to you, then what will we do, we will create a new object, whose object will we create the record with the help of the inventory model that we have. Here you have to write, look at the inventory model, we will show you the suggestion, click on it, the inventory model will also be imported automatically, if it is not available in your system, then you can import it manually. What will we do inside it? Whatever request body is there, it will be imported here. But we will add whatever data is there in the request body, we will store it, we will also apply validation on the client so that no unnecessary data comes to us, what will we do after that and what should we wait for, which is inventory, do it with us. Now we have stored it inside this variable, what do we have to do with it, if we want to store it here then you will write this function from one tree dot, you have to do it tomorrow and after that I can also send you a discount, so here I want to write rest status and can also return, so I return from here, I return 200 or 2018, after that you can also add message here, you can write anything inside the message, new record or blue record. Will do this with new blue record, let's do this and here we have some problems, the red line is showing us, let's check the story, comma will be less mistake, rest and space is done, okay where is it, see where it is dot status. If we do this correctly, then the error is gone from here, let's cut it. Successfully one of our APs has been created here, however, we have to reduce it further because we also have to create filters in it, so what will we do in this. We will also continue the filter, first let's test it, how will we test it, for this we have to go back to Postman, let's create it here, what do I do, I login from here and start the server, create a new terminal server here . We will start it from and PM run server and add one more condition inside the login, I think it is ok and we have controller inside it and no error new error line number 11 is this and return from this I remove it, if you cry then you will not return, so I remove the return from it, then you can see that we have successfully restarted the server, earlier there was a crush , so what do you do with the throw, I removed the return, it is necessary. No, we are not directly going to throw the error, we do not have to write return there, we will change the login a bit because we also need the role base. Here, we had just compared the user, however, what we have is role base. If yes, then we can also check the role. How will we do it? Here I create a comment. Check the role. What will we do after that? We will add a condition here and check the user. If we have a user, then check his role. Here we will write user role equivalent tu, if it is not equivalent, we will get the role from its request and body request dot body, if we do not have role in the request and body or anything is different from the reward. Whatever we had added in Admit Hospital Organization Doder Reset, if there is anything coming then what will we do, we will return here, we will send the return and response, we will make it successful here within the rest status of 500 dot send . You have to write 'Successful', after that you can also add the message. Role DOESN'T match. Let's go back to Postman. Now what will we do? We will login here and see if there is a match here, what do I do? You also pass the role and see. Because we have added the role also, we have to pass the extra field here, so its type of role is Data, now I click on send, then see that the login has been successfully generated, we will copy it. What we will do after copying is that we will paste it in it, so inside the headers you have to write Authorized Session and after that you have to write Beer as Beer, we will give space to Beer and then paste the token, after that body and yes URL . So we have forgotten that there will be type post in it and after copying it in the URL, I will first copy the previous one and paste it here and instead of this, what will remain now is to cut out from here, first of all, after v1, our I have an inventory mixer. What I do is copy paste and lay down. So that there is no spelling mistake, look inside the server, here is the inventory, so first is our inventory, after v1, and after that we have the method, so what was the method written, we will create inventory for this, so we will copy it and here I am. I paste it and it becomes double slash, we will cut it, after that we have data and after that body, then Jason, here we have to fill the data of head, so what are the things you have to give in it, like one by. One can also copy and paste from where whatever is there in the inventory model, then you have to hit it near here, like the inventory type blue group, like I add here, copy, there should be no spelling mistake, that is why I copy paste from here. I am doing this and this will be for them and after this what will we do, we will copy the second field like blue group, paste it in it, blue group and make it positive, after that we had the quantity, how much quantity is there. We can check that here too, so you have to write the quantity, all are written inside quotations as single crochet, then you can add in double codes and if the quantity is a number, then we can write it directly, it is not necessary to write the number in quotes. Let's convert it into 20, so I wrote 20 and I think these three fields are enough, what we will do is test it, if any error comes, then we will file the rest of the fillings here, so here I click center. So see here the error is A and we will check the error on the console because here it does not show the same user note found ok, let's check it on 11.3. Once this point is email inside the one user model, we have to pass the email also. Okay , so we will pass the email here and we had written these two fields: Inventory Type, we have to pass this thing also, so I pass the email here. First the email and what was the email of the user, I will copy paste it and let it go. I will copy it in Tech Inflowity G and here I will paste it again. Now click on send again. There is an error in the validation text 'Gate'. It is required. OK, we also have to add the post of the giver. So here you will find another field add. What we have to do is giver and what will we do inside it, we can write the giver's ID, then we will paste the giver's ID here, so in the login we also have an ID, here is the ID, so we will copy this ID and here inside giver. We will paste the paste, now click on send, let's see what we get in the organization, we are not taking it automatically nor are we giving it to him, we have to tell that also, so we have to add the SIM in the organization field, let's copy it. And here we will pass this also as Organizer session and what do we do in this? We can write any name, like you check, then we will have to create an organization too. First of all, what will we do? First of all, create another new user. We will create it with the name of organization and you can name it anything like I have named it AIIMS and we will also keep its email ID as game set gmail.com as password, Mumbai is ok, we will create it. First of all see this, the name of the organization, if the role is organization, then its name will be organization name. If you send the name, then see you have created it. Now we can try the name of the organization. We will write organization and from here we will also copy the ID of the organization. Here we will copy its ID. What you have to do after copying is that you have to paste the ID here inside the organization. Now click on send, then you will see the compass and cloud data gets connected and it will be connected to our database. Its name is Blue Bank and look inside it, a record has been created with the name of Inventories. Click on it and here you can see that the record is being created successfully. Inside this, we also have the field of Object ID. This means the ID of the organization, then the ID of the donor, then both the things are being created with us. Now what we will do is that we will create another point here to gate it and in this we also have to see the filter, so we have to reduce it also. What we will do is we will create a gate here and then after that we will create a controller function here, so I will create it here and leave it here. Let's copy the gate inventory controller and what we will do is create it. First, let's come down and scroll. Here I will write 'Get on Blue Records' and here we will create it - Inventory controller equal to arrow function and we will export it and copy it. And here we export it from and if we import it inside the roots, then you have to cut R and control space, after that we will show the suggestion, click on it, it will be imported automatically from here, let's do this, Rawat is ours. Now what will we do here, we will create a function inside it, so this is the tomorrow back function, this is tomorrow back function, we will do it here, we will open the response, we will follow the success in ras dot status of 500 dot send, so here But you will write successful, after that you can also add the message error in get which is in one tree and whatever errors will be printed here in IT today, so we have passed the error object also, now what will we do, it is directly invalid here. We can do this or we will store it inside a variable. We will take constant inventory equal to a weight and in this we have to perform only one function. With the help of inventory model, you will write inventory model fine fine, what will we do directly which is as much as There are also records, we have to find them and how to find them, we will find them on the basis of organization, so you have to write the organization and where will these organizations come from, we have its ID in the request and body. What did we do previously to store it? If there is no ID then we will get it on its basis. Request and Audi and Underscore user ID which will be stored inside the token. We will find the ID on the basis of that and after that we will return it. Everyone has to write the response as return rest status. We will give you 200% off, first of all we will give you success row, then after success, get the message which records successfully, after that I pass the inventory here, directly we can access it, we will do it from here, now what will we do here. How will we gate this? Let's go back to Postman and create another new Rawat here. Let's copy and paste the previous one. Till I copy it, let's paste it here. After pasting . Whatever you have to get instead of create, this is the get inventory area, so you will write authorization, then in the login, I copy the token that we have, again copy and write beer, the first option is body, after that, there is data inside the body. After that, Jason and what we will do here is we will add the organization and inside this we have to pass the ID, so we can also copy and paste the ID of the login user, then I will copy this into the ID of the login user. Copy and what we will do here is we will paste it and check it, if this does not reduce then we will directly copy the organization ID from the database, then I click in the center, success is true but the inventory is not coming here. Yes, let's check on the console once, Koiraal is not there, it is not showing the error and the inventory is saying empty. Let's check once, this is the inventory. Find what is there with the help of I think user ID. This is not happening. Once we copy the ID of the organization, I copy this one and instead of this we will paste it in this. If we have kept it as an organization, then it is causing problem because we do not have any such collection of organization. There is a collection of users and directly the second one is the inventory which will be created here. What do you do by cutting it? After doing the users, let's do this first and what we will do is copy the idea of ​​the users that we have and in this we will create the inventor. What will we do, we have an idea in the organization, we will update it, I will paste it, while updating it, go back to Postman and here what we will do is paste the ID again and see, you will try and see the record, that is why we have a record here. If you pass the show then it is successful. Here we have got the gate. We had created a little issue in the organization due to which the mixer of the organization was not doing the show. You fix it. The first thing inside the model is the user. We have given him that. I had done the organization by mistake, that is why it was not reducing and also what can I do now, I can do it through populate method, then you have to write here, take a copy and in this we have the donor, so on the basis of the donor, his name is also there. Here we can show from here, again what will we do, we can also show the name of the hospital, then again populate method will do that and speaker and then we can also sort it, how will we do the salt function, we have to do short tomorrow, object object inside it. What will remain is created because we have created it, right? I will gate it with the help of credit and will make it -1, so what will it mean, whatever is the latest record will be on the top, let's do this, so now we have added these three filters, later also we will add more filters in it. We will see but first what will we do, we will create a little friend so that we can look at it properly otherwise we will not understand anything in the back hand right now and it is short, we will test it once, let's go back to Postman and here I am in the center. When I click on it, you see all the things are coming up and inside the donor, the record of the donor is coming up, who has donated and the hospital is not showing it right now because we do not have any details in the hospital, so here it is . Hope till now you must have understood. Next what we will do is we will reduce on the react application, we will design it a bit and then after that we will connect it to the second and after that we will see the filter in the last because there will be some UAE then it will be good. We will also understand the filters from this. Now what will we do, we will create the application here, for that you can also do the same in the integrity terminal, which I will tell you by rebelling in file explorer because I am going to create it separately, that is why. I just did the bill file explorer, so here it will open inside this folder, what we will do is create a react application with the name client inside the root and call it, later what we will do is run it concurrently with the help of package in our backend. If you access it manually , there might be a little confusion in the beginning, so no problem. First, what will we do? We will create a React application, do a little cold clean up and also check a little bit and then we will create one or two forms in it. Let me tell you the rest of the setup, so let's talk about what you have to do first, open the command prompt if you are using Windows and if I am doing it, you can open the terminal and What will we do in this matter, here we will create an application, for that we have a command, first of all you have to write and after that the name of the application is in our style, Client, you also keep the same name because we have to build it again and when we If we host it then it will be very easy to access us, write this, press enter and this application will start downloading here, you can see create a new reactor and if you notice here, then see we also have a one line folder. It has been created, now there is nothing inside it because the dependencies will be downloaded and it may take some time to complete, it may take up to three minutes, depending on your internet connection and the performance of the device. As soon as it is finished and it is complete, I will resume the video and tell you. Already, we have it open in Visual Studio Code, so we can see that the client folder has been created. Now it is just the package inside it whose file has come like Like all the dependencies will be downloaded here, the rest of the folders and files will be created automatically here, you can also check it by refreshing it. If you refresh from here, if any dependency has not been downloaded here, then for now what do I do here. But after pausing the video, I lay down and as if everything gets downloaded here, I resume the video and here the application has been created, inside this we have the note model, okay, I cut it or what can we do together. First of all, we will also run it. First of all, inside the switch stereo trick, you will write CD Client. Now we have switched, now we will run the reactively application with the help of Nam Start command, write this and press enter, then your The applications for this will run locally on Sport 3000 and will automatically open in whatever your default browser is, so wait for it to finish or keep it aside because it will automatically open in the browser as soon as it is compiled. This can be done automatically, whatever it is, it will be compiled for the first time, it takes a little time, but after that, the function of hot reloading comes, that is, after that, whenever you make changes in the file and do control s, it will automatically change here. There will be detectors only then see something like this, you get to see the default of React, so what will we do, first of all we will change it completely, we will do the basic setup as of now and will do it together, after that what will we do, login here less on register page And then we have to see the AP tomorrow also and then we will do the raids in this, what will we do inside the client, first of all see, you have a folder of public, see the file of index.html inside it, you have a title which is your application. If there is a title in Ka then you can change it, see how you will do it. You have cut the title as per your requirement. Now you can write the name of your application as I want to write ' Taken Par White Hi Blue Bank Hai Hai'. Let's do it as you would. And if you come back and look, you will see that the title of your application has changed. Now what will we do if we change the layout, then we have the layout inside app.js, like if you expand the SLC folder, then there is an up dot in it. Whatever tight code is there in this file, we will remove it and also whatever code is there in app.gs. See, as much as the Hyder part is there, I have removed everything, it is not necessary and people also do not need it. We will also cut it and along with it, we definitely don't need this up class, I am late by removing it, we will take h1 instead of it, for now, we will add h1 and a heading inside it, let's get it done from the bank and also what can we do? Will index. If we remove the sir code from the box, then it will be visible back on the application and at the initial time, we are getting to see the margin and pending from the top and also from the left and right, so this is the default behavior, we can prevent this also. For this, you can do whatever normalization is done, I will do whatever reset is done here, that is, what you will do is use universal select and what you will do at the initial time, you will make margin zero, you have to write margin zero after that. Wedding is pending, we will also reduce it to zero and after that comes the box size, we will do it with the border box, let's go, we will not have any space or margin to see, now what will we do after this here. Once we have done it, we are going to use whatever Bootstrap has in it. If you want, you can do it with any library or framework of Kas, so what I do is simply Google it and we will get its CDN link. If you copy it, you will get the first link, see kid bookshelf.com, click on it, now I have version 5.3, so I will continue with this, you have to click on Dogs and scroll down, you will get its link. Can CD and link, this is the file of which and also I also have the file of Java Script, you have to copy that also, first of all we will copy the Kiss and here the Java Script, we have to copy and paste both of them. Let's go back and We will add this in the index.html file, so before this title, I have removed this comment and pasted it here to be safe and at the same time I will also copy the JavaScript file because for some features . Which is necessary for Java Script, hence we have to copy Java Script also. If you want, you can copy only the Bootstrap script from here, but I am going to copy the Copper one here also because it has strong power in some components. So I'm going to copy both of them and then go back and paste it here after the lamp. I'm going to remove this comment, let's paste it and once we see the application, let's test it once. If you are on the application then see our font family which has changed, now this robot and fonts, still if you want to confirm then what you can do is in app.gs you can add classes inside this h1 like I do here . Let me add the class name and inside it we will add the text danger so it will show in red color. Let's do this. Let's go back to the application and see that it is showing in red color. So successfully we have created the react application and Bootstrap has also been integrated in Saathi, now what will we do, here we will also see the routing, so what will we do for routing, we will use React Router Dr. If you do not know what it is, then you can also simply Google, here you will search. All you have to do is see whatever version is running currently, see 6.11, so we will do it on the left side, you will see the head of the head, whatever components or functions are there inside it, then you will get all those things here, with which you can do it, see. Link Awadhe from There are many options, we will do the basic here which we need inside our project, so what we will do is we will import it and if you want, you can also search it on MPMGS, I go back to Nam GS. go react after Two and from here you can also copy the installation command, from here you can copy it, you will also get the get up link, how to do it, then you will have to go to the home page, so what will we do, we will install it directly. Integrity will be doing it in the terminal and first of all, what we will do is switch inside the client, then you have to write cd client and press enter, so here we have switched inside the client director, after this what will we do. We had copied the command, we will paste it and I wrote this in React Router Dr. Press Enter and it will start installing in our application. A small package will not take much time. We will create the folder structure here, so I will also create Daksh's folder right now. I will leave it and what else can we make, for now we will keep enough reusable components inside this folder, inside the components and whatever is related to routing, we will keep it inside this page, then we will keep our global state inside this and in services. What will we do, will we keep our functions, how will we do it, I will tell you further, I think this is enough for now, now what we will do is, first of all, we will enable routing in our application, then you have to go to the index.js file and here What we will do is first of all import the browser router, so you have to import import something from real router dr and from this we have to import the browser router and like it is strict mode, what will we do after that, do the same with the browser router here. And the application which is a component of ours will be enabled in our application. Now we can do the form on routing here, but for routing we should also have pages, so what we will do is create a new folder inside the page whose What will you name it and the second file will remain, then you have to write RAFCI reactor of function with export and after that I will take an h1 here and we will name it, let's do this from the register page and for login. If you want to do this also then RAFCI reactor of function with export and after that we will take h1 here and will also write login page in it, so we have created two pages, we will also create a home page here, so root. You have to do this i.e. do not create any separate folder directly inside the page. What we will do for this is that we will create a file with the name of home page, home page, we will also make it a functional component, race react ara function with export and then Then in h1 and here we will write its name. The name of this extension is Seven React Reduction Graph. Sorry, so automatically we have the skeleton ready, with the help of this extension, make it sir, whatever you are, download it and keep it on three pages. Now what we will do is we will enable the routing functionality in app.js. First of all, what we have to do is to import something here, so import something, we will add the container here, then here I have to write the routes. Our container is done, now inside it we can create a round element. Inside this element, we are doing that if you will make a bracket and write here home which is the name of your component i.e. this is the file we have created, home page. If you start typing this name here, you will get an automatic suggestion. You can see that if you click on it, this component will be imported automatically. If it is not there in your box, then you can import it manually. This is done. Our home page is in the same way, we have to do the same for login here, then again you will create a new out in the self closing tag, then after that you have to add text here, then its text will be slash login, after that there will be element. If you have to show the component inside the element, then here we will write and add the login text. Now it will be for register, so here I have to write, after that again inside the element element, we have to display the component here, so for this our Passed , see the registration, the registration is showing, click on it, the component will be imported automatically, let's do this with self closing tax and this diva, you can also create a fragment, its syntactic sugar form, you can do that i.e. empty opening. And from the closing tag, here our basic routing has been completed. Now how will we check it? Let's go back to the application at the initial time. It is showing us at home. Now what will we do? Manual slash in the URL. After logging in, you will see that we have a login page. In the same way, you will write ' Reduce on the register page'. Now what we will do is 'Reduce' on the login page, but what we have to do in the login page is the email from the user, his role and then the password. If you want to get it, then you can do it directly using Bootstrap. What you have to do is search its website, click on Dogs and you can search the form here, simply you have to search the form here and your ready form is here. But you will get it and there is a spelling mistake, I think, so see this form, first page, you will get it, then we are going to review this form, see, I will tell you both the methods, in the beginning I am telling you the basic, how you can do it, then we will What will we do, we will create a reusable component in which we are going to render only one form, there is a condition in register in login, then this will also clear your concept, first we can start by copying it or I can change the form a little . Let me design this login page, what will we do in it? First of all, I will add pregnant and inside this, I am taking HD tomorrow and I am doing this, I am taking another one, rest on HD tomorrow, we had four Columbus, this Inside, we will use the one that shows these pages, we will see the output once, let's go back to the application, here is our application, see here, it is showing equally, if you want, you can also do container flood and I am here. But first of all I will add the image and you will find this image in the resources i.e. inside the repository you will find an asset folder inside the public folder, inside that there is a sub folder of images in which we have banner one and banner two. If there is an image, then we will do it here. First of all, I am going to access it with the help of IMG type. In the source, you have to write directly slash dot slice. You can also write and if it is inside public, then directly we target the assets folder. You can slash the assets and then the name of the photo, so our banner is on one dot, so here I have to write KPG, after that in the alt you can write the login image, check it once, does it show or No , let's go back to the application and this is inside the image, right, there is a sub folder Image Acid Acid Inside the image, inside the image we have a banner one JPG file safe, let's go back to the application, see it is similar and the size of the image is quite large. So what will we do with it, first of all we will style it, I will give a class here and we will direct it, then I will write here form banner and target it in the indicate file, copy this is our file, so inside this I am late in making the comment, first for the form, so I have to write the form and will style it a bit and make it a multi-line comment. I will show it in this way and can directly target it on the form panel and target the image inside it. We will do it 100%, let's check once and its height has not changed. Once we check from the login, whether it is good or not, we have not done the login page. Let's check the login page also first. Let's go back. So see, it is applied in this way and in this way we are getting to see the scroll effect here, so now you can ignore it, there is nothing less in it now, now we have to reduce it on this login page, so what will we do here. But tomorrow we will give a class to HD as well, like I name it Form Container, we have named this class and what we will do inside it is we will copy paste the Bootstrap form, so what I do from here is this form. I will copy it, after copying we will paste it and you have to select it and convert it, then select it till the phone, right click convert html tu j6, if this one go to the extension, if you want to download and keep it then convert it here. Look, we don't want this dev check box, I have removed it and will keep the rest in this manner too. Now what will we do, we will format it a bit, so how will we index it? Let's target it and its name was, we have form container, form das container, we have to target it, we will make it display flex, so here you write display flex, after that we will align the items, I make it in the center and justify it in this way. We will put the content in the center and then we will need height in it, so I will add it to the minimum height and we will do it in this way, so normal, our form has been created, now what do we have to do, make this form smaller. How to do this, see inside this we have the input field which is being repeated and we need the same form in the register also, so what will we do, we will create a reusable component here, so what you have to do for that is to go inside the search. And inside the components, we will create a new folder, we will name it shade, so what will be in it, shade folders will be there, what will we do, we will create it here, inside this side too, what do I do, create another folder form . By the name of and what will we do inside this form, let me put a little bit related to the form on this side so that you can see or inside this or if we create another folder inside this then later we will create private and protected Rawat in it. Then we leave it, now what we will do is reduce it on the form, what we will do inside this form, we will create a new file with the name of input, type input dot chase and in this way, I will also create a free usable form with the name of the form. We will create, so I am keeping it with the name and always start with upper cases, we will also make it a functional component FSC reactor of function with export and for now I will add h1 and here we will take h1 and we will make it a form. We will keep a simple form, later we will change the input type in it. Whatever functional component you have, you have to make it, export all the functions with h1, I also add it and write the name of the input type, let it be typed so it is basic. We have these components created. There are two reusable components, we have to do that and its logic is going to be a little complex so sir make it careful you watch first of all what we will do is input type what is the input type we have and if you look in its code I will show you Let me tell you that I will close the register again, for some fear, I will complete the login first, so see here inside this lamp, we have the input type, this lamp is being completed, what is there in it, it is classic which is margin bottom. We are getting a margin of three from it, after that there is a level in it and there is input inside it, so we have to do it, how we have to do it, what we will do from it, you can copy it, no problem, copy it. Go to input type and do yours from here. Remove h1 now and paste it instead. Close the lamp first and convert it into a fragment. So our basic input type form has been created but now this It is not reusable. How will it be reusable? The value in it should be dynamic, that is, it will depend on the user as to how he wants to do it. Take, we currently have the type of input as text and the value in it is of email and below that. The input type is password and the value that will be in it, we should know how to differentiate it, that is why we are creating a usable component here, so for this it is very simple, what you have to do is whatever data is there inside it, you can access it dynamically . With whose help we can do this, with the help of props, what will we do? We will destruct the props directly. There is no need to write 'Get' again and again. Directly, we can do the destruct structure. Now you have to put a basic idea in it as to what are the things in it. There is power inside, now the idea is what to put, everything is in front of you, you can see what is in the input, type is class, name is idea and I remove this, area label is not necessary, apart from this what do we have, name is name . What else happens in it? What else happens in it? What do we have after the value? It has an on change event, so from here you can access that too. What else happens when change happens, you can handle that too from here. Now the basic event is done, we have to review it, how will we do it, what will we do, whenever we do the input type, we will do the destructor inside the property restaurant along with it, like if we have the value of the input, then this value. What we will do inside is that we will add the value, then we will expect to receive the thing and crop it like this here, we will make it five, then we can access this on change function from the story by the name of on change, where also we will use it. If we do that then these two things will become dynamic, after that there is name, we have to make the name also dynamic, so what will we do, we will expect such a probe in the name and will add the dynamic value which is there, here you have to write the name. So our name has also become dynamic, after that here is what we will do with the type also. We will make it dynamic like I will write this in the beginning and will name it as input type. There is a difference between the two. If you write in capital here then it can cause a little conflict, so mix it and do it in lower case and here. What we will do is we will pass it as input type, so here our input has become dynamic, in the same way we have to make the label also dynamic, how will we do it, we will cut the value in it and here we can expect from the user . That if they provide us the text of the label, then we will receive it like this. According to me, I am giving it a little matching name here and what will we do here, we will do this, in this way you can also change it on HTML like This can also be made dynamic. What we will do here is name it, copy it on the label and paste it here, our dynamic input type has been created here, whatever is the input field, now its We can do this, how to do it, it is very simple, see this form, sorry form, we can do it directly inside the login, first I tell you in it, then we will do the form also, I cut it, I give the email address. Now we can add the same thing again and again, like if you write here, input type with capital, it will show you suggestion, click on it, this file will be imported automatically, it will be self closing. You have to write the type, self closing tag, inside this we have to pass the level. First of all, you will write the label text and what the level will be for and the email. After that, what do we have? If we have value, then we do not have the value yet, we will create a straight line . Then we are going to do it without the state, for the time being see here we will add the input type, its concept type is here, so here you can write the input type and inside this we can tell it is email, hence its type will be email name or pass. If you can, then here I have to write in the name, what will we do, will we provide the thing by e-mail. Now this name is very important. If you want to send the head of the head from the same object to the data base, then that name is With this help, we have to write well, let's do this and let's go back to the application, see that we have a field that is always there, so this is the input type, it is always here, why is it now from reusable. A is going to be provided. Look here, we have passed the thing by keeping the destructor. Now it does not have value and onchange event, so it can be accessed but its value will not be stored. To store the value, we need state. So the state also we have to create, for now the component, so you understand how we can create, what will we do after this, now what will we do, here we will create reusable form, so the basic form is our opinion, now you can see the reusable component. We had created it now, there is nothing inside it, just an H1 heading and directly our form which is coming from the login, you can see that this is the form, it is coming from the login, so now we do not want it from the login. So what we will do is, first start from the login, we will cut the form and whatever importance is there in it, you can cut it and here I have to keep the text, later we will do it, first we will show only the text so that we can have the idea. That we have to add a login page in it, let's do it. Let's go back to the application. So see, we have just a basic text showing right now. Now what we will do is go inside the form and create the form which is here, then you You can create a manual form, you can also copy paste, so I will tell you the manual creation so that you can understand better, so here what we will do, first of all we will take the form tag, our basic form tax, remove the field in it. Let's do this, I add h1 inside this form and inside it we can add any text like login page and also add clutch in it, I am not a class and we will make it text center, so this is our text center. I will show and after that, I will also lay down a little bit of lining, with the help of this, you will write har, now after this, what will we do with the inputs, then you have to write here, input type, input this. Also see that Visual Studio automatically shows a suggestion in the code. If you click on it, the files will also be imported automatically. Now inside this we have to first pass the level. So here you will write the label text and in this we will have the first text. If we are making this for the login page, then this will be the email. In the same way, if there is a label inside it, then we will add it here too and email it. What else is there, you have to pass all the things here, like for input type email, we will keep input type as email, after that we have value and then also name, so I add name first and for value, what do we do? We will create a state, so I added the name here and in the name, what will we do, we will put it as email because the scheme we have and this should be from both and this is inside, cut it and take it out of the box and paste . Now okay, let's do it a little bit in auto format, it will be visible to you. Now here I will create the state with the help of U state, then you have to write that state and with the help of this, we will create the multiple state. First of all email. And let's do it for the password, inside this you have to tell what is the thing you need, like if this is an email, then email and after that set and function, then you will write set email, then with this we can change the value of our email, copy paste . You can do this instead of email. If you have a password, then you will write the password here and then you will also have to set it, so you will write set password and initials and will make this also empty. Let's do this first and I am copying this input. First we will add the value, then here you will write the value and inside this value, see if the type is email, then its value will also be email, so we will pass the state of this email here, after that we will click on its on change event. What will we do? We will write a function in these lines, we will use the Ara function and what we will do with its help is that we will set the email, subscribe the email. So you have to write here, set the email and what will we do inside it. First of all, inside the Ara function, create a target. And what we will do with the help of A is to target it, after targeting we have got the value, so you write what we will do after this, we will do it for the password, so here I have to write the password and the password, Nimi also gives you the value. When you have to add the password in its value, you will write the password and then instead of the set email, cut it here and add the application here. I scroll down to the bottom. After this, here I have created a lamp whose class will be display flex, so you have to write - flex and inside this lamp, I have created a button and you can also make this button usable. This is a normal button and its What we will do inside is that whatever value is there, we will add it dynamically, like you can name it submit button, we can pass it as submit button in this way, first of all we have to add it in the prop, so here whenever If we create a form then we will get a property of the submit button which we can use and we will also give a class to this button so you have to write it so we make it primary. If you want, you can design it as per your wish. Its type will be because we are doing it in the form, so its type will be, we can do it by submit, it has been reviewed by us, now we can do it in login also and we can do it in register too. How? We will do that, see one more thing in this, let me tell you that this login page is static, hence we will make it dynamic as well, how you can write the form title here and we will add it en prop here today, so what is the destructor? So after this I add the submit button from the form title, let's go to the login page as if this was the plain text of the login, instead of this, what can we do now, we can do it directly with the form, see here. You will get the option, click on it Make Sir, this should be imported from your own file, if you are using third party Kiss's library and if there is any ready component in it by the name of Form which starts with Apar Kiss, then You change the name of this form, otherwise there will be conflict between the two. What do you have to do? First of all, here you have to specify the title of the form, then you will write the form title. Now this is on login, so we will write login page in capital. I am and apart from this, what was the property, you can check out, we had a submit button, so we have to do that also, there will be a login button in the login and there will be a register button in the desert, so here I have to write the submit button and inside this. We will add the text, people can do it with this and we will see it once, let's go back to the application, look at it, we have the usage showing, you can see that there is a login heading on the login, there is an email, there is a password and you can also type in it. You can see that our password is also getting hidden and the login button is also showing successfully, but now if we check it once on the register, then I will cut the login from here and here. If I want to write a register, then look at the register page, we will reduce it a little bit. Let's go to the register, I will open the register page. First, we will cut this heading also and instead of this dev, we will make it a fragment. Take a class, I am late. We can also copy paste manually, here I create and inside this we have to do the image tag, so here I have to write, from the IMG source, we have to do that with acid, so here I have to write, like this, there is an image inside it. And inside this we had Ek baar dekh let hoon banner tu hi tha na banner tu dot yog to yahan pe main likha hoon panel tu dot jpg alt mein you can write register image and give it a class we will give form das banner this clutch If we check it once, see the form banner, then we will apply the same class on it too, so here we have also added the form banner, let's see it once, how is it looking, let's go to the application and Well, in this I will show the spelling in the image, you can use the image as per your choice, I have only taken a dummy image, you can also use any good professional image and after this, what will we do? Another HD class tomorrow. We will take it, you have to write tomorrow HD and rest, we have it with pen, so here we will write pen B4 and whatever is inside it, we have to import the form again like we did for login, in this way, what will we do now? We will import the form back, click on it , the component will be imported here automatically, if it is not there in your method, then you can import it manually. Self closing time and inside this, first of all we have to add the form title in which we will have heading, so this You can also write register and after that we have a submit button, we will change its type also, here we will write register, once again let me tell you, see, we have created the form here, so this is the only way to give the form. Here the class is applying from the form container. After this, go back to the application and look at the same here, it has got the email and password. Now the email is showing in both the register and login, the register is different. We also have to add additional fields and then we will have the role base here which will be registered and logged in i.e. it is a donor, a hospital, an organization or an administrator, so how will we do that, it is very simple, see what we will do here with the switch statement. We will do that and will conditionally render all these things in single form. First of all, see here, some spacing is being shown, so the gutter size of this, I make it zero, so we have a gutter inside the row. We will write the class of zero, then the scroll below which is there has been removed from here, whatever extra spacing margin was here has been removed because the classes which are there add weddings, so we can remove them . Once we check in the login, here I type login, here is our login page and in this also we have it showing, so what will we do here also, we will make zero in the login page, so here I write I am making the thing zero i.e. we are reducing the gutter to zero. Let's go back . The total scroll has been removed from here, only then it is looking a little bit perfect. Now what will we do, we will reduce the rest of the things. What do we have inside the display? There are many fields like if I tell you, inside the done model, I tell you, once I open the model, user model, all the fields are there in it, we have to access these fields, so what will we do, let's start first, which are these fields. And we have to create a state for them too, so what will we do, first of all we will create a state, below this email, what you can do is copy paste it, I have copied and pasted it multiple times i.e. as many stages as Isn't that saree saree, we will define it here so that we can do it, after the email password, we have the role, I will enter the role and then later on we will do it here, after that you can also change it. Can roll done after roll then we have name if Whether he is an administrator or a donor, only then we will store his name here, we also have to add the condition, so the name is set, the name is set, after that we had the organization name, so what do I do from inside the model. I am copying it late so that there is no spelling mistake, the name is done, this is the organization name, we also need this, so from this I close the rest of the files, organization name, then after this set the organization name and capitalize this O. We will do this, after that we have the name of the hospital, we will copy this also and add it here and in the same manner, I will copy and paste it two-three times because we have all the states from other fields which we have to access. Here we are creating, after that we have the email password, it is already ready, after that we have the website, so we will add the website here, set the website, then cut it from here and paste it and this blue one which I have. I will do it in capital, initially we will keep everything empty because we do not want much value at the initial time, after that we will add the address here and then I will paste the set address here also and then we will make a cut and copy it. We will paste it here. In the same way, if we cut it and paste it here, then all the states have been successfully created. Now what we have to do is to create the inputs for this in the login register or in the further story. Even then what will we do? Now what will we do? First of all, we will copy and paste the name, email, password in this input box, what will we do below it and add something like now this level will be named. And we will do this, after that its type will be text, after that this name will be in it, the name which we have kept in the state above, we are going to keep a similar name here, we have to keep the name in the value also because in this Now we will get the name and change it here with the help of the name value, then after cutting the password, you have to write set name function, this is done, we have done this for the name and what will we do again, copy and paste it multiple times. Copy it because we need to change more things in it and I will change this also in Apar Kaise I and we will change the text also, from here we will also change the organization name for organization and then its type will remain text only and Its value will be organization name and after that we will set it here, don't see the organization, it will show you the suggestion, so you click on it, it is done for organization also, after that we have hospital, so copy paste from this. So that there is no spelling mistake, I am here for the hospital, so here I am late, what is there in the hospital name level, this text will be visible, that is why we can give space here, we will not give it in everything else and then Later here I will change this also and will add the value. After that, what do we have, email is email, password is done, after that there is website, then we will access this website, this is what I do here. But I am just copying and pasting, I need three website address and phone number, so I have copied all three here. Now what will we do here, we will create 100 websites for the website and then here also I change this and the website type . The texture will remain, we will change it in the name, website value is also its website and then instead of set name, here we will do set website, after that is the address, copy it and here we will add this also, make the address a capital. I am giving it because this is the level and here also what will we do and change it and even if you do not write then there is no problem, after that the input type will be text, we will change it in the name, this will also be the value for address. This is its address and the last one, you can see it in your phone, copy it, I am late too and this is the last one, we will deduct it from here, there will be type tax because if you add the country code in it, then the value of the number will not be added, hence keep it as text. I am and then whatever its name is, we will change it, we will also change the phone value to phone and after that we will set it to phone, let's change this to, let's go back to the application and we will have many form fields created, you can see. You are here, this is the login page, we can target it on the register, first start we will see how it is visible in the register, so here we have something like this. The form is visible, you can see the email, password, name, organization name, hospital name, website, all the main data is coming to us and the same thing is happening in the login also, the login form and this data is showing in the login also. Now we have to condition that in login we need only email and password and when we see the register page, inside the register we again need the role base here, so how to do it is very simple, what we will do is to do the switch statement here and inside that We will create a login, how will we create a register and with the help of that we will do the gate, so you may find it a little complicated and it is also a little complicated because if you are doing the switch inside React for the first time, then because Now look here, we don't have any role, we have role by default, we have not set it, so I will tell later what is the role base. I am a little scared, first what will we do, we will create a normal switch statement and here one more extra. I add whatever props there are so that we know for what we want to create this form, so here is the form title, I don't start it, I am fine, I will create one more attribute which is called form type name, so what is this form attribute? As if we are accessing login here, here I have to write and inside this we will tell what is the type of form, now this is for locking, so what we will do is to keep its type from login. Let's first take this and the other thing, I am going to copy it and what we will do is add it to the register as well and here I paste it, now I am doing this form in the register, that is why we will keep its type as register, so this condition On the basis of what we are going to do, we will display the values ​​or inputs in our form, then mixer, you must write this probe, with the help of this, we are going to see the conditioner rendering here, let us save it and add it as form type. Given, now we will use the switch here, so where will we do the switch, see, we can do it on the switch off story also, what will we do, this is the heading or after each one, what will we do here, will we use the switch, I will comment . I will write the switch statement, you can do the same for fails also, but I will do whatever is the switch and I will create the cases inside it and now what will we do here, once we see the condition, then double this bar, what will we do inside it, return. What will we do, we have to return here, we have to return the switch and we are going to do it tomorrow at the initial time. One more thing you have to see is that we have to do it tomorrow also, so what are we doing, we will do that and will do it directly tomorrow. Hope you know this concept and like if we have put next but then it will get tomorrow at the initial time, so what will we do inside it, we will do it with the switch statement, we cannot do it directly, we have to return it, so we have called it Ara function here. Written inside this block and after that instant did it yesterday so here you can use switch so here you will write switch switch after that comes paranthesis and after that inside your cases fridge you write the condition . If it falls then we will do it on the basis of the condition of proof holes, so here I have to write Pro condition and here you can create cases, so first how do I create the face and what will we do inside it, I will target the form type. Didn't I tell you that we have kept Register and Login as form type, Register will remain inside Register, Login will remain inside Form Type Login and in future we will do the same, then we will change it again as Form Type, so here it will be done in this way. How will we access first, it will remain small for login, so how is this our post, what will we do inside it, if we can show it, then what will we do, first of all we will disable it, then you created a comment, yes, take disable next line and you will get this function. Write it inside the function. After adding it, those yellow lines will appear. If you were writing it then only the warning will show to you, otherwise it will not show. Now what will we do inside it, we will return here directly, what to return. If we have to return the input box, then you can return it directly. Here I wrote return parenthesis and inside this, first of all, what we will do is to give pregnant as sugar form and what I am doing inside this login is to this email person and After copying the password, I will paste these two inputs here. We have copied and pasted inside this, this is our first, let's do it from here, but now we have the code, if there is any minor mistake in it, then this statement will click less than correct, what do we do after this How will we create the second one because how will the second one remain only then the rest of our inputs will be hidden, so what will we do here, how will we create one more, so how is this where it is ending, what will we do after that, one more how How will we create it and in this we have to access the form type, so here we will write the form type, if it is equivalent to the register, then what to do, all the remaining fields are there, so I have copied the entire input box from here. We will copy everything that we had in the data and paste it in this register, then convert whatever is in the fragment and start converting it first, I will do the same for the pregnant woman and paste it inside it. If I am safe, we have two how to create it and the above one is how to create a login. Make sir, you write the form type correctly only then it will reduce it. Let's go back to the application so see on login we have only email and password showing and if I go to register now see I hit the register url and it is not showing in the register anything else I think we did not return it Here, that's why he might not be doing the show. You can see that we have done the direct pregnant thing, so we have to start and return it first, so from back I am going to cut it and then lay it down. First cut and here we will write the return. This is this here. Let's cut it for safe, will reduce it, let's check and go back and see that it is showing properly. Email, Password, Name, Organization, Hospital, Name, Website, Address, Phone Number , all the things are showing here perfectly and what is the issue in this that we don't have to do this? The name of the organization is the name of hospital, this is the condition which has to be checked and this is the name of the condition which has to be checked, how will we check it, we are going to check it on role basis, mother, if we have the role of administrator then It is not necessary for the administrator to add all these things like organization name, hospital name, he can register directly by filling the name, email and password. In this way, we have for the hospital for the organization, so in this also we have Conditioner: This is what we have to render, so how will we do it? What will we do? We will create a radio button for this. If you want, you can also use Bootstrap's radio button. Here you search for radio and here you will get the option 'radio button meli create'. Let me do it and tell you, there is no problem in creating it because we need the role in everyone, we need it in login and also in register, so what do I do before switch, I create a class here, deep flex and also margin from bottom. Let me make it three, I have created this class, what will we do inside it, we will do it with the radio button, for that we have a class, form das check, when you can also see the documentation of Bootstrap, from there you copy paste it, inside this we have If there is input, then I have to write here and this input has a class, form check input, then you have to write form das check das info. This is a class and its type will be radio, so you change it to radio and what we have to do in it is name. Also have to be added, so here I have to write name. Inside name, you can write anything because we are looking for the role here, so I am writing the role here, after that we will have the value here, where will the value come from. These will come, which of the role values ​​will come to us, which role value is the state that we have, we will give value to it, so here I have to write the role , what will we have after that, its on change event will be there, you can target that also. If you can then you have to write on change like this will change then what to do here what will we do in this line ara function we will see so ara function you have to write here and what we will do in this will set the role so you have to write set role And what will we do with the set role, here we will get the target values ​​from whatever event like A dot is targeted, first a little format will be done, this will be visible to you clearly and what we have to do inside this is also add the default check. Whatever is there at the initial time, we will write it here and I will also give its ID so that we can handle it. Here I have to write the ID and Radio and I think this is enough and after this we will add the label in HTML. Even if you get it or not, we will write, no problem, I will do it by name, giver radio and inside this, what will we do, we will add class name, because this is for radio button, so what will we do, we will tell it, form check das label. So it will automatically be applied on the classes of Bootstrap and what we have to do inside this is that we will add all the radio buttons that we have, first of all we will have one for the donor, let's check it once, does it appear correctly? No, let 's go back to the application and see this is our application. What will we do in this way, here we will do the same for hospital organization name and admin, so you can copy paste the same, see once. We wrote this, now we can copy paste it multiple times, we will copy paste it below, this time I pasted it because with multiple values, first we saw for the giver, now what will we do after this, here we will do it for the admin. This whole thing will be there only from the role in your ad and I have removed the default check and will also give a little spacing. If you do this then we will get to see the margin also from a little side i.e. from the left side. And its level will also be changed, this will be for admin, after that we will have it. For the hospital, I change its ID, hospital roll name and its value, I change it, okay. What will we do, instead of writing the value directly, we will manually add the value inside it, then its value will remain, see, here is the admin, I will copy it and put the value directly in the admin, what will we do, we will pass it to the admin, after that we have the hospital. On the basis of this role, we have the condition that we have to change the value inside our form, this will be for the hospital and let's do this also, this is the hospital owner radio, so we will make it hospital radio and see above here also owner. If it is not then we will do it in the ad, you can change it as per your wish, maybe some of it is left from me, after that we had this hospital ready and we will also change its value, we will make it hospital ha capital and One extra is done , I think so I am late after removing the extra, see, there is a problem in copy paste, we will delete it, so here our hospital one is complete, after that we have for the organization, so the organization one can also copy paste. Look, this organization is empty, we will do that, so what I do is add it directly inside the value, we will remove the organization, you can understand it and after that you can make biscuits as per your requirement by doing HTML. From here , we will remove the donor from the HTML form and make it Organization Radio and here instead of donor, Organizer Session, we will cut and paste it and I think the donation has been done, it is okay to change the ID. We will also change its ID and everything is set, let's do it once more and see how it is looking. Let's go to the application and here it is looking something like this. The display flex is not reducing. Think. Okay, if there is a spelling mistake here, let's fix it. This is Display Flex, a class of Bootstrap. Let's do this with Deep Flex. Let's go back to the application. So see, it will show something like this too and sitting in the middle of it. If we can, we will get a little margin from the side. Email is the password. Both of these things are required. How will we display the name here? We can also write directly. How will we write directly? We can compare the roles. IF role is in the same balance and role. If a single valentine is given, then what to do, return it here, what to return, we have to take this name input, from here, I will cut the name input and paste it inside this, let's do it in this way, auto Format will be done, now we will see it once. Let's go back. I will change the application. Hospital will not show it even in Organization from here and it should be shown in Admin. Let's see it once. There will be some spelling mistake in Admin. There will be some spelling mistake in the radio button of this. We will check that the value in it is Admin. I think its condition must be a little different. You can see here that it has become a separate condition and it is shown in auto format, so what should you do with it. First cut whatever is coming in the parenthesis. Do this and you have these two conditions, you have to rape whatever you want inside the parentheses in this way, if any one of these conditions will be true, then what will happen, the rest of our code will be executed here, let's try it once. Let's see, let's look at the application. It is showing the name equally on the admin. It will not show on the hospital. It is showing the name of the admin. Next, what do we have to do? We have an organization name in the organization. What will we do if we have a role organization? Only then will you display it, so what you have to do here is to open it, add the place and here if the role is equivalent to the organization name, then what to do and the key condition is returning and what we will do here is to cut it, cut it. We will paste inside this , we will also make it for the hospital in this manner and test both together, so here I have to write, curli press and what we will do inside that, we will check the roll, if the roll is equivalent to hospital then hospital. Then what to do, return it here, what to return the hospital name, so let's cut it from here and paste it here and I think this is enough, we will test it once, let's go back to the application, so see here. In donor we have name email password website address and phone is showing if I do admin then we will see things and if I do hospital then see hospital name is showing after that email password website and here on organization. When I click, the email password is not showing the website and organization. Let's check once. There must be some mistake in the organization. It is good that the name of the organization is empty. It is okay for the organization. You fix it. Let's go back. Now look closely . If I click on Organization then the organization name is A, then the email password is changing perfectly based on our role, our form is also changing. First we have updated the form and then on the basis of our role, we are inputting it here. If we are also changing then it is reducing this functionality perfectly. Now next what we will do is reduce it on submit function. Now what we will do is reduce it on register. So first of all we will control and then with the help of X, we will do network request. First of all, what do I do in the beginning, I also add a link here so that we can access the login and register page. If he is already registered, then we will redirect him to the login page and if he is on the login page, then we will redirect him to the register page. If we can also redirect, then we will create a link for that, so what do I do before the form, here inside this flex, we will first check the form type and the condition based on it, we can change it, so here I have to write form type, if the type of form is Log In then what to do here, ternary operator, we are looking directly, what we will do is add two conditions of true and null and inside this what we will do is p type, we will do that, paragraph tag . So here I have to write P and what we will do inside this is if this is the login page then what we will do is show a message note register and then what we will do is give a message of register and a link. If we add it here, then what do I do after P or will we give it inside P itself? Okay, I will take the link within the speed and let it go. Now where will this link come from? It will come from Rick Router Dum. First of all, we will import it on the top, so here what I do is, after the input type, import something from DI Crouter Dr, we will import the link, what will we link like uncle tag in this way reduces it from one page. On the second page, we can jam on this without refreshing the page, so here is this link and in this I write late, take the symbol of har and note, i.e. exclamation mark, we will add the property of tu inside it and slash it. We will give this on the register page, if these people are on these pages, then in this way you can copy paste this and paste it in this second condition, now you just have to redirect this to the login page and its message. You have to change it like 'already user please' and then what do I do in exchange of hair, I write here, let's do this with login and add it to a class, here what will we do between, so what will happen with this, both of which There is equal space, we will divide it, that is, we will do it by sharing, let's go back, we will also change the application, we will do it, we will do it by doing legs row. Let's check once again then see that it should be showing evenly which is fresh style one by one A and there is a spelling mistake here, you can see this is the display flex, then see now it is showing perfectly here But I also give the margin from the bottom or you can change the margin from the form, what you have to do is to go back to the input. The margin in the input type component is the bottom three. You can do this one by one, it will show something like this, like we will click on login and space is not available, so what should you do for the space, you can add a little space in it, how to do it with very simple hair. Here also add space before login. Let's do this. Let's go back to the application, here the face will also show equally. Now as people will click on it, they will see that they are being redirected to the login page. And when I click on register here, I am redirected to the register page. So our successfully login register page is completed. Now we have to reduce the register and login events, for that we have the option of 'Submit' inside the form. So what we have to do conditionally on on submit is that we have to submit the form. How to get it done? First of all target on submit and in all and within it we have to do the condition that is login and register. Now we have to see multiple functions on the same form. Now how will we do that and what will we do for that, we will create another new helper function or we can also create a service for that, so let's create a service and see, create a new file inside the service folder and you can name it and Service because it is related to authentication so I have named it service and inside it we can create functions like login and register, then directly you can export it. Name of the export function is as I am writing handle. Login and what will remain of this, this will remain as arrow function, we will leave it as simple ara function, we will also make exports handle for register, we will leave this also as ara function and we have to do the same for now, we can do it with these two functions already made with us. This and this will be rendered conditionally inside the form. Now what we have to do inside this on submit is to execute two functions because we have done the same in login to the form and have done the same in register also, so what can we do form . Now, what will we do with the two functions that we have created here? We will execute them based on the type of form. So, first of all, what should you do? Create a function because we need to Multiple functional rendering has to be done and in this, what we will do is to do events on Make a return here, here we can make a return directly, so what I do here is I will make a return and then handle the login function, then look, we will show you the option, now we have created functions inside the service, you have to import this form. If you are doing it in Visual Studio Code, press Control Space and it will show you the suggestion. Click on it. This function will be imported automatically. You can see on the top how you are doing it. If it is not happening then you have to go to such a big park and do it manually. We have to import it, we will simply do this function tomorrow and inside it we can pass A. Now there is login, so what can we do in this, we can also pass the email and then we can also pass the password in it, both these values. To give us access, so we are passing the n argument email and password here. This is the first condition. After that, what will we do? We will do it with the shop because we also have the second condition, so if these type people are not here. Then what to do, check the form type again, the story, its type is not registered, if registered again, what will we do, what will we return, what do we have to return, we need to handle the register function, import this also, click on it, automatically it will be ported, it will pass, time is required. So you can pass it here, like the name, whatever state we have, we can see whatever we have in the state and if we need a role in it, if we need a role in both, then I would pass the role here. I am inside the login and also inside the register, then the name is roll, after that there is the email. There is a password and after that there is an organization name. I will copy all of them one by one from here and paste them. If there is a hospital name then we will add the hospital name also. Here is the website and then we will also add the website here. You can pass the paste address also, what will we do, we will add it here and then who is there, then you can also copy the phone number and pass it here, so here I pass it in water format in something like this. See, we are passing all the things because at the time of registration, we do all these things as per our requirement, we will go back to the service and we have to access all these things, how will we access them, first of all, what you have to do is these three things. If we want to access these four things then we will copy whatever arguments we have added inside it and will add it to the service here and if it is not there then I will write the manual and what will we do here. First of all, you will prevent the default behavior, then you have to write A dot prevent D result and this function has to be done tomorrow, after this you can do it with the tried block, so here I have to write control dot lock in tree and cache block cache. Once done, here I have to write and what you have to do inside the try. You can also access all the things. How will I do it? I will do it simply by locking console dot and let's check. We will paste all the values ​​in it. I will do all the things. We will check the value that is coming to it and what do I do in the partner, I also add the swing here, login again, we will have some idea, these people do it with these handlers , what will we do in this way. If we create it for register here too, then we will copy all the values ​​that we are passing in the form and paste this argument inside this function and after that, what will we do here also, we will make a dot prevent as default. I am just copying and pasting this so that the time will increase a little bit and after that we will see the free catch blog here, so you have to write try catch clock catch is simple in console.com, whatever error is there, today it is here. What we will do in the tree is to print it and lock the console dot. Whatever values ​​we will receive, we will add them here and I will register here by writing 'let' and we are going to gate it, copy it and 'let' Whatever I paste inside it, we do it with the paste, this function may look a little big but it is a reusable function, the logic of our court gets reduced a lot in it, so let's test it. Let's go back to the application and from here I am Inspector. I have also added it so that we can access it and what we will do here is first of all we will control, you can add any value in it like I am adding random value, see there is no valid value in it because we have Foreign vacancy is also not connected, we can check by adding any value, like now I click on login, then see that the object of login is A and inside it we have the same value, whatever value we have added. Now see the value it has is donor, now I do admin and will login, so see the value add, I will do the hospital in this way, then see the hospital is showing equally, you can add one more condition in it like here you You can check the note role, if the role is not provided or you can also check the email and password. If we want to simply print this note email and note password validation message here, then we will return it from here and do it here. I can do that in the normal result, I will replace it later and add a message to it. Let's go back to the application and I will refresh it once. Now if I click on login, then see the alert message. If we show, then we have basic validation, you can do it by hand, now if I type any value here, like here I have added any random value, now I click on login, then see perfectly. We have a volume, what can we do with this volume, we can store it in the database or compare it, then how to do that, we will see now when we see the network displays, we will gate it in it, then the basic is done. Now we will test for the register, I am adding anything random in the name, for now just for the test, I add any other value here and see, I have registered in the name of the donor, I will click on register, then see the register. saree features here But there is a and look here, which is the HD string A, which is the value of the hospital and the organization that we have inside the organization, so both these things are a TA because it does not have any role, so then that Now it will not show, like if I add values ​​here and click on organization and now click on register, then see it will show equally, organization, we have role, after that all the values ​​are A, only one is empty. Why is it not coming because the hospital name is not there so perfectly we are getting the login and register values ​​also, now what will we do with it, we will connect the back handset, first of all we will check the back connection, how will we do this with react. We can connect it and then we also have to see the Redox Tool Kit. With its help we will connect it and then what will we do with the AP? We can also connect the exhaust interceptor to it so we will see that too. Next now what will we do with our application tool kit. We will use this to create a global state and use it in our application. First of all, you should know what is Redux, how does it reduce, if you do not have any knowledge of Redux, then I will give you the link in the description. Complete, I also have tutorials available for this. You can check it out if you have time and I will also give you the link on the I button. You can also check the video from there. I have explained the detox in detail there and will get back to you later. You will definitely have to see it from Redux or in future you will also have to see Redux. Only whatever functions you need later, you can search the code according to it because the concept will be clear to you there. Do check out what we will do now, we will do this, you can also see its architecture like in this image, the architecture of reduction has been explained in it, I hope you will know a little bit about the basics, what is reduction, this is a third party library. That is, there is a library of JavaScript in which we can manage the global state. Now in React, if we bring state in one component, then the problem is where we have to do it in as many nested components as we have to do it, then there we have to give it such a prop. If we have to pass then what happens to it, what is the probability, that is, what do we do, we pass the same state which is in multiple components, today N prop, so what is its replacement, here we can do the reduce and directly global state. We can create it and use it in any component . Apart from this, we have a reducer function in it. What does the reducer function do? Our business logic executes here, how will we do it? Look, mother, we have a state of dollars, see the example. This is what I am telling you, this is an example of banking, initially we have zero dollars in the account and here there is a button to deposit $10, now as I click on it, what is happening is the click event is happening from here tomorrow, so if If I click on it, what will happen, a request of $10 will be dispatched from here, what does it mean, see here this event is being dispatched, it means a request is being sent from here, now dispatch means request in simple words. These requests will now go to the store because here inside the store we have what is the global state right now, it is zero dollars, what did I do now, I deposited $10 here, so this event was dispatched from here, where did the store go after being dispatched? In the store, we have reduce, what is reducer, what is this function, it is called business logic, so whatever logic we have in it will be executed and on the basis of that, our state will be changed back. Now what new state will we have ? Will go from zero to $10, this is one way data binding. If you have seen it in Angular, it also has data binding, but in React, the one way is also data binding. So, this is the basic example. Now what will we do in our application. And these two login register events will be handled with the help of reduction. Earlier we could do normal also and now what will we do to achieve the functionality. Now first of all you have to install so see for installation. There are two separate libraries here, one is Redux and the second is React Reader, so React Reduction is a separate package and Redaction is a stand alone separate package. If you want, you can convert Redux into any JavaScript. We can do it with the library of Riya, here we are also seeing it with React, that is why we have to download a separate package here of React Reduce with the help of which we can do our Riya application without Reduction. If you have and can use it, then what should you do? First of all, click on Get Started. You will get the installation setup here. Scroll down. If you want to speak with First Air template, then template is not necessary and we have the project ready. What we have to do is look from here and go to the exciting up and from here what we will do is install it. Now pack both of these. If you have to install this then you have to copy this command. Let's go to Visual Studio Code and from here. I open the terminal and lay down the new terminal. If you want to install it in the React application, then do not do it in root. Inside print, you will write cd client. Now we are inside the client director, so what we will do here is paste the command. First what. What is happening here is that the reduction tool kit is being installed, what will we do with it, here we will also add the package of react reduction, so here I am typing and let's say react reader, you can also copy the page if you want in its documentation. If you look, you will see that there is a second command, so you can copy and paste it from here, just like you copied it from here, cut it, you can also paste it here, there is a difference between both, here I pasted it by writing this . If you have to press enter, then both these packages will start installing in your React application, so they are small packages, they will not take much time to download, you can see that they have been downloaded from the gate , now let me cut it, what do we do now? First of all, we will enable reduce in our React application, after that we will create the store and after that we will create reduce and function. Now what we will do is create a new file here and you have to name it stall.j . So, what will be the files in our store, we will have the reducer function inside it, so here our store file has been created, now what we will do inside it is import some things like you will write import something from data like flash stall. Kit and from this we get an option of Configure Store, whatever you write, the suggestion will be shown to you automatically. With the help of this, what we do is create the store, then here we will write, keep the variable with the name from Constant Store so that We will do it in app.gs or index.js and then after that we will write here the configure store which we had imported uber, this will be the function, inside it we will have object, inside this we will have radio head one. There can be more than 1, so here you have to make it an object and in it you will reduce as many as you have and what we will do is we will also export it, so you will write export and store. If you want a store, then our store is here. It will also be exported from but right now we do not have any radius, so what will we do, here we will rate the radio service, I will create a new folder which I will name as features, then we have created a folder with the name of this features. Inside which what we will do is create another sub folder, now what we will do is create a global state related to authentication inside it and also create an action inside it, so here I created a folder and with that name we will create a new file inside it and Sew Start Cheers So this is our redeem server function now what will we do with it Here first of all what I do is create some global state then let's import some thing import something from reduction and inside this we use great slice function If you do this then you have to write create like, with the help of this we create the slice and today we can do n radius or such action, so I create it in a variable and slice because it is related to authentication, that is why I am here. I am making it with the name and slice, then what will we do, here we will make the slice and inside this, first of all you have to tell its name, so the name and this is related to authentication, I wrote its name, after that you can create the initial state here. Like here you will write initial state and this will be such an object, you can create it here or on the top also, what you can do is create a variable, you can name it with constant, you can write its initial state and inside it You can also create objects like in this we will put the initial loading and I make it tap at the initial time. After that we will also have a user and at the initial time I make it tap and what else can we do with the user. So I also make the token null at the initial time and then how can we have an error? So we will set the error here and also do this. Instead of passing the object here, we will directly initialize the object variable. If you can do this then this will be the object and after this you can also do the extra reduce on the head, so what can you do in this now, directly pending flower then reject this saree of saree which is the state, how can you handle it later? We will see, for now I create it and leave it, let's do this and lastly what we will do is we will export it, so from here I export it, export default and then take the slice which will remain and slice and write here. And slice here, our slice has been exported, now we can do it in the file of stall.gs, what you have to do is reduce it here and write its name inside, what name will you write, you can write anything like I and Let me write and after that then reduce and function. Which reduce function is this for the eye that we have created today? So inside it we have reduce function. So inside it we will create it later but for now, what will we do? We will add it here, then you have to write and see the slice, we will show the suggestion, click on it, the file will be automatically imported here and once you import it, then you have to write the plot here and inside it you have to pass . Only then let's do this by reducing it. Now here our store function and then slice function has also been created. Now what we will do is import it in our React application i.e. we have to enable reduction, for that you have to go to It is in the file of index.js and here what we will do is import the provider, so here I have to write import provide and from where we will import it from React Reduction, which was a separate package that we had downloaded, in that we have provider and What we will do with the help of this provider is that we will enable Relax in our application like we did in the browser brother, like a custom HTML element, in this way you will also give the provider the opening and closing time and what will you do in between. We will cut and paste the entire code, after that you have to go to the provider and here what you will do is pass the store, now this is the store object plus your file, you have to import both the things here . But Atri Play Store is passed here, now inside this you have to tell which store file is there, so here you can see by the name of ours, you can see shot.js, then you have to write store and press control space, then see you. Suggestion will show and Make Sir must check its pass. See this is the folder of Read We will do this in the browser and check once whether the reduction has been set up or not. Let's run it in the browser and here is our application, we will refresh it once and what you have to do is that the extension comes first, so you have to search on Google for the reduction so. If you search by writing then see you will get the first pay link. If you are using Google Chrome then you can download a separate extension for this. Right now I am doing it on Firefox so I will scroll down and here. But see, you will get the option of deduction, if I click on it, see here, it will redirect me to the extension, if you are doing it in Chrome, then click on the next link, as if I click on it, then here are some ways. Whatever is there will show on Chrome, what you have to do is just add whatever is there, I will tell you in the fire box, I have it already installed, here instead of remove, it will show you the option of add or install, so you can install. After that, right click on the application that came back. What will you do after going to Inspector? Here you will click on Double Ara and it will show you the option of Reduction. Click on it. If Redux is enabled in your application, then do something like this. Will show from as if I click on the state then see whatever we have inside the slice Initial state was created, it is showing here, so successfully, now reduction has been enabled in our application, in your case, if it is not showing then make show properly, please check the files, maybe you have made some mistake. Because of this, the reduction is not doing less than equal in your application, then mix and cross check it, you will get the source code, then you must cross check it in the description, then this is our basic reduction, I also practice concurrently. Let me tell you because what we are going to do and then we are going to run both the Note applications together, so what will we do for that, which one will do it with the current package or I will tell it in the next video because we will see it together. We will see tomorrow, only then I will show you properly. For now, what do you do? Then keep them setup properly, with the help of this we will reduce the login function. Now what will we do? Here first of all is the interceptor and default token. We will set it and see the current package and then later we will create login and register with its help. What we used to do earlier, we can do it directly also, we can do it even now, there is no problem, but what can we do separately ? With the help of exhaust, we can create an interceptor and also create an environment variable file in it. First of all, what you have to do is look at the source in the root of the client. What we do now is that we have all the files of our components, then circle them. But not now, what you have to do right now is to right click from the client and create a new file inside it and name it rakhenge.inv, whatever is in it will be the complete environmental variables of the React application as we have noted in the application. What we are going to do in this way is that here we will set a base URL for Riya's application. Earlier we used to do proxy also, we can still do it but here what I am doing is to create a separate file of an interceptor. I will create it in which what will we do later, we will do it directly tomorrow, complete access, it is not necessary to write all that or we will definitely not need to pass the token, we will do it directly with the help of variable which is First of all, create a dot-nv file, where will it be created in the root, once I tell you its folder, reveal it in file explorer, see here this client, there is a separate dot-nv file inside the server, now inside this client also. We have created a new dot nav file, do not do it inside the circle otherwise it will not reduce, you have to do it in the root like note models is public source folder, as per this you have to create this dot nav file. And what we will do in this is that we will create an environmental variable here in which we will set the base URL of the React application, so the naming convention that you have to follow is that you will write in capital, underscore up and after that whatever variables you want in your application. You can give its name, like what are we going to do, we will do it with the base URL, then you will write base URL equal to and then here you have to write the name of your server, so in our how, what is http:/ then local host. After that, what we will do is here, we will do the port number, in our how it is 88, then slash slash ap/v1, so till now we will give the port which is by default, so this will be our base URL. What is the meaning of base URL? If we have to do the AP tomorrow, then what will we do directly after this and do it and then we will do the login tomorrow, this is complete, we do not even need to write, how will you write directly, what will we do, we will do the slash and flash login tomorrow. And this environmental variable will automatically add this part of our base urine and whenever you make a change in the dot env file, you have to restart the server, so what I do from here is to Let's click on it and will also see which currently packages we will see. First, what will we do? We will install First of all you have to switch to the client director, then you will write cd client because there is a react application inside the client and in it you will write inos. After writing this and press enter, the axon packet will start installing in your react application. Sa package, not much time You can see how quickly it has been downloaded, let me cut it, what we will do from here is that we will create a new file here, so I will create it inside services and I will name it api.jas and inside this we will What will we do? First of all, we will import Exios, so we have inputted the import By name, by the name of the people doing it and I have written it in capital letters, so AP equal tu, then what will we do after that and inside that we have the function of great, then if we create the help of create function, then this function . Inside, if you add an object, you will get many options here, like if I write here base, then look at the auto suggestion, you will get it here and what will we do in it, will we use our environment variable, which one is this base you. R L So from here I am going to copy it and here first of all we will write B in process dot and after that the name of the variable is in our how is react underscore underscore base URL so what is stored inside this api. The URL of our back hand is stored inside till v1. What will we do after this? If we do it with the interceptor here then you will write AP here. Now a functionality has been added inside it. You can see that the functionality of exoz.com has been added. Now we can do it with the functionality which we used to do with the help of exhaust, now we can do it with the help of this also, so what will we do in this, we will type request of interceptor and then inside the request, we will use this We will use what we will do in the request that we have, here is the request to use the back function, like we receive the request response, we are doing the same thing here, what will we do inside it, we will act a condition. What condition are we going to do? When our user will login, we will generate a token and get it from the local storage, then what will we do to gate it, we will add a condition here, if we get it then what will we do. Here our authorization will be conceptualized by what is inside the headers, so here what I do is if we have the local storage item here, if we get the token, then what we have to do is to execute the function. So here we will write request, what is request? This is our basic request which we get in the back function yesterday, request and response, so we are doing the same request here and we will do the header part of it, so you will write headers inside the headers. We have authorization and what will we do with this authorization, we will fill it with whatever token we have in the local storage and we will also follow the naming convention, you have to write beer and after that the template string is done with dollar braces and After that, we will do the same for local storage here also, so you have to write local storage item and then we will pass the token we have here, so this is our one condition, if this is not found then what should I do? Directly return the request, whatever the request is, let's do it by returning it and after this, what we will do here is export it to the export AP so that we can do it by doing it from the story as well, so here But create our interceptor OK, now directly we can perform the entire operation with the help of this AP, so I hope by now you have understood what we will do now , we will also see the package concurrently so that we can run both our applications on the same port. When running which application, we should be able to execute both the root server and the react server with a single command, otherwise we will have to open separate terminals for both, better than that we can run both in a single command. So what do you have to do for that, first of all go to Google and on Google you can search on current package and we will search from Nam, then which one will I search in currently, you will get the first link, click on it to open. You can see that it will be done, you will also get a little demo of it, scroll down from here you will also get test commands, you can see that in this way you can run two commands together, if you install it first then I copy this command, see what you have to do now, the next step is to come back because we are inside the client right now. From here I have to write seedhi dot dot so now we will install the application in the root and what we will do here is here if you are not able to understand then I will tell you in the terminal from here netr minute from here if you are new If you open the terminal, it will automatically remain in the root, so directly you can also paste the command here, write npmi on currently, press enter, then this package will start installing in your note server. Pack it small, read more. It did not even take time, you can see that it is a very small package and it got downloaded quickly, so from here I close it because it has been downloaded, now how will we do it, what you have to do is to go to the root . First of all, I close these files, all these files have also been reduced or they will be needed now because we have to see the login register, otherwise I tell you directly, you have to go to the root, see there are files like packets in the root. You can also read in this, this is our note server and we have a script in it. In the middle, we have run our React application through Noteban. What will we do from now on? Starting from this, we will run the React application. So I have to name it Client. What happens if I run this client command? Here you will write SBS Start because with the help of Nam Start the React application starts, after that you have to write Das Das Basic. Because it is inside the client folder, here you will see the dot slash and let's do it from the client folder. First, what I do is test this command whether it is reducing it properly or not, then for this I use terminal. Open it, I will close it and here I am doing it in the command prompt, sorry, if you want, you can test it in the integrity terminal also, I hope you can see it or integrity terminal, I am doing it and now you have what you have. There is no need to have a switch inside the client . You can directly access it from here via root. For that, you will write 'run'. Who has written it, then from here you will know whether the application is running or not, which is ours. When the React application is starting, the thing which we were doing by switching to the CD client, now we are doing it from the root also, you can see that I close it in the starting D development server, we were just testing, do not want to see anything big. Let me close it and also terminate it. Now what will we do? We will create one more command here. Now what will this command do? Like I have to write the name of this command as tag or I first copy the beginning and lay it down and modify it. Let's go back, here is our current package, the commands that I told you about this command, so what will we do with the help of it. Note, we will execute both the server and the React application with a single command. Let's go back to Visual Studio. In the code and cut this type and paste this command and instead of start, now here we will write here, we will add the first command, which will be the first command, these will remain and here you will write 'nam run client', so what will happen with this. Let's run our React application and test it and I am testing it in the command prompt so that you can see it clearly. Here you will write NB rank, so what will happen with this, both the commands will be run together, you can see. Who are you currently running here? Nam Run Server Mm Run So both the commands are running together here. If it runs successfully then you will get the message below. You can see that Note Server is running perfectly and it is connected. Now our React application is also started from Mango DB database. It will take some time for the first time but later it will reduce in this way as you do it regularly, so you can see it automatically here. But in our browser, our application is running on local 3000, which means it is perfectly ours, it is also reducing the package concurrently. Now what will we do, we will see the functionality. Now what we will do is reduce the login functionality here, in which we will reduce with the help of Redox. We will login, here you can see that we have the status of loading user token and error at initial time. Now what we have to do is like login, we have to fill this data and also what we will do is to do the reduction and help him. Then we will update the straight like Pending Full Full Reactive Bhi Valuj Whatever response is received on our AP, we can handle it with the help of action, so what will we do for the action, we will create a separate file, then inside the reduce we have the meaning folder inside the features. Right now there is only one more slice file, what will we do in it, we will create a new file and you can name it with the name of the action and what we will do in it, we will do the function, with the help of this we will create the function here, which function, login now. So what we will do is create a login action here. First of all, what you have to do is to import create a sink leg from Rate Reduction Toolkit. From this you have to import, with the help of this you can create a function here. And directly we can export it, export then variable constant and then inside the variable you can store the action, so I have to write its name here, user login equal, then create a sync, we will do it . There will be a function and what we will do inside this function, first of all we will give it a name like and slash then this is for login, that is why we will write login, then this becomes the name of our action, then this becomes the name of our action, after this we What will we do if we create a function here? You can also create a normal function. We will create a function here, so you have to write what a normal function does, you will do it here and what will we do inside this function? We will expect some things from the user like we will get a role, after that the user will also provide us an email ID, along with that we will also get his password, so we will be able to access all these three things so that what we will do, we will provide one more thing here, we will reject. With value, so how will any error come, we will handle it in this, react with value which you get by default with Sun, now inside this you can do the same with the try block and what we will do inside the catch here. But conditionally, you can check the error, see how to do it. If you have a custom error, then it is not in our knowledge right now, but I am telling you that we will do it, here we will also handle the custom error. Here you will target the error object. What has to be done is error and if there is any response inside the error then we will check it, then you write the error response and N's condition, I add it here, what will we do inside it, you can also check the specific message that comes. So you will write error dot response and inside the response there is data and inside the data there is message, so we are going to check it out and here the conditioner can return whatever it is, so you can directly write return here return. Then what will we do, we will use the value of reject, then you have to write the reject value and inside it we will pass it to whoever has any error, whatever response is there inside it, response camera is relief, that relief is in the data and inside the data we have it. If there is a message then we can return it. If we do not get it then what will we do and we will return here directly reject with value and inside that we will pass the error message here which is the error message and print it here. Two, now we have the savings in the tree which will tell us how we will have success, what will we do in it, so here you can store it in a variable by the name of response or you can directly store whatever data is inside the AP. We can destruct it as I wrote here about the data and what we will do after that is wait because our function is sync and after this tomorrow you have to do it here, so what can you do, you can do it directly with AP. We have made interceptor here, keep it here, we can do that and with its help, what can we do directly, we can do exhaust tomorrow, first of all you import it also, you have to write AP suggestion, we will show it. Click on it, here this file will be automatically imported and after that you will write dot to method, you can do it here, in this we will do the post method and inside that, first of all we have the URL and what we do in it. We will write slash and slash login, then this is our point, we have to send a request on this and also pass the data, which data is this, the data we will take from the user here, role, email, password, what will we do? If you pass this then you can copy this, copy it from here and you have to pass the second argument in it like this: This will pass, what happens after this, we will also have the token generated, so what will we do , we will store it here, stall ok and do it from local storage, first of all you have to create a condition , if it is successful then only what to do with the token. Do it from local storage, otherwise what will we do, we will directly return what is there, then you will write here which item will be set as local storage item, here you have to write here, we will create a variable named token, after that inside the data here. We will have it, we are doing it from the local storage here and also what can I do now, you can also see the toss notification here, then there is a package for that, Reacts, you can download it, I will tell you once. I will give it on Google or on Nam Gas, let's go to Nam gs.com and here you will simply search by writing toast, you will get the result, sorry, you can see the second one here, click on it, we will do it as soon as possible. First you have to copy it, after copying what you have to do is to do it in the integrity terminal and install it inside the client. Write as much as I react and press enter, then this package will start installing in the application for you. This is a small package. It didn't take much time. This package has been downloaded. I close the terminal and what will we do. Scroll down. You will also get an example of how to do this. You can see what we have to do first of all, its tight file. If I have to import the container and also the container, then I will copy both of them and after that, what will we do, we will do this in app.js, so here I import it and friend, not right now. If you want then remove it and let's do it with the container. What will we do with this container and can we add the message inside it? First of all, friends, we have to import it. We have just copied the input statement and what will we do? We have imported it. So here we do not need to import it, I delete it, now as the data will go to the local storage, we will use the store, so here I have to write success, it shows a little green in success, you must document it. See, you will get to see a lot in it, now which message will we add inside it, whatever message we have inside the data, we have created it once, let me tell you once, if you have forgotten, then you have to go inside the controller and Here we had the login controller, you can see this is the login controller and if you look inside it, then see if this success is true then in this we have a message property with which we can do that, so here we will write this. Our action has been created here. Now this action has to be handled inside the slice. In this we can channel it directly. We have to do whatever the builder has to do, so how will the builder do it directly? What do we do here ? Let's use the function and inside it pass such an argument to the builder here and with the help of this then what we do is manage the state. Which state will we manage? Whatever initial state we have, what will we do with it? Handle it here. What will we do first of all, we will write here builder, with the help of builder, you can add whatever is there, then buildl, inside this we have the option to add how and inside this how, you can write its name like in our how. What is it, we will use user login here, now where will this user login come from, you can see the action we have created, we have also exported it and its name is user login, so we have to use this file, you Also import it or what else you can do is write this much, hit control space, it will show you a suggestion, click on it, the file will be automatically imported here, now inside this also we have three straight lines, you can see, in this we have Pending will remain set, that's why we will add pending here, after that there is tomorrow back function here, so here you will write tomorrow back function and inside this we have state, which state, whatever initial state you have, then you can write it. If you can handle it here then you will write the state and here what you can do is you can change it, see how I manipulate the state which is here, state dot loading because there is loading state, if it is going to pending then we What will we do, we will make it true and whatever is the path of error, because we have made a separate section for error here, we will handle that also. Here you will write state dot error and what will we do with it, here we will make it null, it will remain null at the initial time, so this is our first, how after this we have success, you can handle that also, how will we do it? Again you have to create one more how, here you will see builder thoughts and inside it then write the name of how like again we will target user login, user login dot file i.e. success how do we check here, after that tomorrow back function inside which We will have straight and full, so we will also have pay load in it. What is the meaning of pay load? Whatever data we return, we call it, so today we will pass it as N object here and with its help we can change the data. Now what we will do here is we will target the state, we will do straight loading here, because we have the data, it is not necessary to keep the pending state and after that what will we do, we will target the user with the help of the state. Once done, you will write here state dot user and whatever user we have in the payload, we will file it as flower, then you have to write payload user, now where will this user come from, this will come from our controller, the thing we are returning. You can see that we are returning the user and Tuk One, so we are accessing both the things here and directly what we are doing is expanding it with the help of reduction, after that what will we do here. If we deal with the token also , then what will the state token do with this, we will set it here with their help, that is why I am writing here, whatever name is there in your controller file, you do the same, only then it will reduce it, this is our second. Now, what will we do in the third part, we will create it for reject also because error can also occur, it is not necessary that if our AP executes successfully here, we will handle that also here builder.com and after that again we will target the user login. And after that here we will have the request for reject and in this also you have to use the back function and here too if you deal with the state then you have to write step sorry spelling mistake straight and in this also we will have because Whatever type of error we have, that's why we can change the route to whatever it is and can also change the speed of the error here. So first of all, what you will do is target the state and whatever is the loading, put it in the error. Whatever is blue will be burnt and what will we do after that, here we will target the error, whatever it is, it will be filled, let us do this, so here our action has been successfully completed, what can we do now? We can dispatch it, how will we dispatch it, whatever we have and the service, we have a separate function inside it, you can see that we have a login on the top, so what do we have to do in this, we have to do this, but what is the problem in this too ? If this is a file and is not a component of the service, then we cannot use the select right in it directly, so what will we do instead of that, we will dispatch it with the help of the store. What you have to do is to first import the file of the store. Because we cannot do it directly in this, we created a separate file which is the file of the entire JavaScript. If this was a component of React, then what could we have done, we could have used it as a collector and used it as a state, but We don't have any such thing in this. What do we have to do? We have to dispatch it here directly with the help of the store. So what you have to do is first of all import the store from import store and then give it to you here and then after that our Next is the reduction folder, inside that we have the store file. Now what will we do with the help of this store, how will we dispatch, how will we dispatch, here we were doing console, so I have removed the control and let it go. If you want, catch it or try catch. We can remove this also because our entire logic is now inside the action, I will leave it for now for the safety side, what will we do now, we will use store here, you have to write store and after that like you will change the dot, right? So see, you can access all the saree things from here, just as you used to do it with the help of Dispatch, you will also get direct access from here, so what we will do is use Dispatch, here what you have to do inside Dispatch is user action . If you want to do this tomorrow, then you will write the user login which we have created the name, user login inside the reaction, you have to import it also, if the suggestion is showing, click on it, file automatically here. It will be imported, now here it has been imported, what do we have to do inside it, what will we do with the email password and password, here we will pass it, let's do this, here we have also passed the data, now we will test it. We can first start by checking whether the application is running or not or if there is any error, then see if the application style is running, I am refreshing it once, we do not have any error right now and I think I have spelled it correctly in the environment variable . I also made a mistake, once I checked it, look at the client's dot env file and see it here. Have you become local? This is done through the host. After doing this, you have to restart the server. So I close the server from here and restart it again that whenever we make changes in the file, we have to restart the server, so here our server is also starting, you can see the application is opening here and I I will close it to the new one, I already have it open, so I will continue in the same type, let's refresh it this time and what will we do from here, first of all add the email and password in it and see if there is any dummy. After adding the time, I have seen that we get an error, that is, here I click on login, then see the action as Colva Pending and our status also becomes Rejected and an error message is also showing inside it, you can see these valid credentials. So the validation is also being performed successfully and our state is getting updated correctly here with the help of reduction tool kit. Now what we will do is we will add the exact value, so what do I do from the database ? Let's copy this email ID. Here we wrote taken provide gmail.com, after that the password is 123456 and I click on login here and look good here, the load here is undefined, once we check the state it is load pe load. That's right, once I look at the network type, I will open the net pack from here and this is the request for login, so the data is all correct, what we are getting in the response is good, login success is coming, you can see we have It is showing the error and is telling inside the slice itself, look at the return, we had returned only the data, we should have checked once, yes, we have not returned the data, you can see this is the data, we have just put a condition here. But if you forget to return the add key and data , then what should you do? First of all return the data here, only then it will reduce, after that we can access it i.e. to access whatever values ​​will be there in the data, we need to enter the data. Here the condition we had added was added only for local storage. If we have data success then what will we do? We will set the data in local storage i.e. whatever token is coming, it will not be stored. We were doing it from local storage and later we had to return it here, so now we have returned it here, we are getting the application notification also and our status has also changed here, you can see it in the authentication. Loading is failing and the actions are also same, there is another pending flower field here, we also have a user object in it, we have all the details of the user, the password is also showing, we will hide it, there is no problem right now. We are seeing only the value here, after that we also have the token. You can see that the token is also getting updated regularly and here the errors are being handled equally. Now what will we do for the token here also. We will add a condition inside the slice, which is the slice of our meaning. What will we do with the initial time? It is better to receive the null token. We will first check the token from the user's local storage. Who has the shop already available, that is, how to get it? We will check, it is very simple, what will we do, we will see the ternary operator, let's create and what will we do in this, we will get the token from the local storage, we will get the local storage item and we have named it token. If we get the token, then what will we do with it here. We will get it and will replace the state of the token that we have. If we get the token, then here we will keep it from the first condition, we will store the token locally and what will we do in the else condition, here we will nullify it, then initially What we will do is with the help of this token variable, we will fill it, we also have your value, so what can we do, we can write it only once, so both will make sense. And if you keep it by name by value, then you will use it even once. If you write, you can access it easily, you can also modify the data in it, in PS6, you can see here, now what we have at the initial time, if there are icons in the user's browser, then they will show, now it depends. How much expiry did you keep, but here we have created a condition for it, instead of showing null initially, it is better to check it once, save it in local storage, that is, what we will do later is that we will also compare it because valid tokens will remain only then we will keep it as it is. Will redirect to home page or dashboard page. Now let's come back to the application and here if you refresh then see here at the initial time we have stock because we had given the validity of token I think one, so this shows here. If you are logging in then you must have understood how we can login, now next what will we do, we will see the register, how can we register, now what will we do, here we will reduce the register, that is, like we will enter the details in this register form. If we file then what do we have to do? We also have to perform the operation of register with the help of reduction, so what will we do for that, we will create an action of register like our user is registered, after that we will redirect him to the login page from there. He can log in and what will we do in the login also, if we add the redirect functionality, then they will redirect us to the home page, so let's first of all, what we will do is to get all the details, then you have to go and inside the action, we have Earlier we had created a user for login here, now what we will do is for registration here, so you can also create a comment so that you can remember, we will create a variable and also I will export it first so that we can use it on the story as well. To be able to export and then perform the function, I have to write here about the user register function, if we do it, then this is the option, so and slash register like, once I tell you the form, after opening it, the things which are there in it like email, password, role. Name Organization: If we have to get all these things then what do I do? I am copying all these things from here so that we do not have to type manually, that is why I copied it from here. What will we do after copying it here? But we will paste whatever object you have, you have to paste it, so here I have created an object and will paste it inside it, so see, in this way I have pasted all the things, now what will we do in it? We will do it in the block, print it and what will we actually do, how will we do that, I will tell you with a little fear, I have locked the simple dot and what were we doing in the message that we had added inside it, check the direct error message. We were doing that means whatever error we get, there is a response inside it, if we get an error response, then what we are doing is checking the property of the message inside it. If we get a message, then show that message, otherwise whatever. We have that customized thing, show it here, check the message that comes directly, otherwise we have the message relief in the specific error object, we are checking that thing here, so what will we do with this catch block. I am going to copy it and add it to consult.com as well and we will paste this and along with this, see that you have to pass reject with value also, so in this A sync, the first object we have is our What will we do after that, we will create another second object here, what we are going to do in this is we will do that with Reject with Values, which we will get this in sync with Dalbar, which we are doing now, then we will have an error. Whatever happened, what will we do in the tree after that, if we deal with it here, then what we will do here is that we can directly destruct it, we can also launch the destructor, from where will we do the data, we will wait, if it is stored, then we will write AP then its After method method, we have post, then you have to write post, after that and point, we have n point and slash register and after this, what we will do is we will pass the object, we have to pass this value . I copy this and paste it here, we have to pass all this stuff, now after we pass this thing, we will check it once, so here I add the condition if our data is successful. Then what to do, what we will do is send a toast notification here But you can use the window object and what will you do with the replace function in it? If I do it then this whole page which is ours is replaced by replacing it. So it will be a local store. I add the location this window dot location dot replace. We will replace the function with login, like we will be registered, like daily notification will be sent, after that we will redirect it to login, let's do this, our action has been created here, now we can do it in this area. Where will we do it and we have to do it inside the slice, so see inside this very slice, we have created a builder and in this we have how it is related to the login, so first of all I create a comment as the login user and after that we What will we do? We can copy paste this, the data will remain the same, there will not be much change in it, what we will do directly will be change it, copy paste here, I have copy pasted it, now what will we do after this, we will rename it here . We will do this by registering as a user and in this we only have to change the cases, otherwise what do you do, select it, press control three times, all three will also be selected, cut it, what will we do after this, we will register as a user here. So you have to write Register Control Space, it will show you the suggestion, User Register, we had named it, it will show you the suggestion, click on it, it will be automatically imported, you can see the user login, User Vegster, so this action has been imported, now in this we have If there is no token at the time of pass register, then from here you can remove this open, after that you can add the user in the payload or what else you can do is directly make the status true which we are getting success. I am nobody, we do not need to pass any value here because we are not going to directly enter the state. What we will do here is make the success response true. If you still want to fool the user, then you can copy and paste the code from here. You can do that i.e. state dot user and whatever is loaded, once you check the controller, see what you wrote inside it, here we are also passing the user, so we can access the style to the user, so I am giving user . I want to keep the user automatically which will be filled at the time of login, it will be filled at the time of registration and everything else is done correctly, let's do this also and we will test once that it does not reduce it properly. What has to be done, see here, we have done it, now what we will do is check it inside Just Service also and here we have, see the handle register in which we have just locked the control dot, we can see the control dot login, I can see this. I am late after removing it, now we will login to console dot, what we have to do here is to dispatch, so here you will do the same from the store because this is a separate java script file, so we are directly using the store and with its help we can dispatch. If it was a reactor component then what we could have done was to use it as a collector and with its help then dispatch the action but it is out of the box and the service is separate from us, that is why we dispatch with the help of the store. We are doing this and with the help of this store, you can also gate your status. If we want to see it in the future, we will definitely see an example of this too. Now what do you have to dispatch? We have created a user register here, you can get it here. But you have to dispatch it, see the suggestion will show, click on it, the file will be automatically imported here, you can see now what you have to do after this, simply do it tomorrow, after doing it tomorrow, if you want to pass the thing then here From name to website, I pass it here, if we paste it, then whatever function we have here and in the service is also set, now we can test it, so let's go to the browser and this Here is our register, what will we do, first of all we will refresh the page and see if there is any error, right now we do not have any error at the initial time, what will we do, I have created an administrator here, I will click more and Here I click on the register then see pending and then reject if it is rejected then we will check the error by doing 500 on the register, the internal server request is a good request, it is not our life, we can see anything in the request. No and in the response we have this empty object showing, then why is the request not showing? We will check once, maybe we have some objects. If there is any problem then look here and what we have dispatched inside the service or directly dispatched, what do you have to do with it. If you want to add a bar inside it, then first of all what I do is cut it and put curly braces here. I will add it and you will paste it inside this, you can do it from government.com, you can put anything as per your choice, so here I have filed all the details, now I will test it once again, if I click on register then See, here the registration has been successful and we have been redirected to the login page and here the status has not been updated, you can check your status, even the status does not mean anything, once I see the network, it is late, it is here. We got redirected on login and it is not telling about the registration. Once we check the database, I opened it and here I see on the user whether the user has been created or not. If you scroll down, you will see that the user has been created here. Everything can be done and everything has been added perfectly here but we did not get to see the message, so once I checked its action, there is a data message here in action, so it is not doing less than equal, so let's do it. This time again a new user will be created here and see what I do this time, from here I register an organization, so here I clicked on it, name of the organization, you can write anything like It is helpful, you can also write its email like I am writing dummy in aur.com, you can write as per your wish, I will also add the password, in the website also we can write aur.com address and change it to India. The phone number is 0123456789 and when I click on register, the concrete notification is not showing properly here but our user is getting registered successfully. Once I come back to the data, it is still showing 3 accounts in the document. Now I If I refresh then see it is telling and if you scroll down then you can check the role here. Organization is the role of the organization. Then whatever details we had filed are coming here perfectly. Just what do we have here? There is a toast notification but it is not showing, so what do I do here? I add one more condition and check whether FB gets success in data and data or the controller checks once. The spelling of many success is not a mistake. Then why is it giving problem, let's try once again and I will create it in the name of S and then I will delete it or I will create it in the name of the user, I will create a new user from here, so in the name of the donor. Name it from, user also enter email, user comes user.com, password, then address India phone number 0123456789 and click on register again, we have notification not telling here, so here we have it, see now 1/ 4 A is coming, if I refresh, it is showing one out of five, then the latest one which we had created is of the user, I will delete it, we will create it again, the toast notification is giving some problem, there is no less one here. I am doing this by adding an alert instead. Maybe it will reduce it. I will pass the message here from whatever is inside the alert. I copy paste it and check it. Register a new user once again and refresh it. Let's register user email ID user and user.com password India, after that phone number, you can write anything here, if sometimes there is a problem with power, then in the end I will try to fix it, but as of now the functionality is correct . Now if I click on OK, then see we are getting redirected from the same and now if you look in the database, now you see it is 14, I will refresh, so one out of five, here we have the document showing. Now we have created the user again, so the record of the user is also showing equally, then the functionality of successfully register is also being reduced, you can also check it in the reduction, everything we have with the help of action. What is happening right now is that it will not show, again you register and here it will also show you the action like we saw for login, one thing is that whatever you have will be visible in the register also, now what will we do next, less on public and private. We will do it and if you want, try to fix it. If we are facing problem on register or roast notification, then try to fix it. Now what will we do, here we will reduce it on private and public road and send it to Redux tool. With the help of kit we will gate if you remember we did middleware Let me tell you once, inside the server, we had a middleware named eight. What we were doing inside it, we were gating the token here, so from this we can do it, how we will do it, what will we do? We will create a new file by the name of private root, you can make it private or you can also make it protective root, so what I do is, here I name it protected, then you have to go to the root folder in the components that we created. What will we do in this? We will create two new files. First of all, we will have the public public router. Write it properly, this is one file. After that, we will create another new file here. We will make it protected or even directly. We can do that, first what will we do for protective, what will we do in reduction and create a new action like we had created an action for login and register, what will we do in this way, what will we do here to gate the current user also. We will create an action, so here I will create a comment Current User and create a new action Exports and you can name it anything, I want to name it Get Current User, so this will give us a basic idea as to what this action actually is. And what will we do with this also, we will create it with the help of create a sun, so create fencing tank and inside this you have to add its name, you will put slash and here I have to write current user or again keep the name after this . In the function, as we do this, you will write in this also, this is our normal function, we will not have any values ​​inside it, what we will do directly, we will use reject with value because we do not have to pass anything at the initial time. Here we will not pass anything, here what we will do directly is that we will try to access it and once we see it in AP, I am late and once in throat, we will do it, then see its method and then the part of it. Is the current user, so we have to do this, so what will you do, if we send a network request here, then we can also store it in a variable or they can directly disturb its value, first I tried this block here. Let's use Rai and catch What you have to do in catch is the thing from console dot people and whatever error response we are receiving, I copy paste it from here, here I paste it, so it It will save a little time, once you understand it, then you just have to copy paste it and what we will do inside the try is we will create a variable with the name of 'kanch li' i.e. response and what we will do here is we will wait for what is illegal . What we have to do is send the AP request, we have stored it inside the variable of the AP, which we can do and then the method is our own, what will we do after the get, here we will write slash and slash, then after that, current user, sorry, current user. Once again I have copied it and let it be from inside the root. This is the current user. I have copied it and pasted it here and have let it be double slashed. We will remove it. Now what will we do here? First of all we will check that we have the data. Get and there is data inside the response, then what to do, return it here, what to return, we have to write the response and data here, response start data and a question mark, you will know the meaning of this, what we do after writing so much. After this, what we are doing is putting question mark in the shortcut, both of them mean the same thing, if we get a response then what should I do, check the response dot data, so here our action has been created, let's do this, now we need to do this. What to do is to use it inside Protected Rawat, how to do it, first of all we will create its action in Slice, after reducing the extra, we have to create its cases inside, so what will we do and go to Slice and here I will make a comment or else in this By copying and pasting I am late, a little more time will be saved. If you are watching at this time then you can create it manually. From here I will copy and paste I am late and change the comment. I will make it current user and register user here. What will we do instead of this? We will do the current action tomorrow. First of all, what we will do is change it. So you have to press control three times and we will cut it. What will we do instead of this? We will write here current user get current user. Suggestions will be shown to you, click on it automatically, get current action will also be done here i.e. input. It will be done, now what you have to do in this, see, there is no need to change anything in it, we will show the loading at the initial time, then the error will remain nil, after that as we get the payload, in the payload we have the user, so from the user it will be done. We have to file the flower and what is the error in it? How can we find the error? We have to file the flower ourselves. We can do this. Here in our slice, the extra radio service has been created. Now what will we do? We will do whatever is inside Protected Rawat. What you have to do is, first of all make it a functional component, so IFC because it is a function and what do I do better than doing a full return. First, whatever is there, we will do it and inside this What will we do with the children? So you have to destructor the children. Now what will we do after this? Here we also have to dispatch the request, so what we will do is import the dispatch as well. Import something from React Reader from React Reduction. What we are going to do is we will use this patch right, so you have to write it dispatch, you have to create a variable for it, so what we will do is we will create a variable with the name of dispatch, dispatch equal, you dispatch it, you have to do it tomorrow, so its With the help, we can dispatch and also what we are going to do here is that we are going to gate which user, whichever user will be the current user, what you have to do for that is to create a function here, constant gate. I have created a function with the name of user get user, this will be ara function and let's also age it, a sync ara function and what we will do inside this is we will do the try catch block so that we can handle the success and error response properly console. I am late by locking the dot, consult.com, whatever error is there, print it today, what we have to do inside the try is to hit the AP, how will we get it done, it is simple, we will structure the data inside it, we will put it in the user and it will What will we do to the user, first of all we will wait with the help of AP, so here we will wait, then we have to do this tomorrow, you have to import Mix and UPI, we will show it by clicking on it, if we want to do it automatically, then we will do it with the get method. Later we had slash and after that the current user, I am late, take a look, we have done it inside the action, right from the text, you have to do it here also, let's paste it in Protected Rawat and I would close the previous one. If we are text then we will do it here and after that I will tell you what to do is to check how to check we will check here F data if we get data then what to do check success response here IF data dot success then What to do: Dispatch here, what will we dispatch, we will dispatch the action we had just created, which area we named it, see Get Current User, it will show you the suggestion, click on it, then whatever token we have, based on the ID. We will get that user after getting the user gate, what will we do, we will fill it here, even if you are not able to understand for therotech, there is no problem, now if you see its practical, then you will understand well, now this is done. Now what will we do after this, see if any error comes then what do I do, here I also clear the local storage, then we do not need any token, that is why what we will do here is clear the local storage. We will do it , so I will do the clear function here tomorrow, if an error comes, that is, if there is any problem in logging the user, then the token will be automatically deleted, what will we do after this, if we want it at the initial time, then this is also a problem. We need the user at the initial time i.e. if he is getting directed to the home page then at this time we have to authenticate the user on the basis of token, then what will we do for that, here we will use the effect, then you have to write and After that, what will we do? Here we will write a function inside which we can execute multiple functions. What we will do in this is that we will simply get the user, which we have just created this function, which one is this function, if we have to do it tomorrow, then this is What will happen is that it will be on initial time tomorrow and if it happens tomorrow then we will get the user, then our state will remain full, so this is our function, now after that we will have the return, so I remove this return conditionally. Whatever is there, we will see the return here, I put the condition for it, this is local storage. If we have the token in local storage, then what do we have to do to check it? Have local storage get item which item token token we will check here if we get top then what to do here what will we do here we will return it to children so what will happen with it whatever tag in between we will rape it components Otherwise, they will show the components, otherwise what will we do, we will do whatever is on the page here and it will remain here, what do you have to do inside this, we will simply return it, people will go to these pages, so for that we will also use the navigation feature. You can use which we find inside react router don't see the suggestion will show you just click on it navigate component will be automatically imported if it is not in your case then you can import it manually like this and it will navigate Gaya self closing tag will remain, inside it is your property and what will we do with it, we will redirect it from the login page, this is enough for protected route, now what you have to do is, whatever route you want in app.gs. If you want to protest , then what can you do? Sir, you can do it like in our home page, we will protest it, so here I will make it multiline so that you can see it clearly , I have made it multiline, after this you can What will we do here, we will use Protected Rawat, see the suggestion will show you, you can do it directly, from here I will do it, I will lay down the opening and closing tag, what will we do in between this, we will add the home page, let's do it from So our home page is protested if it gets a token and with the help of token the user ID is obtained and with the help of that we can access our home page if we do not have the token or not a valid token. If so, then you can't access the home page, then let's test it once. Let's go to the application and I will login and try it. What will we do in Saathi? Here, we will check it once in the Redux tool. Here it is. State gets logged in. First of all we get logged in with the user. I add the user and user.com password here. I and the login see the login as well and yes in this we had taken the redirect function and did not add it in the login. So I will add that also, first we will go into action and in the action I think we had added it, don't see this, we had redirected with the help of window, nor had we done this in the register, so I would have added it in the login also. From here, I copy and paste it and do this from what will we do, and first check what will we do, now what will we do, we will check here and so the notification has been removed from this also, so see here. But the toss notification is giving a little problem, so after this you should use the alert or try to fix it, lastly I have seen that I will try to debut it, so see, here the users are not getting the best results. There is a problem, we will refresh and see once. If we are redirected back to the login page, then something is not getting stored here, let's check on the console if there is any error. Okay, yes see, here we have an error that the note is read. Properties off and define So here we have the token's Kuch to Vishwas A raha hai a little inside its current user is 40 one and here split has Kuch to Vishwas A, we will check once because we have passed the header field directly in the AP. This is what happened, let's do this once. Cheers. Look, here we have created a comment, so I will convert this comment into code, because of this, I was not taking it because it was a comment, what should we do? Here we had to set it, which we have set automatically with the help of interceptor, but that was the comment, we have commented, now we will test it once, let's go back to the application and from here we will refresh it once more. From here I try to login, user comes user.com, password is 123456, login is successful and there is action here, if I expand you then see the user's object here is flower and all the details of the user are showing to us. So successfully our protected Rawat is reducing, in this way you can also create public pride, public, so before that, what you have to do is just make a little change, let me tell you, this four-five line code is public. In Rawat, we will do yours, first of all we will make it a functional component, if we have a token in the local storage, we will check the same thing, if we get a token then what to do, return it here, if we have a token, we will return it here also. You can use navigate, see the option will show, click on it, it will be automatically imported from react router dumb, self closing time and you have to add your property in it, slash, what we will do, we will redirect it to the home page because the token. So what can we do, we can redirect it to the home page and then the token will be compared from there. If it is found then successfully we will remain on the dashboard page, otherwise we will be redirected to the login page. We can also add else's condition in it. What will we do in the condition of giving help? We will return the children here. If we have to destroy the children here, then I am copying and lying and what will we do here in this function. We will torture the country, so let's do it here. But our public pride has also been created, we will test it also and what will we do with this login, click on it, I will add us in the middle, we will also add the register in this manner, so here I will make it multiline also . And here also what we will do is the opening and closing tag. What you have to do in between this is to add the register here, so from here I make it a topic, if it is safe then login and register are the components which are relief from the public route. And our home page is protected, let's do it with 'Ravat Hai Rape Hai'. Let's take a look once more. See what we have right now. User, so if I want to access the login page which is here right now, then see what happens. If I press enter then automatically I am on the home page. What is its basic meaning? If you have a token and if it is a valid token then what will you do? We will continue on the home page if we are already logged in and our token is verified. So then if we have to go back to the login register, then again we will have to log out. After that, we will remove the login and if I am late, then from here the local story is reducing our functionality. Public and Protected Rawat, we have created here. Now what we will do next is we will reduce it on the dashboard now what we will do here is we will handle the loading and error key which we have with the global state because see we have performed the validation here like I add the invalid email here. And I add invalid password here and as I click on login, see here we have an error message showing as invalid, invalid, so we have to show the same message here in the alert as well, in this manner which is the state of loading i.e. If there is caste on pending then draw happens and then reject or we will have full fill then it is water caste so what can we do in between this, we can show loading spin then spinner you can also create as per your choice. Or you can also copy paste the spinner from Google Pay, search whatever you like, you can copy paste it as per your convenience, I will create one manually and tell you, so let's go back to Visual Studio Code and What we will do inside the components, we will create a new file inside the set folder, functional component, we will make it a function with export and what we will do inside it, we will create a simple loading lamp, so here I have to write the loader, after the class of this loader. What we will do is we will give a class to whatever we have, first we will make a container so that we can take it evenly to the middle, then what we will do after that is we will target this class and draw a circle, so here I will write I have created this class Lat Hoon Loader Container and let's do this with this file. Now we have to target it in Ksh. If you want, you can also create a separate file. Let's continue this in the file of Ksh index.h. Let's create a comment below. I am late and here I write I am late, loader and make it a multi line comment so that we can know later for this we had applied here for this, now what will we do, first of all we will target the container and display it and then I add a little bit to the background color. What will we do? If we give black color, then you can also give direct black in this way or I will make it RGPV, so here I have to write RGBA. In this we will give zero zero and then alpha. We will add the color here, zero, zero means black color and after that we can set the presence here. If we keep it three, then we will get a little transparent effect. Let's do this. Now what will we do after this? If you target the loader then here I have to write the loader and you can also set it with I think. We will make it 48 pixels wide, after that I will make its height also 48 pixels. We will not show the loading spinner in it, so I am making it 48 pixels. If you want to do more or less, then you can do it as per your choice. You can change it, after this I also add a border and make it and you can select any color in it, what we will do is make the border color white and the color inside it is white. So if we change it a little, we will see a little effect in spinning also. If you are not understanding it theoretically then there is no problem, I will make it first and then I will do it and tell you. Keep applying for the classes you want in marriage. After this, we will add the order radius here, so you have to write border radius and we will make it 50%, then this total will be rounded and we will make it display in line block, so you have to write it, we will do a little animation effect in it so that it In this, what do we do for spin? If we use Roshan, then we will keep it here as Roshan, this is the name of our animation, which we will execute for one second in linear direction and we will make it infinite i.e. it will keep rotating continuously, after this I will tell you . Whatever we want to create, how will we create it? If we do this with the frame, then you have to write @hiprance and then the name of the animation, so here we have named it Roshan, so here also we will write the name from and After that, here what we will do at 0%, we will first target it and then use transform inside it, then you have to write transform and what we will do in it, we will write it as 0° and as soon as it goes to 100, what will we do then this If we rotate 360 ​​degrees then you have to write 100 and after that we will use transform and then you have to write and we will do it. Let's do it with 360 degrees. So it has been clicked here. Now we can test it. First of all, our global state is here, look at the loading user token error, so we can gate it, how to gate it, we can select it, we can use hookah, so first of all, what we will do is import it, import something from react reduction. And from this we want it to be selected, then you will write it select and with the help of this we can access the global state, so directly we will structure it, destroy it, which slice do we have, which slice do we have and slice by name. And inside it we have all these global states, so we have to access it, so what will we do, we will directly create a variable, the structure from where we will select it and use it, then you have to write select it, inside this we get the state and the key of this state. With the help of this we can access our global state, so here I have to write straight dot and inside this we have sir data, from that we are destructuring it, from this we need loading and then the error is coming, we print that. Now what do I do here, I add the condition in the return, if there is loading, here you have to write loading ternary operator, we are seeing, if there is loading then what to do, show the spinner components, then here you will write spinner mixer. Click on this, the component will be automatically imported, so first, if it is true then show the spinner, else what will I do, I will return and inside that we will add our lock off code here, so from here I cut it and inside this I will paste it and here the opening and closing tag is at the bottom, I am cutting it down, first we have to give it at the beginning, then the opening and closing time is below it, I am reducing it at the bottom, now okay let's do it. First of all, if we test this, then what will we have to do to test it manually? Our state is still water, so what will we do to test it, let's do it from the show, due to this, we are not dimming the lights on the application. Here, let's take a look at the color for a better illumination. We have added the color here for the bottom, so I add it, I do another color, and then double f3d00 red color, let's shop it one. If we check the times then see that now this show is happening smoothly, our spinner will show in this manner and it is going well, you can change it as per your requirement and we will also handle the error in any way. If I want to do it but the loading is less than normal, then I will return it to water as it is. At the initial time, from here we will do it, let's do it with water. Let's go back to the login. Now what we will do is we will handle the error here and check it here, I am just doing it above, if we have an alert message, we will show it, see friend notification is giving a little issue and after this I will span here. Tag am late and inside this stand type, we will show the alert box, so here you have to write span, what do I do inside the span, here using alert, I am late, then we will see a little pop up message here and Whatever error is there, today we will show it here, let's do it and also test it once that it reduces it properly, it does not go back to the application, here is our application, let's refresh it. Look at this once more here, now there is the error statement, now what do I do, add any color email ID and password and click on login, then see these valid creations, click on OK if If it is not there, then we will fix the letter, there is no problem, but whatever message came here, we have printed it and you can also add toast in it. See, you can also use the notification. Simply, what do you want to do? If you want to use Toast, see the suggestion, click on it, the file will be automatically imported here, if not in your question, then import it manually and what will we do in it, let's do it with TS dot error, let's go back to the application. But see, here something is coming in this manner and you are also getting the notification written. Now it is normal, so we have this, you can see that it is doing invalid creation. Okay, double double is coming, we will fix this also in the last. There is no problem, what you have to do in this manner is that you have to write it in the same manner inside the register and then in the home page also you can add it in the same manner. Now what to do if the loading is ternary operator, we are here. But if you are looking at loading, then show spine, see suggestion will be shown, click on it, we will add it and add return in it and whatever is there, we will add it inside it, let's paste it, then things from the register should also be applied. Now I will not test it and tell you, test it as per your convenience and we will also handle the errors here, so you have to write the error, what to do if an error occurs, here we will take the spent tag. And inside this type of alert we will do it and inside the alert we will pass the error message, whatever error remains will pop up and we will get to see it. We have also added the SIM functionality in the register. Now we will What will we do, we will add this to the home page also, so you have to open the home page also and here also what we will do is use the collector and what we will do with the help of the state and get it from there, also import it to the mixer. We will add self closing time return and here I will make it a fragment and I will also make the above one a fragment and will add this h1 inside it for the time being, later I will change it completely, let's make it an error . We will also handle the error in the beginning. Here I have to write the error. What to do if there is an error. Here we will take back the stand tag and show the alert message inside it. You have to write alert and error inside it. If you want to speed it up, then whatever error message will be there will be passed by IT here today and that toss notification was also showing in the login, so what will we do, we will replace it, there was no success there, I will remove it from here. I am late directly, we will do it by logging in to the other users and then check I am late, how if there will be an error on the story then it will keep spinning and we will be successfully redirected to the home page and if you expand the state then Inside that we have all the details of the user, so successfully here we have the loading spinner also created and the error message is also successfully created, now next what we will do is reduce on the layout. Now what we will do is reduce on the layout here and Along with the buttons, we will also see the layout here, you can keep it as per your choice, I am going to keep the basic layout here and then on its basis we will design the dashboard, so let's go back to Visual Studio and what will we do with the layout also, reusable. First of all, I close these files, after that we will go back to the shirt folder and inside it we will create a new folder with the name of layout and inside this layout we will create two files, first of all It will remain outdoor shares, you can also write its name as index.js but I am naming it as good, we get special intelligence, then from that we will make it a functional component, all the actor of function with export, after that what will we do in this day Which is fragment and after that I will take another deep with class of in another one we will have the header area, I will write here also let's header and after that I will take another deep with class of Content in which we will show the content and what do we have to do inside it, if we want to show dynamic children, then here you will write children, let us destructor this, I will copy it from the function and what will we do here, we would do it from the test. This is basic, our layout is complete here, you can see what we will do now, we will wrap our home page with this, then you will get the basic idea how the layout reduces. Now what will we do instead of this empty fragment here. You will write Layout Mix and also import it. In Visual Studio Code, a suggestion is given automatically, so you click on it. If the suggestion is not coming in your method, then you can do it manually by importing it. If we are back in the browser, then see here we have a header area showing and this is our home page, so the child item is showing equally and our header will remain constant, what will we do in this, we will add some thing or the other now, what will we do? We will create another new file inside the layout and we will name it write I am late, let's do this with adult components and we will add it to the layout, here we will add the header component, mixer, import this also and show suggestions on it. Click, let 's do it from the self closing time, see it here the header component has been imported. Let's go back to the browser. First is our header component. After that the home page is showing. So our layout has been successfully created here. Now what do we do? What I will do here is that of Bootstrap and I will create a hero bar here in which inside this area I am removing this h1 and what I do directly is I am doing that here which is inside Bootstrap. We get a class, I am doing it and what we will do inside it is press Das brand, then automatically it knows to do it, after this what you can do is write its name like I am writing let's blue bank and a little bit I also give it a margin, so here I make a margin from the bottom to zero. First and once again, see how it looks. Let's go back to the application. So see, it is coming like this and the network. What will we do, we will sit in the classes so that we can be seen clearly, I will do the BG, we will check the darkness, once we see, it is in the direct and we can also lighten its text, I think it will not reduce anyway . Once we check, see if it is not doing less than equal, then what will we do, we will target it manually, there is no problem, let's do this first and what will we do inside it and we will take this number and what will we do inside it. Will do li dot, then after that you can write the name of the class like I write new das item app is the class of item and inside it I add a paragraph tag I P in which what we will do is we will add the link, just adding the link. We have to show a text here, still we will add its class so that it can be applied smoothly. Inside this, here I simply add a message, Welcome and I have some issues, please check once here. But this is the menu, I cut the menu and convert it into a fragment, I will cut it also, it is extra, so let's remove it and here we will add U bill tech, you can do it with the help of bill tech. Let's go back to the application, welcome and then the name of our application has become a welcome message, after that what will we do, we will copy one more tag, so copy paste this and let me copy paste and stitch this. What we will do inside is we will create a button, so from here I will cut it and we will take the button, button and will keep its class, another class, we will add in it medium danger and will name it. Back on the application, so see, we have to create something like this. And we will display it, we will do this and here also we will do mh3, then we will get to see a little margin from the left and right side, you can see and you can also target the navigation bar, whatever navigation you want inside Bootstrap. You can also target it like I have to write and we will make it a multiline comment, it becomes a multiline comment and after that we will write here I am here and you can change its background color like we Let's make it black and whatever color is inside it, we will make it by and I have also added important because we are overwriting the existing one and will add important here. Let's take a look at it. Let's see how it looks. Let's go to the application and see that it is showing something like this and the content inside it is not showing. Will there be some other class for that in white? Let's take a look. If it is not on this then Then what we will do is we will target this also, so you can copy paste this or you can add it inside this also, I am copy pasting, let's do one, so see here the brand is coming evenly here. Na, we will do it on the brand also once more, the number will be the brand, it is showing it, so simply what do you do for it, you can do any one of these, like the first one, I am doing it later, okay, this is the one who is blue donated. No, we will copy it, first of all we have to import it, see here it is also installed, so I close the terminal from here and what we will do is go back inside the folder and what we will do is first of all we will import it. Something from the react icon and then after that we will paste it, so here we have pasted it, now it is from the package of B, so you have to put the slash I in front of it, then you will write B I and you can use it. So, what will we do in this new brand, let's use it in the start, let's do it with red, let's refresh this application, look at it once, here the icon is also showing blue bank up and you If you want, people can show the icon inside the out or inside the welcome also. What to do is search the icon from here, like if I related to welcome, then nothing related to welcome is coming. If there is a user then we will search and this one is correct. B user circle will copy this and if it is from B only then after this we will paste it with mango and we can do the same with this icon also from welcome. First, what I do is, here I am using this, I am late, I do it from the self closing time, let's go back to the application, then see something like this, welcome will show and if you want, you can also show the name of the user here like we What will you do? So what do you do? First of all import you select it. What we do with the help of select is we can access the global state so you will see the state and what we will do with the help of this state will access our slice and what we will do. We only need the user, so what will we do directly? Now what will we do after welcome? User dot name, whatever is the name of the user, they will show the login here, after that let's do it. Let's go back to the application and see welcome user. And I also add the exclamation mark, so see, this will show in this manner. If you want, you can also add drop dr here, you can modify it as per your requirement and can also target this brand. We can increase its size and whatever token we have in our local storage should expire or be cleared, so it is very simple, what we will do is create a function first and here I also create a comment, log out function. Here we will create or logout handle, whatever you want to write, you can name it as per your choice, I have to write here handle logout equal to ara function and what will we do inside it, simply clear the local storage, then you have to write. Local storage dot clear function, we will do this tomorrow, after that we will also navigate to it, I am late using navigate, we will import it, first import something [music] and redirect, it will automatically redirect or if it doesn't So after refreshing, it automatically redirected because here we are clearing the local storage and our authentication is based on token and also we can use toast or we can use alert box. So here I have to write alert, inside the alert you can write the message, people out successfully, this and this, I have put it on top, first is fine and after that I am placing the redirect at the bottom so that we get the message first and after that we do the redirect, what will we do with this and this function, our people will assign it on the on click event of the out button, then you have to write and click and its Inside we will pass this function, here I will write late, let's go back to the application and refresh it. First and here see userna is fetching and from here we will login first user.com 123456 login login Successful ok and here we are not getting the user at the initial time so what will we do we will add the condition here and if we get the user then check his name after that so here I have added the question mark . Let's do this because it is taking a little time, it is taking time for the data to get fat, that's why we have added more conditions to what is there and I hope that means you will know what we are doing. First of all, check the user. If we find a user then we are checking his name, then the condition is like this, the question mark we have added means the same thing, so see, it is reducing the functionality, now what will we do, local You can also see the storage with you, what has to be done in this, now I click on logout from here, then see the token has been removed from here, we also got a message, log out successfully, click on OK, then see, we will login, now what will we do here. But as the user is logged in, after that we can also display his role, so for that we can do a batch of Bootstrap and now we have to reduce a little more on the layout, we have to continuously reduce the layout and What will we do here, we will reduce it to the rule of organization, so first of all, what I do is welcome user here, after this we will show the batch component of bootstrap, so you can search in the post, batch, batch. If something appears like this, what will we do in this? We will display the role of the logged in user. We can see it inside the batch. If we have to do it in the batch in this way, then you can also copy paste this page . So from here I copy this and let's go back to Visual Studio Code and we were doing this in the address area so I open the handle page and let's go, this is our header page and in this we have and add extra space here. We will do space and after that we will paste it, you have to write this class, class name and here instead of new, what will we do, we will get the role directly from the user, so you have to write role, if we get the role then what to do. So check the role inside it here, so here you will write the role and also see here the name in welcome, if we have a hospital or an organization in it, then it will not show properly, then what will we do here. But we will add optional changing, that is, we will add another condition, if it is a user, then show his name, if it is a hospital, then show the name of the hospital, then here you will write the name of the hospital and we also had an organization, so I will minimize it. Let's go to the side bar and here we will wicket it. If we find a user then what will we do? Here you can also search the name of the organization, then you will write here and with the name Nice Session, let's do it one more time. We will see how it looks, so we have to gate the role here because in our case right now the login user is the giver, hence his name will be shown directly. Let us go back to the application and select the match roll number of the administrator. Then here we will get his email ID. And password has to be added and here the admin is being shown properly. Now what we will do is that we will design the menu here and in the middle we will have our dashboard. Now we have to reduce it, so see successfully. Welcome admin is here and Then after that, whatever role it has, it is showing properly here. Now what we will do is that we will change the layout a little bit, then you have to go, in the layout page, we will keep the header as 'it', after that we will do this directly. If you were doing a show for children, then instead of that we will add a side bar to it, so what do you do, add a roti class and inside this row, what will we do, we will divide it into two columns, tomorrow HD 3 and inside this we will What will we do, if we add it here, then for now I will start the tax or what will we do, what will we do for these children, what will we give them classes, I will cut it and here we will write tomorrow because it supports 12 pens, so what can we do? will line it up Will make the gutter zero. Look back at the application . The home page is here on the right side and is showing equally on the left side. Now what will we do? It was created in the previous project also, so I follow the same thing here . What we will do inside the layout is that we will create a new file or you can also create a folder. First of all, we will keep the name of the user, I will name it as user Maa U and what will I do inside it, I will create a Hey and at the same time I will export it. Who am I exporting and I want to keep it with its name? I am user menu, what will this remain here? Hey off object, inside this we will add its name, name, what we will do, first of all we will show the inventory, so you have to write the inventory and after that then what is the text? This will redirect to the post, so slash means I will direct it to the home page and this will be colon, after that you can also add icons here, so for I can, you can use whatever fonts you have, so let's go to Google. You can search, you can search, then click on New in this icon and here you can search, then what will we do for the inventory, here any good inventory can be searched by name only and I am late and the inventory is related to this. Whatever good icon we see, we will make it look like we are talking about our sales. Okay, we will select it and copy its link. After copying, what you have to do is paste it inside it. Now this tag should be copied. We don't want the tag gone. What will we do instead? We will cut out the tank and the class inside it. Sir, we are going to place this here, so it will appear something like this. Next, what will we do again? We will create another object. We will handle the donor , so here you will write Dora, after that what we will do on the text is to change it dynamically, so I am going to keep the name of the match, I am going to keep it near the donor and then the icon also, you can do that and also the icon . Once we will search like the show does and search here, okay, this one is fine, this one is fine, we will copy it, we will come back, pace it again and class it, so we will remove the type, second mother, you will create it. Here you add its name, what will we do in the third part, we will add hospital, then you have to write hospital, after that here also we will add five, then you have to write slash hospital, after that we will add icon, we will copy the fonts. From Assam and go back A and here we will search the icon for hospital, there are many options for hospital, I have copied the first one, I will copy it and paste it here, after that we have to keep its class icon. You have to remove it and if you remove this type then we will create that too. We will create another file with reactor function with export and what we will do in it is we will create the side bar menu, so what you have to do for that, here first of all. We have to create a class with the name of sidebar which we will target later and it is being multi selected, so I am removing the one below and then what we have to do here is to create a deep side with the name of outside so side. But by the name of this we have created a tip, inside this I create another menu by the name of class and what we will do inside this menu is that we have just created here, ara object by the name of user menu and there is a spelling mistake here. This is the user manual, we will extract it with the help of map method, so what you have to do here is to import this menu in Visual Studio Code. If you are doing it, then like you will write the user manual, then see it will show you the suggestion. Click on the file, it will be automatically placed here. After this, what will you do? If you map it directly, then map method and inside it we will get a single menu, we will open it. Now why are you returning such objects, I am going to wrap it up inside so that you can understand it better. Understand from this because what we have to do here is to get its location and on whose basis we do the location, we have it for that, if it has a location, we will use it, I import the topic, after importing it, we have to create a location. So that we can use its features, we will create a variable corn location equal to that location is this OK, we have stored it inside this variable, now what will we do, we will use what is here, how will we do it, see it is very simple, what we have to do. Which property has to be changed? Right now we have not created any class but in a little fear we will create it. I have to create a variable for that, with the name of this active, what will it do, on the basis of the URL, it will activate the button, so now if you are not able to understand it, then there is no problem, I will create it here, then you will know. Directly demo tells us that we will use location and what do we need from inside the location, we need 5 names, we have to check what is mentioned in the URL, if it is equivalent to the menu and inside the menu also we have shown the word, then it should be used less. If you can write anything, then we have to give the dynamic class here, that is why I have written the complete details first so that there is no confusion and I put it further down so that you can see it better. What will we do inside this div by adding the class name. We will give back comment, you have to do that because we have to apply the class dynamically on the basis of what is active, so initially what we will do is we will give the classes of a menu item and what will we do that will be the class of active, we will add it dynamically. How will you do the template screen? You can do it on dollar tax basis and inside this you will check this active, then here you will write this active, if this is active then what to do, apply the class of active here then you will write. Active and whatever it is, you have to write it inside the curly brace because as a person we are doing it, then you can add it inside the curly brace only then it will reduce it. Now we have applied the condition class here. Now inside this you will also display the content. What we have to do is for I can, we make it a class and after that we specify it directly with the class name. We have dynamic in the class, so here also we have done braces and where will it come from? It will come from the menu. You will write menu dot icon and what will we do after that, we will show the menu here, for that you can use the link which we will import, what will we do on the basis of this link, we will tell it here . So you have to write the link, this is the link tank, inside this you tell the value, first of all, where will the single come from, which I have extracted, inside it we have a property named, so we will display it here, after that your property. What will we do inside 2? Inside the menu, we have an object of 5. With its help, we will redirect it. So, we have a perfectly created side bar. Let's do this and we will also test once that it looks properly. Or else let 's go back to the application and see how it is looking. So let's refresh here. Once on the side, it is not showing properly. Simple. Okay, yes, we have not imported it. Let's go back to the layout. And here we will add the component, tomorrow inside HD 3, you have to write mix on the side and also import it, let's do it with self closing time, let's go back to the application and here what I do is in the name of textile. Let me create a folder inside the source, we will create a folder with the name of styles and inside it create a new file with the name of tell layout dot kas and here what we will do in it because we are overnighting the existing class and also add border radius in it. If I add it , you will write border radius and make it five pixels, a little rounded, this will show us, then you can also add the background color, so I am adding exact decimal color, you are three, you are double zero after that. I will add box shadow to it and make it zero pixel 0 pixel 2 pixel blur and keep its color as gray and whatever color is in it will be made white, so for white you can also write directly, do it with white. Let's take a look and see whether the class is being applied properly or not. What do you have to do for that? We will import it in the component. Then we have the style folder inside it. We have the layout dot tightly. Let's do it fine. Let's go back. Will apply and remove it in the border radius, I am late, the border radius is not visible properly, I comment it out, let's see, okay, it is going well now, now we will target it in this menu too, we will do it for that. What you have to do is to directly target the class of the menu. What we will do inside the menu is that we will give the pending from the top and make it 100 pixels is enough. Let's do it once and see it. 100 pixels from the top, we will get the margin. What will we do after this? Here, if we target the menu item inside it, then we will add menu test item pending by writing. There is no need to do much, we will target the anchor tag inside and make its color white and whatever text decoration is there, we will make it black because it is showing the underline, that is the default behavior of the anchor tag, so we have done that. The font size has also been prevented, you can change it, we will make it 1.28, I am adding it in the responsive unit, if you want, you can also give it in pixels, we will do it once, see how it looks, let's run the application. But see, it is showing something like this and it is fine and what can we do, we can also target the icon in it, the menu item is again inside the eye, so I target it directly and in this Also, what we will do is change the font size, we will make it 1.2 M, after that I will give margin, I will make the margin 15 pixels from top bottom to zero left right and whatever color it is, we will make it white. We will also make the icon white . What we are doing here is that after that there was a class of Active, so I target it directly, I will change the background color, I will make it white and I also add pending to it, I will make it a little pending, 10 pixels is enough, a little bit. It will be good if it comes to the side by the head, after that again I target the class of active and when it remains active, we will also change the anchor tag and what is inside it, we will also change it. When it remains active , What will you do with its color? The color that we have defined above is 3200, so we will do it with this color, so whenever it is selected, it will show something like this and the icon is not showing ours. For that, what we have to do is to import the Fonts and Sum icon, then we will go to CD and Jas and from here what we will do is search the CDN link of Fonts and Sum, then you have to write Awesome, you will get the first link but Click and from here you have to copy the first link. What will you do after copying? Open the file of index.html and paste it before the title. After doing this, let's go back to the application. The application should be visible, I can see it, we are having shows, so perfectly, we have the side bar also created here, the rest of the pages will not be there, like if I click on it, then we can see any show here. Will not do because right now we do not have this page available, we have the home page directly in the inventory, so now we have to change whatever is in the home page, so what do I do, directly, by making a little change in the home page, let me tell you what we do. We will add a model pop up inside it, we can also show saree inventory records in it, first I close these files, they are not enough yet, let's also close the layout and from here we will do them once. If we design the home page a little, then here we have a simple heading , so what do I do in its place, do I add an icon, then put it inside H4, okay yes, four, okay . Please share it with me and what will we do inside it, we will add an inventory and show an option and we will also display the inventory and icon inside it, then inside this, I will show the icon in the beginning, then we will make it multi line. First and here what we will do inside ha four, see I am adding the class directly here, you can also search whatever it is and write F A solid and after this what we will do is the plus icon, we will make it plus and also I also change its color, I make it Let's go back to the application, see, it will show something like this plus ad inventory and it is sticking a little bit too much, so I give a little class to this h4, I will give the margin in the class from the beginning, I will make it four, okay Let's set it and go back to the application model. You will get many options here about the model. So what do I do here. I am looking for a dynamic model. So we have to do it ourselves. Check whether there is any back drop here. Let's take this option, it is working fine in this way, we will copy this button, but what is there in our form, we need it here on this h4, so what will we do, simple, whatever classes are inside it, they are not classes. Look, it is data, what should you do with it? After copying, what should you do after copying? If we have to apply this on h4, then this is h4, what will we do after this, we will paste it, we have to add both of these to it, let's do this and after that we will do the same on the model, we will make the model a separate component or Then whatever is in the separate file, first of all copy the model, whatever details of the model are there till here, copy the entire lamp, from here onwards you have to copy the lamp, after that what will we do inside the set folder. If we create another new folder, then here you have to create a folder with the name model inside the set and inside this, what we will do is create a new file model dot, make this also a functional component, FCA react ara function with export and here div. Syntactical sugar form of the fragment instead of and will paste it here. After pasting the model, you have to select it, after selecting it, right click and convert it. Let's do this in j6. So here in some auto format, this It will be visible in the following manner, now as it will be done from the file, what will we do after that, here after this h4 or even before the layout, you can do it, so what I do is add this model after this h4. So here I have to write, see the model, we will show you the suggestion, this is our application, now I will click on the SMS so that we know that this is a button, so inside this, I will add in line style, style and what we will do in this is change the cursor. Once done, you have to write this. Let's go back to the application. Now see the cursor painter is showing. Now as I click on it, see the model is popping up. Now next what we have to do is create a form inside this model. And on that basis, if we have to add and remove the blue color here, that is, the function we had created for in and out, we will do it here, then what we will do next is that first of all we will create the form and inside it conditionally We will manage the blue in and out. Now what we will do is reduce it on this model but before that we have to make some changes in the application i.e. we will make some changes in the model also, this is not a model but its a scheme model, we will make some changes in it. Because here we have to start the record and we do not have some things even at the initial time, that is why what we will do is first listen in Visual Studio Code and what I do is go from here and open the inventory model, then you can also start the inventory. Open the model and we have not added the email field in it, so what will we do here? After the quantity, we will create another object here whose name we will name donor email i.e. when the donor will give blue, what will we do also its email ID. We will capture it here and what will we do? It may not be an email ID, if it has a contact number then we can add it in it too. For now, I am emailing it to 'data giver' here, its type will be string and we will request it. You have to write this, we will make it true, after that you can also add validation message like donor email is done with this requirement, so here we have changed it in the model, for some fear, I will comment now proper validation. We don't want to see it , so I have commented it and will uncommit it if I need it later. For now, we have added the reference but it is not required, so you have to make this change. After that, go to the Inventory Controller and here. But look at the conditions that we have kept inside them, we will band this condition also for a little fear, that is, I will comment on this also because we do not have to check this condition now, after that see out here. There is a condition, you can also comment on this, but first what will we do, we will see their condition because what we have to do here is to take the actual blue first and then after that we will sell the blue which is there i.e. out, then you have to make these two changes . Inside this, now let's go to the inventory model, we will design the model a little, I will close these files, for a little fear, I will also close the header one and what will we do here, inside this home page, sorry home page. Inside is the model component. Once I open it, what will we do? First of all, we will change its title. Here we will name it Manage Blue Record. Then after that, we can see the content that we have here. Content inside this div. So what we have to do is to add the form in it and below what we will do, see understood, instead of this we will add submit button here, submit and this dot here, so what do we have to do inside it? What we have to do is to display our content, what will we do in it, we will do the form, first what I do is add another dev inside this, in which we will add the class of deep flex, then you have to write display flex and inside this What we will do is to use the radio button for in and out, so what you have to do here is to first write the blue type. What we will do in this is select the type of blue and here for the spacing nbsp do it let me say non. Breaking space and what we will do after that, here we will take the class of bootstrap which we call form das check, what can we do with the help of this, we can show the button, here we will write input, inside the input also we will add class to this . You have to give the class form das check and this is the input of the check, hence you have to write the input also, so you have added this class, self closing time, its type will be radio, so you have to change it as text, radium, what will we do after that. Here we will also add its name, so you can write anything in the name, I will radio it because the first one will be for them, that is why I wrote its name, after that you can also write the ID and what I do. I make it checked by default i.e. by default it will remain checked, after that you can also add value in it. Then you will have to create a state for the value, so what will we do, we will start at the top first, which is there, we will also make it straight and then keep it. First start by importing the state and what will we do with its help, here we will create the state, what all you need in the strat, what will we do, here whatever model we have the data, i.e. in this we will have Inventory Type Blue Group Quantity Donor Email We are going to gate this whole thing, one by one, what will we do here, we will gate it, after that, we will use the setter function again, set the inventory type and capital, then what will we do after that , use the state here. From here we will capitalize B, V capital equal, then we will make it date and initial empty string, from this I will copy and paste this and then after that we have quantity also, you can create it here, quantity, set quantity and this. We will capitalize K, we will make the initial quantity zero, so by cutting the string, you can directly write zero. If it is a number, you can write it directly. After that, we had created the donor email here, we will gate that also here, so you Have to write giver email, then after that setter function settlor email and capitalize this di and initial also make it an empty string, so here we have state created, now we can use it, so what will we do here? If we set its value inside the radio, then I will make it multiline so that you can see it clearly. Here you add its value, inside the value we will do this and reduce it on its on change event, so you have to write on change in it. We will do a function tomorrow in which we will receive A, set the inventory type and with the help of whatever event we have, whatever event target will be inside it, we will target the event and set its value from here to You have to write the input, what can we do after this, we can also add its level. If you do not add the level then it will not be visible, then you have to write the label here in the HTML form. You can write these and the time of the level as well. You can tell here that we will keep it simple in capital letters and what we will do in it is that we will add the bootstrap class so that it is in the proper format, then you have to write the class name and what we will do in it, we will add the class of form check level in it. So you have to write the form, let's check it with the label, it will be auto-formatted a little and this level will be outside, we will make it inside, cut it from here, paste it inside it and copy whatever is in this diva. After pasting, you have to change it, we will take it out and also in the HTML form. What will we do? We will take it out in the HTML form also and we will also change the value here, we will take it out and here. We will make a video on the application and click on add inventory, then see this show has to be done in this way, it is going well, you can also add the margin in it, so what should you do in the beginning, give a little margin from the bottom. And from the beginning also you can give it like this is a check form, you can do S in this or you can do S-3, I will copy this and apply in the second form also. If you check with paste then you will see that it will show something like this and there is default check in both of them and you will remove it from the out one, then you will see that A is coming equally and both are also being selected together , we will check this. Well here it is, it must be happening because of the name, we have given different names to both of them, so what will we do, we will radio both of them directly, so what do you do from here, cut out both of them. Only then it will reduce. Let's check it once. After this, what we will do is use the select box here and what we will do with its help. We will show all the blue groups here. Let's go back and end this lamp here. As for the content one, so what do we have to do before the content one? Here, if you want to use the select box, then what you will do is use the select tag, so you have to write, select opening and closing time, what do I do better than this, go to the documentation from here. After that we will copy and paste from there, you have to write and you will get this link, click on it and what will we do, from here we will click on the documentation and after that we will search and select from here, then select this one, what will we do, copy Once done, you have to copy this. What will we do after copying? We will remove this selection and paste it here. You have to select it again with the mouse and then convert HTML, you have six, then this is j6. After that see whatever option is there, that is, whatever you have in these, what we have prepared, you can see in these blue group, in this we have that positive negative, now mines, so all these things, what will you do one? If we add by one, then what I do here is that first of all I make it positive and we will copy and paste this, after this there was negative so - in this also we will make O minus, we will copy and paste this, after this. Now let's make the first one positive and after that now by cutting O here from the negative, now and here you add equal amount of negative and positive values ​​and copy paste this and after that we have A positive, after that A negative and here also we will change A positive and A negative again by copy pasting, I am lying, then we had B, so put it a little lower, I am lying and what will we do with this too, B will make it positive. First and this one will remain, so here you have to write on change, what will we do again, in this also we will use Ara function, we will target, receive and with the help of this we will set the blue type, so here you have to write set blue group and What we will do in this is that we will fill it with whatever value is there, so you have to write it, let's do it with the value, it will be formatted a bit, let's see it once, let's go back to the application. Here is our application and this once. We will refresh, I will close it, I will refresh and open it, okay, this is below, so what will we do, it is out of the box, probably from here, we have selected it, we have added it below, then cut the selection from here and After this out, after the second day, we will paste it, let's see once we go back to the application, now we will see the Open This Select menu and from here we can select it and do it properly. From here, we will also select the value. Now what we will do next is that we will also add the email address field here, so we can use input for that. After this, what we will do is add the input type. So you have to write input type, we will import the input type here, self closing tag and add level tax in it, then you have to write label, label type and inside it we will add donor email, after that we will also add it on the label here. And in this also you can write donor email and you will tell the input type in it, then you have to write here the input type and this type will be email, after that here you will write its value here, the value and not inside it, out of the box, it will be made multiline. First of all, here we will write the value. Inside the value, we have the donor email which we had created straight on the top, we will add the same thing here, after that on change, you also have to write the on change function here and What we will do in this is that if we see the in line function, then in line ara function in which we will receive A and with its help we will set the email, then you have to write and after that what we will do is add the quantity, so for quantity I copy this Let me paste it, copy paste and here what we will do is add text for quantity, you have to write this as quantity and here also you can write quantity and we will keep its type, we will also keep the number and its value, we will keep quantity which is the state, right? They will add the quantity they have here and will pay here instead of the set email. Let's do it with the set quantity and once again we will see how it is looking. Let's go back to the application and see, it will show something like this and I have closed it once and requested it again. Now if we click on the application, we will have a model like this. In this we can select the blue group, add the donor's email and then click here. You can also tell the quantity, like whatever quantity you want to add here, you can do it, for now, we will check for it, then later we will check out, so we have to reduce it on this submit, that is, if it is submitted, then this. We should have the data stored in the database, for that what will we do, that is, we will create a function on its on click event, that is, on the button, then you have to write here on click and inside this we will create a function or submit the model so that we If you remember well, here I have written the handle model, copy it in all and create it on the top, then what will we do after the state, here we will do the same and you can also create a comment, you can add the handle model data and Here we will create this submit equal tu ara function, this normal ara function is ours, we will create it with this information here and what we will do inside it, we will use try catch block, then you have to write here in tree and catch blog cache. Simple, what we will do is lock the console dot, whatever it is, print it here today, I will add a condition inside the try, note blue group, if blue group is not provided in it, we can add a little validation here. Or we will add another key, note blue type and if the type is not selected here and what was its name, we have inventory type, then here you will write the inventory type and key condition, I will add one more condition here. We will check that the quantity is not necessarily of inventory type because it will already be selected. We have already selected their property in it because we have given initial property to it, so it is necessary to check the quantity. We can directly check the quantity and What will we do in this, if we do not get both these things then we will return and in the return you can also show an alert here, so here I add a simple alert box and can add any message in it. Please provide which field, we have added this error message and we will test it. First let's go back to the application and from here what I do is first start by closing it and then select it again. Okay, we will have to refresh. Okay, here I am. When I click on submit, I see the validation message is showing. Please provide the field. Now we will reduce it on the rest data. If this condition is successfully evaluated, what will we do now? Which response will the network send or you can disturb it directly. And after destructor, you get the data directly here, so what will we do, we will destruct the data, after that we will update the data here, this is our function, after that we will make it of AP, Sir, you import this also, suggestion to you. Will show, click on it, the file will be automatically imported, what will we do with the help of this, here we will see the post method which we have created only one, we are going to use it, so here we will give your URL text, slash inventory, then later. Whatever type was there, I will check it once and then what will we do. Whatever round of inventory was there, we will check it once. Create Invented, so I will copy it from here and paste it next to it. First, we have the inventory . After that, great in entry, what do we have to do after this, if we have to pass the data, then you will create another object here, in this, first of all we need the email order of the donor, you can also change it, there is no problem, after that our If you have inventory type then you will write inventory type, then after that we will have blue group, so you will write here blue group. If you want quantity also then you will add quantity. Along with this, we also need additional fields like email whose email it is . If we have to store the email of any logged in user here then how will we do that? What we will do for that is, with the help of you select, whatever login he has, we will get his email from the statement, so first of all, what you do is to input it here, select the title, you have to write it, select it from react reader and with the help of this What will we do with this, here we will get the destruction of the user, what can we do with the help of selecting him, we can target the state, so here you will write the state and what will we do with the help of the state, whatever our reduce a is like. That in our how and within the code, we have loading error and the user will gate the user, what will we do after gate the user, we will fill the fields of the email so that it can fetch the data with its help. So here I have to write the email and what will we do after that, here we will check the user who has come here, if the user is found, then inside it we will get the email field, then fill it with that, in this way we will Organization is going to be nearby, which we have added inside the inventory model as well, you can see organization, so we need this thing also, so what will we do, here we will gate that also, then you will write and what will we do in this also of the user. If you pass the ID here, then you have to write that if the user is found then file the details with the organization based on the field of his underscore ID. So here we have passed all these things, after that what do we do? What we will do here is conditionally, we will check whether we get success response or not, then IF data, if we get data and inside it we get success response, then what to do, show an alert message here, write anything in the alert message. Can do like new record created and also what will we do, we will refresh our page, now I am refreshing forcefully, with the help of window object, we will fix it later, then you have to write window dot location, sorry, not local storage. This is the location and inside it we have the function of reload, so you have to do it tomorrow, what else do I do, if I am late, copy paste it, if there is an error then what will we do, whatever it is, we will refresh the page. Now we can test it, I have opened the compass here and you have to connect to your cloud data basic so that you can check the new record that is being created because now we have implemented it on the front end. Not connected means not shown, that's why we have to see what is there directly in the database, so this is our application Blue Bank and it has Inventory and I have two records, you may have zero, so what will we do with it, we will see here. We will refresh our application and test it, click on the inventory, you have to select it, after that you can write any here like this is positive, after this there is no email address, that is why I am writing only i.e. note . Available and quantity, you can write any number in it like and we will convert it into 'What is I', what I do inside the model, here I specifically tell that this is 'quantity in 'I, I write 'What is I' in the brackets so that Now from here we will click on submit, then we will check the new record in the database once, let us go back to the database, now we have two records, we will refresh it, then we will see that three records are coming equally and we will scroll down . So see, equally blue group is being added here, then quantity is there, email ID is here, it is reducing, now next what we have to do is this is the head data, we have to display it on the front, so how to do it is very simple, for that you have to From here, I will close it and we will go to the home page and here we will display it, so how will we display it, we need it at the initial time, that is why what we will do here is that we will also make it a variable with the help of effect, so you will We have to write the state in which we are going to store it at the initial time, so here you create a state, first of all, in which we will keep the data, constant data set data, if you want, you can also do it with the help of reduction. Now what will we do after this? We will do the gate here, so who is going to create the get function here, its name, you can write anything like I am writing late, get blue records equal tu ara function and tried inside this also, if you use this block then you will get You have to write Try and Catch, we will lock a simple dot in the blog cache, whatever the error, print it here, then you have to write inside the error tree, what do we have to do, we have to do it tomorrow as if we have made it. We will structure the data, what will we do after that, we will wait here, install it, mix it and also import this file, we will show you the suggestions, click on it, the file will be automatically imported, after that, the method in it. That is the method of get and then you have to add your URL. In our method, write a slash after the word inventory and after that get the inventory mixer, the spelling is correct. I have to check once again what is in the root. I am there so that there is no spelling mistake, we will copy and paste whatever is there, see this one, get the inventory, so this is what we are going to do, so here what I do is cut and paste this, what will we do after this, success here. How will we check then what will we do? We will set the data which is our straight line, we will expand it with this data and inside this data we have another object of inventory, so our function has been created here. Now we have to do the initial time pass tomorrow, simply what will we do for that, use the effect of dependency, if we will do this function tomorrow, then you have to write and you will do this function tomorrow, let's do it and what we will do here is control. And people will also do it for the time being because before printing it, I have checked whatever data is there, which data is this, let's do this with this data, let's go back to the application and do the inspector in the inspector console and You can see a lot of warnings here, so you try to fix it, lastly we will fix it totally and see here the object is A, you have the inventory, it is coming equally and you If you want, you can make it 'Hey' as its type. This is the type of data that we have made. You can convert it to 'Hey' as well. Let's make it. Let's go back and see that there are equal number of records and if we expand the inventory here, then in this we will have There are two records nearby, now we just have to display it, if you expand it further then you will get all the data in it. Now what will we do here, what will we do with the table, what will we do by searching the table, you have to write the table in some way like this. Reduces the table by . You can do the same with this. Simply, I am going to copy this. What we will do after copying is that we will add it below what is in the home page. Before this model, I will paste it here. After converting it in J6, select it, first select the table part, convert it to HTML, you do it with J6 and once again we will see how it looks. Let's go to the application and see something like this. A is coming and I close the developer tools. Now what we have to do is to display the data inside the stable, what we will do for that, first of all we will remove the extra fields, I have moved this level and placed it here. What we will do is we will name the pen and we can name it anything like I will add the type of blue, we will group blue, what we will do later is we will add the quantity here, after quantity quantity we have donor . Email So you will write donor email and after that you can also show time and date here, I copy paste this, I will display both the time and date once and do it once and something like this. It is also visible from here that in actual we have to display the real data here and if you want, you can also use container flood, only what I do inside, I do it from the container and the container is not doing less than equal. So what do I do instead of this, I create a class here, I will make the container and whatever it is, after the model, I will add it inside the container and after removing the container from inside the table, I am safe. Now look something like this. It will be visible that it is taking up a little space also, earlier it was sticking to it, now we have to display the real data here, so you can remove this TD or you can do it directly, leave one TD and this What will we do inside the history? Before that, I have forgotten to map it. Whatever data is there, first start mapping it i.e. we have to extract the values, then what will we do inside the st body, we will extract it . Data: If we get the data then what to do? Map it. Inside the map we will get single data or you can take a record of it. We will get the record and with the help of this record we can then display the level. So you cut this layer from here, after cutting, paste it in it and line it up a bit, just lay it down, first it will be a proper line, inside this tire you can add the property of whatever is there . And what will we do inside the record? Whatever ID is there inside the record, we will record it. The single record which is a single record, inside it, fill it with the ID field and fill it with that. What will we do here? The first thing we are going to do is gate the blue group from inside the record, what we will do is add the blue group, then you have to write record and after that we have the blue group mix and you can copy paste it from the model also so that There should be no spelling mistake. Inventory Model: We have Blue Group, so here I have to write Blue Group, in this manner we will copy and paste it multiple times. After Blue Group, we have Inventory Type and here you will see Inventory Type, after that we have I have the quantity and also copy the quantity and add it here. I have the quantity and after that we have the donor email. We will copy this also and will add it here. Again we will copy the donor email once again and we will also have the date here. If we want to do a show then we have the credit property for that which we have time stamped and it is displayed with the help of that. We will do it by going back to the application so see that we have two records equally that the show is being done and You will have to fix this little time and date format, so what can we do for that. You can use Moment to manage the date and time, so what we will do is to do it with the integrated terminal here and the library of Moment here. But once you install it, you will write here, 'Hum Bhai Moment', if you write this much and press enter, then this is the package and sorry! This does not have to be done in this, first of all we will switch inside the client director, then you have to write cd client and here you have to install it, the installation will start, pack it small, it will not take much time, so install this package here. I close the terminal and will import it at the top. First of all, what I do here is I import the moment. I will import moment from moment and here the record which we were displaying directly will be cut instead of this. Let me do it from here and we will use the moment, then you have to write the moment and what will we do inside it, we will pass this function, whatever is inside it and after that you get many methods like you will chain the dot and You will get many methods, we will use the format here, inside the format you can tell in which format you want, like what we will do is first add the string in it DD i.e. date, after that M and Math and A. You can buy it , after running it, we will refresh the application again. Timing is also showing properly, so successfully we have got the inventory records here, now what will we do next, we have to calculate that too, that too and all the things. Now what is left is what we will do here, we will reduce the condition of this out i.e. if the type of blue is out i.e. he wants to remove blue which can be an organization or a hospital, then what we will do here is by changing it. Just like Donald is doing the show, if you click on out then we will take him to the hospital, also I will keep the quantity here and then like submit, then it should be mines, whatever quantity we have available, it should be a detector. So this is the functionality we have to achieve now, so for that let's go back to Visual Studio Code and what we will do here is first of all we will comment out its condition, now it is not necessary that is why I am commenting it out instead. What we will do here is that the request from the user is blue group and then we will get its type, for that you can also create new variables. First of all, what you should do is create a new condition here, we will add its condition. Here we will target and check it if it is equivalent to out i.e. inside this model we are selecting blue type, then on the basis of this value we have to add condition on the basis of in and out. So we have seen this. Now we are reducing on this out, so what we are doing is directly targeting the output, if its type is out then what to do, here first of all we will create two variables and you can name them anything like I want to write here Request Blue Group and What we will do in this is that we will get it from the user, then you have to write request body and this will be our blue group, we have to target it here, then you will write flirt group, what will we do after that, we will put the quantity here, then it You can also store it in a variable request it quantity of blue, we will get this also from where in the body, you have to write request body dot quantity, so we have created these two variables, along with this we also need the organization name, so we What will we do? We will store it directly. What will we do with the help of Mongoose? We will target the organization ID. Where will we keep the organization ID? Whatever field the login user will have, its underscore ID or the user ID inside the token that we have. After filling it out, what should you do first? Create an organization, here you will write and nice session equal, then what will we do? If we use Mongoose here, then you have to write new, then you will write mongoose, make sir, import it as well. Do this, we will show you the suggestion, if you click on it, then look at the top which is automatically Mongoose, it will be imported here and we do not want anything like this, what we will do is cut it and directly write Mongoose in this manner directly . Which is we will target the types of types . What do we have to calculate here? What do we have to calculate? How much quantity do we have in blue? So you can make a comment here. First of all, calculate the blue quantity and whatever is there, we will use the aggregate function with the help of which we can perform the calculation. We will store that in a variable and you can write its name yourself like I want to write Total in Blue Quantity or Requested Blue. Okay, so you will write Requested Blue. What are you doing in it? Whatever amount of these you have. Let me tell you once here, whatever type we have and the quantity inside it, we are calculating it with the help of aggregate function. After this, what will we do, what will we weight, what will we weight, we have the inventory model of this. If we have to do that then you will write Inventory Model, then what do we have to do inside it, here we have to use aggregate function, you will write aggregate, this will be the function inside which it will be, hey, object, so what will we do in the first object, we will add a condition here. We have to write dollar match function and what we will do inside this match function, first of all we will tell on whose basis you have to match, then what we will do on the basis of organization, we will make it match and after this we will also tell the type of inventory, then you have to write. Try Inventory, if it is in then only execute it, what will we do after that, here Blue Group will also tell you which Blue Group you have to target, then here you will write Blue Group, I will scroll a little above and here. What will we do, whatever variable we have above, request IT blue group, we will use it, so here we have to match it, so this becomes the first object, after that again we will create a second object here and what do we have inside it? What we have to do is to group and inside this we will add dollar group. Now these are the functions of aggregate. If you do not have the knowledge about it then you can see its function once or you can also see the tutorial on any side to know how you can calculate or Then with the help of aggregate, we can perform different operations. What we will do is to group it here. If you want, you can also write the ID like I have to write, underscore ID and whatever blue group we have, add its ID to the flower file . If we do this, then you have to write blue group and after that we need total. What will we do for total? Here we will use sum function, so you have to write sum. Now where will this sum come from , we need whatever quantity that is, that is why you will write dollar. Write the quantity mixer spelling correctly otherwise it will not reduce properly. So here we have an aggregate function. Once we have created it, what we will do is test whether it reduces properly or not. What will we do for that like our aggregate function and What is happening is that after that you can console and lock like I am writing console dot people and what we will do in this console dot people is first we will write total in and after that whatever our variable total income request. If you have got it done, then we will paste it here and it will be done from this. After doing this, what you have to do is, first of all see what is being recorded here, for some fear, please comment out, otherwise this record will be done automatically. Now we have to add more conditions inside it, so simply what we will do is that Consul will also check it, so what should you do, since this is the function of record, what should you do with it, comment out. So after this, let's go back to Visual Studio Code and from here I also go to Inspector, let's go to the console and there are a lot of errors on the control, we have errors, there are warnings, there are some related to the root and also some objects here in the console. If there is a payment, then I will check once and I am late. I will start fixing them first. We have kept the consonal.logs statement open on the story. Once again, I am late. What is this object record? Ok guys, if we have it open, then it is an error. So for the error, leave it, let's see once in the home page. We have kept the concert open on the story in the home page. Is it good? Yes, see here in the data control dot. After login, let's go back to the application and refresh once. Let's take this and if we refresh it , then see that data object is gone from the console. After that, we have an issue inside the method, inside which we have to pass the key. In this way, there is also an issue with some select boxes, so let's see. Will fix this also I have done it once, I am late in seeing, maybe it was done in the folder layout and here in the header area also. Let's see once. No, it is not in the header area. You can see it on the site. It has been done here and what will we do in it. And you have to give a unique ID to it or what you can do is that with the help of the name we have inside the menu, what we will do is fill it, let's do this by going back to the application and refreshing it . Default value is no further, I am copying it because look at the option of selected, it is telling here that instead of this, you can either use the default value first or use the value. If you add the default value, then you have to copy it to the model component. We will open it, inside the model we had used select, so instead of this selected, cut it and add the default value here and what we will do inside this is that we will copy this first menu and add it as a string which is Let's go back to the application and refresh it too, then see that now you do not have any warning on the console. If you have any other warning then you fix it. Now what will we do, here we will see the out personality. You have to click on out, after that you can select any blue record, see how we have A plus and now there is minus, so we can check it, like now it is plus, we can check out its total quantity. Like it is doing 30 shows here and we will check it. First of all I click on out and ab+ is it? Check once again if I am late, A + is sorry so single A+ and from here you can add email. Here I add the quantity, quantity is 12, I am just checking out, now if I show any quantity number, it will show the total quantity only, like if I click on submit, then see, I click on OK, Anshul. So nothing is showing, this might be happening because of window dot location because we were forcefully redirecting it, this could also be the reason, so what should you do, first of all comment out the window object, after that we We will see and fix it later. For now, comment it out. Let's go back to the application and refresh it. What will we do again? Click on Out here and from here I select the blue group, I am available and make it. Only total quantity will be given, now click on submit, I will check the new record created console, here is the console, see here in total we have equal, inside A plus the total quantity of blue is saying 30 which exactly matches with our data. We are doing like if you see currently we have a quantity of 30 in A+ so it is decreasing perfectly. Now what we have to do here is to create the calculation for out because we also have to decrement here i.e. we If whatever blue is required is out then there will be a detector in it. For example, take a mother, we have taken 10 m from it, then inside this there is a 20 m child, so in this way we also want to achieve this, so let's go back inside the inventory controller and here we will do it. Now first we looked for these, now we What will you do for total out, then you can also comment out like I have made a comment here for out or if there was a calculation then I will directly copy this calculation and what do I do in return here. But I will paste it and here what we will do is calculate out blue quantity. Now inside this what you have to do is again create a variable and name it you can write anything like what we will do is we will name it total out of request . After this, you have to do the Inventory Model and whatever is inside it, we will also do the Aggregate Function in it, it will be Hey Hey Object and inside this, first of all, what will we do, we will match here, then you have to write match, inside the match, what will we do again? We will write an object and what will we do in it, we will target the organization because we have to pass it, after that what will we do, here we will tell the type of inventory, the first one we did for these, now what will we do, here we will do it for out, so you You have to write what will we do after going out, here we will also add blue group, then you will write here blue group and where will it come from, we have stored it inside the executable like request it blue group will fulfill it with this. So the first object is created, after this we will use group in it also, so you will create a group here also, then you have to write group and what can you do inside this group, you can create ID as I have written here. I am the underscore ID and where will it come from, we will write dollar, whatever is the blue group, what will we do with it, we will create its ID and after that, how will we account for the total, what do we have to do in this, we have to target the quantity and what do we do inside the total. We will do the function of sum tomorrow, then you will write sum, where will the sum come from, we have the field of quantity, so we can target it, so you will write quantity here, what will we do after this, whatever you want here, you can concert it. You can also check or what do I do, directly remove console.com or comment out, if you want something with these then you will get the idea from here, you can compare it in the source code. If we can, then the second function has also been created in which what we are doing is that we are checking the quantity of the bullet that is coming out, that is, we will show it in the total and what we will do after this, both of these. We will combine whatever is there and at the same time see here what we will do instead of locking it with control dot, we can also store it inside a variable like I will make it in a variable which and we will name it as total in equal. You and what will we do inside this, which is our aggregate function, we will do it, first total for these, you will see the total in top requested blue group, this will be the first check, if we get this, then what to do, inside that we have the total. That is, this is the total that we have created with the help of the group, what will we do with it, we will fill it with this, otherwise we can also make it zero with the option, what should you do, copy it from here and after that, what will you do? By pasting it here, the function will be there for out also, so rename it and here you have to check for total out, then you will see that the position will remain from the total out request blue group, so here we have done it. We have accessed what is in and out, now we have to do the calculation on its basis, so here what we will do is check, what I do is store it inside a variable, the calculation is very simple, we have to do plus and minus. And in the companion we will store it inside a variable so that with its help we can perform a little validation and create a variable for which you can write Available or Available Quantity of Blue Group, so here I am writing Available Quantity of. Blue group equal tu, then what will we do? We will subtract total out from total in. So here you will write total out. So this is our basic calculation. First we have calculated both blue in and out with the help of aggregate function. After that, what we are doing is to calculate the actual quantity we will have i.e. available. As much as it is left, now it will show, we have stored it inside this variable, now with the help of this you can perform whatever validation is there, like I create a comment and we will do it 20 Quantity Sorry Spelling Mistake Quantity Validation In this we You can check the available quantity of blue, if it is less than this then what to do, here you return it from here, return or you can write anything like I will make it 500 and after that we will return here. Using the send function, you will add the message, you can also make the message dynamic, how you want to use it, after that you can write, only these are the dynamic variables that we have, you can add them here, like what can we do? Total Available can be shown here, then you will write Available Quantity of Blue and in the bracket you can also write M. Here I will directly write M and whatever is our blue group, we can add it here, then again you have to write. This is from dollar and after that is the request blue group and I have moved it a little to the side so that you cannot see it clearly. This will be the request blue group and we will convert it into a capital letter. There is a function for that, that is why we will share it. If you add it directly here, then you will write body dot hospital equal tu, whichever user we have, fill it with whatever underscore ID field is there and you can also add a question mark, let's do this. And I think this should be reduced, it is a bit big logic but you should see it along with the source code, it is possible that you may make some mistake in typing and if you do not reduce this function properly, then the source code can also be opened on your side. Keep it and see it once or twice, so let's test it and we have commented it out, so you can comment it as you want, from here I have commented it, let's do it and also I am inside the model. We will also make a change inside this model which we have handle model submit function, inside that we have a catch scenario, in that we have locked the control dot, now see the error console.com here, I am using alert and Look inside the error, error is an object, it has many properties inside it which we can target, so what you will do is target it, you have to write the error, inside the error we have the response and inside the response we have the data and If there is a message inside the data , then whatever is the specific message and whatever is the specific message in this spelling, it will be displayed . If there is an error then we do it from here, let's go back to the application, we will refresh the application and from here we will generate a new record, so here I do it first because we have to insert a record like o. What I do for positive is that I generate a new record here and I will make its email ID u.com and I will make its quantity because we have commented it out, you can see that I spend it. Change the order a bit, if it remains on the top then it will be reloaded first and then whatever alert message you have will become visible. Let's do this. Let's go back to the application and close it and request the page. So here We have three records, now we have added it for positive and its quantity is 50 i.e. 50. If you want, you can put 'M' in front of it also, so I will put 'M' here too, first and then if you forget then If there will be a problem, there will be no problem but for the safety side, I will add it. So let's go back to the home page and here I will add 'M' in the brackets after the quantity and I will also capitalize it 'S'. Let's go back to the application, see, it is telling here and will also give a little space, let's do it. Let's go back to the application, see, we will show something like this. Now we have to check the out condition, how about it, see, let's start first. So how will we check the error, if we have quantity here in 50 and from here I go to out and blue group is our O positive and donor email, you have to make that also dynamic, then you can do it as per your requirement. There is a basic task for you that you can render it conditionally. If you click on out, then instead of donal, only its text hospital should be shown, so here I add its email ID like h.com and from here. What will we do, we have available quantity only 50 so from here I try to find out what is in 100. So see what we get, I just click on submit, then see we have a validation message that only 50m of O positive available, see perfectly the condition is reducing which condition is this which we had added in the inventory controller. The quantity validation which we have added inside is basically reducing the quantity available to us as only 50 and when we told it how much in the request, it gave us a validation message that we have only 50 available, so what will we do now? Here , if it is valid, add the quantity and check it, then click on Add Inventory, click on Out, it will be positive and you can write anything in the email asset h.com, you have to show the email ID of the hospital here and Here there are 50, so out of that we have to remove 10 and here I click on submit, then see new record created and this message can also be changed, you can make it dynamic, OK and see here new record also created. Now we have how much quantity has gone back, so what do I do here, I try to remove direct 50, first see if the station reduces or not, click on tree, submit, then see only 40 m of o. If positive is available then successfully our in and out functionality is reducing as much as we have quantity available, on that basis we have out functionality available. It is a bit complex, the logic is a bit much, if you are watching for the first time, then a bit much. You may get confused. Open the source code side by side and also watch the video. You will understand better what is actually happening, which condition is reducing it and which variables we have included in it. So watch the mixer calculation, I will meet you in the next video, hello and welcome, you take info ID, so in the previous video, we had reduced the inventory and here we had gate the saree inventory of the saree, right now there is no show in my how. I am doing this because we have to make some changes in our application also, that is why I have deleted all the inventory entries from here i.e. requests for in and out, I will tell you once in the database as well. Let's go. Demand OTP on Compass and from here if you see our collection of Inventories, it is not as per your opinion, if there is flower flower in it now or there is any data in it then you delete it because what do we have if you inventory model. If you notice in the page then we have commented the donor. Now what we have to do is to reduce the donor here i.e. if I click on this donor then the details of the donor should be shown here. What do we have to do for that here? We have to reduce on this donor field, if we have this donor field then only we will be able to display it. If we have this opinion, see Rex Wire. We had commented here, so whenever you create a new record, then its Also the donor will not come yet so what you have to do is first of all uncomment it, what will we do after commenting, we will make another change inside it, what will we do instead of direct donal email, we will email from this so that with the help of this After fetching the records, now here we are changing i.e. inside the inventory model, we are changing and already we have added the donor email, once in the application, let me tell you the model of add inventory. Inside it we have written Donal Email, so here we have to change its state and its value. Now in Hulk Studio Code, we will open the model and inside this we have the state of Donor Email. Also, what we will do is change it to normal email status, so donal email has been cut, instead of this, lake email and after that direct set email, after that we will also change inside this handle function like we will provide email in it. If you were doing this then it is not necessary to provide us the user's email. We can directly display the donor's email, so you can cut it. Now, if this toner email is not necessary, then you can remove it too. We have done this. Removed from here, now what you have to do below is that we have input, which input is Donald, we have to change the value inside it and we also have to change its setup function. Let's go back and go down. Here we have the input type of donor email, so what you have to do in this is to write simple email in the value and then set Instead of donal email, you will cut it and add a simple set email here. So, we have made these two collections here, what we have to do with this is to make some changes inside the inventory controller also like we are here. It is creating a new record, in this we had given the ID of the hospital in the IF condition, but here we have to pass the ID of Donald also because the manual is not making it fast if it is not a hospital or an organization. So what we will do directly is that we will add a chain of others inside it, that is, we will do that first, what do you do, whatever is your block, I will tell you which one, scroll it up, this is the block of this. You can see that what is being shown on line number 21 is Inventory Type equal to out, so in this also you have to do a collection, what we did was get the Inventory Type from the request and body, now from here. This is a fine condition but here we have used the aggregate function and the inventory type in it is the type of our model and here we are getting the request and the body, so what is happening is a little confusing. Therefore, it is not necessary for you to remove the inventory type from it, instead here we used direct request and body, so this is OK condition, after that the inventory type is automatic from our model. For this, we will gate it with the help of aggregate function and apart from this, if we check that it is done on the story, then it is also there in the second one, then it is fine, it is not coming from the request body, it is coming from inside our scheme. So this collection is done, after that I was telling you that if it is out then it is in this block, after that we have to add an else condition, if it is not out then what will happen, here we will select the giver. We will also get the email, how to do it, if you do it in Visual Studio code, then click on Ara here, then the entire block which is here will be minimized, after this you can directly write the else block here and what will you see inside the else. All you have to do here is simply write request body dot data. Whatever is the user's ID, we will gate it. If we get it, then we will fill it with the underscore ID field, just like we did for the hospital. In this way, we will add for this donor also, let's do this and if I make it maximum again, then see here, this show will be in complete condition, after that, see this which is out in the last. It will contain the name of the hospital and which is not out request, then what will happen here, we will get the ID of the donor here, I hope you are understanding, we will do this and test it once that we will get the ID of the donor. If it is there or not then let's go back and here we will refresh it once. Our application has been requested. Now what we will do is click on Add Inventory here and add a request for the Blue Group. You can select it from here. Like positive and now whatever donal email you will write, whatever are your users, I will tell you once in the database that whatever donor is there in the collection of users that we have, as if we had created one and kept it, see both of them. We have to do that because what we have to do is actually show the donor's email, his name and contact, so what you do is add whoever is the login user, so here we had given the idea of ​​donor.com. Will do, let's go back to the application, here I paste it and make its quantity 20 and here I click on submit, then see new record created, click on OK and here we have a request now. If you see the donor email here then you have to change it here also because as empty is telling, you can see that this is the donor email which is showing here, so what you have to do for that is to go to the home page inside the page. Next is the home page and in it we have seen that the donor email is written, here you can see that this is text, now the value that is being received is direct donor email but we have changed it if you You will see in the database that if I tell you the inventories, then you can see in the new record that we have created, here the ID of the donor is also getting equally and in this we now have the object of email, so this email. You have to replace the object of this donor email, so first we write the donor email. Instead of that, now we will write the email directly. There will be no need to write the complete donor email. There was a little naming confusion, so I have corrected it. You can also correct it as per your convenience, otherwise you can compare it from the source code also. Let's do this by going back to the application, see here the email ID is being shown as usual. Now what we will do is we will add another record here, I am the actual user here, if you have that email. If the ID is not a user then it will show an error as if I tell you once that I have an invalid email ID, this email ID is valid but is not registered on our application then what kind of error will it show. I will tell you once as I have Here add.com and then quantity here became 58 like if I click on submit then see in this way we will show the error in Create Inventory AP. So here it will not show the error in the same way, you can check it in control. You can do this, as you will see in the console, you will get the message User Note Found, that is, the email ID from which you are taking the request is not registered on our application, so what will you do instead, see if I write both the red toners here. So it will reduce the number of users equally, so let me tell you once that as many users as you have, we have only one user for Honor or I have created something else, I am late to see what will happen, I am also in the name of test, see. So , I am going to create another record with the name of test, as per your requirement, it is discrete according to the role of the donor, then according to that, you add it and check, as if I do a plus here again and test. I add the one which is test.com and quantity here, now I click on submit, then see new record created, now why this record has been created because its ID is available with us, I will click on OK, then see two records we have. Now what will we do next, we will reduce it on this donal page, so for that we will create a new page, so what can you do inside the page, you can also create a new folder, so here I would create a new folder. And its name is I have to keep Das inside the dashboard, what we will do is create a new file, FCA react ara function with export and add a heading inside it and if we do this, then you will cut this div. What will we do in return for this? Repeat this and cross check whether it is input properly or not. After doing this, what you have to do is to create its root in ap.gs. Already we have told this. Like if you look at the URL, if there are no slashes here then we will do that. Let's go back to app.js and here what we will do is this is our home out, register is login, so what do I do on home out here. Now what we will do in this matter is we will add the donor, then you have to write 'donor' and what will we do instead of the home page. Here we will import the created page of the donor here. See, we will show you the suggestions, click on it, the component will be automatically imported here, let's do this. Let's go back to the application, see the donal page is happening like this and a little bit has become ours, you can fix it. We can do this which is the class of active, we will add margin to it, so you have to write margin top, sorry margin top and we will give it, we will do it with 25 pixels, this will be enough, let's go back to the application and refresh it, then see. We will show it in this way and it is going well, now what we have to do is to show the donor i.e. how many donors are available with us and which blue they have donated, then we have to display this. For this, what we will do is create a new function and then display it at the initial time with the help of effect. So what we will do for that is that first of all we will create a new function and then we also have to create a controller function, so let's go back . I close the identifiers in Visual Studio Code. For a little fear, we also do not need to move it. And what we can do here is that we can directly create a new function inside the Inventory Controller. Let me first create the function. And then we will import it, later we will reduce it on the function, so here I comment out, directly I am late, you can write [music]. So, after creating the normal acro function and leaving it, if you want, you can also add the request and response, let's do it from within it, and what we will do below is that we will export it so that we can do it in the root, so here is what we will do after this. If you paste this, it has also been exported here, now we will do it inside the inventory root, so you open the file, go to Inventory and we can copy paste this, I will copy paste this and here What we will do is get owner records instead of get blue and here the method will be from router and instead of get inventory and here instead of inventory controller we have forgotten to write good controller, we have named it directly as get owners, we will name it donor controller again. Let's copy it from and export it below. Let's do it with paste. Let's go back inside the root and here we will import it. So you have to write this function, it will be automatically imported. Let's do it with. Now let's go back to the Inventory Controller. Inside and here, which is our function of the get giver controller, now we will reduce it, first of all, what we will do, here we will do the try catch block so that we can handle the error and response properly, in which what we will do first of all We will lock the console dot, whatever the error is, print it here today, what will we do after that, we will return the response here, then you have to write return raise dot status of 500 dot send, what will we do inside the success. If you do this then you will write success false, after that you can also add message like error in data records and after that the response of the error, we will pass it here today so that we can see it on console and also in network type. Look , our error response has been completed here, what will we do after this, first of all we will store our organization inside a variable and here we will write organization equal to request and whatever user we have i.e. There is a user ID in the token. When we get the user idea, what will we do with it? We will file the ID of the organization and after that what we will do is find the donor here and what will we do to find it? We will create a variable which donor. ID equal tu, then what will we do after this, we will do a weight because our function is this, we can do a weight, you will write aave, what will we do after that, we will use the inventory model and from that we have whatever field of the donor i.e. We have created the donor field and kept it, this is the object of the donor, now we have it, you can also check it in the database like if you open the Inventories, then you can see that we have the donor and there is an object ID inside the donor. So we will gate this and with the help of this we are going to show the donor record. Let's go to the controller and what we will do here is we can also do the aggregate function or instead of that what we will do is use the distinct function here which we will It is available inside Mongoose with the help of which you can match with the help of aggregate and store the values ​​inside the variable, in this way you can do things in the shortcut inside the dusting function like what we will do with the help of donor. Want to gate i.e. look at the field of Donald in the database, what will we do with the help of it, we are going to gate the records, that is why we have added the donor here, what will we do after that, add the organization also here. We will do this because we will get its ID if it is an organization only then we have the power to see all this, so for that we will write organization which we have kept as a variable above, what will we do with it, if we pass it here then you have to write. It is an organization and if you want, you can also control it. We will check it directly in the control of the browser, so for now let's find it. You can do it here also and you can do this function tomorrow also. Where do you have to do it tomorrow? If you have to do it tomorrow in the donor function, then what will we do inside the donor component? With the help of effect, we can do it tomorrow. How to do it, see, it is very simple, what you have to do is first of all give it effect. Indian state will also be included, that's why we will do the state, after that what will we do, we will write fine donor records here, is this a function, so we will create a function here, we will name it constant, we will name it get donors equal, then here pay a. Sync Function: This is our information. What will we do inside this using the block? And inside the catch, you go to control then control dot log of error, whatever error is there, print it here today and what we will do is whatever is inside this, we will hit the AP, so what do we have to do for the AP first of all. We have to write Constant Desh Structure Destructor, what will we do, whatever data this AP returns to us, we are directly dish structuring it, what will we do after that and wait, then we have to do the same for AP because we have done it with the interceptor here. This has happened, so we will use AP directly, after that we can tell the method, so get is our method, after that the URL and point are in our how, here donors so mixer dot people can also do the control like I am writing. Dot people data, whatever data is there, print it today and if you want, you can also set the data, so I will also set the set function here tomorrow, set the data and what will we do inside the set data, whatever data is there. Here we will set it inside the data and we have not returned it also, see, it is the donor ID directly, it is just the donal ID, we are going to get the gate, so first we will check the control dot, okay, what do I do here by locking it. What will we do directly? If we see it in the console itself, then I comment out the set data. It is also not necessary, let's do this and this function. What will we do? We will do it inside the effect tomorrow. So you have to write the function. Inside which we can execute on multiple functions and inside it we can also pass dependency, then we will keep empty dependency and what will we do inside it, if we will do this function tomorrow then you have to write donors, you have to do this function tomorrow, we can do it from This is this and we will test this once and any file, this is the controller's file, let's do this also, first let's go back to the application and here what we will do is first click on Inventory and also I will open the developer console and Inside this, there is some error in the console and here, so no problem, what we will do now is to refresh it, we do not have any error right now, now I click on the donor, then in the control, we should see the donor ID and here But nothing is showing, you will see it in the network type, once you clear it and again hit the record, it will be cleared and when I click here, you can see that a 204 request is being sent here. So what will we do, which is our controller function, inside this we will lock the control dot because we have not sent any response, so I cannot see it in the browser development tools, so what do I do here. Which is our server, that is, the terminal on which I have run it, so we will see it in this, so what you do here is whether we get the console.com ID or not, let's go back to the application, first start the inventory check. We will refresh it and what will we do here, now we will click on the donor, so here we have clicked on the donor and two ideas are coming, now what can we do with the help of this, we can also access its data, two IDs . Why is it coming because we have two records in the inventory and both have been added here by different IDs, so whatever is there is showing, so what will we do now, so these two IDs are coming with us. Now with its help we will display its details here, how to do it is very simple, see already we have owner ID, what can we do with the help of it, we can find it, I will comment out control.lock if you want to check. If you want to exclude it, you can also check it by uncommenting it. Now inside this inventor controller, what we will do is we will also send the response and store it in another variable like glass and we will name it Donors Equal Tu again we wait. We will wait for what to do, what will we do, if we use the user model here, then you have to use the user model and what we will do in this is the ID of Find Motion which is the ID which is inside our user model i.e. which Here is the user, we will match with his ID, how to do it, what we will do, we will directly target the field of the underlined ID and inside this you have to add another object and in this we have another function, dollar A i.e. inside the user ID. If there is donor ID i.e. this Donald ID and this user ID, if it is from both then what to do, display whatever data of donors is there and we will return it here. We will make success true, then you have to write success true, after that we will add the message here and you can write the message in it, so here our function has been successfully created, now you can check it in the control also . So we have checked it, now we will not double check it in the control, directly we can print it, if you want to see it on the control, then what we will do now is we will use the browser console, so here in the get owner function which is our What have we created inside the donal component, in this also we have locked console dot, so what will we do with the help of this, we will see it, once we go to the browser and here we will clear it, click on inventory and then SMS. I clear it and now I click on the giver, then see here there is 204 A and there is also 200 response here, so click on the 200 one and inside this, if you expand it further, you will see the success row, there is a message and This is donal object, expand it, you will get whatever is inside it. Sir, look at the details. So whatever data you want to display here, you can do it. So already we have created a table which is inside the inventory. So you can copy paste it or you can create it from the match. I am copy pasting it so that children can save some time. We have created this table in the home page so you can see it. What I do is copy the entire table from here and then copy and till I have copied the table, now let's go back to the donor page and here after h1 or directly you can paste the table and see the moment here. If you are asking for, then you have to import the moment also, so what we will do here is by cutting the T, controls space will show suggestion, click on it, it will be automatically imported and everything is being extracted from the data itself, you can see. One thing is important to you, we have also created the state in the name of data, that is why we do not need to change much here, we simply have to set the data, then we will uncomment it with whatever data we have. What we will do is see here, if we have success then only we will make it flower, so what do you do about it, first start record data, if we get data and inside it we get success response, now what to do , set the data here. So you will write set data and what you have to do, we have the object of data which we have created in the destructor, if we find any then inside it we have donors which we have created inside the controller function. You can't see, we are going to gate these donors here, so if the response is successful then only what we will do is we will fill it, whatever data status we have, what will we do with it, we will fill these donors and whatever is We will change it instead of string because in the era we have data A and I comment out this console dot lock, we do not have it right now and below what we will do is change it here, see if there is a blue group instead of that. We will add the name and after that what will we do, here we will add his email ID, so the email ID, after that the phone number and after that we will add the date here and I will remove the rest from here. Whatever extra field we remove from it, now what do we do? When we map the data here, we will get a record and with the help of that record, we are gating the values ​​here and initially we did this The property is passed which we have copy pasted but I hope you will know how it reduces, after that see here there is record dot blue group and what we will do instead of this is we will name it record dot and if this organization If not, then we will add the else condition here, so you have to add the symbol of 5, after that again what will we do, if we target the record, then you have to write record dot organization name, if this is the organization name plus, what will we do in this, we will contact you. And I will add the string in a little space and will write in it that the organization has added it, so I have added two names here, so what does it mean? One, if its name is there, then show it directly, no. So if it is an organization, then tell it further that it is an organization and if what we have is an email, then we will write the email directly. It is not necessary to write the donor email. If it was quantity, then I will remove the quantity. I am late, quantity is not important, directly, we have a date, neither do we have momentum for the date, the moment is already ready, so we can do it, so I will cut this record email and we will do it, so this is something like this Now let's go back to the application and see if it reduces properly or not. Now I click on the date and see that the record is coming in the same way but it is not coming in the date, so in the date we have something. There will be an issue, once we check, there is an issue by dating, once we see the TD moment, the moment has been imported correctly, I thought we have forgotten the field of the phone, so what do I do, go here, copy paste it, I am late. First of all , we have not added the phone here, so whatever it is, it is not showing properly. Let's make a phone call and after the phone call, there is a date again. Let's go back to the application and see. Now it is showing perfectly. We have the records of the donor here. You can see that now the name of the donor will be his email ID, phone number and then the date when he donated will also be mentioned here. There is his record inside the inventory and inside the donor you can check. You can check out how many donors are available with us. In this way you can also add the record of hospital because we can deal with both organization donor and hospital. If I will do user login here then I should not have this functionality. We will reduce it at the end, so till now you keep it complete, next what we will do is we will reduce it on the hospital, that is, if we click on it, then we should have the details of the hospital and whatever collection we have done inside it, then mixer. You can also do all those collections as we have changed our model inside, as you can see, we did it inside the donor, then after that, instead of donal email, we used email, in this way, inside the controller also, we have added the record here. We have made a few changes in that also as you can see, in the out key IF condition, we have also added the else part in which we have automatically taken it, we are adding the donor's ID, after that we have again created a function here. To gate it, I also created a page for the donor and with the help of effect, I got it here at the initial time, then we displayed it in the form of a table and we set the property of normal one margin at the top. How have you added the layout? You must have understood till now. If there is any problem then definitely compare your food from the source code. I will meet you in the next video. What will we do now? Here we will reduce on the hospital i.e. For example, if I click on the hospital, then the data of the hospital should be shown here and we will copy it from the layout, then after cutting the lamp, you write layout mixer, import it also, what will we do inside this, for now a heading add. We will do this by packing the hospital, now we have to import it in app.js i.e. we have to create a route for it, so we will copy paste this donor, copy and paste it below and instead of this donor, we We will use hospital as it is showing here i.e. you have to add the same route as you have mentioned, so I will copy this and paste it here, instead of this hospital and this donor component, we will use the hospital component here. Click on it, this component will be automatically imported and let's go back to the application. For this, we have to create controller function and rawat in the server so that if we want to show the hospital data here, then what will we do for that? Inventory. We will go inside the doubt and I am going to copy paste this and rename it to hospital, so instead of get hospital records and get payer, get hospital and here instead of get owner controller, what will we do, we will make it play store. We will create a function for it and then import it here, we will get good intelligence and it will also be imported automatically above, so we will create a function here called glass gate function and this is done in capital, how will we lower it and below this If you export it, then let's export it too. Let's go back inside the inventory roots and here we will cut the toner controller. Instead of that we will write get hospital, see the suggestion, click on it, this controller function will become more automatic. Let's do this from Let's go back inside the controller and we will do this function Icing arrow function Now this is a back function so the request and response will also be there in this and in this we What will you do? If you use try catch block then you have to write try and catch blog catch and lock the console dot. Whatever error comes today, it will print it in the console as well and will also return whatever is there. And today in response also we will send the error along with the message and we will succeed in it, after that you can also add the message here, so we wrote the message and in it we will write error in get hospital AP and after that Whatever error is there, we will print it here today, then you have to write the error inside try, what will we do, we have to follow what we did in the previous video, here first of all, what we will do is to enter the ID of the organization. Once you get it, you have to store it inside a variable, organization is equal to you, then we have request and body and after that there is user ID. What will we do on the basis of this, we will get the organization ID, now what we have to do here. But if we want to get the ID of the hospital, then here I have to write hospital ID comment, I have created it and will store it inside the variable, so here we will write hospital, we will use you to write inventory model dot distinct function, in this also we will use distinct function . We will list it and what will we do in it, we will gate it with the help of the hospital, then you have to write the hospital and after that you have to number the organization and here you will write and nice session, inside this we have passed it now. If you want, you can check it by locking console dot but we will return it directly and yes, this ID has been gated, based on this we have to find the hospital also, otherwise here we will write hospital and I will do this. Now I have got the idea of ​​​​a hospital, what will we do on the basis of ID, we will search for the hospital again, so here I create a variable constant hospital equal, what will you update, we have the user model, we have to find the hospital, we wrote find as find. What we will do inside this is that we will find it with the help of the underscore ID field and inside this we will use the again function and whatever hospital we have, it will be found as it is found. What we will do is that we will return the response. You have to write return le dot status of 200 dot send and what we will do inside this is we will make it true and message also, you can add hospital data here successfully and after that whatever is the hospital data i.e. this which is found. Well, today we will pass it to IT here, let's do this, here our controller function has been created, now we can add it on the initial time also, how will we do it like we did for the donor in this way. From this, we can gate it in this hospital page also, so we can copy and paste it from the donor, so you can see the entire layout here, copy it from straight to the table below or else the entire layout. Copy it till then, after copying it, you will paste it in the hospital, then you cut the return from here and paste it here and if there is some mistake, check the return once and if it is not there then I will make another one here . Let me add the thesis across the lines and see whatever is being imported for us, if it is showing in the red line, then we will import it. By cutting A, control space will show the suggestion. Click on S, it will be automatically imported. If we have to import AP also in this manner, then by cutting it, control space will show a suggestion, click on it, this will also be imported automatically, in this manner it has an effect, by cutting it also, control space will show a suggestion, click on this also automatically. If it becomes important then the whole thing is imported here. If there is movement left then we will import it also. From here you cut the tick and do control space and after that we will show suggestion. Click on it. This will also be automatically imported here. First of all we have to change the point of our AP, it has gate owner and here we have written gate hospital, so copy it and change the point here, after that look at the data set in the response here. Instead of what is there as Donors A, we have written hospital here, so you can see, copy the hospital and add it after Donald inside this data, in this we are going to have hospital gate, in this manner here. We will also change this table, see name, email, phone, everything else is just one extra field. We will add the address. If we add it, then you have to write the address and here we will copy and paste the TD of the phone. And what will we do after this phone, we will also add the address and see the name here. If you do not have it directly, then you have it. You cut it, after this we have the direct hospital name which is within your limit, once I tell you, in the user model, we have hospital in it, otherwise we have to make it five here because we have the hospital name here . But the show will happen and I think everything is fine, everything else is fine, let's do it and from here I also open the compass once and connect to the cloud database because we will get requests for what's in it, if you know how. If there is no out request, then you will read how to create an out request and mix shot. First, in the beginning, I will tell you the database. In this, whatever user you have, hospital, i.e. whose role is hospital, like ours, see AIIMS. You have to send out request from this email ID , that is, when you send out request in the inventory, I will tell you, add inventory, see here, it is like clicking on it and the one which is out, then this is when it is out . If yes, then here you have to add the email ID of the hospital and not that of the donor, which is registered with you, then see I have an out request. If I don't have yours then you can create a fresh out request from here. Then after that click on the hospital, see here the sir 's data will be shown, now how the data was got, for this we had created a function inside the controller and with the help of this, here we have got the data of the hospital, first we have given its ID. After finding the ID, on the basis of the ID, we populated the data inside it i.e. displayed it. Okay, after finding it, we displayed whatever data was in it and here such a response was sent to it, then we displayed it in the hospital page. Gate and with the help of whatever object was coming to us inside it, we extracted the data here. It is quite basic, we had already seen it in the previous video, that is why I did not explain it much, so I hope till now you have understood. We will have the inventory of donor and hospital, here I have reduced it, now according to the role of the organization, we have donor and hospital, we can create a separate dashboard for that too, we can keep everything separately. Or what can we do in that one, then we will see further, as of now, we have a perfect thing for the organization, so you must compare your code with the shot, I will meet you in the next video, what will we do now? We will also show the list of organizations here, but the list of organizations that will remain is to be shown only to the donor, so first what we will do is create its page and display everything, after that we will add the conditions, what will we do for that? If we create another menu here, then you have to go inside the user menu, so from here I will open the file of the user menu and in this we have, see, hospital, we will copy paste it, copy paste it and change its name . We will do organization in this manner and will also change its title later, take a look later, I am late, we do n't have the good text right now, so we can give any new pass here, so I will copy and paste it, I am late organization and We will make this O lowercase and after that if there is an icon then we will search the icon once. We have to go, open its website and from here you can search the icon and after doing the organization search here, let's see. The result shows us and here we can see it from many options, so this one is going fine and after that what we will do is paste it here, then see the organization is also same, if we click on it then it will be same. If we are coming to the page , if we do not have this page yet, then we will create the page, then inside the dashboard folder of the page, we will create a new file with the name Organization Page Dot Chair Function with Export . So you have to write, click on it and here what we will do is we will add the organization which is in your URL, see here it should be from what you have given, only then it will reduce, so here I am going to copy paste it and after that Instead of hospital component, we will add the organization page here, show you the suggestion. Click on it, automatically this component's file will also become important. Let's do this. Let's go back to the application. Look, here the Organization page is also visible. Now we have to show the data inside it, so what do we do for that? We will create a new brute in the back and create a new controller function, so let's go and you can paste this now, copy paste and here you will get the organization of this and here you have to change the get organization of this and If you want to create a function then you will create the function first. I have created the profile comment out. I have now capitalized the function and this O. I will make the get organization controller equal to you and copy and paste it below. Let's do this from the object of export. Now what do we do? Here we will write organization controller. Look , our road has also been created here. Now we have to write the logic for this in the controller, so what will we do? First of all we will call this function. Tomorrow is a back function, that is why we will write the request and response in it. And here we will use try catch block so that we can handle the error and response properly. We will lock the console dot in catch. First of all print the errors on this console today and then later here. What we will do inside the response is return le dot status status of 500 dot send. First of all we will press success, after that you can also add a message like there is an error, today it is here, we pass If we do this then we will get an error message even in the network type that why we are seeing L in it. Now what will we do inside TRAI, first of all we will get the ID of the donor because we have to display the organization here on the basis of the donor. If it is such an organization login then there is no use of displaying it. If it is a donor then only we will display the profile of the organization i.e. as if, then what we will do here is that we will create a variable with the name of a donor in the request and body . Dot User ID: We will gate it on the basis of whatever idea is coming from it. After that what will we do, we will also find the ID of the organization and store it inside a variable. Constant og free i.e. Organization ID = Then What we will do is because our function is a sync so we can invalidate that and then we will use the inventory model and from that what we will do is use the distinct function like we have done in the previous two videos so what will we do in this way here But we will use the listing function and what you have to do in this is to find it on the basis of organization. Now whatever is there in your model, as I tell you, in the inventory model we have organization, so on its basis we have to find it. If it is one then we will write organization here and after that in the second argument we will pass the ID of the donor. Now once we get this, what will we do? We will find the organization here so fine and this can also be stored inside a variable. Like constant is equal, you see here there is organization and this is organization, so there is 's' in it, if you write 'extra' then there can be confusion or you can also make it a shortcut, what will we do after this, we will update it here. If we have to do something, we have to find it, then we will use the user model. What will we do inside the user model dot find function and fine? With the help of underscore ID, we have another object dollar in, that is, what we will do inside it, whatever we have. Donor ID is not sorry and the ID which we have given above, so we will find it with the help of this, so what will we do, we will turn the response to rest status so 200, then after this, how will we send the success here. So inside send you have to do success through and you can also add the message here, then you will write the message and data successfully and whatever organization you have, print it today, then you will copy it from here. After we will paste it here, here our controller function has been created, let us do it. Now if you want, you can also test it on the console. We have already seen it in the video, so we will do it directly. What has to be done directly, which is to access the data in the organization page, how to do it as we did in the donor or in the hospital page, in this way, you have to do it here, so what do I do next? Let's copy paste it The whole thing is getting repeated, you can do it manually as per your convenience, I hope you have understood it, so what will we do, today we will copy the page of the hospital in IT and make changes in it, I am laying down the whole page. We will copy paste it, see it will show in red line here, cut 50 and show control space suggestion, click on it, automatically these packages will be input, in this way there are books for practice and then this is AP also, so AP. Also what do you do, you will start a suggestion on the controls, click on it, the thing will be imported automatically, like its state too, everything has been input here, now if you do not want any thing from it, then you can also remove it or else. If you want something else then you can add it and here we will write fine aug in this way, this is the get owner function, so you can also change the name of this function like I do this, we will make it fine aug . Copy it and add organization in the URL here and see once how it looks. Let's go back to the application and what will we do with it. After we refresh it, see here, it will not even show any data because it is an organization. We do not want to give this access to the organization , so what will we do, here first we will log out and we will login with the donor's account, then you have to write toner.com, whatever email ID you have given, it will be added to you of the donor. You have to do this and add its password here and get logged in like we will be successful in login and after that click on organization, okay here the organization is not showing right now, okay there will be problem in the data we are getting, see here. But what is the data of the hospital, we did not change it, so instead we had it, let's see in a minute, what did we give in it, we organization will fix it, let's go back to the application, so see the data here. It is coming regularly but its name is not coming, there must be some mistake in the name, you can see that there is no hospital here, instead we have to write here, let us do it from the organization and once again. Let's see, let's go back to the application and see the name is also there, this is the name of our organization, then there is the email, phone address and date, so successfully we have created the organization page here, but what is the problem if it is a donor. Here we do not want to give him the inventory donor or the hospital's access, so we have to prevent this too, but the menu we are gating here, we are gating it from inside the user menu i.e. this object is there in it. We have the data, now we cannot add the condition directly in it because the user we have is from Relax and we cannot do the reduction directly here but then there will be confusion and the functionality will not be equal. If we don't reduce it, then what will we have to do, that is, our side bar menu will have to be redesigned. Now see how we will do the reading, we will also see that by opening it, see what we are doing here, extracting the menu from where. Now we do not need it from inside the user menu, what will we do, we will manually add each menu inside it, because it is a menu, so we can write whatever is there in it, there is no problem, if you want, then both side by side. Open the _ _ I will comment it out, if you see it later, you will remember what we did earlier and what we will do here, I have also copied and pasted it, once we will copy paste it at the start and uncomment it from here. Will do it, the comment below will remain only, see here which is active or not, you can also comment out whatever is there, now after this it comes that A key is not necessary because we are not extracting the data after that. Here is the icon, in the icon you have to add classes one by one, cut it and add quotation and see here this icon is first of all for the inventory so see here it is warehouse or its class, you copy and paste it. You have to do it in this way, look at the text here, now it has a flash part, so I will directly add it with a slash and after that, we will add the name of the menu here, so you can cut it. do it Instead of that we had the name Inventory, let's copy this and paste it here. Let's do this from another and see how it looks. Let's go back to Application One Two Three Times. Copy and paste this. Now after the Inventory. We have a donor, we will write toner here, copy its title in this manner and add the title here, then after that, copy the icon and replace it here, paste it in this manner, third is the copy for the hospital. We will do this and we will copy it here and replace it here, paste it is the last one and we will add it here, we have to copy the thing also and will add it inside this link and we will replace it here too paste. Let's do it from this, let's go back to the application, how to do it is very simple, now the user menu has been reduced, we will cut it and I will also comment out its importance so that we do not show litter warning, now see. This is the class of active, so I have removed it, it is not necessary, we can access the active directly here, how will we do, what will we do, the location which we have added, you can see the location here also. If it has been done, then with the help of this we can directly access the five as you will write location love in the same way, what you do is copy it till this point, you can copy it, we will copy it and what we will do here. We will paste it, now what will remain this time, it will remain two, so first I will copy and paste this thing, after that we will change five. 23 If we paste this in this also, then it has been pasted, now you will add five in it. You have to give the second head, so here you will see slash toner, this is the hospital, so here you will write slash hospital, this is the last organization, so here you will write slash organization. Let's do it in the format like this. You can see that this Dev will be like this. Let's go back to the application. It is being applied. If I click on the donor, it is also getting activated. If I click on the hospital, then the hospital is getting activated and then the organization. But if I do, the organization is also becoming equally active. Now what do we have to do, how will we do that? So what will we do from the state which is our global state, by the way we will get the user from React Reader, from this we will import this one. We will create a variable or I will comment it out here. Get user state constant, the structure, then we will use it in the collector, then write yours, we get the select in it. What can we do with the help of state and state in our reducer function? If you can access then you will write with the name state.org, we have reduce and inside that we have user, now what we will do is target it like the first three are minus, right, inventory, then after that we have donor and hospital, these three. What do we have to do, if we want to show only the organization, then what will we do, we will add a condition here, user, if we get a user, if there is even one valid role of the organization, then what to do here, we will add another condition and Will return, first of all you have to add the fragment because we are going to do it in multiple tips here and all three I have given it, what you have to do is cut it here, after cutting from here you will enter and paste it inside it, do it with paste. Let's take, if user is found, then what to do, check his role, if it is equivalent to giver then what to do, here is the condition of N and what will we do, we will return it directly because it is a single menu, that is why we can write directly, if there are multiple then we have to Inside that, he will have to do the fragment, let's do it, it is perfectly made, now we will check it out, let's go back to the browser, see, we have only one menu, it is showing, if I take people out of here, it is late. And further I will login to an organization like aur.com and after that I add the password, then here I am logged in and as if I am logged in, then see, okay here I am not showing, there must be a spelling mistake, please check once . Let's take a look at the spelling in the organization model. Once I see the spelling of organization, what is the spelling of organization? Paste the registration copy here and let's do it. Let's go back to the application. If you are logged in, then there is no point in showing all the organizations to him if he is a donor. Then the organization can check whatever is there and if we want, we can also show its hospital. So we have a profile of the organization perfectly created, I love it out and once I login with the donor's account, it says come donald.com 123456 login, see here only we have a menu of the organization, click on it. If you do then the organization is showing it and as you login at the initial time, I go directly to the home page, so see here the whole thing is showing it, so you have to prevent this also, you see, try it as per your choice in the last. I will change it but let's see if you can do it. If you want to add a condition then you have to directly redirect it to the organization's page. Try the logic according to you, if it is fine then we will see it in the last, there is no problem and If there is any error , then you must compare your code with the source code. I will meet you in the next video. Hello and welcome to Tech Info. IT. So in the previous video, we had displayed the organization for the donor here, but now we have a problem. What is the pass, like I login with the hospital ID, once I login, let me tell you, select the role of the hospital and whatever is the email ID of your hospital, you have to login with it, like in our case, ems.com . Later you have to add the password also and here I get logged in. Now as soon as I am logged in, see here we will not have any menu shown. First of all, we have to display the expensive items here, like if it is a hospital, then here. We also need a list of organizations. Whatever associated organization we have, we had shown the organization in the donor. Now in this way, we have to show the organization in the hospital also, because if there is a hospital, there will be an organization in it too and after that we will show the list of donors here. You can display the organization. So, first of all, what you have to do is to create a new out or see the menu that we have already. Let me tell you once, inside the side bar, we have the organization menu already. See . If you can, then if you have a condition in it, then only whatever is there will be displayed, then in the same way, what will we do, when we wrap it in a but and also add another condition inside it, then first of all you have to check this but You have to go left inside, after that we are adding double pipe symbol i.e. and symbol here. After that again we will target the user and we will set his role here. If his role is hospital then here you will write hospital also. What to do ? Let's do this by showing the menu of the organization and let's see it once. They get this menu back . For the application hospital, we will need the ID of the hospital. So what will we do and for this we will create a new controller. Let's go back to the visual studio code. And here we will open the inventory routes and we will create one, then you can copy paste it, this is the condition and here you can change its five things like gate organization, then we will write next to it. And hospital, this will be another point, after that see, there is a controller function here, so what will we do, we will copy paste the controller function also, so this one was the last one, and for the profile, we will copy paste this and rename it. Okay, here it is exported, after this see if there is a donor here then we are going to get the ID of the hospital in exchange of the donor, so here you will write the hospital and the rest will be done by the head, now what do you have to do with the donor. We have to change the profile and can keep the organization and we will do this by adding hospital and data and here also in the error we have added hospital and AP, everything else will remain in it, we will have the ID gate of the hospital and what will we do on the basis of that. If we search its data here, then our function has been created here, we will do it in the same way, if you want to add it inside the inventory box, then cut it and put it a little to the side, now I am here. But what will we do? The controller has also been created and its road has also been created and you have to copy its text. Now we have the organization page already, so there is no use in creating a new page. So what will we do, we will make this organization page as it is, how will we do it, based on the response we are getting, what will we do in it, we will make some changes, how will we make AP here tomorrow on the basis of whoever is the current user. The first thing we will do is gate the user, then what should you do for that? What we have to do is select it, we have to add it, so import it, select it from react reader, what will we do with the help of this, if we are going to gate the user, then I will make it in the comment, we will use user constant destruction, you select and with the help of this, we will create the state. We can access and inside this state we have the user. Inside that we have created the object of the user, that is, this is the global state, now with its help we can access it, so this is the function which is being executed . If we can see the first one then what will we do with it, we will add it under the condition, you have to add its condition and what we will do in this is we will find the user, if we find the user and his role is equivalent to the donger because the first one is for the giver. We have done this , first we will create the donor and then copy and paste this for the hospital, then you have to cut this response and IF condition from here and then paste it inside this, so what is this? What is happening is that if we have the condition of dollar then it will be executed, copy paste it in the same way, after copy pasting, what you have to do is to add hospital instead of donor because we are going to have data response in both. We just have to change a pay and point here, so here we wrote hospital and this other point, we will change it and this entire copy is pasted, so I have again copied the pay and put it on the copy gate organization. Hospital and paste it here, let's do this, whatever is the condition here i.e. based on the user, then the page of our organization will be created and after that what you have to do is to give it the effect. Whatever is inside has to be passed to the user so that he knows on the basis of which user our data is going to be changed. So here we will pass it to the user and do that. Let's go back to the application and see us in the hospital also now. Organization page is showing, click on it and no data is showing, once inspector will check, if there is any warning on the console, let's refresh, once it is ok, these people are out, then we will login again. Once I take the hospital ID se.com then add the password, there is a network error, I think I got disconnected from the internet, then I connect and again add the details of AIIMS and ems.com after that. I will add the password here to login, then see the login is successful. OK and here the organization is doing. If you click on it, then see the details are showing with you. So it is perfect, you can do the hospital here. I will meet you in the next video. Now what we will do is here along with the organization we will also display the consumer i.e. where our blue is going out and where it is being donated, we can also handle its record here like we have kept the records of all the donors. What will we do in this manner? Here we will also gate the consumer records. How to do that? The action is to go inside the inventory root and here you can see that we had gated all the blue records. Now what do we do? We will take a condition here i.e. if the request is out then what will we do, we will display the records here, for that first of all we have to create a new controller, then here we will read to change the route or we will create a new Rawat. In this way we will also create the component and you can copy paste the same Rawat. First what we will do is create the controller. You have to copy paste the controller and make a little modification in it where we had gate the inventory. Here it is. See, Get Joe Blue Records, so what will we do with this, if we copy paste it, then this is the function, you have to select it and from here you simply copy paste it and if you want, you can create it manually but I hope you are basic in it. You will know how we had gated the blue records in it. Now what do we have to do here? First of all, we have to change its name. Now the blood here is not of hospital, so here we will write hospital comments. I changed it in this way. What will we do with this, we will add this hospital here also, Get Inventory Hospital Controller, after that see that there is Find by Organization here, otherwise we will remove it based on the filter, that is, if its type is out, then only we will display it. If we do then what will we do in this Simply Request and quadri.com We will add it inside the filter, with the help of which our data will be filtered here and we will get it. After that, what will we do in the populate, see, we want a hospital but we also want an organization in Saathi, so what should you do with this, copy paste it and click here. What we will do is that if we use Organization, then you have to write and Organization and after that you can also change this message: Hospital Consumer Record Successfully Error in Consumer Inventory. You can also do it in this way, you can also change the message as per your choice here. But you can change it and everything else is there, there is no need to change anything in it. Now let's do this function in the root also, what will we do by copy pasting from it, what you have to do is copy paste it and What will we do here, we are also looking at the filter, first I create a comment in the beginning, then we will post the hospital blue record and its method and here I do the get inventory hospital, I am out of it and here I also change this controller function. We will write later , so what to do first of all, export it, only then we will be able to do it, here we have exported it, let's do it by moving it back inside the inventory root and here we will do control space, then see the suggestion show you. Click on it, it will be automatically imported. Let's do it in this way. Our request will still be there. Now what will we do, we will also create a page for this, so a new file inside the dashboard folder inside the page. We will create it, we will name it consumer dot js and we will make it functional component, hey FC react ara function with export and now I will add h1 in it and I will also rape it with the layout. Let's start this first, so what will we do with this div ? Like the hospital we had created, do yours in this manner, copy paste it and write here and remove one roll from here, I am late, we will remove the one who is giving and what will we do with both here. You have to change it, you can also change the menu in this way, here I capitalize C and you can also change its icon from here, for now let's leave it as it is, let's change it to C while going back to the application. So here we have two menus being shown, the first one is Organization, the second one is Consumer. Now if we click on Consumer, then see the consumer page as per ours. Now what we have to do is the inventory from inside our controller. Here we have to gate it, how will we do it, what can we do, we can copy and paste it from the page of the donor, then I will open the page of the donor and what will we do, the entire page of the donor. We will copy it, copy it and paste it inside the consumer, paste it and in the last place we will take the context, after that press control space on all the red lines showing, it will show suggestion, click on it, these components will be imported automatically . Well, life cycle method is there, it has effect, then there is AP, so you have to change AP also, make sir, import all the control space and all this thing will be imported, after that what you have to do, here you have to change the method of CBI. If there is a post, then cut the gate and here you will write the post, after that here we have it. Look, the gate is Donal, instead of that, Rawat is our change. Now we have the inventory hospital, so what do you do from here, change it after that. What you have to do is to do the same for the filter here, so what we will do next is that we will create another object and here we will write filter, what is filter, this is the object, inside this we can tell on what basis you want to display it. What we will do in our case is that we will display it on the basis of inventory type, then you have to write that if out is out, we will display only the request and we will also put the ID of the hospital, so here we will write the ID of the hospital and the hospital from where. Whatever login user will come, it should be a hospital, so what will we do here, we will use select it and also get the current user, so here you will write info, select it from D reader and create a global state in which we What are we going to do, we will gate the user, select him from where, what will we do with the help, we will access the global state, then you will see and symbol, after that, what will we do with the help of the state, we will access the reducer function, so here you will write and now What will we do inside the hospital? We will check here if we If we get a user, it will remain a user. If we get a user then what to do. Let's access its underscore ID field. Let's do this. So here it will be done in this way. See what we have to do is to make one more change. Here we have name, email, phone, date, so this is not required. What will we do after this? We are going to create blue group here, so here you will write blue group and the type of inventory will also be there, inventory type, inventory type, later on here. Quantity: So you will write quantity three times. In the last, if you want, you can also show the email and date, so I will copy and paste it one more time, this will be the email, everything will be further, it is with us, now it is in the records. We have to make a few changes, so first start from here, what do you do, change this name, what will we have in place of the name, there will be blue group in it, then after that there will be Inventory, try whatever response you are getting, whatever is there in the console. You can also check, I am late by doing inspector, we will display the complete data in the console because we have locked the control dot, I am late by refreshing once more, organization one consumer, ok, we will login to the consumer with consumer dot login, here I am so After completing it, I am late , let's go back to the application after making a request and checking, it is telling me nothing. consult.com is late by uncommenting it, then let's go back to the application. Now if we refresh, there should be a concert show here, so there is nothing here. The show is not happening, let's check once again what we are doing here. Okay, look, there are donors here, so we don't need the data of donors. Let's check what we have written in it. We have it in it. Inventory So you will have to add the inventory in the response only then you will be able to gate it. So here you will write inventory and paste it below console.com. Now let's check once. Let's go back to the application. Refresh steel, we don't have anything showing. It is on 1, we will see in the network type, let me clear it. I am on consumer. It is 304 A, let's see what is the problem in it. The note is modified, I think this is Blue Records, which is getting it once. Check let's up dot j consumer right, yes see, we have mentioned its page here, otherwise what do we have to do instead of the hospital component, here we have to display the consumer component, so you have to write, let's do it. Let's go back to the application, Hardik, here you can also check by recording the same, we will get the data in the control, you can see that there are two records of Inventory in it and you can also see its type, both of them are typed out. Let's fix this from the gate in the consumer page and here the blue group is A, the inventory type is A, after that we have the quantity. So here you will see that I have copied and pasted it multiple times and then I have copied the pen and then the quantity. After that, you can write email directly as record dot email, whatever is coming in your object, here if you expand even a single object, then you will see all the data of the head. You will get the blue group email. Hospital's again is a nested object, you can access its data here too but we don't need that right now. What will we do? Let's do blue group invention. Let's go back to the application. So see the perfect head. We have the data and there is some extra, I think it is the TDS of the phone, let's remove it, you can see, you can give margin to it, here we will create a lamp with the name of a container, container and everything . We will wrap it inside it, so I cut this piece and paste it in it. I check from the side of the table and see that we have got a little margin from the left and right side. In this way, give a margin at the top as well. Margin inside this container can be seen here from the top box, a little margin from the top, if the consumer's date is done successfully here, then there is only out request in this, you will have the type of out in the inventory which we have in this. All the things will be displayed here. Organization is done, consumer is done, now what can we do next, can we further reduce the dollar amount or what can we do directly, we can start reducing the dress code in ours, now like we have done consumer show here. We can also show donation in this way. Mother, what will we do? First we will login with the donor's account, then you have to login with us. Right now, look, we have only organization, so what can we do, where has he donated blue, then we can create a menu here with the name of donation and will also create a new page and like we have shown the consumer. So, AP will do that, we have added a filter in it, we will change the condition in the filter, then we will show their request, how will we do it, let's first create a menu, let's go to the side bar, then open the side bar page. I am on the site, we will copy the torch and this hospital one and will renew it. We will copy this instead of hospital, it will be toner and here we will do donation instead of consumer. I will copy this one and here too we will donate it. Let's do it with capital. Let's go back to the application and click here. If it doesn't show anything, what will we do? We will name it nation.govind. We will make it RAFCI react ara function with export and what will we do in it? We will copy and paste the consumer page, it is Yogi State, you have to copy it, copy the entire antire code and then what will we do, we will paste it in this donation, cut the return, paste it here, wherever you red line. That part is showing, you import it, click on control space suggestion will show, it will be automatically imported, you can see in this way, AP is also required, suggestion will show, click on it, let's do it by going back to the application, methods here Donation page is showing normally but we are not getting any record in it, why because we are not interested in it, if we want to see their condition, then what will we do, we will change the filter here, it will be from AP end point, just reduce us on this filter. Now what to do in this is that you have to change 'In' instead of 'Out' in the Inventory type and here 'Donor' instead of 'Hospital' is because we have to see the records of the donor, hence we will refresh it from 'Donor' and let's go back to the application . So look at the records of the same, we have it showing that we have been logged in from the organization and if you look inside the inventory, then you can see that only one record has gone here from the email ID of the donor. The first one is now plus also in but it is from the test ID so we have only distance donor.com and the second one is test test.com so successfully here we have got the donation of the donor. Now if you want. You can also give it further and more details. Whatever object you have, what can you do with it and you can display its bigger details. Now what we will do is to focus on Blue's analytics here because normally we have done inventory. The hospital has displayed everything for everyone. Now if we have to display the records here, what can we do? For this, we can create a separate menu of analytics, like if you see in the headset, there is only the name here and After that there is a logout button, so what we will do here is that we can dynamically display a dashboard or a home button with the help of which we will access the analytics page. Sorry, analytics and home page dashboard, so this is ours. Create a separate component of analytics. We will do this and then we can show the blue record i.e. how much has been out in the form of a graph or in the form of a table or if you want to make any other interactive UAE with the help of this then you can do that too. What can we do? First of all we will create a menu here dynamically and then later we will reduce it on analytics and see here we have menu one and two i.e. login user, his name was being displayed, the second one is for logout, so this is the same. What we will do is whatever our URL text is, what we can do is we can display a menu based on it. What we will do is first of all we will use the location hook so that we can access the URL, so you import this from react routers. And here we will make a variable of it, constant location is equal to you and this is location equal to you, its location is this, so we have to store it inside the variable, here we have used it, now with the help of this I can create it. So place it here and then what will we do, we will check 5 with the help of location, so the location will be the condition, we will display it here, what we have to do in the first one is to copy paste a menu, simple, we can copy paste this also. Copy what you have taken and We will paste it inside, we do not want the button from it, we will remove the button and also remove the total object and we do not want Spain also, remove mine, I am lying down, we will simply take it, or instead of this, we will also do the same with the link tag. So that it can be redirected, what do you do with that too? Import it from Recognito Tom. Import link from D account. Already we have it which is important. Simply we had to add it. We added it. What will we do after that? Here P We will cut it, what will we do in exchange of P, we will add the link here, if it is on home, then what will we do and what can you do inside it, you can directly write this, so what to do is this, you can copy paste this line. Copy this and paste this balance inside it. After pasting, what will we do? We will make it home. If it is on the corpse, what will it do? It will show us the analytics menu and if it is on the analytics page, it will show us the home menu. And we will also redirect it. If it is on analytics, it should show home and it should be redirected to home. Let's do this. Let's go back to the application. So see, it is showing here from here. If I click on analytics, then See, Analytics page is there but we don't have any menu here right now, so what we will do is first of all create a page of it. What we can do inside the page and dashboard is that we can create a new file and we will name it Don't make the opening and closing time pregnant in h1 and inside it you can display the content like for now, what we will do is we will do this, we will do this with analytics and we will also have to create a crowd for this in app.js. What can we do? I am starting with the topic. After the root, I will cut and paste this hospital and make it analytics and the page that remains, we will make analytics control space and it will show you suggestions from it. Import this component, let's do this. Let's go back to the application, that is, whatever letter is there in the URL, it is changing on the basis of it and see here, scroll effect is also coming, you can prevent this also directly. What will we do index? Who will we target? In the burning Visual Studio and what will we do from here, we will open the file of index.css and what I do at the initial time, this is universal select, what will we do in this, we will hide the overflow. So over so and we will make it hidden, let's check it once, let's go back to the application and refresh it, once we see the scroll effect has also been removed from here and we will see it in the analytics too, then see that show in the analytics also. It is not doing it, it was not doing it even before, but if anything happens to them, we have written it here. Whatever overflow remains will be hidden, so here it has been hidden, so successful, we have created its page. Now what we will do is here and then we will create a controller file so that we can handle the data of analytics. Now it is related to Blue, so for that we have to go back to the server. Now one line is reduced, you can close the inventory. Controller is what we will do in this way, we will create a new file here and inside it we will create a new file and remove the records, we do not need everything, we are going to create one by one, I want to keep only one so that we can handle it and You also remove this controller file from it, it is also not necessary and we will consider it as middleware, let us leave it and what we will do is we will also create a new controller file, so inside the controller folder, we will create a new file in it and we will name it We will keep analytic controller.js and what we will do in it is we will create a new controller and also you can create a comment Get Blue Data and what we will do in it is we will create a function, we will create a function and export it below so that we can use it in the root. First we will configure it and then we will reduce on this function, then we can name it Blue Group Data or Details, click on Blue Group Details Controller, click on it and here what we will do with it, see Get Honors here. It is controller right because it is copy pasted, that is why there is get honors here, so cut it, instead we will paste it, press blue group details, show suggestion, click on it, controller file will also be automatically imported here, so here But our routes have been created, you can change this also, here you can simply leave it ETV. Can you do this or what can you do, instead of this, write blue group here, so here I have to write blue group, let's do this from the data and after this, open the file named server.jas, inside this also we have to add a route. So that we can handle the analytics data as we have done for test and inventory, we will not just copy paste it in the same way and here the inventory guys will do the analytics and inventory route, here we will do the analytics route control. Space it and it will show you the suggestion. Click on it. Now this has been imported in the server.js file as well. We can do the same, so our perfectly created here on the roots and here is the get owner record, right in this we can do Let's do it with blue data, let's go to this also, now here is our analytics controller inside the controller, what will we do inside it, now we are going to gate the whole thing, first of all, what will we do, we will use try catch block in it, what will we do inside the catch, simple We will lock console dot, whatever error we have, we will print it here today, so control dot log error, we will return it later, here we will add the response here under rest status status of 500 dot send send. We will do the error in Blue Group Data AP or Analytics AP and whatever error is there in the partner, we will print it here in IT today. It is completed. What will we do inside TRAI, here we need complete data. Who Which data, once I tell you the model, what will we do from here, we will open these models, see, we have so many types of blue here, so all the types are there, you have to gate them inside an Eric, so this is what we will do. What will we do, we will copy and paste it? First of all, what you have to do is to store it inside a variable, so here I will write 'Who am I' and will name it 'We are blue group equal to you' and if we paste this then all the blue ones will be. There are groups, they will be added here, what will we do after that, we will create an empty space here for the response and we will also name it as blue group data cons blue group data is equal, you are MTR, do not stay on the initial time, then we What will we do here, each record, which record, whatever record we have here, how much is in the inventory, how much is in the positive, how much is in the invoice, how much is out, then we will gate it. After gating, we will You can also calculate it and then you can display it graphically. After this, we also need organization because we need to record the organization, so we will store it in a variable . Copy it from Organization Mixer of Inventory Model. So that you do not make spelling mistake, but here this organization copy paste, now where will it come from, it will come from the request dot body, so here we will get it, request and body dot user ID user ID, we are getting it from the token. With its help, we will gate it. Now what will we do? We will extract all the blue records here one by one. Why will we do it one by one so that if we have to gate the single value in it, then we will extract this data. What will we map and how will we map, see what we will do, first I will comment out in the beginning and what we can do in this, we can use promise, we can store it inside a variable or directly, what will we do because our If the function is a sync, then we can directly invalidate it here and with the help of promise which function, we can extract it, then you will write promise , then later inside it we get the function of which, then we will use it, then you We will write that we have to show the map, whatever blue group we have here, we have to map it because our data is dynamic and it will keep changing, so what will we do and what will we do with the help of aging, if we are going to gate the single blue group then you We will write blue group, see here there is blue group and this single blue group symbol, after this what will we do, we will return it, below, what will you do directly, here is our logic like we have to calculate, first start we have to total in and We have to see the out , after that we have to calculate it, so here what we will do is create a comment, first of all, what we will do is count the total, so what do you have to do for that, we can use the again aggregate function, so what will we do? First of all, we will create a variable, keep it as total, then what will we do, we will update it, because it is our function, so we will wait in it also. We can do this and we have an inventory model, so what will we do with its help, you import it too, if not automatically imported in your method, then you import it in some way, what we will do inside the inventory model, we will use the aggregate function and What can we do with its help, we can fire anything or whatever calculation is there, we can tell it inside it, inside which first of all what we will do is we will write here Tolar match, what do we have to do, what do we have to check first of all? What we have to do is whether we get the blue group inside this or not, then what will we do here, we will check it, blue group, which blue group, this is the blue group and what we have in the inventory, see whether it is blue group or not, from both of these. If in your how something else is written here inside the inventory model then inside the match you add it. In our how it is from both. Here we have passed the blue group only in this way. What will we do now that our inventory If we display it here then copy paste it so that there is no spelling mistake. If we are looking for the inventory type first then we will write it here and after that we will pass the variable of organization here. If we do this, then you have to write here, this match is complete, what will we do after this, we will group it here, so you have to write dollar group function and what we can do inside the group, we can group and what we will do underscore. We will make the ID field null first and then what will we do after that, here we will use the sum function so that we can calculate so the dollar sum and after that what will we do inside the single codes, quantity, this is the quantity, right? We can display it, so here you will write dollar then quantity mixer. Write the spelling correctly otherwise it will not reduce properly, so here we do it with the first aggregate already formed and here we have some error show. Preet is doing but now see this, it could be a mistake of com semi pen, so if I comment here and do it from another, let's see then what is showing dollar is telling in everything, okay we did not store it inside a variable. So what we will do is we will make it a variable with the name total and store it inside it, then whatever quantity is calculated here will be from inside this total. Let us do this from now on, so see for a little bit. The mixer has been auto-permitted, you can also see each condition by posing it, here we have an aggregate function for these, in the same way you can do it for out as well, so this is what I am doing. What I do is copy paste and lay down the copy from here to here and this is for total out, so we will rename it as total out and here we will make out our guys, everything else will be left out, now after this we will see the calculation so here But whatever else is happening, what will we do after this, we will calculate the total, how will we calculate the total, we can create a variable for that and name it Available Blue Equal You, then what do we have to do with this total which is in this? What do we have inside, sorry, this total will be out, you can correct this also, this is the copy pasted, we have totaled these, this has to be out, now what will we do inside the calculator, here the total is as much as inches, so what do you do, check here. First start with a small total then we will gate it. If we get this total then gate it and here it may take time for the response to come so add a question mark. What does it mean if the total is found then after that Then check the position, if it is not found then what will we do here and in the condition we will make it 0.5 and inside this what we have to do is also to min the total out. So now this condition is there then what do we have to do with it? We have to leave the paranthesis. Only then we can add the second condition here i.e. we can do calculation, then here we will add the condition of mines. Now whatever we have to do for total out, then you will write total out and we will check this also. Total out of zero position, if we get this then what to do, get its total, otherwise what will we do inside and in it, provide zero, now all the three records have been made here, now what can we do here? But we can do something, look at the data in this, we have kept MTR, blue group data inside this, what can we do like I am lying here, happy data, so here we will write blue push function push I hope you know then this we use here There is also a record, we will add it here in this manner and then after that we have total out. For total out also, you copy paste it from here, it will save some time. Make sir, first understand this and then copy it . Paste it, after that we have available records, so you will write available blue here, then this sir data will be added to the blue group data, now you can do it, so what will we do directly, now we will return the response with return status of 200. What will we do inside dot send, we will make it successful, click here, after that you can also add a message like Blue Group Data Successfully and after that, whatever Blue Group data is there, if we pass it to IT today then I will reply on the response. Let me pass it directly and let's do this. See, our function has been created perfectly. It is quite big, so mix it and compare it with the code as well. First of all, see what is happening in it. After this, only you. Whatever you copy and paste, it will work. What logic do you have to do in it? What are we doing in this? First of all we are calculating these, after that we are dividing both what we are calculating i.e. dividing what is inside it and what is its total . So here our controller has also been successfully created, now we can test it, how will we test it, then we can test it in Postman, so what do I do, I open Postman also and then what do you do in partner? Generate the token also, like right now I have stopped logging in here, once I inspect it, I will tell you that in the storage storage, we have local storage and in this we have a token, so we need this token because we have more. There is also a middleware, so inside that we have to pass the token. If you do not have the token then it can show the error related to today. So here Postman has been opened. Now what will we do, from here we will open new and Here you have to write first the URL and point, then in our method, I will copy any one of the HTTP local host and we will change it. See, there is a condition till v1 and after that whatever point of AP you had given. You add it here, what do I do, first copy it from server.gs, open the server GST file, we have it, see, after v1, we will copy the analytics and paste it here like blue group data copy. Let's do this and paste it here, also we have to pass authorization, so what will we do in the header area, here we will write authorized session and inside this, sorry authorization, inside this you will write first start naming convention, give us space to follow that . Later you have to copy the token which we already have by logging in here, so what can we do with it, we can copy and paste the token, so what do you do with this token, after copying it ? What we will do is paste it here, paste it after the beer and here it is copied along with the token, so remove this spelling of mixer from it and if the explain has been added in the last one, then you can remove that also. Now here we test it by clicking on send, send and see here the error is showing blue group data, I think this is the organization's ID, we are not getting it directly, so what can we do, use Mongoose here. If I can, then I import it. First I have given Mongoose Equal Tu Requirement. Now what we will do is that we will create a new object with its help, that is, we have to create an object ID, so here you will write mongoose dot types object ID, this will be the function and What we will do is paste this user ID inside it, cut it and paste it here, let's set it and in Saathi we might not have mapped it, I will check it once and lay down, what are we doing directly here? We are extracting here, so here we are not able to know what all this is because we are directly expecting and here the spelling is there, we have to extract from it, so how will we do it, what will we do here, this is the promise. Na, inside the promise, first of all we have to use the map function, so what do I do? First of all, I create a function and put opening and closing parentheses. What will we do inside this? First of all, we will get the blue group, so here you will write blue group and we will Had to do a map, now what will we do inside this map, see what is this function, we will tell it further n function here, so you parents can copy it. Where else is this parenthesis being closed? It is being closed here, it is being closed before this return, so we will cut it and here inside this map because you do not have to create the function of the map, already what we have written. Wasn't that close to the function, so inside this you will paste it in something like this and from this we will remove the pen, then mix and correct it, whatever is inside this map, now these total records which are going to be got because He was not able to know what to expect, that is why the one which was showing us adult shows was opened, now it must have been refreshed, now we will not get to see any adult, let's go back to the postman and what will we do here then? After sending the request, we check it once. Like send, see, now we have the message of the record. Blue group data page successfully. See in this way, here is the blue group data and see in this we have O. Positive is total in is 20 and out of this 10 were out so total we have child 10 which you can also see here inside the inventory look here we have 10 in out and out of this we have 20 so successful It is reducing in this way, see now we have plus also, rest all will show zero, let's take a look, see here the rest are showing zero, that is showing negative zero a plus zero a minus b zero. B plus we also had A so scroll down so see here is the total back we have 45 so successfully we have response A and with the help of this you can do whatever graphical interface you have to do and also make a table and display it. If I can then I will tell you the basic, you can enhance it more, then the basic has become less, we have a successful record, you can close the postman because there is too much RAM, if your system is like that then you can cut it. Keep it directly, what will we do, we will display the response that is coming, first of all we will gate it and with the help of this we will display it, then we can display all the data here, then we can use table here also or Then you can create any interactive UID design here. What will we do now to show the analytics? First of all, we will gate it at the initial time. With this help, what will we do? We will gate the sir data at the initial time and then If we want to display it, then let's go back to the analytics page and what we will do here is first of all import it, here we will add it, then it will import it, then we have to import both of them here, then create a new system. Now what we have to do here is to gate the blue data or blue group data, let us call it blue group data, then we will make a function for it, glass blue group date, we have made this function, we will make it a function, spelling mistake, so here But if we make it a sync function, then it becomes our aging function. We do not need to pass any property inside it. We will use TRAI's S block so that we can handle the response and error properly. What will we do in the control and It's simple, you get used to it. What we do directly is paste the error response in it, whatever error is there, we can directly display it. AP will do it tomorrow, so what you have to do is I have a mixer tomorrow, also input it, we will show you the suggestion, click on it and its interceptor will do it. Will also be imported and in this we have the method of get and in this you have to write doubt, so what you should do for this, first of all check the file of server.gs, see in it that analytics is there in the beginning, so I have copied it slash analytics. Later we have Saurav in the analytics root and in this we have the blue group data, we will copy it and add it later, then here we will get the sir record, we can also object lock it, first start we will check it. Success Response: If we get the data and we get the success response in it then what will we do , we will set the data here, you have to write the data and how to fill it, we see, send blue group data in the response, whatever is your name in the response. It was written that if you add the same thing here, then here you will see the set blue group data and it will not come directly, it will come from the data, so first you have to start gating the data, if the data is available then inside it we will get blue group data and If you want, you can also do control dot log, console dot log off, what will we do with whatever data is coming, do console dot log. So we will give console.com data and I think this is already done, let's do it with the function, now what will we do with it, we will get it at the initial time, so here we will write the life cycle method, what is the life cycle method, if it has any effect then you have to write it. What we will do inside it is that we will add the function, we can create any number of functions and will pass the empty dependency here, in this you have to do the function which you have created above, Get Blue Group Data, tomorrow. Let's do this and once we test it, we get a message on the console, that is, let's check it. Let's go back to the application and from here I will go to the inspector and open the control. Here is the console. So see, here we have a successful response. A is if we expand this object then see the blue group data is total. If we expand then we have and inside all I have blue group total in and out request. If we expand it in the same way then it has total in. Then how much is available is that. We had also told that the whole thing is getting gate, now we just have to display it, so how will we display it, here we can do it with flex or card, card, then I will tell you the address, I will tell you once, what should you do, gate. Go to Bootstrap's website, get bootstrap.com, you will get the first link. If you search on Google, then what to do from here is to click on Dogs and here you can search for the card. Here the card is something like this. If it is there then we can display it inside it too. Simply copy and paste this card. Don't copy it now. What will we do? First let's start with what is there and here we will design a little layout. I will remove this h1 and lay it down instead. What we will do is take a class here, we will map our data here, so you have to write the data, if we get the data, what to do, map it, what will we get, we will get the record, then you will write it as record or if you If you want to write directly to Blue Group, then you can write directly and return it. What do we have to do in the return? We will do the same for CAT here, so now you can copy paste the card which is there, copy the card from here. What we will do next is paste it and select it here, right click convert HTML, you j6, we don't want this method, we don't even want images in it, for now let's do it, what kind of output we are getting, let's run the application. But this is our application, see the card is showing to us in this manner and there is also a warning here that we have to pass the key property, so if we can fix this later also, what do we have to do now here? If we have to design it a little, then what will we do, we will fix it, first look at the card, we will give a little margin in the card, you do the margin, I will do it and after that, we will also give the pending here, p1, I will do more . No need to give, we will check it once and increase the brightness a little bit. Let's go back to the application, let's see something like this, we are seeing the cards now, here we have the title, then there is text in it, so here we are. What will we do, we will show the blue group, after that here we will show the total in and out and in the last we will also show the total and if you want, you can also use colors in it. If you want color, then you have to create a separate new colors. You will have to make an arrow so that you can map that also in the wedding, first I will display the record, after that we will reduce on colors, now what we will do is like there is a card title, right, cut this title and base it in which we have the record. You have to write the record and inside the record we will have the blue group, so here again the blue group will show and let's check it once. Let's go back to the application and see that the blue group is showing evenly and style it a little. Let's start first, this is h5, we will make it h1 and what will we do with it and I will minimize it and along with it, we will make the text there, we will make it from the center, let's go back to the application, so see it in this way. It is showing and see, the sequence here can be changed and you can see it, because there is icing data, the sooner it is loaded, it will be displayed here, like if I request, this order can be changed now . Next what we will do is take total in and out and there is card text so what do we have to do in it if we want to show total in and out then here we will write total in and after that the tag in bold I If I am late then you will write here what will we do inside B time and B Tech. With the help of record we will show the total, then you will write record and inside this we have total, we will do it with these, we will check it once we go. Back on the application, look at the total in zero, you will see that it is 20 and this is also 50 in plus and I also give a little margin, after h1 I make the margin three from the bottom, let me see once. Now it is going well, we are getting to see a little space, after that we will copy paste the speak and instead of these, now here we will write out and here also what you have to do is to replace these with out, total in and out request. Now let's do this by going back to the application, see that the total is showing around and below, what will we do when we display the total, so what do I do with this, I have taken this total outside the card body, now it is inside the card body. Isn't this much data inside the card body, so we will take another class, we will do the card foot and inside it, directly we can tell total or available, you will write here available or total available, I will make it total available and then What will we do later? Here we will take another take and display the total inside it, then you have to write record and from inside it we will get the property of total. We wrote total or available. We checked once, I am late, what did we write? I am going to copy this and paste it after the record and also give it a little class. First of all, what will I do with the showroom? I will put the text here, I will light it and whatever is its background, I will center the text. We will also do text center class in it, you can do it by clicking on it, go back to the application, see if it will show something like this, then successfully we have displayed all the blue groups here and how many are there in it. How much has been out and the total is also available here, we have shown it. Now if you want, you can add any color to it. How to do it inside it is very simple. What you should do is first of all copy the hex code of the colors and then you can also Google it. Like if you write color first then you will get the first link, see Color Hut, click on it, here also you will get to see good colors, from here you can copy paste any thing like see here you will get the collection. You will also get it, click on Popular and you will get to see all the popular colors here, so what we will do is copy it, what you have to do after copying, that is, what we are doing is creating a variable, so what here. What will we do inside this? Again, we will copy the second one, make a copy of the quotation and write 'Hus', then after that we will paste it. In the same way, we will copy and paste the third color as well. Whatever color you like in it, you can use it. After that, the fourth one is getting a little lighter, so I have copied and laid out the one on the side, total 8. You have to copy and paste the We will paste it here, we have a total of 1234 5, we still have 3 left, so let's copy this blue one too and paste it here, let's copy it in this way, make a smile and paste it in it. Because color is not copied and which color can we take, this one is also fine and we will paste it by applying color here, let's do this, look at this, here we have total 8 colors, now this What can you do with the index, that is, what we are mapping, see, here we have mapped, so here we also get the option of index, so what can we do with the help of this index, we can also change the color. Like I have come here for the index and have written it, now see from us here in line style in which as we had copy pasted the card, it had the with property in it, so what can you do after this, comma is placed directly. And you can target the background color, then you will write background color and whatever background you have in it, you have to do it because here it is dynamic and what we will do in this is whatever our color is, we will target whatever is arranged in it, then you will write colors. And then the index is our application, see its color has also changed, if you want to change its color then simply what you do is change the colors which we have error in, automatically all the colors will change. In this way, if you want to design anything in it, add animation or do gradient color, then you can do it as per your choice. Our basic design here is complete, here is our analytics and I am also in it. Next write I am late, otherwise I am not able to understand. Is it total ? I put a string on the side and in this I write I am late, copy it and add it below, paste it and add it here too. If we check from then see, we will show something like this and also check the inspector, we have a map which was showing some issue, don't see, we have to pass the property here and what will we do here, see this start in the beginning. I am getting deep in this, we will also add the property of 'K', so here I have to write 'K' and inside 'K', I pass 'I' simply because the list of colors we have is unique or whatever it is . There will be index, which starts from zero, so it is unique in itself, so we can do the same, let's check everything, once we go back to the application and refresh it, then see that after refreshing, any I don't have the error, that is, the warning that was showing has been removed from here. In this way, you people can also remove the console lock. I will comment out the console lock and no one will ever get to see the error. See, this is our dashboard from where we can add the inventory, we can take it out, both the things are there, then we can see the donor records, we can check out the hospital in this way and here we What will we do and see here like we are doing it on the donor, if the home is showing then this is also a problem, you can fix this also, there is no problem here, there is a donor, then we will have to read the text of it. We will have to target it once, we had written this inside the header, so headed chairs are not here or what will we do, we can also add multiple conditions in this, then wrap it in parentheses, but whatever else it is, see proper. There is no solution, you can modify it further, for now I am just adding a temporary solution here, now let's see, here I come to the donor, now it is showing the analytics equally, it is a hospital, see, copy the router of the hospital too, to copy. After that, what will we do, go back and rape it again in this, it is done in auto format, there is no problem, if it is not in your style, then you can do it manually, I will again add one more condition here, location here . But the other condition will be checked, let's check this also, let's go back once and see that the analytics is showing here, we will go to home, we are on the home page, we will click on the donor, in this way we will also be on the hospital, then Also we can see the menu of analytics here, so it is reducing the thing perfectly, there are also records here, you can enhance it even more in this if you know, and here we can see the bare recent transactions i.e. whatever blue Both in and out records can be displayed here like we are displaying on the home page. In this way we can also display the records here by imposing some limit i.e. top three or any top five top 10. Transactions, we can display all these things in it, inside the analytics, so what we will do for that, first of all we will create a new and out, then the controller and then gate it here at the initial time, so for that you have to go to the inventory controller. What will we do inside the showroom first? Once we have created the controller, then here we see that we are gating the hospital records. Below that, I have created and let's create a comment here . Let's make the oil blue records off by five or three, I am fine. Now if we create a function here , I will add sim in the name of the function, hence we will receive the request and response in this also, inside this we will use try catch block so that properly we will handle the response error by dot lock inside the catch. If there is any error today, print it here and return it along with the response. What will we do within the rest of Rs. 500? We will make it successful. You can also add water message here and write the message here and then later. Today we will pass the object of error to IT here, store it inside a variable and perform fine functions inside it. If you find it on the basis of organization, then you will write organization and Where will it come from? Request body and inside the body we have the user ID. All the user IDs of the organization will be automatically added to the token and what will we do after this. Here we will use the limit function. We will have only three records displayed. Along with this, we will also use short function so that we can see the recent one and on which basis we want to sort, then what we will do is we will sort the base bridge of the property of credit side, for this you have to write -1 and after that We will return, we will send a success true message, you can also add it, what will we do here, we will pass it here, we will export it below, here I paste it, we will save this file as the inventory root. Open the page, I am late and what will we do in it, copy paste it in the beginning, I am late, I see this record, we will copy and paste it and here we will do Get Recent Blue Records, and here we will get Get Recent Inventory, we will route it, you will write Get Reset Inventory, after that change this controller. Instead of this, we have Recent Inventory Controller Mixer. We can do this by also inputting this. Our controller has also been created here. Now we can do this in our analytics page. So what we will do here is like we were gating here, what will we do in this way, we will gate this also, enter, first of all, copy the state and what we will do in the analytics page, we will create a new state, paste it and The name is happening so we will make it Inventory Data so you will write here Inventory and I will capitalize I, we will make Inventory Data here I will capitalize this and I will capitalize this and after that I What do you have to do Home You have to go to the page and see this function, it is a get function, you have to copy it till the effect, after copying, what will we do, we will paste it below where this is the life cycle method, after this we will paste multiple effects as well. We can do that, so here I have pasted it. After pasting, the first thing you will do is see this other point, you have to change it, whatever name you have given in the root, what have we given here? Get Recent Inventory. So you have to copy it and what we will do here is paste it, after that see that we are going to receive data in response and here we set the data only with data, so this has also become our function, anything. Do not change, all you have to do is if you want, you can change the name of the function. Get Blue is records and before this we had done Get Blue group data, neither in different functions, so there is no problem, we will reduce this perfectly, after that We had a table in the home page, we have displayed it in the form of a table, you can see that this is the table, so what will we do with it, we will copy it, so after this day, we will take another day. We will create the class of container and paste it inside it, we will have to import the movement, press control space, show the suggestion, click on it, it will be imported automatically, let's do this in advance, then let's see how it is looking and here is the data. No, then the data should be done only from the inventory data. Let's go back to the application. Look here, the table is coming to us properly. If we are not showing any data, then we will fix that also. Let's check here. We will get the response inside the tax control , see here we have the recent inventory. You can see that means we have tax records in it, mine is not getting displayed and the scroll effect is also not getting here. Okay, yes, we have done this. Did I hide the overflow in index.css? I will comment it out. Let's check it safe for now. Now let's go back to the application. You can see that there is a scroll effect but the records are not being displayed here, which means that this data is equal to If the gate is not happening then let's see it once here N. Take it we have in it see record dot blue group this should come once we will check the response and come back this is our controller in it see okay spelling mistake of variable in it You can take a look and we will fix it, we will inventory this also and we will also inventory the response here, let's go back to the application, there is a little confusion in this, so we will add an addition to it so that we know. what's in it h1 and we will add recent blue transaction in it and give it the merging top, I will check the top three from the top, then see something like this and we will give the margin to this also, we will give class to h1 also. We wire the name margin, apply this space from top to bottom and then check that it is going well. You can color it if you want, you can also design it stable, but here we have seen the basic one and Below also, what I do is, this is the whole dev, I will give it a little bit, then instead of this margin top, we will make it M/3, let's do this, let's go back to the application, it will appear something like this . You will not see any difference in it but you can adjust it as per your requirement. If there is any mistake then compare your code with the source code. There may be some spelling mistake or you may forget to write something. Whatever you have is a mistake, please cross it. I will meet you in the next video. Now we will reduce here on the admin panel as I am logged in from the organization. Now I will log out from here and what will we do and check what will we If you get it then you can also login with whatever your administrator's email ID is, our address is admin.com and then you have to add its password here, then here we are successfully logged in and at the initial time see the page from me. If it is found then what will we do, we will prevent this page also, what you have to do for that, first of all we have to create a separate new page for the admin, which we will display on this and here you also want to display Manas, then we will What we will do is first display the menu, after that we will create the page and then we will fix this too. Let's go back to Visual Studio Code and open the side page. We have to open the component and here we have Manas, so first I What was done here, I did it on the basis of organization, what do I do in SIM by copying the news from here, if I am late, then what should you also do, copy these, copy paste and after that we will change it according to the organization that is here. You can change that also , like we will display the list of donors here, the first one will be the donor list and then inside this you can add the donor test list in your property and from here also you have to add the location. Next you will write 'Donald Das, let me list you, what will we do? Here in the second one, we will exchange it for the donor. We will do this because we have to apply for the active class and here also inside the link, what will we do? We will add your property. Now finally we have a saving for organization, so for this you can write in the shortcut and Glidden i.e. organization list and here also what we will do is we will do it and list and here we will do it from organization list. And let's go back to the application, you will see that the list is opening here, if I click here, above the door list, then see the URL text, you will notice that we have been redirected to the slash list, now what will we do, the page also. We will create it so that here on this page we will display some component or the other, what will we do for that, we will create a new folder inside the page, the page is inside the search, see inside the page, is there a dashboard, what to do instead of that in the root itself. I am late, that is, in the root of the page, I create a folder with the name of admin, admin and what we will do inside this admin is that we will create a new file, make it a functional component, if we will rape it with IFC, then you have to rape it from the layout and inside it there will be an h1. I will add it only at the initial time, we will show the heading, later we will change it, we will do it from Donal List, what will we do with it in the same way, we will create another new component, we will name it Hospital List, then you have to write Hospital List. We will also create race reaction with export and what will we do with it, we will rape it from the layout, then you have to write layout make sir, import it also and look here, if the profile is not closed then you close it manually, take h1 inside it and We will do this as hospital page or list because we are looking at the list, let's do this from hospital list and we will create one more component, we will name it Ara Function with Export and we will also rape it with layout, so you have to write. Out make sir, import this also, after that I add h1 in it also and do it from the list. Here we have all the three pages created, now we can display this less, for now see here it is showing empty, we don't have any page showing, so what will we do about this. I will reduce it above and here I will make it a donor list and here I will make it a suggestion show instead of hospital component, I will click on it, the component will be automatically imported here and here, if it has become extra, we will cut it from here. This is not necessary, let's do it further and check once the donor list page shows us. Back in the application, see that now the donor list is being shown in the same way. If you want it for the hospital, then you can copy the same thing here. You can also paste coffee. What will we do? Someone from this donor list will copy paste it. Instead of this, we will have the title Hospital List. So cut it from here and write Hospital List. It is double slashed, I will cut one slash and this After the Donald component, we will do the hospital list component and its name has not been changed. We have not shown it in the suggestion. Let's check it once. You have to do this. When we go back to the hospital, then see that the suggestion is showing. Click on it. Let's do this, let's go back to the application and copy paste it, so copy paste and instead of this hospital list and here instead of hospital component, here we will do and list component mixer and also import it, go back to the application and click on Home. What will we do inside this? We will create a new component and name it as admin ho.js functional component. We will make it a race react ara function with export and we will also wrap it with layout, then you have to write layout make sir this also. Import it and write h1 here. For now, I am going to admit page. So, if we are redirected to this, then on slash , we can create a new road. What do I do for this, I create an administrator name here. So, I am going to copy and paste this same route. Copy paste. What we will do here is to slash admin and here instead of donor list, we will do admin. Home will show suggestion. Click on this, the component will be automatically imported. Let's do it from Let's go back to the application, right now it will not show like if we write in the URL here then the admin page will be displayed here, now we have to prevent this i.e. if I click on home then the page which we had just created slash admin will not be displayed. We need to remove it , now what will we do, this is our home page, this is our home page , we have a condition in it, so what can we do with it, first what will we do, we will get the current user, already we have loaded it and The error path is gated, what can we do in this? We can gate the user and also redirect him based on his role, so what we will do for redirection is we will use the navigate function. Now this Where does this come in react router dr so first of all what you do is import it navigate from react router dr we will make a variable of this equal you will navigate to that so inside this layout what do I do one more thing here Let me add Lee Barsi and what will we do in this, first of all we will check the user, if we get the user, then we will check his role, if it is equivalent to Admin, then what to do and we will add the condition here and directly If you navigate, you have to write navigate, which we had created as a variable, we will redirect it to slash admin, let's do this in the application while running and refresh it, see once, I will log out once and tell you from here. Log out ok, now what will we do again, we will login as admin, we will add admin.com password here, we will add 123456 login, so like I login Hungama, then see directly, we will have admin page show, now I will click on home also, so see, we are equal to admin. The page is being redirected a little, it is taking time, you can do it further in our hands, for now the solution is ok, now as if it is on the donal list, now if I click on home, then the admin page will show to us and this What can we do in Admin also, we can show some menu or directly add a message to us like what we will do, see what we will do, first of all we will take the container in the admin home page, then here you have to write the class of the container. and then flex the display First start Deep Flex, I added this class and inside it I have put an h1 first and here we will write welcome and then you can write the name of whoever is the administrator or you can start first write welcome admin and then come. You can take the tag, you can take the span, it is up to you, I am here, I am taking the span, it is right and what will we do inside this, we can display the name of any user who is current, then we will have to start the gate first, so what will we do. Here we will access the function using collector and whatever properties are inside it like the user we need, we will extract it, so first of all what you will do is use select and inside this we get with the help of this state, we What can we do? We can access the radio sir function and we also have the user gate. Now directly what we will do is first of all we will check if we have a user then we will display his name here and then we will check it once by doing two. How does it look? Let's go back to the application. Class time will make it BG success and it will show in green. Let's go back to the application. No BG, we will make it tax. Let's make it successful. Okay, we will just do the text and let it be the background. We can also make BG light as if we save the BG light, we will show it once in this manner and if the BG light is not looking so special then we will remove it. We will remove the BG light from here. And what we will do in this is that A goes in the row, we will make it flex pen, I will give margin four from the top and we can change anything in it like I add another paragraph in it and in this we can write I am here. What will we do inside the tag let's paragraph, it will just be created and here if h3 is not closed then we will close h3 first. Let's do it in this manner, dummy data gets created with us. Let's go back. Look in the application, it will show something like this, welcome and give it and I also add one tag in it. Here, let's check with each tag. Once, it will show something like this. Now what do we have to do here? But we have to gate the list of donors , then if you want, you can perform more operations in it. Basic is going to gate here and if it happens, we will also see the deletion in it, but for now what will we do, we will gate the list of donors. What do we have to do for that? First of all, we will have to create a controller function, we will also create a new and out key file separately for the admin and if we want, we can also use middleware in it. Now what will we do, here is the list of donors hospital. And to display the list of organizations, what we have to do is, first of all, we have to create a new round and controller function, so let's go back to Visual Studio and here what we will do is create a new file inside out and we will name it Admin routes.js and what we have to do inside it is to create routes. First of all, what we will do is import the express here, then you can also copy paste it, it will save a little bit of your time, I hope you have got used to it. Later, what we will do is that we will create routes here, so you can also keep creating comments along with this, so in the last we will write export, we can create chase and what we will do in this, we will make the function controller equal, now you will make the normal ara function and make it Let's do this below, what will we do, we will also export this, I will create a comment, I will also export and here what we will do, we will use module.exports and export it in curly basis, then you have to write get honors list controller. And we will make this O in lower case and here also we have to make it in lower case, now let's do it with Okay, let's go back inside the admin root and what we will do here, what we will do in this, we will use the get method. And what we have to do here, so here I have to write and list and then we will use the router and we have to create its object, so here I comment out, make the router tomorrow, we can get the functionality of routing. We will do the method tomorrow, so you have to write the URL pattern inside it and we will keep it as data das list, this will be our URL and point, after that here also earth middleware will be used, so what we will do here is we will also add earth metal wire and What did we name it, I am late after checking out once, this is middle and in this we Pass and a middleware, so let's import it. Look at the middleware, we will show the suggestion. Click on it, it will be automatically imported. After that, what will we do? Now we will import the controller function that we had created, so here you have to write 'Get Data List'. Let's do this by importing the controller mixer. Here, our route has also been created and we will export it to the router, then you have to write modal exports equal. Your file has also been exported. Now what will we do with it, like we have tested . And clicked on Invent and Analytics, we will copy paste it here also and its mail and point will start from slash admin and then instead of analytics, we will show suggestion here, click on it, it will be automatically imported from Let's do this also, now this file has been reduced, I close the rest of the files too. The inventory controller is also not needed and I also cut this out file. Now see here, we have the controller also created. But what is another problem in this that we do not know whether the person in this user is an administrator or not, then what we will do is create another new middleware function for that and name it 'I'. What we will do in this is create a function. With the help of which we will gate the admin, first of all what will we do here, we can do it directly like we had created the middle ware, what will we do in this way, we will directly export it, so you will write here a Career will be Ara function, this has become our normal Ara function, now it is middleware, so what can we do in it, we can use request response and next, after that, what will we do, here we will try the S block directly. So that we can handle the errors well and can also handle the success. We will lock the console dot inside the catch. Whatever error is there, print it today. Also, what we will do is we will return the response. Let's change the rest status to 500 or 4001, which means that those authorized will then send. What will we do inside send? We will say success here, after that you can also add message like K and field and beyond that. I also write the name of the AP, I am Admin AP, what will we do after that, whatever error we will pass it here and in success, what we have to do, see what we will do before success, here also open it or its We will check the role and we will find a user for that, so what will we do, we will create a new variable with that name and what weight will we put in it, what user model do we have, we will use it, then manually you can import it above, here I I have to write import user model and then the syntax of required, we will do it, after that what you have to do is dot dot slash, then after that we have the folder of models and inside that we have the user model, so it is imported equally now . We can do this with user model dot, then what we will do after that is that we will find here on the basis of ID, so you have to write 'Find by ID' and where will these IDs come from, they will come to us from the user ID when our user is logged in. Then see, we have the field of user ID, we will get the ID from it, so what will we do directly, we can request it and body dot user ID, whatever is the user ID in the token, after this, what will we do here? Will check and will check here whether it is received and its role, if it is equivalent or not less than equivalent, now what to do, return it from here and how can we return, we can do it directly in UK and here there is option of send pay. Inside again, what will we do, we will burn success, in this also after that we can write in the message message and field and what will we do after this, we will add the condition of else here, if there is a token here and our user which is admin. In this condition we will pass to Next because it is middle ware, hence what does Next mean that there will be further execution otherwise what will happen if the role is not admin or its ID is not found then what will happen it will be returned directly from here. Otherwise, it will be returned from the catch below, and if there is any mistake, it is showing some error. User model is equal, okay, we have imported it, look at this constant, our middleware function has been created here, now what do we do? Will do after admin How to import it, how to do it is simple, you have to write admin middleware will show you the suggestion because we have directly exported it, click on it from the direct suggestion, the file will also be automatically imported here, let's do this, so first we have it here. Donor list has been cleared, now we can reduce it on the controller function, let's go back to the admin controller, here is our function, what will we do with this also, if we use the block, then you have to write today, print it here. Later, we will return it from here. We have to return the response in the return. Here we will give success response. You can also add the message here like in donor list AP. After that, whatever error is there, today we will pass it here. Now what will we do after this, first of all we will take the donor's data in TRAI, how to do it, see it is very simple, what we will do is store it inside a variable like I have to name it Donal data equal you then we will wait. Because we have a function, we can wait, after that we will use the user model, show it in the suggestion, click on it, what will we do after this, here we will use point function and what we will do in find, find on the basis of role. If you do this, you will directly write the role, if the role is Admin then find out what is there and what we will do along with it, we will add another function, what will happen in the salt of sort, then what will we do, whatever latest update is given to the property of the created item. This one is going to be placed on the top, so you have to write created coming and it will be a capital and you do this, let's do it with mines one, so the function will become ours in this way, now we can do that, see now . You can also check it directly or if you want to do it in Postman, then you can check it in Postman also. How to do it, once I open Postman, click on the new URL that you have created. You have to hit it and also you will get the token, so the token is already with you, here we are logged in, otherwise what will we do, we will see the token also, so you have to go to the storage, right now I am on Firefox, so from here I go directly to the storage. I can check, if you are using Google Chrome, you will get the option of local storage in the application, so look here, local storage, inside this we have a token, so we need this token, we will copy it, first before copying, postman. We will see whether I dismiss it here and add a new request here or see if the previous one is available here then you can do that too or leave it as is, make a new one and click on plus and the previous one will be in the URL. Okay, this is the URL, I am copying it and will paste it here. Now our URL which is changed, see it is from v1 onwards, after that we have, after Admit, we have Tu Owner Das. List, inside this we need a token, so inside the headers headers we have authorization and in this you have to write first, then you have to paste the space and token, token is not copied, I have copied it from here and here what we do. What should we do to see the result? Send and our request is hung. Once we check on the console, even on the control, no message is showing with us. Let's cancel it once again. I have sent the request once and checked that it is standing big and is not showing anything on the console . Now I can see the gate and here it is showing zero zero. I think I must have forgotten something. Let's cancel it and do the function at once. Look, I am late, here is the controller we have in it, see the request response Donal, okay, we have not returned anything here, you can see that we have forgotten to return it, so what do I do here, how is our success inside TRAI? What will we do now we will return here return and here I send the response rest dot status status of you 100 then after that what we will do inside send send is we will hit success here and after that whatever our variable. Whatever it is, I paste it here, then let's go back and again what I do is click on send here, this time we will get something or the other, see, we got our result equally, so owner. The list is patched successfully and you can also see its count. Right now we have a good donor in the list, A has been added here, so I have not written the donor, see here. Have you written admin? You have only one admin. Instead of this you write both and also what can you do, you can also show the count, then we will show the account in the start. Okay, here I have to write count or total count. Let's take it as total count and what we will do in this is that we will display the length of whatever is our donor data here, so we will do it with donal data dot length, and put it as mango, we will do it with this, let's go back to Postman and again I When I click on the center, I see that I have a total of two accounts. After that, the donor list is equal. You can check its role. Earlier we had written Admin there and there was only one Admin, I have two more, hence there are two records here. If you are getting the same then successfully we are getting the record of the donor. In this way, what you have to do is to create an AP for the hospital and organization. Now if you want, you can also copy paste it, so what can I do? Let me make a comment out here, first the donor list, now what will we do by copy pasting it, I will copy paste it to the controller, then we will make changes inside it, so first start copy paste, now what will we do instead of the donor, here get the hospital. Everyone will have to write hospital and here what will you do inside the role, you will write hospital and here instead of donor list, you will list hospital and below also you will hospitalize this and the rest today IT will be related to all this, just the name of this function. You also change the hospital list controller instead of gate owner, export it also, copy it, what we will do below, we will export it, we will do it by paste, we can copy paste this, instead of donor list, we will make it hospital list and here But we will also change its end point, we will do this, instead of this we will write get hospital mixer suggestion, then it will also be imported in the starting, you can see that it has been imported in this way, now let us test this also. Now I am back in Postman, now I just change the condition, here I will change the URL and point, I will change it to Hospital Das, the rest will be from the handle area, if you want, you can create a separate Rawat for this, but in all three Data is going to come from here, it will come according to the role, that is why I am continuing this, you click on send, then see the total count, we have one and here all the numbers in Hospital Fresh Successfully Your How will be there, they will be equal. Here we will show only this method, what we will do is for the organization, so you have to go back to the admin controller and copy paste this, copy paste, now we will do this for the organization, so in the shortcut, let's write og and here List controller and here we will write organization in the role, after that here too, I will do this and error in and list AP and everything else will be from the rest, we will copy it and export the function below, data from the other two. Just change your role, let's paste it and go to brute. We are getting the ad back. What will we do with this? We will copy paste it and here instead of get hospital and hospital list and here we will also change the controller. And we will do list controller mixer, see this also, you can read its name also Apple Care and then read the email ID and its role, our data is being filtered equally according to the role, so all the three APs have been created with us . Now using this data, we can create the UAE and display all the records that we have. So let's go back to Visual Studio Code and what we will do now is that of the donor. We will reduce the top, what will we do in the donor list, we will display the donor data, if you want, you can write the manual sir code, what do I do, we have already created it in the donor page, so I have copied it and put it in the dashboard. Look, Donald is GS, neither is the entire letter, I am copying this much from here in paranthesis and will paste it in the donor list, so you remove the return, we will paste it instead and we will import whatever thing is required. We will do it one by one so we will show the control space suggestion, click on it, it will be automatically imported, now don't worry about changing it, first import everything one by one, AP News State, so everything has been imported here, now what do we do? We will change its end point and rest all the things you can keep it further, no problem. No, here it will be from pay function, just another point which is there will be changed, so what will we do instead of inventory, we will slash it in add, then after that we had Donald Das list, in this we are getting data from what is we getting. And what do we have instead of donors, you compare it one by one, first see what we have, Donald is the data and change it here also, see, we will do it by copy paste, SIM is in the list and here we The data is going to be received and rest of the things will remain the same, we will check it once by name, email, phone number. Now let's go to the browser. Here is our browser and donor list. Once we see it, we will see the same data is showing in the donor list. If yes, then there was no need to change anything. The data came to us automatically because we had already displayed it in the hospital page. So, we copied and pasted the code and it is doing the same here too. Now what do we do here? Will take another D here and create an action here and what we will do inside it is add a button. First of all copy another TD here. After copying what will we do in it and make it red. The button will show in color that the application is in danger and after deleting it, I add it. Let's check that the application is showing again. Now here we will also see the functionality of delete and you can do it in lowercase and capital letters as well. A little bit more is visible so delete it or instead you can do the same to the icon too, so try Mixer, try to add the icon also, some normal delivery will appear in this manner, now we will click on it, we will create the function, now the function So we will create it but we will have to create it in the backup also i.e. we need the functionality of delete in the bracket also. After creating it on the back hand, then we can apply it on the front end. So, what will we do to bring back the functionality for delete in spring? What we will do below in the admin controller is that we will create it for delete, so here I make another comment, first delete the donor and create a new controller function, first of all or you can also do only the donor, delete donor controller equal ara function normal arrow. Left after creating the function , now what will we do with it, we will export it below, we will do it by copy paste, now we will also create a crowd for it, so let's go back inside the admin roots and what I do below, I will draw a line so that we can see a little Let us know the difference and what we will do here is we will create a comment and delete it and this will be the method get, make it a comment, what we will do after this is we will use the router.delete function and what we have to do in this is to tell the URL text here. What we will do is to make it dynamic, so you first write delete das donal and then what we will do is we will pass the colon ID here, then on the basis of this ID they will delete everything else and you have to do the same for the middleware. Admin will also be installed in it, shop will be installed in it, it will also be created in some way, now what will we do here, we will reduce the icing function on this controller, now inside it we will also receive the request and response, so you add the request and response in it. Along with this, we will also use try block, so you will write try catch block inside catch, we will console.com here and will return the response, return res dot status status of 400 or 500, dot send send. What will we do inside this, we will hit success and then you can also add a message, if we pass it on this here, then you will write error and inside the tree, what will we do directly, we will wait for any response and store it to us . It is not necessary to be direct. What will we do? If we use the user model, then you will write using the function. We will delete it based on the idea that comes in the parents. Then you will write that inside the request params, we will have the ID. Based on that, we will delete it. And if it is deleted then it will be returned. Return with response status of 200 dot send. We will succeed within send. Here we will add the true message. Only the message has to be added here and there is nothing else required for us to add. The donor record. I also delete it successfully. Let's do this from the front. Here, our controller function has been created. Now we can do it on our front. How to do it, what we have to do is to create a new function. Let's go back to the donor list and to the top. Or what will we do with it after effects? Function here We will create a delete function and here what we will do is give it a name, first of all we will start the equal tu ara function, first start the normal ara function, now we will make it an aging function, now inside this we are going to get the ID, so I will add the argument of the ID here. After this, we will use try catch block and here you have to add try and catch block, lock console dot in catch, whatever error is coming, print it here today and inside try. What will we do, if we try to delete the data, we will store it in a variable in the response or directly we will do the destructor, we will follow the syntax from the data and will weight it here and we will have what to weight the thing. That is, we have created it in the interceptor, so we will mix it and import it, after this we have the method delete, after that slash admin press what else do we have given the point, we have given its delete data here in this ID. If it is dynamic, then what you have to do is to make it dynamic, so we will make it dynamic, so we will do it with vectic slash admit slash delete giver and after that, whatever idea you are receiving, easily do it with dollar braces next n argument, whatever we will receive here . But we will pass it, now after this we will check the success, if we get the data and the response in it is success then what to do, show us a message here or what can we do, also give a prompt in it. Can do So what will we do for from, first let's create a variable so let's keep it as success also direct we can check it so from here I will cut it and once we take confirmation ok pop You can use the message that comes, I will create a variable, I will take the confirmation from the late reply, actually you have to delete it and after that you can also write any message in the optional video, such as short, this is the problem. Now what we will do is we will check the prompt first so if note the answer then what to do if the answer is not given then cancel it so here you write the answer if there is no answer then we will return it from here and if When we click on OK, what will we do? We will delete whatever data is there and also what we can do is we can show an alert, we can also add an alert and message inside it, whatever data is there, right? There is also a property of message inside it, so you can check that also, if we get the data, display the message inside it and also what we will do is we will refresh the page also, we will use soft window, again window dot location. That's enough, let's do it. Now what do we have to do with this function? We have to apply it on our delete. How to do it. Look at this button, what will we do on it and in this you have to write handle delete and friend, you will also get an ID. And where will the ID come from ? Let's test the software from the record. Let's go back to the application and refresh it. Let's delete it here and try. Look at the test one. We will get to see such a form. If I cancel, then it will be cancelled. First of all, I will create a new record and log out, that is, I will create a new data here, what will we do from here, I will log out or what you can do, you can also open any other browser, I will log out from here. Let's create a new record, first start and go to register and here we will name it dollar, you can write anything like dummy and dear.com, its email ID will be 123456 with password, we will add the website here. Already logged in, this is our donor list, so see, we had just created it, now let's try deleting it, so here I click on delete, then see it asks for confirmation, I will click on OK, then see the donor record deleted, now like If I click on OK , then our page will also be refreshed. So see, we have only two records, so the functionality of successfully delete is reducing the thing. From now on, what you have to do is to copy paste in the hospital page and in the organization list page. Let's go back to Visual Studio Code and let's open these pages as well. First, after this, we have the hospital page inside the admin, so you can copy paste the donor list one, the entire code, so whatever is the mixer code. Inside you copy it, copy the hospital list, what we will do is cut the return and paste it. By clicking next to it, we will show the control space suggestion and here we need the hospital name. Okay, we will target the hospital and here what we will do instead of the donor list, we will make it hospital list and if we have to make any changes then check once here. If there is a delete mail giver then here we will make it a hospital and here instead of a delete giver, delete hospital and what else should we change, let's see once, okay here a giver gives a no in exchange for that, see how we did it, let me tell you. Once we had written to you for the hospital, copy it from the hospital data and here, instead of both the data, replace it with the hospital data, let's go back to the application and check the hospital list here. Okay, here's something. It is also not showing. I am late after refreshing. I am checking once again here. Admin hospital list hospital data is coming regularly and I think the data is not coming to us. I am late after checking once. Check it in cancel. We will get the data and here we will refresh it on the console and here on spelling mistake, so go to network type and from here see the hospital list, is it showing 500 or not, we will make it responsive in this manner, its number here. Let's do it with length and great dot length, we will go back to the application, so we will copy and paste this delete below, copy paste and delete instead of donor, delete the hospital and donor records, we will do hospital here also. If we give it then you can rename it as per your choice and what needs to be checked in it, I think everything is correct, we have to do it on the basis of ID only or what else can we do, we can also review this function which is given by the giver. We have written controller, we can delete it also because we have ID in it, we can do organization on the basis of this ID or we can delete whatever is coming, there is no problem, record it here. I will delete the donor and I am late. If we know better then what will we do here? It is okay to delete it or let it remain, but you have got the idea that we can delete all the three things from this. We have changed the message here. Given this road, we can do whatever it is, so with this, we will do whatever we have in the hospital also, and first of all, what we will do is create another new hospital, so log out, log out, later I What do I do, I create a new hospital here, I create a hospital and we will test its name, I also test the test email, I go to website test.com, password is 123456, and from here, what will we do, we will create a new record and add the name of the registered hospital. Will do like test hospital 10123456789 register successfully ok and once we check here I am going to refresh here, see second record has been created, now we will delete it and try to delete and your one you delete this hospital yes ok Will click on once and will check network time. Now try delete again. First refresh and check. I am late. Okay, it has not been deleted. Now try delete here. Ok delete. Hospital is happening and what is written in the donor list. Let's take a look at this delete donal, so what do I do with this one? I copied it from here because we have not made a new Android, so there is no need to write hospital here, so let's copy and paste this. If you have got the idea from the name of the donor, then the functionality will be reduced for all three, let's go back to the application and you will try to delete it, so delete OK, then see the record deleted successfully, click on OK, our page should also be refreshed. Done and perfectly, the user has also been removed from us, so in this way, now we have savings, we also have organization organization, what can you do, you can copy paste the page from here, complete the return function below, copy and list the page. Open it, I will remove this return, paste it and import the moment. Whatever import you want, first start importing it. In this way, here we need U state and I think it is okay and there is hospital data here, isn't it? Instead of what do we have, you must cross check it once, what did you have in the organization and the data, so in the response you have to add it and what will you do inside the list, whatever data will be received, what will we do after that and the data. Will gate here and will also do this here and Gannesan and how to change Yes, this round will also have to be changed , we have the start gate in it and we can do it from the list, let's go back to the application and refresh it and see it once, then see the list of organizations equally. Here we have the name of the hospital and in its place we will have to create a new record so that we can check it. So what do I do? I create an organization. Or I do t1 instead, ok t1 is t1.com, let's keep the website with password, other address is India 10123456789, it is taking time to register, that is why it is happening, so there is no problem, the value is getting at the initial time, right? If you refresh the reason and check it, then you have two records here, see the army taken on you, now you will delete it, then delete OK, then see another delete successfully, click on OK, then perfectly our admin panel has been created here, in this we have I have gated the record and also seen the delete functionality and also you can add many things in it like from here you can give the edit option, I think this is enough for this project, now what will we do? Deploy it. We will do it on any free hosting server. If you want to see something specific, then you can comment below. We will see that it has been completed successfully. If you get any error, then you will get the link of the source code in the description. You must compare your code with it. Now what will we do, we will host this Blue Bank application, so there are many options available for hosting, some are available, some are free, so what will we do in this, we will use the free hosting server, first of all, what will we do, make some changes in our application. Like, what you do is, first of all, close your application which is running, then from here we will press Control C, then our application which is stopped here, after this we will go back to Visual Studio Code and our client. See, whatever name of the React application you have written, we had to write the client here, so what we will do is switch to this directory, so first of all what we will do is use the terminal and what will we do from here and what will we do here. Have to bill our Riya's application, what will we do after giving the build? Static Park, if we will serve it with the help of our notes server, then what will we do first of all, we will give the belt to the React application, there is a command for that, Ranbir, after writing this much, you can enter the internet . If you do this then your React application will start building. Expand it and inside it you will see a build folder. Do this in the Mixer React application and see that the build folder has been created here. Now sir, all our code is there inside it. It will be stored compressed ok and we will be able to serve it as static files further. With the help of our note, now it may take two to three minutes to build or it may take more time depending on the size of your application. So in our way, it has become very fast, you can see that here our build folder has been created, now it has reduced, we will close the terminal, now what will we do and what will we do in this, here we will add the static text which is For this, what you have to do is to import the text at the top. Now where will this text come from? By default, we get the support of note games, so here you will write 'Retire of text' i.e. inside the variable named text, we will import the text. After this, what we will do is we will come down and display the static files here before this India, so what we have to do is start the static files first, we have to tell the folder, so here I will add the address of the folder, a folder and here what we will do . We will use up dot because it is a middleware and what we will do in it, we can tell it directly, inside express we have a static function, so we will target it. What is express dot static, it is a function, so you should use it. We have to do it tomorrow, what will we do after that, if we use text here then you will write what we will do, we will tell the build folder here, then for that you have to use join function, this is also a function, what will we do inside it, so in our how There is a folder of the client, so you have to add your double in it also with the single code. You can see that we have the client in the root and all the folders which are in the same line, if there is any problem in your question. If it is in another folder then you have to define its part here like if we want to go one step back then dot dot slice in our how we do not have to go back so we will use single dot slash then after that we have a client folder. And inside it is the build folder, so from here we have defined the static folder and here then after that we will define the static router, so you can also make a comment here about static routes and here Rawat will also tell, so how to explain the routes. We will use the up dot function and then we are going to use the star here, then after that you will use the back function, so in a normal function, I will create a function inside which we will request and response and receive, this is normal. There is a function if you want, you can use Ara function base, what you will do in this is you will send the response, now along with send we get many options like if you write send then you will get the option of file here, so you have to use it. And five and again what we will do in this is we will use the text and inside the build we have an index note in the HTML file. Let me tell you, if we expand the build folder, there is an index note HTML file in it, so we also have the text in it. If you want to tell, what will you do here, write five dot join join is also a function so inside join what we will do again we will add in fear so underscore underscore after that talk in single codes or double codes you have to add in our how. Dot slash client folder is inside the client. Build folder is inside the build. We have our entry of index.html from point five. So here our configuration for the build is done. Now we have to upload this code on Getup. If you want to do this, then first of all what we will do is to create a new repository for this. Let's go to the browser and go to Getup. What should you do on Getup? First of all, sign in and login with whatever your email ID is. If you are watching for the first time then you can also create an account from here. I already have an account in my account so I can directly login from here. Here I have successfully logged in. Now what will we do? Click on the menu here. And from here you will click on the repository, you can also create it directly, if you click on the plus icon then you will get many options here, but if you are seeing it for the first time then you may get a little confused. That's why click on your do menu i.e. whatever your avatar is, click on it. Here you will get the option of your profile or your repository. You can click on either of them like if I click on your profile then your popular. The repository will show here and in this way then whatever profile or status you have in your account, it will be displayed here. If you want, you can follow here also, so mix and follow button will be visible here, then follow. You can also do this on YouTube, now here what we will do is create a new repository, how will we do it, from back I click on it and click on your repository, from here too, this menu which is showing you Repositories, click on it. Do it and here you will get a new button, click on it, like if you click, you will see the option Create a New Repository and time, what will you do, you will create the production tag Blue Bank, after that you can also add a description here like If you were showing the suggestion of Complete Monster Project, then I am going with this. Complete Math is the Blue Bank Project Source Code and you can also keep it private. If you are doing it for the first time, then keep it public. In my case, I will keep it public so that you You can also compare the source code, after that see here the Redmi file is there, so the Redmi file is already with you. If you see, whatever is your source code, the Redmi file will be ready in it. Even if it is not there, there is no problem . You can create it here, if you click on the file file then automatically the file will be created for you, that's it, what do you do after this, click on the green button, it will show whatever name you have for your project. And whoever has added his description, it will automatically show here, now what we have to do is to upload whatever code we have, but what we have to do in it, see, you do not have to upload the dot env file in this manner. Also your node is the folder of Underscore Modal, you do not have to upload that also, now upload it. There are many methods, you can do it in the terminal also, then for that you have to add SSC first, like if you click on the code here, then see here it shows you options like HTTPS and Getup. If you want to do Cli from command line then you can use any one of the three options, I want to keep it simple here, that is why what I will do here is I will use it half desktop so that whatever it is, even if there is a beginner, then It is so easy that by uploading it on Get Up, you can download it on Get Up Desktop. Simple, if you Google it, you will get options and it is available to be used in Windows. Someshwar, what should you do? Download it automatically, which is yours. The operating system and its type are detected according to it, here it will show you the download option, make sir, download it and install it, it is installed, click on next next, it will be installed automatically, what will you do after installation, whatever. You have to login with your GetUp login ID and password . It may also ask for authentication in the first time, so you can authenticate it, then later you will not have to authenticate the next time. Once you login with that It will be done, after that we will show it in this manner, once I open it, let me tell you that if I open it from the desktop, then you can see something like this, although I have a little configuration done, that is, its team. There is only a change, there is nothing much, you can also do that by going to the file, what do you do, you will get the options, look inside the options, the appearance option comes, there is an option of appearance, so in this I have kept a dark theme, in this way you will get the desktop . You will get to see the interface of and what can you do in it. Whatever repository you have created recently, you can do it like in our how you can see the production blue bank up, there is more in my how, in your how if you are doing it for the first time. So only one will be shown here, click on it, after clicking, see below you will get the option Clone and the name of your depository, click on it, again a pop menu will come and here you will get the option to select the clone and the part of the file. So let it be, there is no problem, click on clone here, whatever is your repository i.e. whatever is your repository, it will be copied locally in your system, you can see here it has been copied. Now how will you see it after being copied, here you will get the option Show in Explorer, click on it, then your project will open in the explorer in something like this, currently it is empty and there is only one redmi file in it which is We have the power to see here also, like you will see at the initial time, in our repository, in this way too, there is only one read me file and there is nothing else inside it, then what do we have to do, all the code we have is there. If you want to deploy then what will you do? Right click on it, go to File Explorer and this is the folder in which you can note down models and dot env. It is not necessary to upload both of them. Take it wirelessly. What will we do with the env file? It is confidential, so we cannot upload it, and the modal files will be compressed and will be sent automatically, so don't worry, now what will we do, we will copy paste it, what I do is open both the folders side by side, which one will I lay down? One folder is our project folder and the second one is here, I open it and let it be our repository folder, so this is the project folder and this is Redmi in which it is showing, this is our repository folder, so in this we What will we do? First of all, we will copy and paste only the build folder from the client, rest we do not need. Whatever is the build, the sir data for automatic build has already been compressed and we have got it in the form of build, so here. Let me create a new folder inside the repository and create a URL. Now what we will do inside this is that we will copy the build and paste it here, so the copy is done. Now let's take a step back. Right now we have the repository. There is only one folder in it with the name of client. Now let's go back to this also. In our project , what I do is select everything from which we do not want a client. Already we have copied it here and then you can load it. You do not have to add it in the models and also you do not have to add the dot env file, you will copy everything else and you can also see the file of Redmi in it. Yes, so I have copied this also and here we will overwrite it, so what you do here is paste it, like if you paste it, then it will ask for the option to replace because the file of Redmi is getting doubled, so I will replace it. I am late and if you see here, everything has been copy pasted, this is our repository and this which was on the side, this is our project folder, so you do not delete it, it can help you in future. There is a separate repository for pass production, so the sir code has been copied and pasted. Now if you go to the desktop, you will see here all the folders or all the files, they will be shown in green like this, now what do you have to do? Have to comment, for comment you see the option of summary, in this you have to comment, now anyone can add such a message in it like let us know what has happened in it like we will add in this we will add production code Blue Bank And after that see, you will get the option of comment, like if you click on it then see that this comment has been made, after this I tell you what to do, if your data is pushed then what will happen with the push, like right now at the initial time we have only one The file is read, now if you push it here, then let me tell you that you can push it from here also, this button which is showing in blue, you can also click on it and push whatever code you had. It will be pushed to the gate, you can see here it has been successfully completed, let's go back to the gate, now if we refresh it, we have the sir code here, we will get to see, you can see successfully our sir code here. is complete and can connect this repository and deploy it