in this mstat course nickel will guide you step by step in building a state-of-the-art AI chatbot similar to chat GPT through this Hands-On tutorial you'll Master the depths of the M Stack Implement Advanced authentication mechanisms and seamlessly integrate open ai's capabilities into your full stack application by the course's end you'll have a production ready scalable and secure SAS chatbot PL platform underpinned by the latest in web development best practices hi everyone my name is Nel and welcome to a usest project on a channel so in this tutorial you will Master the monack and you will build a fully secured AI software as a service project with a mon stack so this is an AI chatbot built with the open a and the mon stack so users can ask their queries and their doubts to the chatbot and chatbot will come up with an answer so this is similar to theat chat GPD as well so this application includes a fully responsive web page with a modern design so it is completely responsive on any screen size you can check the responsiveness as well and this application starts from the home screen so anyone can log in and register and they can start their conversations with the chat B so they just need to click on the login they can provide the credentials over there they can click on the login and after that the user would be logged in and we would be restoring all of the chats of the user with the chatbot and the conversations would be stored in the database so anyone can access their chats any time so you can see this is a UI for the chatbot and this is similar to the chat GPT like thing you can see if you ask any question like show me how can I declare variables in JavaScript so this chatbot will come up with an answer and it will also show you the code blocks as well so if you need any code blocks so it is capable of showing all of the code blocks to the user and the users have the functionality so they can clear the conversation with the chat Bo as well so they just need to click on the clear conversation and all of the chats of the user would be deleted and the user session will be active till the 7 days so we'll be storing the cookies inside the browser we'll be storing the HTTP only cookies and we'll be storing the tokens inside that and they can't be accessed by the JavaScript so they cannot be accessed by the JavaScript so they can only be accessed via the back end so users do not need to log in within the 7 Days of logging in so after only 7 days they are required to login again to generate a new token and we'll be using the openi conversational model GP 3.5 turbo and4 and on every chat message the user needs to verify their session and the authorization details as per the security because the security is on top priority so that's the demo of this application that we have created and this is our homepage the user can move on to the register page as well so sign up will look similar to the login so this is all for the demo and now let's understand the text TX that we'll be [Music] using so we will be using the nodejs express for the back end for creating the rest API and we'll be using the mongodb database for storing the data efficiently and on the front end side we'll be using the V for fast Dynamic and reliable application and for the authentication and authorization we'll be using the password encryption using the BP we'll be using the jwd Json web tokens and their authorization we'll be using the HTTP only cookies which can only be accessed by the server and we'll be using the validations as well we'll be using multiple middleware checks for the security and much more and for the design and the UI for this application we'll be using the material UI Library which is the best UI component Library out there for react and we'll be using the context API for the re react for providing the authentication as authentication provider as a rapper for whole application and with integrating all these Technologies we can build a modern fully secured and a full stack AI chatbot similar to the chat gity service with mon stack and with the openi integration we'll be using the openi for chat completions with the nodejs and we will take care of the security measures for this application and will take care of the API keys that are being kept as a environment variable and all of these things working with the open Ai and we will explain each and everything that how you can integrate the openai with a M Stack application and in terms of the scalability this application is completely scalable to anything so in future if you want to integrate the image completion audio completion video generation as well so this application will work completely fine with all of these things so react and the nodejs is completely scalable and and our back end is completely scalable for that and if you want me to scale that application to create the image completion audio generation and video then please comment down within the video and I will help you out so I think that's enough for the short introduction and let's get our hands dirty into testing this application and seeing the demo once again and then we will move on into the project so let's move on to the project once again so you can see this is our homepage we are using the animations over there we have some animations we are just giving some designs over there and we have built with love by Indian coders so this is my channel this is my YouTube channel and there you can see the login screen is there the signup screen is there so the user will be logged in and they can ask any question like we can send hi over there to the chat bot and the chatbot will come up with an answer like hello how can I assist you today and if the user refreshes the page so the user session will be active till 7 days so user does not need to log in again you can see now we have a message of loading chats so on every refresh all of the chats of the user would be restored and the users have the functionality of clearing the conversation as well so with the help of this they can clear the conversations and it's completely responsive so you can open it in any device like this you can see you can open it in any device you can see it will work perfectly fine over there and then the user can move on it is completely secure and it is completely responsive over there they can click on the login as well so you can see as for the design it is completely responsive and it is completely secure and you can check the cookies as well for the user so once the user locks in so the cookies would be stored there you can see now we have the authentication token so these cookies are HTTP only cookies so they cannot be accessed by the JavaScript so this is a complete demo for this application and now we will be moving on into the project so have a cup of tea or a coffee and let's start building this project and yeah I know now you want to build this project but before that I want to introduce you to my YouTube channel so if you are new here this is my YouTube channel and I create the videos on the web development so I request you to please like this video and please subscribe to the channel as well because it keeps me motivated to create the videos like this and it helps me now that's enough for the introduction and now let's move on into the project hi everyone and I welcome you all to the course so in this section now we'll have a deep introduction that what exactly are we going to do and what technologies that we'll be using and we'll be having the technical overview of the concepts as well so let's start so what exactly are we going to do so we are going to build our own AI chatbot with the help of open AI so it's a AI chatbot so that's why we are using the open aai and we all know about the openai platform so almost all of the modern AI applications are built and hosted on the open AI so we are also going to create around chatbot it is similar to the chat GPD so we are going to create that with the open Ai and it is a full stack application so each and every record would be stored inside the database and it can have the correct operations of the database as well so we are going to create a chat gbt type application with the open Ai and now let's just move on let's just understand the technical overview of the course that what technologies we'll be using that why should we use the Technologies if we have other Stacks as well so let's just understand about these so now let's move on and let's just understand that what exactly is the month stack so mon stack is a comprehensive and Powerful web development framework that combines four key Technologies the mongodb express react and the node so it's not exactly the framework but it's a collection of JavaScript technologies that work together to make a full stack web development environment so mongodb serves as the database system allows the user for the efficient data storage and retrieval Express is a backend web application framework that manages the routing the server aspects the metal WS throughout the nodejs application we have a react which is a front end library that enables the creation of dynamic and interactive user interfaces and we have the nodejs which is used on the server site to execute the JavaScript and to handle the request and manage the applications backend operations so it all includes the mongodb express react and the node and it creates the full stack web development environment and the integration of these Technologies enables the developers to construct modern full stack applications effectively and efficiently with using the one single code base which is the JavaScript so all of these Technologies uses the JavaScript as their internal code base so we'll be using JavaScript only to create a full stack application with using the mon stack so now let's just understand that why should we use the mon stack so we have other Frameworks as well that can be the nexts T3 stack it is currently in the demand as well like the mon stack we have the lamp stack as well with using the PHP and we have golang as well so why should we use the mon stack so let's just understand that why should we use this so first option that we have is the full stack compatibility so mon stack offers you the full stack compatibility so it covers both front-end and backend development using the JavaScript and this leads to a consistent code base and it makes it easier to collaborate and switch between different parts of the application whether that's a front end or whether it's a back end and now let's move on so we have the modern web application development so it's a completely modern development with using the react which allows the creation of dynamic and responsive user interfaces while the Express and the node handles the backend operations and it's a high performance backend services with using the node and the express and currently mongodb is the most used database for now so it's a modern fullstack web development and we have the scalability as well so nodejs which is used in the monack is known for the scalability it can handle a large number of simultaneous connections efficiently with using the event Loop and and it makes it suitable for applications with growing user bases and same with the react so you can create any type of application with the react and now let's move on so we have the realtime applications as well so Monch offers you the realtime applications as well with using the sockets with using some chat applications and all so we have a completely real-time application so we are not going to use the socket inside this application but I'm just explaining you the examples that why should we use the monack and now let's see we have the crossplatform so monack can be used to develop web applications that works across different platforms and devices so you can also use the monack with the mobile devices as well what you can do so instead of the react you can use the react native for building the UI part and now we have the open source so this is the last feature that should be use the mon stack so all components of the M are open-source Technologies so you do not need to pay anything because the mongod DB is like a premium purpose so if you want to use the mongod DB then there's a very nominal charge but but only in the production and during the development you do not need to pay anything to the mongod DV and you have the react which is open source the node and the express they open source applications and you have the access to their source code as well so these are the options that help us to understand that why should we choose the mon stack over other different Frameworks and now let's move on and let's just again have a very deep introduction about this course so what we are going to do so we'll be having a modern a project which will use the open a API so we are going to use the openai API to create an AI and realtime chatbot and it is similar to the chat GPD so the application is a full stack application which stores the users chats in a database to keep track of the conversations but a user can delete them any time so we have a CED functionality of the users as well in which we'll be having the users we'll be having the chats of the users and user can delete their chats as well anytime and the UI is capable of showing the the code blocks as well if requested by the user so as you saw in the demo so we can also show the code blocks to the user as well with this project so it's a modern AI project and we'll be using the advanced authentication and authorization system with the realtime chatbot so we'll be using the JWT tokens the HTTP only cookies and these cookies would be stored inside the users browser but they won't be able to access that and they need to send those cookies once they request for a new chat so it's a completely secure and modern application with the modern a platforms so now let's move on and let's just see that how we can start building this project and now we can start building the back end of this project so now let's move on so first step that we have is to set up the note express application with the types script so this is our first step for building this application so now let's move on to the coding part so for quick start for this course so I'm going to provide you the link inside the description so it's a GitHub link so you can directly move on to the GitHub link and then what you can do so you can download this source code and then you can paste that into your folder so you can move on you can just copy all these files and then you can paste them into the visual studio code so I have opened the folder in the vs code which is a m opening I chatbot so let's create another folder that can be the quick start for the back end then we can paste all of these files here so now I have these files over there and let's start building this project so this is a overview so now after just pasting all of these files now you can move on you can press contrl and J on your system if you're on the Windows you can press control and J so you need to just open the terminal so you can move on to the back end folder over there and then you can press the command of the npm install so it will install all of the dependencies that are required so let's start moving on so here we have the source file and inside that we have the index.ts so here inside that you can see we have a lock statement like this is a starter kit for this amazing project with love binding encoders then we have the envirment file as as well and inside there we have a couple of Secrets couple of the we have the database URLs as well we have the cookie secret JWT Secrets then we have the package.json as well and inside the package.json it contains the information about our back end you can see the name of the application we have the back end over there we have the main we have the index.ts it is there inside the source with the type of the module then we have the scripts as well so we have the dev command and we are going to use the concurrently package so it's a open source npm package that we can use so it allows you to run multiple commands inside the scripts inside the terminal so first we are going to compile the typescript to the JavaScript in the watch mode then we are going to run the compiled version of the JavaScript then we have the build command as well so it is currently same so after the build I think that could be the Run command so it's a run command or it can be the start command over there and for the build command I think we can move on we can have a new command that could be for the build so we have the build command over there and inside the build command now what do we need to do so build command will be just having the TSC which will compile the Javas which will compile the typescript to the JavaScript so here we have the build command over there and that's how it's going to work and after that you can see now we have the start command which will start the production ready application which will start the compiled version with the note index.js then we have the test command as well and this is not required so what we can do so we can remove the test command over there and after that you can see there are a couple of dependencies that we'll be using the first one is the BP which is used for the password encryption and comparing the decrypted password then we have the concurrently package which is used to run multiple commands concurrently with have the cookie passer which is used to set cookies directly from the back end to the front end we'll be using the course package which enables the cross origin resource sharing which means like you can make a request to a different server and there won't be an issue we'll be whitelisting that thing over there we have the EnV to use the EnV files over there we have the express application over there we'll be using the Express package we have the validator for the express so it means now we'll be having the data validation checks as well before moving on to the database we have the Json web token for the JWT tokens we have the mongos which uh which is a package which is used to work with the mongod DB we have the open AI Library so we have the open a library to work with the open a systems and now let's move on let's have the configuration file of the typescript so here we have the configuration file and here we have the error we can just move on we can have the es I think we can have the node next to over there like this so I think we can move on we can have the next so the error would be gone and now you can see inside this we include all of the files for the typescript which are into the source folder so inside source inside any of the subfolders so if you find an ATS file so it would be compiled inside the build directory and this is the build directly which is the disc and this is a build directory which is a disc so you can move on you can create a new folder that could be for the disc and inside this file the new compile file would be created so that's how it's going to work and after that what you can do so you can just run the npm Run Dev so first time you should get an error your compiler would not find the dis index.js file but after you compile then it would create the index.js file then you can again move on you can clear the screen then you can again press npm run Dev now you will see the lock statement over there which is this is a starter kit for this amazing project with law ban coders so with the help of this now we have created the very basic setup of our application and now we want to move on so you can see now we just have the lock statement now we can remove the lock statement and now before moving on to the next steps what I'm going to show you is I'm going to show you that how to create the basic node and express application with the typescript so we are going to create the very basic node and the express application so we'll be using the routing with the express so we create the very basic application so let's move on so how we going to do that so first we want to import the express so we can import the express directly from the Express package so that should be from the express then we can move on what we need to do then we can just provide the const we can have the app variable so that should be equals to the express so now the app variable holds the functionality of the express application and now what do we want to do so after that we want to open the development server as well of the application we can have the app we can have the listen we can have the app. listen and inside the first parameter we need to provide the number of the port so on which Port we are going to create the application server so suppose that can be the 5,000 so it would open on the Local Host Port of the 5,000 and then we would be having the call back as well after that so inside the call back what we going to do so we can have the lock statement we can have the console dot we can have the log so that should be equals to what we can use over there we have the console.log that should be we can have the server open so we have the lock statement as well so you can see once we save this file so node modon would dedu the code changes then it will automatically rerun reopen your development server you can see now you see a file which is a server open and everything seems to be working perfectly fine so this is a very basic application but this application does not accept any of the route so let's create the routes as well and some middle Wars as well so what we're going to do here so first we need to register a new route that should be we can have the app. get request so if you want to create a get request so if you don't know about this type of requests like the get post patch put delete so I'm going to show you as well so there are four type of requests which are mainly used inside the backend velopment so there are four type of requests which are mainly used inside the backend development so these four request are so first request that we have is the get request it means like we want to get some data from this backend or from the database so that's why we send the get request and then we have the put request in which if we want to update or modify or mutate some data then we use the put request and there are are post request as well like if you want to send some data like if you want to create a new blog post or something so that's we use the post request and there's delete as well so we have the delete so I think the spelling is wrong so we have the delete request as well so inside the delete request if we want to send some data to delete something so that's why we use the delete statement over there so these are just the HTTP verbs for incoming request so these are the major four HTTP verbs that we'll be using and after that now what do we want to do so now we want to have some routes over this application so now we want to generate some endpoints in which we can make a new request so first endpoint could be we can have the app do we can have the get so get directly you can use directly the app.get over there then you can provide here the URL so URL can be slash it means the Local Host 5,000 SL nothing and if you provide the hello over there suppose that going be the hello it means now you want to make a request on Local Host 5,000 /hello and after that what you need to do so you can move on so you can have a call back function so inside the call back function you have the three parameters the first is the request second second is the response the third would be the next so these three are the call back parameters that you get over there and these three call back parameters have a reason the first is the request object so if the front end or client has requested you something so it is there inside the request and we have the response as well response means if the client has requested something then it's a duty to send back some response so that's why we use the response over there and we have the next as well so next is used to move on to to the next available middle WS so all of the middle WS that we Define so these are just the middle WS inside the express so Express handles it as a middle W so if you don't know about the middle W so after this chapter now we'll be having the deep understanding that what is the middle wave so middle W are just the functions which handle the request so this is also a middle W so next is used to move on to the next middle W this is a simple route and you can see suppose you make a request on/ and if you want to send something to the client then you can use the the return statement then you can have the response then we can have the send you can have the response. send if you want to send some static string over there that can be weaken at the hello it means once you make a request to app.get /hello it means now you will be receiving the hello over there and for testing that you can move on you can download the postman so Postman is a API testing platform for testing any type of API that could be the graphql API that could be the normal API so you can use that over there and after that now what do we want to do so let's make the request so we can add the HTTP that could be the Local Host the port of 5,000 SL we can the hello so let's see what happens if we make the get request on this Endo so let's just click on the send so now you can see now you received the hello over there so it means everything seems to be working perfectly fine you can see now you are making the request to the hello it means now you are getting the response as well so you can say this is a get request but if you send the post request over there now you won't receive anything if you click on the send you can see error cannot post this because now this route is not registered over there so you are registering only get route so it will only work with the get and now let's just use the post as well suppose I change this to the post over there suppose that could be the post and mainly the post is used to send some data along with the request so we send some data with the help of the body so inside the body we can send these data like the form data if you want to use the forms we can have the binary data the raw data and here inside this application we'll be using the raw and we'll be using the Json object we'll be using the Json so for the input output for this application we'll be using the Json type of data so let's just send some Json data like that can be the name so name can be that should be equals to we can have the Nik over there it's my name so let's just click on the send so you can see if you just click on the send of the hello so you can see if you will move on if you will just click on the send you will receive the hello over there because now you are doing so you can see you are just returning the response. send which is a hello but if you want to read this data like whatever data that the front end or client is sending so if you want to read this data you can move on so you need to add another middleware of the express you need to add another middleware so which is we can have the app do we can have the use so we can have the app do use so app. use is used to define a middleware and the middleware that we use to define is the express we can have the Json so it tells this application that will be using the Json for the incoming and the outgoing requests for this application so it will pass all of the incoming data to the Json so after that you can move on you can just lock something like you can have a log that should be equals to we can have the request so you are sending the body so you are sending the body over there right so you can have the request do we can have the body and you are sending the Json data it will be passed to the Json then you can just directly access the key of the name you can have the response body do name if you click on the send so let's see what happens this time so if you move on if you just click on the send you can see now you see the nickel over there inside the terminal so everything seems to be working perfectly fine so this is a post request and now let's just understand the put request as well so put is also same that you send some data directly from the front end so put is just a verb in which it is used to modify something into our back end suppose that can be the database operation modify some socket and all so it is used for the put so it works same so if you use the put over there it also accepts the data as well if you click on the send then still you will see the nickel over there and that's how it's going to work and after that let's move on let's have a delete as well so we can have the delete so delete also works same so you can send along some data as well with the delete if you click on the send if you just click on the delete if you just click on the send now you will be seeing the Nik over there so it is same but the put and the delete and the get there is some something so you can say this was a static route it means now that's a static route that can be the hello but what if there are millions of users inside the database and you want to access only one users record then how can you do that so there are two options first you can send some data so inside the data you can send the ID of the user inside this and then you can fetch the user directly from the database then you can send the response but the second operation would be instead of sending the ID into this you can send the ID into the URL so that would be a dynamic route so inside the URL you can send the ID so suppose that can be SL hello suppose that can be slash we can have the user that can be/ ID of the user that can be 1 2 3 4 5 it means now you want to fetch the record of the user and the ID of the user is 1 2 3 4 5 that can be the ID as well that can be the username as well so let's move on so if you want to accept the dynamic route it means now we don't know that what would be there after the user then there is one thing inside the express which is known as the dynamic routing so that could be app. delete SL we can up the user because the base URL structure has a user then you can declare a parameter inside the endpoint that could be colon that can be the ID so this is the parameter now so after the user if there's anything in so after the user if there is anything inside the URL then it would be stored inside the ID so this is a variable now so now what you need to do and to access this ID you can move on you can have the request to we can have the params and inside the params you will get the ID over there so you get the ID over there inside the params so let's just see so if you just click on the send you can see now you got the params ID which is you can see now you got the 1 2 3 4 5 and there you can see this is the ID you can name it whatever you want but if you name is like user ID or anything like that so you need to accept same thing over there you need to accept the same thing because this is a variable and this cannot be renamed here so we have the request. ps. idid if you just click on the send you can see that's a dynamic request so you can see this was a very simple application and this was a very basic tutorial of using the express with the nodejs you can see we created a couple of routes we created Dynamic routes and you can see we got the param ID we got the data as well directly from the client so you can see that's how we can create the applications with the monag with the nodejs and now let's move on so now this was a very basic application and now we are going to remove that so what we're going to do so we we going to remove this request over there and we want to remove this as well so you can see now we just have the app. use we have the express. Json we have the middle be over there we have the middle be and you can see that's how it's going to work and there we have the connection we have the connections over there and listen n we have the connections and we have the listen not over there and that's how it's going to work you can see now we have the connection and listeners now we have this now we have the Edition and now let's move on let's just create some folder directories as well inside this application so inside the source now what do we need to do so first we would create the folder for all of the models inside this application so what models do we'll be having so we'll be having the models over there so we can have the models over there we have the models and then we can move on so after the models then we want to create another folder for the routes so instead the routes we'll be having all of the routes of this application then we can move on then we can have the controllers as well so here we have the controller functions so these are the functions which are the Handler functions so we create the functions so we create the route end points inside the routes and the controller functions would control all of the incoming API request then what do we need to do then we can create another folder that could be we can have the utils over there so these are the utility functions and then we would create another folder that could be for the config as well which is used for the configurations inside this course so you can see now we have created the very basic setup of this application so if you see the first step over there we have created uh we have seted up the node express application with the typescript and everything is going to work perfectly fine and now we want to move on to the next step which is integrate the mongodb database connection inside our application so it would be so it would be very simple so what we need to do so after logging on into the mongod DV now you can move on you can just open this drop down you can move on you can click on the create project so with the help of this you can create a new brand new mongodb project with this and after that you can see now you want to name your project as well so what would be your project name so you can have the M we can have the AI we can have the chatbot over there so we have the name of this project then we can click on the next and after that we can just uh skip these things then we can just directly click on create project so it will create the brand new mongodb project for us and after that it will ask you for a couple of questions as well after that so first you can see first we have a screen of the deployment so now we want to deploy a database so here we'll be using the Cloud version of the mongodb so we won't be installing the mongodb and Compass over there to create the CMS type but here we'll be using the cloud version so we can just directly click on the create and after that you can see there are three options for us we have the M10 option which is 0.08 per hour and you have the storage of around 10 GB you have the 2 GB of RAM the memory then you have the two virtual CPUs then you have the serverless approach as well which is $0.10 per 1 million RS then you have the storage uh sorry it's a type of scalable database you have the storage of up to 1 TV you have the auto scalable Ram Auto scalable virtual CPUs then there is free version as well which is the m0 which is used for Learning and exploring the mongodb in a cloud environment so we'll be using the m0 as well and I will keep these settings as default now we will just click on the create so now we'll be creating around mongodb Cloud deployed version database and it is asking for a couple of things over there we can just click on the verify so let's see what happens bicycles we can click on the verify now we are verified now we can move on so there we have a security quick start as well so inside this it is very required thing you can see now you want to provide the username in which now we want to connect to this database so username can be we can have the anadani over there we have the anadani for the username then we can click on autogenerate secure password so it will just generate a secure password for us then we can copy that password somewhere so we can copy that password where inside the EnV so for a temporary now I'll be using this password over there now you can see now you can just click on create user so with the help of this now you'll be creating your brand new user and after that you can see now you have the my local environment Cloud environment so what you need to do so after that you just need to click on finish and close and then you can move on to the go to overview and after that again you can move on one time to the network exess so only from this IP address so this is your IP so only from this IP address now you are going to connect to this mongod database but if you want to allow it from anywhere you can click on this button allow access from anywhere then you can just click on the confirm so with the help of this you can have the allow access from anywhere so now you can connect to the mongodb database from any network from any IP address now you are set it up and ready now you can just click on the database and then you can see now if you click on the connect and there you can see after clicking on the connect then you can move on you can click on the drivers and then you can just copy this URL so here you have the connection URL and from this URL now you are going to connect to this mongodb database so you can move on you can just copy that URL over there and there's a note as well you need to replace the password for the anadani user so you can see we have copied this password and do not use my password because I'll be changing this password after creating this video so what you're going to do so you need to copy this connection string you need to paste that over there inside the mongodb URL so now you have the connection string over there and instead of this password you need to use this password over there so you can cut this and you can place this password in place of that and then you can see now you want to provide the database name as well so after this slash now you need to provide the database name that could be we can have the test or we can have the we can have the chatot over there we have the chat bot like this so this is a mongodb URL it is set it up and ready and now to use the environment files and the environment variables inside our application so there's one thing that you need to do so you need to import something from the en EnV import something from that should be from the EnV and the something that you want to use would be we can have the config so you need to import the config and then you need to run the configuration of this so you just need to run the configuration and with the help of this now you can connect to the mongodb database securely and everything seems to be working fine and after that inside the source you can create another folder that could be we can have inside the source you can create another folder that could be we can have the DB and inside the DB you can just create a new file that could be we can have the connection do we can have the TS and after this now what do we need to do so here we want to use the package to connect to the mongodb database and if you don't know about the mongus you can just directly move on to the mongus so first I'm going to use the test profile over there so that should be we can have the mongus over there so it's a odm which is object data modeling with the mongodb so elegant mongodb object modeling for the nodejs so you can see it is used to write the mongodb validation casting creating business logic B plate and all the things you can see first you need to require the mongos this is a complete setup of the mongos you can say in just five lines first you want to require the mongos then you want to connect to mongodb URL you can provide the connection string then you create a model that could be const Cat that should be mongos model the name of the model and then it will be created a collection so the collection would be created as a cat then you have the name that should be the string and then you can see now if you want to create a brand new cat you can have the const you can have the kitty over there that should be a new cat and then you can provide the name inside this because the name was required you can see the name was there so now you can see after that you can have the KY do save so you just need to call the save function directly from the mongos to save a record inside the database and it is completely open source and it completely free and it is very easy to work with so now let's move on so here we want to just export a function from which we can connect to mongodb database and after that we have the connect to database and this is an asynchronous function so we need to write the async over there and that's how it's going to work because it's a database operations so we need to wait for this task and after that we need to import something from the mongus to connect to the database so you can move on to the top you can have the import statement you can import something from we can have the mongus over there we have the mongos and something that you want to use would be we can have the connect so connect function is there inside the mongos to connect with the mongodb database and after that now what do we want to do so you can move on so inside this what you need to do so you can move on so you can have the track catch block over there you have the track catch block and there you have the error and after the try now what do we need to do so we just need to await for this we need to await for a task which is we can of the connect so inside the connect you need to provide the URI as well so the URI is already there inside the environment you can just grab this mongod URL you of the process the current process of the nodejs dot we can have with the environment so envirment variables of the current process dot we can have the mongodb URL so it will help you to grab the mongodb URL and the connect function will connect to the mongodb database and after that you have the catch error so if you get an error then you can have the throw we can have the new error so you can have the throw a new error or that should be equals to we can you can use anything like we can have to throw new error that should be equals to we can have we cannot connect to MB like this so we can have the Mong TB like this so you have the new error over there like that and everything seems to be working fine and you can log this error as well that what was the error so you can have a console.log that should be the error so that's how it's going to work and I think what you can do so instead of the default export you can remove the export default from there now you have this function we can create another function if you want to disconnect from the database and it will help us inside the error handling so we can create another function we can have the sing we can have the function we can have the disconnect we can have the disconnect from we can have the DB as well and we do not need any param over there and this will also be an a synchronous function and after that now what do we need to do here so inside this we need to move on we can have the try catch once again so inside the try now what we need to do we can add the weight and we want to import another function from the wongus that could be we we can have the disconnect and it is also a promise I think right then we can have the await we can have the disconnect so if anything wrong happens within our application inside our application then we'll be disconnecting our application from the database as well and that's a secure approach because we want to create a completely secure application so we want to take care of the security parameters and after that if we get an error again we can just move on we can just have these errors over there we can just log the error connect to mongodb and these are the functions that we want to use and after that what do we want to do so after that we can just export these functions so we can export these functions directly from here we can have the connect to database then we can have the disconnect from database so that's how it's going to work and after that now what do we need to do so I think we can just manage this application folder structure once again so this is a root file of the index.ts now we can create another file over there that could be we can have the app dot we can have the TS and now all of the applications code would be then handled inside the app TS so let's move on so let's just copy all of that and let's just paste that inside the appts so only this only till this the app. use so all of the middle and all would be defined inside the app. TS and then we'll be having the export I think we can have the export we can have the default and that should be we can have the app over there we have the export default app and then we want to import the app directly from here we can have the import I think we can just directly use the app so we'll be using the import app from app and there you can see now we have the lock statement over there and that's how it's going to work and then you get an error so you need to write the GS over there you uh you need to write the GS like this and you can see now your application server is over open and everything seems to be working perfectly fine so you can see now we are managing our application code now we are dividing the code to increase the readability of our code and everything seems to be working perfectly fine and now we only want to open the application server once our application is connected to database so first we need to have the connect to database over there connect to to database and after that only now we want to open the development server so we can move on so we can have the app. listen over there app. listen over there then we can have the catch as well so we can have the catch if we get an error then we can move on we can have the console do we can have the log we can have the error over there and after that in the end we'll be having some error handling as well that will be stopping the terminal as well so we need to use that as well so you can see now our application is connected to database and you can see now we do not have any and after that we have the server open and we can have the connected so I think we can use this string over there you can see now we have the string over there we have the server open and connected to database so you can see now we have the handshake as well so that's how we are going to working so you can see now we have defined the port number as well so suppose if this port is not available inside this so we can move on to the application inside the invironment we can Define the port over there as well we can have the application Port so that should be we can have the 5 ,000 for the port and then we can use the port as well so inside the index.ts once again so we can use the port as well so before this we can have the const the port and that should be equals to we can have the process we can have the environment do we can have the port over there and if the port is not available then only we want to use the 5,000 over there so we can have the port instead of the 5,000 directly so that's how we are going to working so that's how we'll be working with the node and the express application and there you can see now we have the message of the server open and connected to database and everything seems to be working perfectly fine so now we have connected the MP database inside our application and it is working totally fine and now we want to see The Next Step which is now we want to register or login on the open portal and we want to get the API Keys directly from the so you can see now we'll be creating the application from open we'll be using their API so we want to get the API keys for that so what we need to do so you can move on to the openi platform you can move on to platform. open.com you have the apps you can see all of the modern apps are created on the openai then you can move on you can just click on the API because we'll be using the integrating we'll be using the integrating the openai models into our application so let's click on this and there you can see after that we need to use that what type of API that we'll be using and after that now you need to move on to the personal section you can move on to the profile and after that you can just move on you can have the view API keys and after that you can create a new API key as well so you can just click on create new API key you can provide the name as well so we can have the AI we can have the chatbot over there we have the AI chatbot you can just click on create a secret key so after that what you need to do so there would be the keys generated and you need to copy this key because you won't be able to view it again you can just copy that and then you can just paste that into your envirment file and do not use my secret again because I'll be just deleting this secret after recording this video so that's my open a secret as well and there you can see that's how it's going to work and then you can just move on and you need a paid account as well for using this so you need to provide a credit card or the debit card but it is very nominal charge so you so you hardly pay for this because it is very nominal charge for using the chat GPT over there and after that you can just close that because now you got the API key but you can move on to the settings as well so you can get the organization ID as well so you need this as well you can just copy that you can just again paste that over there we can have the open AI we can have the organization we can have the organization we can have the open organization ID that should be this ID over there we have this ID over there so now we need this ID as well for connecting to the open and that's how it's going to work so we just need the secrets and the organization ID and that's it so now we want to move on so now you can see now we have registered and the logged in on the open AI portal now we got the API Keys now we want to move on to the development so now we want to build a secure authentication with the web tokens with the HTTP only cookies and we want to create some end points for us so let's move on and let's just start building the CPI endpoints for our application so let's move on so here you can see first we need to move on to the app. TS and here we want to define the middle WS that we'll be using so first you need to just stop the terminal so either you can open another terminal as well you can have the CD and inside the backend folder you can install a dependency which is a Morgan so we can add the npm install we can have the Morgan over there so what Morgan package will do so it will just dis so it will just uh give you some log description that what type of request was handled and what was the response and what was the status code so we have the Morgan as well so what we need to do so we can import this we can have the import we can have the Morgan over there that should be from we can have the Morgan like that we can have the Morgan over there and here what we need to do so after this Json then we can have another middle that could be app. use then we can the Morgan over there we can have the Morgan and after that now what do we want to do so here we have the Morgan over there so after the Morgan then we need to provide a string that could be we can have the dev over there we have the Morgan that should be equals to the dev and after that if we make an API call to this back end then we'll be seeing the lock message as well so we want to remove it inside the production so once we build this application we want to remove this as well so we only want to use this inside the development mode and once we enter the production then we want to remove this as well and after that now what do we want to do now we want to generate the middleware over there so now we want to create the middleware for our application we can have the first middleware we can have the app. use that could be we can have the API structure for our application that could be Local Host 5,000 or any domain slash we can have the API over there SL we can have the API SL we can have the version as well we can have the API slash we can have the V1 and after that we can create the route Handler file which can be the main route Handler so inside the routes we can have the index so we can have the index do we can have the TS over there and set the routes and after that now what do we need to do so we can move on we can have the import we can have something from we can have the express and we want to import the routing from the express so we can have the router from the express to use the routing and after that we can have the const we can have the app we can have the router the whole application rout AO and that should be equals to we can have the router from the express so now we have the router Express and after that now what do we want to do so now we'll be having the export we can have the default so that should be this router sorry and that should be this app router over there because now we want to export this app router as well and now we want to use this app router so after we make a request on app so after we make a request on/ API slv1 then it will be handled to this app router so that's how it's going to work so after this so after the express will move on to this endpoint so it will handle so the app router will handle this type of endpoint over there and after that now we want to create the structure of our routes as well so we can have the app router dot we can have again the use we can again use the use over there because here we want to generate a middleware so on the use if the request is made to/ user then we'll be moving on and then we'll be using the users's routes over there let's create the routes for the user so we can move on so we can have the user SL we can have the routes dot we can have the TS over there and after that we need to Define these routes so again we can use the import that should be we can have something we can have the router like this router from Express then we can have the cons we can have the user routes so that should be equals to we can again use the router over there we can have the router like this we want to router class then we can have the export uh we can have the default and that should be we can have the user routes over there so then if we make a request to/ user then we want the user router to handle those incoming request and that's how to handle those incoming request and that's how it's going to happen and then we can create another router over there for the chats as well so we can have the chats we can have the routes dot we can have the TS and now we want to follow the same thing for the chats as well so we can move on we can just copy that and then we can just paste that over there so now we can have the chat routes so here we have the chat routes so you can see I'm doing this because I want to increase the readability of the code you can see now we have the index.ts and then we can again copy that we can paste we can have slash we can have the chats over there we have the SL chats then we can have the chat router over there we have the chat routes so it means now once we move on to the domain slash we can have the API slash we can have the V1 because this is a version one and then we can move on to the app. TS you can see once we move on to this API endpoint so then the request would be transferred to this app router so then we have this request and if the request is to/ user then this user routes would handle this request and if this request is on the chat if the request is on the chat over there like this so if it is on the chat then the chat would be handling that so then we have the chats over there like this so then the chat routes would handle that request so the chat routes would handle that request so that's how it's going to work and now we can finally move on to the user router and now we can Define all of the HTTP verbs that will be accepting inside this application so you can see it falls a bit complicated process but it increases the readability of the code that we want to use inside this application so now you can see now we have the user router let's just create the request over there we can have the user routes or we can have the get request so suppose that could be get we can have the slash over there and after this slash now what do we want to do so after this slash then we can have the controller function as well so now we don't want to create all of the controllers and the routes over there so for the Handler functions for handling this request we want to move on to the controllers we can have the user we can have the controllers do we can have the TS so now we want the users's controller to handle the incoming requests for the users so suppose that a get request so what do we need to do so we want to create a function we can have the export cost we can have the get all we can have the users like that so that would be equals to a function like that so from this now we want to get all of the users from the back end so that's how it's going to work and after that now what do we want to do so now we want to get all users directly from the database and then you can see that's how it's going to happen so we have the get route and after that we can just assign this function over there we can assign to get all users directly from the controller so everything seems to be working perfectly fine inside our application you can see now we have defined the routes as well inside this application and everything seems to be working perfectly fine so welcome back and now before moving ahead into the routes and all so let's just Define the models that we'll be using inside our application so now we would be using some models as well the database models which are the schemas so we need to Define them as well so for defining the model let's just see that what will be the fields of the user model so here comes a new topic about the database models so we'll be having the model of the user and after that the model user will contain the name we'll be having the email of the model user we'll be having the password as well and then we'll be having the chats as well so chat will not be a new collection or a new model so we'll be creating a brand new object type schema for the chat so all of the users chats would be there inside the chat and this would be an array of the chat schema so these are the database models that we'll be defining so let's just move on to the application so inside the models what we can do so we can create a new file that could be we can have the user dot we can have the TS and after that we need to create a new schema so like we use the mongus so like initially we showed you the mongus that how The mongus Works to create the schema so that's how you're going to create that so we can have the import we can have the mongos over there we can import the full mongos library and after that now what do we want to do so we can have the const we can have the user schema like that we can have the user schema so that should be equals to new instance of the mongus do we can have the schema so we can have the mongus do schema class so we can make an instance of that and after that we need to provide the schema definitions so schema definitions can contain the first field that we want to provide would be the ID I think the ID would be automatically generated from the mongodb so we don't want to generate that so we can have the name over there so we can have the each user can contain a name so for the name we can have the type for the name so that should be at the string over there and it should be a required field for creating a brand new user so we can have the required validation over there and after that we'll be having the email as well so it is same so we can have the type that should be we can have the string over there and then we would be having the required property so that should be we can have the true for that and then the email should be unique so for that we can have the unique as well we have the unique so that should be equals to the true so this is not a validation but it creates some indexes for the email to search quickly then we can have the password as well so we can have the password over there we can have the password we can have the type over there like this so we can again have the type of that should be inside the string and then we can move on so it also required so we can have required like this and that should be to the true so these are the three fields that we required for the user schema and then the main field is the chats over there the chats so chats would be an array so it would be an array of a new schema so we can Define the chat schema as well before the user so we can have the cons we can have the chat schema over there like that we can have chat schema like that and that should be again equals to new we can have the mongus do we can have the schema over there we can have mos. schema and after that we can just create the ID of the chat so mongodb provides you the ID automatically so if you don't want to provide the ID so it's up to you but if you want to provide the ID then you can just use the ID over there you can have the ID you can again move on to the ID you can Define the type over there that should be inside you can have the string over there inside the type and then you can move on you can have the default as well of the ID so default should be you can import a package from the nodejs so we can have import something from we can have the crypto so directly from the crypto you can get something which is we can have the random uu ID so it will help you to generate a new ID so we can have the random U ID for that so it will just create a new uu ID for us and after that what we can do so we can just define the role so inside this now we want to define the role so there are two roles for using the open a platform that can be the the AI chatbot that is a assistant and there can be the user so there are two roles for that so we can have the type so that should be we can have the string over there and then we want to move on so that should be the required property that should be the required and that should be again equals to the true because the role are required and after the role there's another thing which is a Content so what would be the content content is actually the message so it is also required so we can move on we can just copy the type required and we have the require we have uh we have the type string we have the required which is the true you can see now we have schema for the chats so the two main properties are the role and the content role is the assistant of the user the content is the message property of the user and after that the chats would be the schema so we can have the chats schema inside the array it means now the chats would be having the array of the chat schema inside that and that's how it's going to work and you can see the chat is not required the chats is not required because some users won't be having the chats over there and that's how it's going to work and after that the final thing that we want to do is now we want to export this as well so we can have the export we can have the default that should be equals to we can have the mongus we can have the model over there we can have the mongus model that should be we can have the user so now we have the user model for that and then we want to Prov the scheme as well so we can have the user schema so that's how it's going to work so now we have the new model we have the mongos start model that could be for the user and everything seems to be working perfectly fine over do and if you want to add some validations for the mongus do model so like suppose like in the next year applications what happens is sometimes it creates multiple instances of the mongus model so you can Pro the validation like you can the mongus do we can have the connections over there you have the connections or you can the mongos or we can the models over there the models SL we can have the user like that so if you have the mongus do models user then you don't need to create a new model but here inside the nodejs it doesn't create that it only have one single instance so there won't be an issue and after that you can see everything seems to be working fine over there now you have the mongus model of the user and now you will be having a new collection inside the database of/ users so everything seems to be working perfectly fine and now what we need to do so now again we can move back to the users controller and now we can close this as well the PowerPoint because now it will take some time to get back into the PowerPoint again now you can see now we have the get all users so now if suppose make a request to get all users now it means now we want to get all of the users now we want to find all of the users from the database it means now we can again run the try catch block over there so this is a very simple route so we can have the try catch block and inside the try now what do we want to do we can have the const we can have the users so that should be equals to the weight then we can have the user model we can just directly refer to the user model so that equ to the find so we have a function inside the mongus model which is the find so it works on the query so if we provide any query params if we provide any query inside the find then it will find out of the records matching that specific query but if we do not provide any query it will find all of the records from the database and it will give you all of that records so that's how it's going to work and we have an eror for the await because it's not an async function let's just make it as an async and after that now we have the users then you can see now we have the users over there and everything seems to be working fine now we can move on so we can have the return we can have the response so we want to define the variables as well the request response and the next as we did inside the initial application so the request is actually the request object it should be imported from the express the response also should be a response type object it should be imported from the express then we have the next function we have the next over there so we can have the next over there like that and that's how it's going to work and after that you can see now we have the users that should be equals to the await user. find and after that we can just move on we can have the return we can have the response or we can have the status over there that should be we can have the 200 which is okay then we can send the Json message over there we can send the Json over there so that's how we can send the Json response first we Define the status or status is optional if you want to Define then you can just directly refer to the Json you can Define the message like that you can have the message that could be we can okay then we can send all of the users like that so that's how it's going to work and if you get an error you can again send a customizer response for that you can just copy that over there you can just paste that over there you have the message we can have the error like that and then you have the users so instead of this you can send the error message like you can have the message error and then what you need to do you can have the cause over there cause and that should be we can have the error dot we can have the message over there so you uh so you have a message property inside the error so you will be getting the cause over there and now you can just log the error as well you can just log the complete error and that's how it's going to work so you can see this was our first API request for getting all of the users from the database and let's just test it out so we can move on to the postman we can create another collection over there we can just click on that we have a new collection so we can have the name of the collection that could be uh we can have the M AI we can have the chatbot over there m at chatbot and after that let's create another request click on that click on add a request so that would be a new request that would be get all we can have the users like that that would be a request of get all users and inside this we have a get type of request we can provide the parameters HTTP Local Host the port of 5,000 slash we can have the API slash we can have the V1 slash we can have with the users so instead of writing the Local Host 5000 API what we can do is we can make this as a variable we can have API V1 so we can make this as a variable I think we can make this like this so you can see now we have this set a variable so we can have the set a variable it means now we want to have the back end Base address we can have the back and Base address like that so we can have the Local Host 5,000 over there we can I think we can just copy full string over there like that 5,000 SL API 5,000 API then we can just click on create a variable that could be set a new variable the variable name could be we can have the backend base we can have URL like that backend base URL and we can have the scope as well or I think we can just Define the base URL over there the base URL and we can Define the scope that should be we can have the local inside just the collection of the money chatbot we can have the/ API SL we can have the V1 as well so that was my mistake because I didn't add the V1 over there so that was the values over there we have the API / V1 and after that we can just click on this save and now we can move on to get all users so now we have the base URL SL we can have the user over there SL we can have nothing because we don't have anything after the user so let's just click on the send and let's see what happens so you can see now we got something we got the message that is okay then we got the users as well which is an array but you can see we do not have any any value inside the array so because now you can see now we do not have any record inside the database and there you can see that's how it's going to work and you can see you got another lock statement which is you can see now you got the get and the and sorry the API end point was API /v/ user and then you can see the status of the requests was 200 and you can see the response the time it took for the response you can say it is just around so we have 323 milliseconds for that and you can say this is a unique number so it is coming via the Morgan package so we have added the Morgan over there if we move on to the app. TS so it is coming via this and that's how it's going to work so now everything seems to be working perfectly fine and now we need to move on to the next things so here we have created the very first request which is a get request and now we want to create another request of the user sign up so now let's create that request as well and that would be a post request so what we can do so here we can just write the user routes dot we can have the post over there because that's a post route and then the URL can be we can have slash we can have the sign up so it means/ user SL sign up and now we want to create the controller function as well again so we can move on to the users controllers and what we can do so we can just copy this and then we can just paste that over there and here instead of get all users it could be the user slash we can have the sign up we have the user sign up and after that again we can move on to the user routes and that could be we we can have the user sign up like this so everything seems to be working perfectly fine so now we have the user sign up request and if we will make the user sign up request then this function this controller function is going to be executed and now let's move on so in the user sign up what we will do so we'll send some data along with the request as well so we'll move on to the postman so from the postman we will be sending some body data along with the request because we need some data so for creating a new user we need need the user's email name and the password so we need that data directly from the client so what we can do so here we have the user sign up so here first we will get the data and how we can get the data so as you know that we'll be sending the data along with the body so we'll be sending the body and we'll be sending some raw Json along with the body so let me create another request for the Post sign up as well so let's move on so inside this you can just right click on that you can have the add requests and that could be you can rename that and you can rename you can have the new user or you can have the user like this you can have the user you can have the sign up like this so here we have the user sign up requests and now let's move on and this could be the post request so the URL should be the base URL for this should be the same like this API V1 and after that we'll be having the user slash we can have this sign up like that we have the user sign up like this so now we have this request and now we need to send some body data along with it so we can move on to the body we can click on the and then we can send some Json data along with it so inside the Json data we need to send the name of the user the name could be we can send my name as well like I will send my name like we can have the N we can have the Tani over there then we can send the email of the user as well so that could be the email like that and email should be we can have the anadani at theate we can have the test dot we can have the com then we can move on we can have the password as well so that could be the password password and it could be we can send any password like 1 2 3 4 5 so this is my password so we'll be sending these details by the postman or any client and now we want to get this data as well inside the back end and how we can get that so we are sending from the body so we need to extract that directly from the body so instead of get all users it means now we want to create the user sign up and this could be we can have the const we can destructure all of these properties like the name email and the password directly from the body of the request we can destructure this directly from the request. we can have the body and now inside the destructuring we can destructure the name the email the password directly from these things so we have the name email and the password and now what do we need to do so here we have three requests over there and now what do we need to do now we need to create a brand new user so for doing that so we can have the const we could have the user we can create a new instance so we can have the user that should be equals to a new user models instance so now we need to create the instance and we need to provide the fields that are required that could be the name that could be the email and that could be the password so we can send the password along with it but this is the same password that the user is sending so inside the back end we don't usually store these passwords which the user directly send so we don't store the same strings that we get directly from the front end so we encrypt the passwords and there are many security reasons that we should always encrypt the password before storing into the database so that if an employee so I'm giving you one example so suppose if an employee is working inside the database company so they can see everyone's password inside the database so before that inside the backend so back end has the responsibility to encrypt the password before storing it into the database so we have the password and for encrypting that password now what we will do so we'll use a package which is a bcrypt so we have already added that package inside the package.json so if you move on to the package.json you will find the BPT package over there we have the bcrypt and the bcrypt is used for encrypting the user string it so sorry it can be used to encrypt any string and then we can compare the string with the original string if that string same or not so let's encrypt the password before storing it directly into the database so we can have the import something from we can have the B Crypt over there and something that we need to use is uh we need to use us the hash so hash is used to Hash a password is used to encrypt a password and now we have the con new user and for before and before creating a new user what do we need to do so we can have the const we can have um we can have the hash password like this and that should be equals to what we need to do so we can have the hash over there that could be the hash and the first parameter that we need to provide would be the data and that could be a string or a buffer so we have the same string of the password we we can use the same string so we can have the password and inside the second parameter we need to provide the rounds like how many rounds they are used with the encryption so as many rounds as you provide here the more encrypted password you will get so here we need to provide here the 10 because now this is are default rounds as well so you can provide any number of rounds so it has some techniques to generate the hash password with the rounds and now we have the hash and that's a promise so we need to await for this task as well so we have here the await over there and instead of storing the same password directly receiving from the user we can just store your the hashed password as well we have the hashed password and that's our it's going to work and after that the new instance of the user would be created and now the final thing that we want to do is we want to move on we can have the a wait we can have the user do we can have the save so now we want to save the user so for creating and for saving a new record inside the database we use the user do we can have the save over there to save a record and after after that we have the return statement as well so inside the return statement we have the message okay and then we can send the brand new user or we can send the email of the user we can or what we can do we can send the ID of the user like we can have the ID that should be we can have the user do we can have the ID like this we can have the underscore uh we can have the underscore ID of the user and Dot we can have the two string over there because the ID is in I think the object ID format so before uh directly giving the response to the front end we should use the two string to convert that into a string and now let's move on so now we have these three Fields the name email and the password and everything seems to be working perfectly fine so now let's wait till the database is connected and let's move on to the postman once again so the server open and database is connected and now we can move on to the postman let's just click on send so let's see what happens so there you can see now we have the ID there so you can see now we have the ID it means now the user is already created in inside the database and everything seems to be working perfectly fine and now let's move on to the get all users so let's see that what is happening over there so if we just make a new request to the get all users so now we should be receiving one user yes so here we are receiving a new user we have the side of the user 650 or anything we have the name email and the password and you can see this is the password which the BP has generated so that's how it creates the encryption of the passwords so now the user has signed up successfully and there you can see now we have a post request as well we have the 200 and everything seems to be working perfectly fine but there you can see now before sending all of these fields to the database so we should have some uh so we should have some validation checks as well so suppose if the name was empty so suppose if the email was not exactly the email or it was the incorrect string or if the password was not following the length of the password like the modern password should have around six num should have the length of around six so if they do not follow all of the validations then it would could create some errors inside the database so what we need to do so before coming to the user signup function so we could add another middle whe inside the user routes inside this request so before directly jumping into the user signup request we should have the validation check of the data so that would be our approach so we'll be using the concept of the middle WS to do that so that would be a middle W for checking the data validation that will send directly from the front end and before doing that I want to introduce you to a topic which is a middle W so what are the middle wers so the middle WS are just a functions and they get executed before a request is processed so between the request and the response it acts as a bridge between them to modify request to modify response into them and inside the node and the express so middle can be used to check the Json Vol validations the tokens or sending some cookie validations directly from the front end the parms of the the request because we are using the rest API there can be the data validation checks and more according to the requirements so how the middle work so let's move on to the paint and let's just identify so here suppose that's a request oh sorry there should be the square box so suppose it's a request that the user is sending directly from the front end so this is a client so let's move on so that's a client over there and the client is sending some requests along with some data and now it sends a new request to the backend so suppose it is sending a new request to the back end so I'm not using any illustrations over there so this is just the normal pin tool and now suppose that's a backend right so this is a back end and the client communicates to the back end and the back end communicates to the database so that's how the structure works and now let's move on so inside the back end suppose the client sends a sign up request so it's sign up and inside this sign up we'll be sending some data along with it so there there could be some data like there can be the name email and the password because it is there inside the signup and before moving on directly into the database and store that data we should add we should add another middle in which we need to verify the data like this can be the middle function in which first we need to verify all of the data so we can again move on we can have a verify all data before just moving on and before just saving the record of the user and then let's move on and and then let's create another middle W so there can be another middle W in which the user should be stored inside the database so let's move on so there can be another middleware over there so that could be the final middle ware in which now we want to store the user inside the database so let's move on let and that could be uh we can have the final middle ra to store users information we can have the users info like this so we can have the users info like that so we need to store the final users information into that and that's how it's going to work so first if it will move on to this so I'm using a pencil so first the client makes a request to the back end so first the request would be moved on to verify all data right so the request would be moved on to verify all data and if the verification is successful of the user then only it will be moved on to the next middle W and if the validation was wrong if there was some errors during the data inside the data then it will just move back to the client and it will send them that the data is incorrect and you need to send the exact data that we required so that's how it's going to work if the data is not correct and if the data is correct then we'll move on to the final middleware function to store the information of the user so this is the concept of the middleware and you can take the screenshot of it as well because this could help you if you do not come about the middle inside any application so inside web development this is a concept of the middle W so whether it's any framework like the node it can be the C as well ASP as well Java as well so this is only the concept of the middle WS so let's move on so now let's use the middle WS for the data validation checks and now let's move on so we will be using the express valid dat package for using the middle and this has a set of Express GS metal WS that wraps the extensive collection of validators and sanitizers offered by the Val data.js so it adds some middleware between the request and the response that we can use so it has already included in our package so now let's use it and now let's move on so we'll be having the validation chains and we'll be having a customized validator function so we'll be having the validation chain inside the validation chains we'll be having multiple validations like if there is a sign up request then we need to verify the email we need to verify the name of the user we need to verify the password so there are three functions that we need to verify name and the password and then there could be the final validator function so it will check all of those validations and if there was something wrong during the validation check then it will just send back the response to the client that there was something wrong with the data and it will send the exact error message as well and if everything was successful then we'll be moved on to the final function then we'll be moved on to the final middleware function to execute and to store the users information so let's move on uh so what we can do so inside the utils let's create another file that can be we can have the validators do we can have the TS so that's a validators dots and here first what we can do so we can Define some validators for the sign up so we can have the con we can have the sign up valid data like that sign up valid data so that could be an array so inside the array now we want to store a couple of validation checks so inside the sign up validator there can be three fields that are required the first would would be we can have the body we can import the body directly from the Express validator and the body should contain the name right so a name is a required field so it should contain the name so then we can have the name do we can have the not empty like that it should not be empty and then what we can do then we can have the required like this so we can have is required I think so if it is not empty so I think required B like that uh let's check that so I think the required is not there so I think the not empty would work perfectly fine so name should not be empty and then let's move on so we can add the uh response message as well if the name was empty then we can have the function which is with message we can part A customize error message if the name field was empty we can have the name is required like this so this is our first function of the body then we can use that two more times for the email and the password so we can have the email then then we can have the password over there like that that could be the password like that and inside the email we can first trim the record of the email we can trim we can remove the white spaces from both uh front and the back from both front and the rear and then we have the trim then what we can use so after the trim we can just use your is email like this so we can have the is email so it will verify if the email was actually the email or not and then we can again use the with message over there like this so so we can finally again move on we can have a width message like that we can have the width message and after that we can have the email is required so we can have the email is required then the same should be used for the password so first what we can use so we can again use the triam over there and then we can use another function that could be we can have the is length something we can have the is length so it will verify if the password has the desired length or not so we can have the minimum so we can provide the minimum length to the password and that could be somewhere around six so if the password length was not matched then we'll be having the error inside the response then we'll send back the same response to the client so we have the with message over there then we can have the password should contain at least six character so we can have this string over there and that's how it's going to work so now we have defined the validator function and everything seems to be working perfectly fine but now we need to see that how we can verify these functions how we can verify so we can create our customized function we can create a customized validator function in which we will verify all of these details so what we can do so we can have a function we can have the cons we can have the validate over there like this valid date and that could be equals to we can have the arrow function over there that could be the arrow function it should not be the sync so we have the Val so we have the validation function over there and inside the params we need to get the signup validator we need to get all of the these validators whether it's a sign up or there can be multiple validators over there so we can have the validations like this so we can have the validations and the type for this is already defined inside the express validator the type is the validation chain like this so we have the type of the validation chain and that could also be the validation chain over there and that could be this function and now it would be an array of the validation chains because these are the chains and now let's move on so you know that the validate function so all of the metal wheels inside the express are required and they should have the request response and the next inside that so how we can do that so here we want to return a new asynchronous function we can have the return aing we can have the function over there Arrow function that could have the request and the request could be the same request format that are required from the express then we can have the response the response should be what we can do response can have the response directly from we can have the express JS and then we'll be having the next function as well which is used to move on to the next middle will we can have the next function over there and that's how it's going to work and that could be an aror function over there and now inside this now what do we want to do so here we need to run a loop so we'll be running a loop over there in which we will verify all of these conditions we'll verify all of these conditions and if there was an error then we'll send back the same error to the client so let's move on so here we can have the for Loop over there directly we can have the cons we can have the validation like that we can the validation or we can have the validations like that validation of validations and then we can move on so what we can do so we can have the await over there or what we can do we can verify the conditions from here as well we can have the const we can have the result and that should be equals to we can have thewait then we can have the validation so we can have this validation function validation like that dot we can have the Run we have a function of the run to run a validation and this should have the request so we have the request inside the validator of the express so we'll so inside the middleware of the express we have the request as well we need to send the same request over there that we received directly from the client and it's an um it's a promise so we should wait for this task as well so that's why we have used your wait over there and now let's move on so then we can check another Val check that could be very simple like if we have the result we can have the errors like that I think they have removed the property so what we can do instead so we can remove the result property as well or we can have directly the errors like we can have the if we can have the result like that dot we can have I think uh we can have the is empty so result means this time the errors so if the result do errors are not empty then what we can do then we can break the loop so that's what we need to do for this for Loop and after that now what do we want to do so after the for Loop now we will verify if there was an error or not so if there would be error so it will automatically break the loop and now let's move on so here now what do we want to do so we can have the cons we can have the errors so that should be equals to we can have the validation we can have the result so this is defined inside the express validator the validation result so this is the final result of the validations so it will give you the property of the errors so we need to provide the request as well here so that could be the request and now the final thing that we want to verify is if there was the errors then we don't need to move on to next middle Ware and if there was no any error then we need to move on to next middleware function which could be the final middle W to store some data let's move on so we can have if we can have the errors like this if the errors to we can have S uh what we can do we can have the is errors do is empty it means everything was working fine then we can move on to next middleware function so here the next means that we want to move on to next middle that could be this final user signup function and now let's move on so if there was some errors if we do not pass this validation check then we can move on then we can have the response do we can have the status over there that could be we can have the 422 which is unprocessable entity it means that data cannot be processed further then we can have the Json over there we can send the errors directly we can send the errors and that could be we can have the errors to we can convert them to the array so that's how it's going to work and we need to return that as well we need to return this response so that's how these things going of work so that is the final validate function and now let's move on to the user route and here inside this so inside the sign up first we need to add this we have the valed function we can have the validate function directly from the validators and then what we want to validate is the validation chain we can have the sign up validator we can have the sign up validator for that and that's how it's going to work so now you can see everything seems to be working perfectly fine and now let's move on so suppose from the postman if we move on to the user sign up once again so suppose that's not an email right so we have added that validation check over there inside the validators like if this was a email or not is email so let's move on so suppose this is a normal string I remove the adate and.com over there let's just click on the send and let's see what happens so there you can see now we got the errors array you can see we got the status as well we have the erors you can see the type of the field we have the value andani and you have the message that email is required you can see everything seems to be working perfectly fine over there and everything seems to be working fine you can see and now you can see the minimum length of the password is six so suppose we send the five characters if we click on the send so now you can see now with the password should contain at least six characters so everything seems to be working perfectly fine over there so let's create another record as well so that could be name we can have the James Marshall like that we have the James Marshall and the M should be Capital then we can have the email we can have the James test.com we can have the password of 1 2 3 4 5 6 so let's just click on the send so now the new user should be created and here we have the ID of the user and everything seems to be working perfectly fine and another thing that I just noticed is now we can move on to the controllers and if we create a new user then the status should be the 2011 so that is the status of the created it should be 2011 like that and everything seems to be working fine so now we have completed the sign up request and now we need to move on to the login function as well so let's move on to the user routes let's create the similar type of request for the user router do post that could be we can have the login we have the validate and this time there could be different functions for the validator let's just copy and let's just paste before that and I will and I will tell you about this that why before that so that could be we can have the login we can have the Valor so now you can see inside the login and inside the sign up so you can see the email and the password as similar Fields so right the email and the password are similar Fields inside both login and inside the signup so what we can do so inside the login what we can do we can remove the name directly from here right we can remove the name and from this sign up we can remove the both email and the password right and before the and after the name now what we can do so we can just use the login validator right so because the login validator is just the array of the validation functions so now what we have so inside the sign up we have the name then we have the email then we have the password and that's how it's going to work and now let's move on to the users controller so here let's move on to the user routes once again so now it could be we can have the login valid dat like that and let's move on to the user sign up again so inside this now what do we need to do so let's create another request for the user login so it could be we can have the user login like that and here now what do we need to do so that's a sign up it could be user we can have the login and here there could be different fields we don't need the name over there and the the things would be different so let's just remove all of that and let's just see what happens we can Rec commend this out as well and after we get the email and the password directly from this let's move on and here now what we want to do so first we need to find the user by its email so let's have this vage and check we can have the con we can have the existing user like that or we can have directly the user property we can have the const user that could be we can have the weight then we can have the user do we can have the find one we can find one user of the record and then what we can do we can send the filter over there we can send the filter of the email that this email should match this email we want to find one user that this email should match this email and after creating this so I have one thing in my mind so let's move on to the user sign up so before creating a brand new user we need to also verify if there was a same email inside the database if there was a same user inside the database with the same email so let's move on so before even creating the hash password let's move on so we can have the cons we can have the user we can have the existing user like this so that could be equals to the await then we can have the user so we can find a user again we can you have a find one of the user then what we can do so we can again provide the email so that's our is going to work so now we have the find one of the email and then we'll verify if we have the existing user then it means now the user is already there with the same email then we can again send the response to we can have the status that could be we can have have around 401 which is unauthorized then we can send the Json or we can just directly use the send function that we can have the user already register we can send this validation check so I missed this thing so now we have added that and everything should work perfectly fine now and now what do we want to do so here first we'll verify the user we need to verify if the user is there or not so if there was the user we can verify if there was no user then we want to send the return message we can have the response dot status that could be 401 dot we can send here the send over there and then we can have the user not we can have the register like that and now we have the user right now we have the validation if we don't have the user then we'll be sending this response message but what if and what after that when we have the user now we want to verify the password of the user for the authentication purposes now we want to verify the password but let's move on so how can we do that so from the bcrypt we have a function of the compare as well so we cannot directly decrypt the password of the user and then we can verify because it requires a lot a lot of calculations so either what we can do so compare is very easy so we can compare the password with the actual string so let's move on so we can have the cons we can have the is password correct and that should be equals to we can add the a wait then we can have what was the function name so it was a compare so we can have the we that should be we can have the compare over there and inside the compare we need to provide the data which is the string which is the actual string so actual string is the password and then the thing that we want to compare is with the encrypted string so from the encrypted string now we want to verify encrypted string is there directly inside the user object we have the user dot we can have the password over there so that's how it's going to work so this will give you a Boolean value you you can see the Promise resolved with a Boolean and then we'll verify that if the password was correct or not let's move on so we can have if we can have is password correct we can have if the password was not correct then what we can do we can have the return response we can have the status that could be and that could be we the 403 which is forbidden then we can send a new message we can have the send and inside this we can have the incorrect password like this we have the incorrect password and that's how it's going to work and after that now what do we want to do so once the password is correct once everything is fine then it means now the user has successfully authenticated so let's move on so after that now what do you want to do so after the password is verified after the user's email is verified then we know that the user is the actual user then we can send the response. status of that should be 200 we can send the message of the okay then we can send the the ID of the user and that's how it's going to work so let's just try this login function so you can see we created this signup request over there the James Marshall James test.com with the email with the password let's move on let's create another request over there let's click on ADD request that could be we can have a a login and I will share you the postman collection as well don't worry so here we have the user login we can move on to the body inside the raw inside the Json now we want to provide the fields like the email and the password we can copy from this we can paste that directly inside the login over there so we have the email and the password and now we want to send the URL as well so the URL could be again we can copy that we can paste and instead of the sign up that could be the login and the request is the post so let's just try it out let's just click on this end so let's see what happens so now we have a message so why this message is coming so let's move on to the user routes so there you can see that is an error because here you can see the user is already there the email is already there so we cannot create this user so you can see what we can do so instead of the user sign up that could be we can have the user login I made another mistake with that so this could be the user login over there now let's move on let's just try it out once again click on the send so now you can see message we have the okay it means everything is working perfectly fine and there you can see if the password was incorrect if we send another string over there like the one so let's just try it out clicking on the send so you can see now we got the message like incorrect password and everything seems to be working perfectly fine over there you can see now everything is working fine so with this stab you can see now we have completed the basic user authentication system with the mon stack we have created the sign up request the login requests and everything seems to be working perfectly fine so this was the basic things of creating the some requests of the authentication of the user user management now we want to move on to the authentication right now we want to move on to the authentication systems like now after the user has logged in or the sign up then we want to generate a token for the user a token can be the ID card for the user to show something to access some resource so let's move on and let's just understand that and now let's learn that how we can authenticate the user inside this application so let's learn that what exactly is the authentication first so what is the user authentication as you know the user authentication is a step in which the user needs to verify their identity so user needs to verify their identity and user can verify the identity by providing the same credentials that the user used during the registration process and for this application as well the user needs to provide the email and the password and if the email and the password are correct it means the user is successfully authenticated and everything should work perfectly fine but what after the authentication so authentication is just step one of the user authentication so there a complete package of the authentication so providing the email and the password is just a very first and very simple step of creating the authentication but now there will be another step in which the user would be provided a token so suppose you joined a company right so you joined a company you correct the interview and now you joined a company so after joining a company you will be provided an ID card right so suppose you are the suppose you are a database developer so you have provided the ID card and after that you will be allocated a seat and now you want to show the ID card at the time of sitting into a seat so for accessing the resource you need to provide the ID card and the security guard will verify if you are entitled to sit in that seat and you need to show the ID card to the security guard and if you are accessed and if you're entitled to access a particular resource it means now you are authorized so now we want to move on to the process of authorization so the user will be provided a token after the authentication process and here comes a new chapter of the authorization now after the user needs to sit on their bench now user needs to show their ID card which has provided so in this application we'll be using the token so to access a resource the user needs to show a token that was sent during the authentication so this ensures that the user is entitled to a source so that's the complete package of the authentication and authorization so once the user authenticates he's provided token and now to access a resource the user needs to show the same token that was sent during authentication so this ensures and this means now the user is entitled to a particular resource that can be protected or a particular resource and in this application so we have a chat based application so for sending and for accessing any chat the user needs to show back the user needs to send back the same token that was provided to the user and now we need to provide the token so we'll be using the JWT so JWT is a library it's exactly the library which is built by the ozero so JWT means the Json web token so there's a token which has the Json encrypted data into it so it is used to encrypt a payload into a signed token so there's a signed token in which all of your payload would be converted into a signed string that has the permissions or authorities or some data of the user so in this application we'll be having a different requirements like we can send the ID the email the permissions or authorities of the user so we'll be using that but how we need to send the token to the user so we'll be sending the token to the user with the help of the HTTP only cookies so HTTP only cookies are a type of web cookie that comes with a special security attribute so they are same like the web cookies so you can move on to the browser application tab to see all of these cookies but the HTTP only cookies comes with a special security attribute that restricts the cookies from being accessed by the JavaScript so you cannot access those cookies by the JavaScript code inside the web browsers and this prevents the xss attacks as well so what are these attacks so suppose you have a form inside a web application so suppose there's a hacker and it moves on into your form and it enters Some Like It enters some script into your form so that string would be then validated by the JavaScript so the JavaScript doesn't have full security so it gets validated by the JavaScript so suppose the hacker add the alert statement so then you will be seeing an alert statement on the top of the window through the form and that's how if the user or like if the attacker can show the alert they can also steal your JWT token from the cookies so that's why we use the HTTP only cookies so these are not visible by the JavaScript so these are only enabled by the exos with credentials property so once we make the HTTP request so these cookies are automatically sent to the backend and once the backend receives the cookie it will validate the cookie like it will validate if the token was valid or not and that's how we can prevent this attacks and that's how we can create the fully authenticated and authorized application so let's move on and let's just Implement all of that so if I want to summarize that what exactly will be happening so this is the authentication process the user would be authenticated and then he would be provided a token right so we'll be having the token with the HTTP only cookies so these are the signed cookies and then the user would be provided the HTTP only signed cookie along with the jwd token so we'll send the exess token directly in the form of cookies and then the user would be having those cookies now the user have the cookies and the user have the token inside the cookie and and now let's see that how to access the protected resource over there and to access a particular resource or a protected resource so the user send back the same cookie and then we verify like if and then we verify like if the cookie matches and if the token is validated or we can check if the Cookie doesn't matches or if the token is invalid and on the basis of that we'll be moved on and we'll provide and process the request and that's how the authentication design works so user needs to send back those cookies and if the token is valid then we'll process the request for further requirements suppose like sending the chat to the user but if the token was not valid if the token was expired or if the Cookie doesn't match then what do we need to do so we need to the operation of the user so that's how it's going to work and now we want to implement that as well so let's move on and let's just Implement that so here after the user is logged in then we want to send those cookies and then we want to send the jwd data inside the cookies let's move on and let's just create a new file inside this inside the utils so we can move on into I think inside the utils folder and then we can create a new file that could be we can have the token we can have the manager dot we can have the TS so we have this file over there which will manage all of the tokens so here we'll create a function that will create a token from the data so let's move on so we can have the export we can have the create we can have the token over there so that should be equals to a function and inste this we'll be requiring the ID of the user we can have the ID that should be in the form of the string we can have the email that should also be in the form of the string and then we'll be having another property which is expires in so after how much duration the token would be expired so we can have the expires we can have the inov there and that would be a normal Arrow function so this is a normal Arrow function then we can create a new token so first we need to get this data the ID and the email so what we can do so we can have the cons we can the payload over there so that could be an object and the object can have the ID the object can have the email and after that let's move on so after that we need to move on so we can have the cons we can have the token so now we want to create a new token so con token would be equals to now we want to use the jwd package so it's already there if you have followed my tutorial so let's move on to the top we can import JWT directly from we can have the Json web token and then now what do we want to do so here we can have the JWT Json web token dot we can have the sign so now we want to sign a token and we want to send the payload so payload that could be we can have the object so here the payload would also be required so we have already declared the payload so that could be a payload and now we want to move on so after the payload the second parameter that we want to Define is the secret key so there's a key required inside the hashing algorithms so now the secret key should be there to sign a token to encrypt a token so secret key is like a private key which is used to encrypt something so we'll be using that secret over there so we need to move on to the environment and here you can see you can already see the JWT secret so we need to provide the secret over there so the secret can be any string like that so it can be any string so this is my JWT secret and this should not be shareed to anyone because if anyone has your JWT secret it means now they can access your payload data over there now you have the payload data and inside the second parameter you can provide the process over there so inside the second parameter you can again use process do we can again use the environment over there process. environment do we can have the JWT underscore we can have the secret now you have the JWT secret and at the time of verifying the token as well still you need the same secret which was used during encryption because only one private key can be used to encrypt and decrypt something and then inside third parameter there are some options that we want to provide so third option that we have so the main option that we want to provide is expires in so after how much duration the the token would be expired so it can be any string so if you hover over the expir thing you can see you can provide like suppose that can be 2 days 10 hours or 7 days so the chat gbt how the chat gbt works so it moves on and it expires in 7 days so we can provide the same validity we can have the seven days and after the 7 Days the token would be expired and that's how it's going to work so now we have the token and now the final thing that we want to do is now we want to return the token over there so now we have the token inside the string you you can see now we the token as the string now we can just directly move on to the users controller over there right and here now what do we want to do so here we need to follow process so after the password was correct then what we can do we can just create a new token over there so we can have the cons we can have the token over there so that should be equals to what we can do we can have the create token we can use the create token we can provide data so like we can have the ID we can provide the ID of the user that could be the user dot we can have the ID over there like we can have the underscore ID dot we can have the to string over there and after that the second property that want to provide is the email of the user so we can have the user dot we can have the email property then inside the third parameter we need to provide the 7D so that could be the 7D over there so now let's move on to the create token so here you can see we haven't used the expir in so that could be the expires in only like that and I showed you just for the example so now we have the expir in and everything should work perfectly fine over there and it is of type of this string over there let's move on to the users controller so now we have the token inside this format inside the string now the final thing that we want to do is very very simple and now we want to send the token in the form of cookies so that's how it's going to work so let's move on so here you can see after we have the token over there we want to use a cookie and how we can set the cookies directly from the back end to front end we need to use a package which is a cookie passer so it is already there inside the package.json so cookie passer is used to send the cookies from the back end to the front end let's move on to the appts which is the main file and here we want to add the middleware for using the cookies as well so after the express. Json we can have the app dot we can have the use so that should be equals to we can have the cookie passo so here you can see now we have the cooki passord and here you can see now we want to provide the secret key as well for the Ki so we can use the secret key again we can move on to the environment we can provide the secret key of the cookie that could be again any secret that we want to provide so here we have the cookie secret now we want to provide the secret to this as well we can have the process do environment dot we can have the cookies secret over there we have the cookie secret and now you can see now we have the cookie secret as well and everything seems to be working perfectly fine over there like this now we have the cookie secret and now we want to move on again to the users controller and now to send the cookie to send the cookie from the back end to front end we use the response variable we can have the response and in set the response we have the cookie over there we have the response. cookie to set the cookie right and now we want to provide the name of the cookie name can be we can have the O we can have the token over there we can have the Au token and then inside the second parameter we need to provide the value so value could be the same token that we have so value should be the token so if you just use the respon cookie now what will happen is the cookie would be created inside the browser and then we want to provide some options object as well so inside the third parameter there are the options that we want to provide so first parameter that is we want to provide the path so where could be the cookie stored so the path should be weaken of the slash so inside the root directory of the cookies we want to show the cookies then we can move on the second parameter could be weaken of the domain so as of now we are working inside the Local Host so we'll be using the Local Host over there like this we can have the local we can have the host because our front end would also be there inside the local host for now but if you deploy this application then this could be your domain like suppose that can be my domain like indian.in that could be a domain and now let's move on let's provide the third parameter which is the expires so when the cookie would be expired so we so you can see the token validation is around 7 days so cookie should have same type of validation so let's create a validation for the 7 Days let's create the time for that so we can have the const so we can have the const we can have the expires that could be equal to the new date then we can have the expires to we can have the set date and that should be equals to first we need to grab the current date so we can have the expires to we can have the get date like this expires. get date after that we can use plus 7even so after this date plus 7 days now we'll be having the expires property and the same property could be used here instead of the expires over there inside the expires and that's how it's going to work and after that we need to add the HTTP on flag so we can have the HTTP only that could be equals to again that could be the true then we can use the signed as well so one so now we want to sign the cookie as well so we can sign the whole cookie so we can have the sign that should be equals to the true so the sign would again reencrypt the cookie inside the sign format so now we have this cookie and everything should work perfectly fine this time and now what do we want to do as the next step so after creating these cookies so now once the user moves to the login now we want to remove the cookies of the user as well so suppose if the user logs in again so now first we want to remove the previous cookies of the user and then we want to set the current cookie so for that we can have the response or we can have the clear cookie like this we can provide the name of the cookie we can have the name like this we can have the JWT we can have the aut token over there and we should store these names inside the constant so we can move on to the util let's create a new file that could we can have the constants like that that could be constants TS so that could be equals to con we have your cookie we can have the name over there we have the cookie name that should be equals to we can have the Au token like that and we should export that as well we have the export con of the cookie name so now let's move on so we have the users controller now that should be equals to the sponsor. cookie we can have the cookie name over there like that we have the cookie name and the same should be used here as well inside the token it should be the cookie as well we have the cookie name and now that's how it's going to work and that's how it's going to work now we have the clear cookie and and here we need to provide additional step as well and the additional step that we want to provide here that could be we can move on we can have the HTTP only that should be again equals to the true then we can move on we can have the domain that should be again we can just use some same properties like that we can use same properties like the domain and these things over there we can use these things over there like this so we have the HTTP only true expir is not required the domain and the local host and the sign are required and we want to part the path as well so we can have the path that should be equals to slash so it will clear the cookie of the response of the user and that's how it's going to work and after that now what do we want to do so we want to do same thing once the user signs up as well we can copy and then we can paste that here as well after the user has been saved and that's how it's going to work over there we can add the comment as well we can have the store we can have the create token and store cookie so we can have this code over there and that's how it's going to work over there you can see this was very simple for creating this cookies and that's how it works inside the modern application and inside this application we are not required to use the refresh token as well because here the cookie can be stored for 7 days and after 7 Days the user needs to relog in and that's how it works so now let's try it out in the postman as well well so in the postman the cookies can be visible but only in the browsers you can see those cookies that the cookies are being set or not so after this Postman testing of this login function now we'll be moving on to the front end so now before doing anything else now we want to move on to the front end and now we want to design the login system of the front end as well so let's move on so here we have the James test.com let's just click on the send and after that you can see the message is we can have the okay but inside the cookies we have one parameter you can see now we have the O token over there we have the O token we have the value so you can see this is the value of the token you can see that was our token over there you can see it is encrypted in a string we have the domain of the Local Host we have the path of the slash we have the expires as well you can see current date is 15th of September and it will be expired in Friday 22 September hi everyone and welcome back so now we have completed the login controllers the signup controllers over there you can see now the authentication functionality is working fine and we have tested that in the postman as well and now before moving directly into the back end into the chats and all we want to create the front end as well in which first we'll be having the login system so that the user can be logged in and then we'll dive into the chat B into the chat GPT apis so let's move on so here we have the back end folder now what we can do so first we can move on to the terminal and we can stop this terminal over there you can press controll C on your system and command C on the Mac OS and now you can move on you can create a new folder that could be for the front end over there so we can have the front end and after that we can have the CD into we can have the two dots over there to move back to the root directory then we can have the CD change directory and it should be to the front end and after that we can just move on and we can initialize a new react application and for using the react application here what we will do so we'll move on and we'll use the V so this time we'll be using the V over there and you can also use the plane react as well the next JS as well but here the V is super preferred for our application so that's why I will be using the V so after that we need to move on and we can click on the get started and it is completely fast as compared to the normal react or the nextjs application so wheat is very fast so that's why I have chosen the wheat for this application so we can click on get started and after that we want to create a new vat application so you can use pnpm Yan or the npm so I'm using the npm over there so what we can do we can copy this command then we can move on to the application or what we can do so we can delete the front end folder directly from this and we can just create the front end application directly from the whe so we can again move back to the root directory and then we can run the command of the uh npm we can paste that command as well we can paste that command so npm create V at theate latest we can hit enter and after that it will ask you a couple of questions as well like what's your project name and here we can provide the front end so now we can hit enter after that we need to select the template that we'll be using so we'll be using the react so we can hit on the react now we can choose any framework as well so both typescript and the JavaScript are preferred so in this application we can use the typescript as well and the S swc is the latest in which we'll be having the F reloading so we can hit on the typescript plus s swc and then after that now we can move on and then again we can move on to CD into the front end and now we can just install all of these dependencies and as compared to the next JS of the react it um what happens is it has very less dependencies to work with so you can see now inside this you have a very less dependencies as compared to react you can see you only have the react and the react Dom inside that and now let's move on so we can have the npm install to install all these dependencies on our end and now let's wait till it install all that and that we can get the overview of this app U so till then we can get some overview as well of the front end so in the public directory we can uh provide some or we can locate some assets which are publicly available that could be some logos that could be some images audio files video files over there then we have the source directory in which we'll be having our code files we can have the assets so in the assets you can also use some images which are not publicly available but you can use some assets like SVG icons or you can have the normal assets then you can have the CSS file for a component you can see you have the app. TSX which is the main file over there and here you can see what you have so you are just using the state you have the count variable over there and you can see this is a boiler plate then we can move on to the index. CSS here are some root stylings over there and we can directly move on to the main so this is the entry point of your application of your V application and from this application you create the root and if you are coming from normal create react app or the nextjs so this is a main app file so in the app router we have the page. T6 the main page and inside the normal react application with the create react app template it is the index. TS file which is renamed as the main and from here we are rendering the app component and now let's move on so here we have the app component and you have some environment files over there and you can see now we have the es link file which allows you for the linting purposes sometimes there are vulnerab Le in your code so it fixes all of them and we have the G ignore file in which once we will publish our application to the GitHub so once we will push all of our code so this will just ignore all of these files that could be some log files some non modules some disc folder of the build up application there can be some envirment files as well so it just ignores all of these files and it doesn't include these files over there and all of the files except this will be pushed to the GitHub then we have the HTML file in which we have the div ID equals to the root and where all of your react application converts to the JavaScript and then inject it into the root and there you can see now we have the package.json which contains some information about our application that could be some commands like there would be a Dev command there would be the build command there would be the L printing the preview and all then you have the readme file which contains the readme of your application you can also change the readme as well then you have the configuration for the typescript so here you have some configurations over there for the typescript and there we have the TS config node over there for running some backend quote over there because it is made on the Node envirment then we have the V configuration file as well in which there are some configurations to run the react over there and now the packages are now installed and now we can move back to our application so now we can run this application as well we can run the command of the npm we can have the Run we can have the dev to open the development server and there you can see in just 235 milliseconds now your development server is open and it is open on the Local Host Port of 5173 so we can control and click on that and there you can see now we have the vend react application ready and there you can see it is very fast as compared to the nextjs and the react and now let's move on so here we have the ball plate code we can mutate the ball plate code code as well we can move on to the app. TSX we can remove everything from it so we can just remove the full fragment over there we can just render here the main over there like this we can have the main and inside that we can render the hello world over there to have this starting project for us now we can remove the state variables as well we can remove all of these variables because these are not required in our application so let's save all of that and let's move on to the application you can see now we have the hello world but maybe there are some CSS Styles over there uh you can see inside the index. CSS you have some CSS Styles so you can remove all of these Styles and then what you can do so you can provide the HTML over there you can have the HTML and you can have the body and inside that what you can do is you can just provide the margin that should be equals to we can have the zero like this so there you can see now you do not have any Styles overridden into that and after that we need a different font family for this application so what we can do so we can move on to the Google fonts over there so we can move on to the Google fonts and from there we can search some fonts like what we can do so first you can move on to the fonts and then you can just search for the Roboto slab over there so we have the Roboto slab and then we need this Styles over there we can choose the styles of around 300 400 500 600 and we can have the 800 so they are already there and then what we can do so we can move on we can have the work sense as well so we can have the work uh we can have the sense over there so this is also great font for us so we can choose them and we need the 400 for the work sense and that's how it's going to work and I think we can use the normal 400 with that so we have the regular 400 we can click on that and after that you can see after you click on that then you will be seeing the use on web and then you can select the import over there and then you need to copy the full import statement you can copy the import statement and then you can move back to your application CSS file the root CSS file then at the top of your CSS file then you need to paste that and there you can see that's how it's going to work and I think the uh I think the swap is there for this so maybe something was wrong with that display equals to swap maybe it's okay and now let's move on so inside the root CSS file now we can provide some more classes like that so we have the margin zero we can the padding that should be we can have the Zero from all sides we can have a different background for our application that should be we can have the 0 51 01 C we have a darkish background for our application we can have the color of the text and all of the components that should be the white we can have the font family the default font family for our application could be we can have Roboto slap or we can have the siif if we do not find that so that's how it's going to work over there and now let's move on so there you can see now what we need to do so now if we move on to the application once again you can see now we have the hello world and we have a different font family for us so let's move on let's just select this element you can see now we have the font family of the Roboto and that's how it's going to work over there and after that now we want to install a couple of dependencies as well that we'll be using so for styling this application we'll be using the material UI so we can move on to the mui docomo and library for with the react for with the GSX so we can use these components so you can see there are a couple of components that are completely free to use and if you write these components directly from scratch it will cost you a lot of time you can see there are some accordian components the temperature range you can have these buttons layouts and all of the things so you can say it has a great design library and it is the most preferred react Library anywhere in the world you can see all of the major companies are using that as well we can click on the get started and then you can just move on to the installation and after that now what do we need to do so you need to move on you need to copy this command over there you can paste that here so you can stop this terminal for a couple of minutes you can add these dependencies over there and after the material UI after the styling then we need the icons as well so for the icons we'll be using the react icons over there so here we have the react icons so we can copy this over there so we only need the name of the react icons that's it we can paste that here and after the react icons now we can move on so we need the routing functionality as well so we'll be using the react router Dom for the routing we can move on and the current version is 6.16 so you can use that and after that now I think the current version is 6.4 now let's use that so what we need to do so we can just have the react router that should be we can have the Dom we so here we have the react router Dom and I think we need some notifications as well within this application so that should be we can have the react hot toast so that's a lab ready for the notifications so you can move on to their website and there you can see there are two options so if you click on make me a toast you can see you will be having this type of notifications as well so let's move on and let's just use all of that so here you can see this is the name of the package react H toast then you need to enter that as well so there you can see there are a couple of styles over there there are a couple of dependencies that we'll be using so now we need to hit enter and after that now let's move on so now let's move on to the main. txx and have some like a couple of theming as well for the material UI so let's move on let's create a new theme for our material UI so we can have the cons we can have the theme and you can use the pre- default theme of the material UI as well it doesn't matter now you now oh sorry here we'll be creating our round customized theme so we can have the create theme so we need to use the create theme directly from uh imported from the material and here we only want to use a theme for the typography so we can have the typography over there and inside that inside we can use the font family and that should be we can have the Roboto slab over there and after that we'll be using the siif as well after that if we do not find that so we can have this s and after that we have multiple variants for the typography and for all of these variants so we can use a color and that should be we can have the white over there so we have a white color for all of these variants and now we have the customized theme for the material UI uh and now we need to move on so here after this strict mode then we can just render theme as well for this so we can use the theme provider directly from the material UI so here we can use a theme provider like this so we have a theme provider and then we need to use the theme provider over there to wrap the app component with the theme and let's wrap it up and let's provide the theme as well so it needs a theme object and that's a theme and after that now let's move on so let's set the routing functionalities as well within this application so you need to import something from the react router Dom so you can import something from reactdom and something would be equals to what we need to do so you need to use the browser router which adds the functionality which adds the wrapping functionality inside the browsers to use the routing over there inside the react application and it should be there inside the top again so we can have the browser router and everything should be wrapped between them over there from the theme provider till here so you can wrap all of that so that's how it's going to work now we have the browser router and then we have the theme provider and after that now we need to move on so now we can move on to the app. TSX so here we can just register some of the routes of the application as well so let's move on so here we have the main tag over there and after the main now what we can do so we can remove all of that and then we can just render here the header of the application so what we can do so inside the source we can create a new file that could be we can have the components over there and inside the components we can create a new component that should be header. TSX over there we can rent the RF fce for the default setup and default ball update code for that we have the RFC and after that let's create another folder inside the source that could be we can have the pages so this should contain all of the pages all of the routes of our application so let's have the home as well we have the home. TSX over there and we can again use the RFC for the default B plate code then we can move on so after that we can move on we can have the chat do we have the TSX over there chat. TSX and it also contain the ball plate code then we can move on and then we can have your the login page as well login do we have the TSX over there that should contain the normal login page we can have the sign up as well we can have the sign up do we have the TSX over there sign up. TSX it should also contain the RFC for the default ball plate code then I think there could be another page in which if their application so like suppose if the user enters a route which is not registered inside the this application so we need to register that route as well so that we can show a not found page so we can have the not found do we have the TSX over there in which we can show to the user that this route is not registered inside this application so we have the RFC for the default bate code and now we can move on so again we can move on to the app. TSX so here we have the main and inside the there would be very simple things so first we need to renter the header of this application here we have the header over there so inside the header after so that should be a self closing component so here we have the header and after that now we need to register all of the routes so first we need to import something from the react rout Dom so we can import something from we have the Rea rout Dom and something that we need to import would be equals to we need to import the routes so all of the routes should be there inside the routes so that is a container for all of the routes and to enter each route and to register each of the route you need to use a route component so it's a container and it's a route so let's move on let's add these things over there so here we have the routes over there that's a container and that should be equals to we can have the route and inside that we can provide the path so path of this should be we can have the Slash and we can have the element as well element should be we can have the homepage so we can have the home so home should be the inside the slasher out and after that let's copy let's paste it so that should be we can have the login as well we have the route of the login and the element should be there for the login here and then we can again move on we can again copy that we can have the route SL we can have this sign up and this signup should contain this sign up route over there sign up page then we can again move on we can register a new route that should be we can have slash we can have the chat so this should have the chat page and the element that we want to render should be the chat over there the chat component and if there is any route which which are not there inside these routes which are any route after that so that's how it's going to work so there you can see now we have a couple of routes inside this application and that's how it's going to work we have around six routes over there and that's how it's going to work and now let's move on and now let's move on to the header and now let's build the header of this application as well and for using the header we'll be using the component of the material UI so inside this we should be using the app bar we can have the app we can have the bar and we can import that directly from mui as well we can import app bar over there directly from we should have the mui SL material SL we can have the app bar like this so here we should be using the app bar over there like this and the app bar is just like a basic nav tag with some predefined Styles and after that below that we can use a toolbar as well so we can have the toolbar we can again import something from mui and that should be equals to we can have the toolbar like this so that should have the toolbar and it should should also be imported directly from the toolbar package so here we have the toolbar over there and if you don't know about these components you can always move on to the material UI you can just search like what is the app bar over there so there can be the app bar API you can move on to the demos as well so here you can see that's how you can use the abar over there you can just directly import it from the mui material or you can use that with this as well and if you want to see the demo you can see that is the app bar you can see some predefined styles are there that could be some M Bar and inside that you have some tool bar as well to add some structure of all of these elements you can see these are the basic navigation bars inside modern world applications so let's use that as well so after the app bar we have the toolbar and after that now let's move on so inside the app bar now what we can do we can provide some customized Styles as well we can use the SX prop for that we can use the SX props and before providing the customized Styles let's just run this application and let's just see all of that in action as well we can have the NP PM run we can have the dab over there and after that let's move on so you can see it is again there inside this you can see now we have the app bar and that's how it's going to work so if I open the 110% over there you can see that's how the app bar is going to look and after that you can see there are some predefined Styles let's provide some Styles so what we can do so we can have the BG color for providing the background color and that should be we can have the transparent then I think we can Pro the position so position should be what we can do so we can have the static over there of the top then we can have some shadows as well I think there are no many Shadows with that yeah there are some Shadows so what we can do we can also remove the shadows as well if you want to remove that so you can have the box shadow that should be you can have the none over there so now there won't be any Shadows over there inside the top and after that let's move on so inside the toolbar you can provide a couple of styles once again you can provide the SX prop and that should be you can have the dis display of The Styling that should be equals to the flex so that's a container and it should have the display Flex to render all of the items over there and the first thing that we going to do is now we need to render the logo of this application so here what we will do so we will provide our own logo so we'll use our own logo with that so let's move on and after that now let's move on so inside the components let's create a new folder that could be we can have the shared like that we have the shared and inside that we can use the logo do we have the TSX over there and let's design the logo as well so inside the logo it should always be like a link so once we click on the logo now we should be moved on to the homepage and for that we need some images as well so we'll be using the images for the logo as well so let's move on so from my GitHub repository you will find the images as well so you can move on to the public folder and there you can see you have some images of like the robots the nuclear openai robot and the vvg so you will find these images as well and now let's move on so here you can see now for providing the logo let's move on to the shared logo component and here let's just use something so here what we can do so we can just use the div here directly we can provide the style over there so we can have the style prop for the div we can provide the display that should be we can have the flex over there we can have the flex for the display we can use the margin from the right that should be we can have the auto over there like this so we can have the margin that should be from we can have the right over there that should be Auto then we can have I think we can have align the items that should be we can have inside the Cento then we can have the Gap and that should be we can have something around we can have the five or we can have the eight pixels over there for the gap between them so first we'll be having the like we can have the link and inside the link we'll be having the image then we'll be having some text so what we can do so we can use a link directly from the react a Dom so we can use a link component from the re Dom we can import that import the link from we have the re Dom so that should be we can have the link and we can render it over there and we can provide the two prop as well for the link so where it's going to navigate so we can have the two that should be equals to we can have the Slash and after that let's move on so inside the link we can first render the image over there the source should be we can have the open AI do have the PNG over there we we can have the alt that should be again we can have the open a like that so credit goes to the open a and after that let's move on we can provide some width as well width should be somewhere around 30 pixels would be enough for that I think and after that we can have the height as well height should also be somewhere around 30 pixels over there then we can have some class names as well we can just invert the color of this we can have the image inverted like that we can have the the image inverted over there so we'll be having the customized classes as well and after that now we have the link over there and after that let's move on let's have the typography as well so we'll be using the typography so it is a component of the material UI so you can get this directly from the mui you can import the typ of graphy from you can have the mui mu materials SL we can have the typography like that and you can render that over there you have the typography and inside that you can provide some of the customized styling like you can have the SX prop that should be what you can do you can have the display so inside the display what do we need to do so we need to provide some responsive sizes so what we can do so we can provide an object inside the display so inside the display for the MD screen sizes like for the medium screen sizes we want the display should be we can have the block the normal display but for the small devices for the small screen devices we can have the display for the none and then we can have for the extra small devices as well for the extra small and that should be what we can do so we can have the none over there so only for the medium and upper devices there should be the display and inside the small and the extra small the display should be the none so it should not be visible and after that what we can do so after this display then we can provide some classes like we can have the margin from the right so you can use the short end property of the Mr and that should be you can have the auto over there for the margin right then you can have the font weight as well so weight of the font should be you can have the 800 over there for the weight then you can have the text Shadow as well Shadow should be somewhere the shadow should be somewhere around you have the two pixels 2 pixels 20 pixels of the blow and you can have hash tri0 color for the shadow so these are some customized styles for the typography and insert that now what you can do so you can render this pen so first letter of your or like the first word of your logo should have the different styles so you can have the style over there and that should be you can have the font size that should be 20 pixels over there 20 pixels so first letter should have a different styles you can have Theon like that you can have Theon and then after that you can use the GPT you have the GPT like that so that's how you can provide some of the Styles over there so first let's use the logo over there so let's use the logo inside the header so here we have the logo over there and that's how it's going to work so there you can see now we have the logo then we have the M GPD and that's how it's going to look and after that let's move on let's just provide some of the classes for this as well for the images and all and after that and after providing the Styles I think the typography should be there after the link so it should be there after the link like that and that's how it's going to work so there you can see now with the man GPD and that's how it's going to work and after that now what do we want to do over there so you can see now we have the classes for the image inverted so we can move on we can uh we can enter this class as well so we can move on to the index. CSS we can provide this class like the image inverted and then now what we can do so we can use the filter for the images we can have the invert for this so if you provide the invert of the 100% now if you move back to the application you can see now it looks great so here you have the M GPD and everything seems to be working perfectly fine and instead of providing the 8 pixels for The Gap let's use this for the 15% and that's how you can see now it looks great over there so now it seems working fine and now we and move on to the next things and now we need to render the navigation links over there but there would be some conditions for rendering these links so conditions can be when the user is logged in then we want to show the link for go to chat to show the chat window to the user and there would be the link for the log out and if the user is not logged in then we want to show the links for the login and the sign up so there are two scenarios and we also need to handle these two scenarios as well because inside multiple parts of this application we need the user is logged in or not so for that we need a overall State Management inside our application so that in any children component in any component we can get the state like if the user is logged in or not so what we can do so we need a state management so we need the overall State Management which can wrap the full application with the state so either we can use the Redux so Redux is a great choice for that but there's also alternative with the react itself which is the context API so context API is very handy and it's very easy to implement as compared to the Redux so here we'll be implementing the context API and it is currently most easy thing that you can do so what we need to do so for implementing the context inside our application so it will benefit like you can get the state you can call some functions from the context from anywhere within this application so inside the source you can create a new folder that could be you can have the context over there so here we have the context and inside that we can create a new file that could be we can have the we can have the context do we have the TSX so from the context there would be multiple functionalities like what we will do so we'll provide the whole user object in which if the user is logged in then we'll be receiving the details of the user like the email the ID the name of the user and then we'll be having the logged in property like if the user is logged in or not so we can store a Boolean variable so that we can identify if the user is logged in and then we can have the functions as well for the login and the log out to identify or just call the functions directly from the context of the user from the authentication context so from this context now let's define all of that so first thing that we want to do is we want to just move on and we want to import something is we want to import something that should be equals to from and that should be equals to the react and something that we want to import would be the context so now let's move on so we need to import a function which is a create context so let's move on so so we can have the cons we can have the O we can have the context over there so here we have the O context over there and that should be equals to we can have the create context over there so it should be equals to the create context and now what do we want to do so initial value that we can provide should be equals to the null but here we are using the typescript so we should provide the value as well so what we can do so we can Define the type for it as well we can have the type that should be we can have the user off like that and that should be equals to a normal type and here what do we want to do so first property would be is logged in that's it and that property would be a Boolean property so we can have the Boolean like that then we can move on we can have the user property as well so we can have the user and that should contain a separate user type so we can have the type that should be we can have the user and we can also declare these types in a separate file as well so right now I'm just using it inside a context so here let's just use that and let's just Define that here so after the user then you can move on so type user user should contain the name of the user that should be you can have the string user should contain the email as well that should be again the type of we can have this string and the user type should be having the type of the user and sometimes if the user is not there then the user could be equals to we can have the null oh sorry it should be only the single string so now that should be equals to the null after that there would be the functions for the login and the log out let's define the function for the login so that would be a normal function but here uh we would be having the promise for that so here we would be returning the promise over there and the promise could be we can have the void because we don't want to return anything from the promise so that's why it should be the void but inside the login function there would be parameters like we can have the email so email could have the type that should be we of the string the password that should be we can of the type of like it should be the string and then we have a login function we can have the sign up as well so we can have the sign sign up over there like this and sign up should also have something around we can have the name we can have the email we can have the password over there so we can have the password as well like this we have the password that should be in the string format and then finally that will be having the log out function as well so we'll be having the log out and it should also be the promise because once we move on to the log out now we want to remove the cookies so if the cookies are being set by the back end and if the cookies are the HTTP only cookies it means those cookies can only be removed by the back end so once we click on the log out we'll be just uh clicking a button of the log out and then the back end would remove the cookies like the authentication cookies with that so that should again be we can have the promise that should be we can have in the white State because we don't want to return anything over there and now the create context should have the property so create context should have the user o like that the type of the user or like this or it should be the user o or it could be the null like this so now we have the O context and now what do we want to do now we want to create the provider for this context as well so we can have the const we can have the O provider like this so we have the O provider and the provider would wrap all of the childrens's inside that so we have the O provider that should be equals to a normal react component and inside that we would be accepting the children property we would be having some children over there CH run over there like this and it should have the type the type should be we can again have the react node like this we have the react node like this for the type and after that now let's move on so after this now we want to handle a couple of States as well within the provider so how we can do that so first state that we can have is the U state so we can have the snippit like first we'll be having the property of the user uh we should be having the property of the user I don't think what happened to that we have the user then we have the set user like this and the state should have the value of the user property like this the user or it could be the null as well so we can put the user or the null should be there in set the state and initial value should also be we can have the null like this so it should be the null and after that now let's move on so after that let's have the state for the authentication oh sorry we can have the login as well so we can have the logged in over there like we can have the is logged in like this and we can have the set is logged in and we can provide here the state that should be we can have the false and after that now let's move on so now we have the is loged in property as well now after we refresh this application so after once the user moves on into the application so we should run effect code as well we should run effect code we can run a function and we can verify if the user's cookies are still there and if the cookies are valid then the user doesn't need to be logged in so we can Define the effect function for that as well we can have the effect so as of now we won't be implementing that so first we need to implement the login functionality then only we want to do that so this effect function has only to do that what do we need to do inside that so we can have we can have the fetch if uh if the users cookies are valid then um we can have to then skip login so we should have this code inside the fact so we would be writing the logic after we write the implementation of the authentication then we can move on so then we should be having the functions for the login as well so we can have the login like this so that would be equals to a function and it could be asynchronous as well so we should write the asyn over there and we need the parameters as well so we need the same parameters like the email and the password we can copy we can paste now we be having the email and the password so as of now we just need the definitions now we have the login then we can have for the log out as well or we can have the sign up like the sign up it should contain in this properties like we can have the name email and the password let's Implement that over there name email and the password and now we should be having the log out function as well so we should be having the log out uh log out and here we won't be requiring any properties over there we don't need any variables over there and that's how it's going to work and here it should be the email instead of the emay and then here is it should be I think the email over there like this and now we have defined all of these properties and now now you can see now we have created the provider and now the provider needs to set those values as well which should be used by the children's so for that let's define the value cons we can have the value like this so that should be an object it should contain the properties like user we can have the is logged in over there it's logged in then we should have the properties of the login function as well the log out function as well the regist or we can have the sign of function as well so there could be a couple of functions and now the final thing that we want to do is now we want to return all these state code over there now we want to return all of the states to the children components so we can have the return we can have the Au context dot we can have the provider so now we have the Au context do provider and that should contain the value so value is wrapped within this component the value should be equal to the value and after that now we want to render all of the children's inside that so which should be the children like this so that's how it's going to work so you can see it was very simple so Redux implementation looks a bit complicated like sometimes you need to add the middle WS for these functions like the asynchronous code you need to add some middle ws and all but you can see it was very simple and it contains and the context contains the definition with the react itself not anything else so you can see now we have created the provider now we have the context now you can see we have the type definitions as well and now the final thing that we want to do is now we want to create a variable now we want to create the context that should be used by The Childrens so this is just the provider now we want to create the context that should be used by The Childrens so we can Define any names like we can have the cons use or or anything like that we can have the or directly as well so that should be equals to now what do we want to do we can have the use context we can have the use context directly and the context should be the Au context and that's it with that you can see now we have the context oh sorry it should be function as well it should be a use off that should be a function which can contain all of these properties like this and we should export it as well we should have the export cost we can have the use all and now we want to just export this as well we want to export the authentication provider as well so what we can do we can have export cost we can have the Au provider so that's how it's going to work and after that let's move on so you can see now the initial property of the a logged in is false now let's move on to the the main file the main. TSX now just render all of that so first at the top we would be having the Au provider we should be having the Au provider and now all of the child components so the main component the main children is the browser router but the properties and values from directly from the auth provider directly can be used in any component in any child component now let's move on so if you want to see the demo you can move on to the app component you can have the lock statement or either you can have the use o like this you can have the use O then you can have the loog lock should be we can have the use o dot you can have the is logged in property like this do is logged in like this so use do you can have is logged in like this so suppose if you save and if you move on to the application if you move on to the inspect now you will be seeing three infos like you have the false over there because now the authentication is false now the user is not there inside this but if we switch to the true if we switch it to the true like this this so you have the true over there you can see now you will be having the true over there and that's how it's going to work uh sorry and it can solve a couple of problems like the prop dring as well so suppose if you create the authentication here directly uh inside the app. TSX then you need to send it inside all of these children components so it can create some issues because there can be a uh there can be very difficulty to manage all of these props and data over there so that's why we can use the overall application state within the context or we can also use the Redux as well so they are all similar and now let's move on so now we can have a conditions like if the user is logged in or not so we can again move on we can switch this to the false and now we can move on to the header so let's close all of these files Let's Move On Again into the component slh and here now what do we want to do so here we want to render all of these links and for rendering the links we can create a separate component for that so we have the shared link we have the shared for the link as well like this so we can have the link dot we can have the TSX over there so I think we can change the name we can have the nav link like that we can have the navigation link over there and that could be a separate component now we can just render the RFC for the default uh B plate code now inside the nav link we should accept a couple of properties like where the user want to go so we can Define all of the types as well so we can have the type for this we can have the props and that should be equals to we can move on we can have the two that should be inside the string we can have your the background as well we can have a a different background suppose the button uses this link we can have the background that should be inside the string and what we can do and after that we can use the text as well so the text should also be inside the string that uh that what we want to wrap between the link what the text should be visible in the link then we can have the text we can have the color as well we can have the text color and that should be the text color again should also be inside the string format so we need the string and after that we can also require the on click function as well so we can have the on click over there like this so it should contains if someone wants to define the on click some can use this as a button as well so we can have the on click function as well and this is basically used for the log out as well suppose we want to remove the state as well so that should be for the log out and after that so that should be for the logout and after that we can use the promise here as well so that should be promise in a white form so we don't want to return anything and after that we should render here a link so we only need to return the link component directly from we can use from react. Dom we can import the link directly from we can have the Rd react rou Dom slash I think the link is named export so we can use the link over there and now we want to return the link so here we have the link over there and inside the link we can have the two prop so we haven't defined the props over there so which should contain the props like that should be equals to we can have the props type over there the two should be equals to we have the props or you can have the two then what you can do then you can move on you can Define here I think you can that's it I think then you can move on and what you can do you can provide the text between them so the text between them should be what you can do we have uh props do we can have the text and then we can provide the customized Styles as well we can have the style so that should be equals to what do we want to do so we can have the background like this so background should be we can have the props do we can have the BG then we can move on then we can have the color as well the text color that should be again we can have the props or we can have the text color like this we can have the text color and that's how it's going to work so here you can see now this is a customized component of the navigation link and it would be very useful now let's move on to the header so here you can see now we have we have the toolbar sorry now we have the toolbar over there so here it would be very simple so now let's move on to the so what should we do now so now we should have a condition so after this now what we can do so after this we can renter a box or we can rent a normal div from the mui and after that what we can do so inside this div we can just wrap a condition so first we need to define the reference for the authentication context so that we can get if the user is logged in or not we can get the cons we can have the O so that should be equals to use o so now we have the reference now what do we want to do so here we should have a condition like if the O DOT we have the user or we can have the O do is logged in it means now the user would be logged in then we can render a different styles over there and if it is not logged in then we can do different things so that would be a GSX tag the empty tag and here as well will be having the empty tag so once the user is logged in then what we can do so we can just use here the navigation link inside the shared components so that should have the navigation link so there should be two links over there so both should have the first one should be having the BG so if the user is logged in then we can provide a customized background color that should be we can have the hash d0 we can have triple FC we have the background color then we can move on so we can have the two that should be we can have slash we can have the chat then we can move on we can have the text then we can have go to we can have the chat then we can move on we can have the text color so that should be again I think we can have the black for the text color for this we can have the black and after that now we have the second navigation link as well so we can put the BG so here BG would be different so we can have has we can have the 51 538 f for the background color we can have the foreground color as well so for the foreground color we can just use the text color as the white then we can have the two that should be what we can do so we can have the log out here we can have the log out over there then what we can do so we can have the text as well that should be a ween of the log out and two should not be the log out two should be the home page because once the user locks out now we want to move on to the home screen as well and now I think that's enough but here we would be having the on click function as well so inside this navigation link we would be having the on click and here now what do we want to do so we can have the o. we can have the log out so we will be referencing the log out function directly from this and after that if the user is not logged in then again we can render a different links we can just copy this one we can just paste that over there think what do we need to do so now we can remove that so I don't have any code with me right now so what we can do so we can just copy these two n Tex once again so the color combination should be same so now we have these things over there so we can remove that and that's how it's going to work and now what do we want to do so now you can see now we have the background should be same the two should be equals to now what we can do we can have the login and the text should also be we can have the login text should be the login the text color should also be the black and here we would be having the same background and the forground color the two should be equals to we up this sign up and that should be we can have the sign up again like this we have the text of the sign up and that's how it's going to work I think that's enough for that right that's enough but if we move on to the application once again you can see now we have all of the data you can see now we have the login and the sign up but now we want to provide couple of Styles as well to the navigation link so let's move on let's just Implement that so we can move on to the nav link we can provide the class names for that we can have the class name and we can use a customized class name we can use some CSS styles with that so what we can do so here so we can have a style that should be we can have the nav link over there like we can have the nav link so let's Implement these Styles as well so we have the nav link let's Implement these Styles so we can move on to the root CSS file or or sorry if you want to create a customized CSS file then it's up to you but I would be defining it in inside the index so that should be we can have the nav link and inside there know what do we want to do so it should contain I think the font weight that should be somewhere around 600 we can have your the text transform that should be upper case then we can move on we can have the margin right that should be somewhere around 10 pixels margin from the left as well 10 pixels we can have the padding that should be 8 pixels top and bottom the 20 pixels from left left and right then we can have the Border radius that should be somewhere around 10 pixels with that so we have the 10 pixels then we can have the text decoration that should be we can have the none over there then we can have the font family I think font family is already defined in the typography then we I think yeah it is defined then we can have the lettera spacing as well that should be somewhere around one pixels that's enough now we have the naving and everything seems to be working perfectly fine over there now let's move on to the nav link so now let's move on to the application you can see now it looks like this now we have the login we have the sign up we can click on the login now we are into the login page we can click on the sign up we are into the sign up page and if the user is logged in so we can move on to the context so suppose that's the true so there you can can see now we have the go to chat and then we have the log out and it means everything seems to be working perfectly fine over there once we click on the log out we enter the home once we move on to the go to chat now we into the chat page so everything seems to be working perfectly fine and now what do we want to do is the next step so now we are moving very fast I know but let's move on so we can have the false again we can move on to the login now let's define the login screen as well so now let's design the login screen as well so let's move on so I'm into the paint and now we want to see that how it's going to look so let's move on so suppose it's a web page so suppose it's a web page so inside the left corner of the web page inside the left side so there would be two sides so inside the left side there would be an image so we can render the image of a robot and inside the right side we can just render here the form so inside the right side sorry we can render here the form here so we can just render the form so there can be some items onto the form so that could be the login and the sign up as well so we can have name email and the password for the sign up but if there are the mobile devices so inside the mobile devices the style will look different so inside the mobile devices what we're going to do is we can just Rend so suppose that's a mobile device so it's a mobile device so we only need to render here the form so we need to make the responsive designs so we'll be only be having the form over there and that's how it's going to look so let's move on so insert the login now what do we want to do so first I think we just focus on the design so here inside the return what we can use so we can just use the box from the material UI so box is just like a component of the material just like the div so we can import something that should be at theate M material and it should be we can have the box over there so we have the box and inside that what we can do so we can Pro the SX prop or what we can do so the SX is not required we can give the width that should be we can have the 100% for the width we can have the height as well and it should also be we can have the 100% and what we can do so we can have the display as well display should be again we can just use the flex so we can just put the display Flex we can have the flex that should be one as well and now what we can do so we'll be dividing the flex into two parts so suppose that's your another box so we'll be using the box for the image and there could be another box for the form so both will be having the display of the flex so the first box let's move on so we can have the padding that should be eight we can have the empty margin from the top that should be again uh it would be the eight we can have the display as well so display should be we can give the responsive designs we can have for the MD screen sizes for the medium the display should be we can have the flex but for the smaller devices for the SM the display should be we can have the SM the display should be we can have the none and same happens with the extra small devices as well suppose that's a device Maybe it has very low width we can give the display that should be we can have the none and after that let's move on so here we have the box and here you can see inside that we can just render an image so there would be an image we can give the AI robot. VN PNG AI robot dot we have the PNG over there for the images we can get the alt we can have the robot over there like this and the credit goes to the respective owner so we have this image then we can move on we can have this style that should be around 400 pixels would be enough for the style over there for the width so let's move on we can give the width that should be 400 pixels that's how we want to do that so you can see now you can see it's looking great you can see now it's looking great and now you can see it's working fine so there you can see if we have defined the padding G it means 8 into 8 times so if we Define the padding of the one over there in the material UI the by default spacing is 8 pixels so 1 is equals to the 8 and if you have defined the 8 it means it is is 8 into 8 which is 64 pixels for the padding and all and now let's move on so here you can see the first one has been completed now let's move on to the second box as well so inside this box there would be a normal things and this box would contain the form so let's move on so here we can Pro the display that should be again we can use the flex over there I think we can put the flex property as well so inside this Flex what we can do so for the extra small screen devices we should have the full Flex which is the one which we have defined over there and for the medium devices we can have the flex that should be somewhere around we can give the 0.5 so that's how it's going to work and after that let's move on let's provide a couple of more props like we can move on uh we can Prov the justifi content that should be inside the center of the screen we can Pro the Align items that should be again inside the center of the screen I think that's enough then we can move on we can put the padding as well that should be somewhere around two over there we can have thek margin from the left that should be we can have the auto over there like this we can have the auto we can have the margin from the top and that should be somewhere around 16 so we have these designs over there and now inste that now we can render a form so let's move on so we can just render here the form directly from the HTML tax and here now what we can do so here we can provide a customized styling for that so styling could be we can just for the margin that should be we can have the auto from all of the sides then we can have the padding as well so we can the padding that should be around we can give the 30 pixels of the padding from all of the sides the Box Shadow should be there somewhere around we can give the 10 pixels horizontally 10 pixels for the vertical Shadow 20 pixels we can give for the blow we can give hash triple 0 for the color of the Shadow then we can get the Bott radius so that should be somewhere around 10 pixels would be enough for that and then finally we can give the Border here so we can have the border that should be we can use the none so we don't need to use the Border and after that now what can we do so inside this form we can just renter another container so we can have a container over there like suppose that could be equal to box and here we can provide a couple of more styling like again we can have the display like this so we can have the display again we can use the flex then we can move on we can have the flex direction that should be we can have the column over there and final thing that we can use so we can move on we can have the justifier to the content that should be inside the center of the screen so that's how it's going to work and after that let's move on let's just add the elements over there so the first thing that we want to add over there that should be equals to the typography so we can the typog graphy over there because we want to add a so what we can do we can add a login text over there as well we can use the import something that should be from we can have the material and I think we can just use the typography directly from this as well we can use the typography and then here we can again use the typography over there we can provide a Styles like we can give the variant that the H4 so with the variant you can provide like what variant do you need of the HTML so here we would be needing the H4 we would be having the text align that should be inside we can have the center over there so I think we can give the padding as well padding somewhere around two would be enough font weight that should be 600 and that's it I think we can give the color color is already defined that's it now what we can use so we can just move on we can just provide the login like this so if you save and if you move on so let's see how it looks if we move on so there you can see now we have the login and that's how it's going to work and now after this typography now we can move on and we can define an input tag so we'll be using a customized input tag for this application because if you move on to the mi.com so if you move on to the material UI so they provideed different type of input components you can move on to the material UI you you can just search for the text field so this is the text field API so you can see if you move on to the demos of the text field so they provide similar type of text Fields you can see you have the color of blue around that so it is based on the material design and now let's move on so we'll be using this type of text Fields as well but we need to just remove and we need to just modify the root classes of the text field so let's move on to the API section of the text field so let's move on to the API so you have your I think uh let's move on so here we have the text field so we want to move on to the base classes and here we want to just customize the base class so that we should have the white color as per the theme of our application so let's move on so I'm going to show you that how you can do that so here we need to move on to the components so inside the shared the text field would be shared so we can have the customized input so we have the customiz input over there dot we have the TSX over there and now let's define the component over there like this so we would be having a different props for that so we can have the props so that should be we can have the name so we can have the unique name for the text field unique name we can have the type over there so we can have the type like this that should be again inside the string and I think that's enough I think we can have the label as well yes we can have the label and that should be equals to we can again have the string like this so we have these props for the customized input so we can also have the props like this and that should be equals to the props and now here we want to return the text field from the material UI so we can use the text field we can just move on to the top we can have the import the text field uh from we can have from mui material like this we can have mu material SL we can have the text field like this so we can have the text field over there like this we have the text field and from there now what we can do so we can have the name so the name should be equals to what we can do so here we can just provide the props do we have the name over there we can provide here I think the label as well the label should be what we can do props do we have the label for this we can provide the type as well the type should be again we can have the props to we can have the type start we can have the type over there and now let's move on let's move on to the login component and let's just see that how it looks if we do not provide any style so we can have the customized input so we can use the customized input two times over there and let's provide some props as well so we can give the type as well so the first one should have the type of the email the name should be again we can have the email then we can have the password as well sorry we can have the label as well that should be again we can have the email over there like this and after that let's move on to the second the type should be we can have the password we can have the name that should be equals to the password over there we should have the same thing for the label as well so we can have the label that should be equals to we can have the password so if we save and if we move on so there you can see now we have the email then we have the password and that's how it's looking over there so if you move on again so you can see now if we remove all of these uh inputs over there so we have the email then we have the password so now we want to change that as well so let's move on and now we want to just what we need to do so we want to just inject some classes some styles to the root classes of the customize input so we can move on to the text field so what we can do so it is very simple with the material UI so first we can Define the props for the label so we can the input label props we can give some props that should be now what we can do we can have the style so I think the label already have the Styles like this so you can see if we move on to the password you can see now we have the blue color for that so we can give the style that should be we can have the color that should be I think we can give the white so now you can see now it has resolved the issue and that's how it's going to work and after that let's move on so you can see now we have some outlines as well so let's move on so now we can have the input props as well so we can have the input props and inside this now what we can do so we can again use this style and we can provide a customized style for that we can give the width of this that should be we can have the 400 pixels or if you want to accept the width then you can use that as well so here we have the 400 pixels then we can move on we can the Bott radius that should be somewhere around I think 10 would be enough for that then we can move on we can have the font size so that should be somewhere around 20 would be enough for that and now the final thing that we want to do the color should be what we can do we can use the white so there you can see now we have these things over there and everything seems to be working fine over there and we can also provide some margin between them as well you can have the margin that should be to the normal so now you can see now we'll be having some margin between them and that's how it's going to work and now the final thing that we want to change is we want to change the outline so for changing the outline now we want to move on we can move on to the expect and there now what we can do so we can move on we can just see this that what exactly are the class names over there so let's just search with that over there so um so we would be having the label as well I think the label has already fixed that so there is this class name like mui outlined input not outline so what we can do uh so we have your mui input base rout mui so I think we are using the outline so what we can do so mu input base mu input form control input tag as this so you can see we have the mui outline input so we can copy this class name mui outlined input so we can copy and we can move on to our CSS file index. CSS we can paste this file over there now we have this class over there outlined input we have here the root class as well so we can move on we can have the root like this we have the root dot we can have the mui / the focus here so we have the focus over there so this is for the focus and let's move on so we have the notch outline as well so you can see you have the notch outline so let's move on let's copy that as well till here and M your input again we can provide the same style for this as well mui outlin input we have the notch outline so here now what we can do so we can the Border color so that should be we can have the white like this and it should be important so let's see how it looks uh you can see now we have the B color of the white and that's how it's going to look you can see now it's looking great over there now we have the email now we have the password and there you can see it's looking great and everything seems to be working perfectly fine so you can see how we can just customize the CSS classes of this as well and the final thing that we want to do inside the login is now we want to create a button so let's move on to the login here so let's create a new button over there and the button should also be imported from Material UI so which should be we can have the button and after that let's move on so here we can just render here the button so the button should be there we can provide the type for the button that should be we can have the submit then we can move on we can provide the SX prop SX prop should be having we can have the padding from the X that should be we can have the two padding from the Y that should be I think we can give the one over there we can provide the margin from the top that should be we can have the two over there we can provide the width should be same as the form 400 pixels then we can move on WE the Bott radius so that should be somewhere around two enough two is enough for that we can have the background color as well so we can give a different background color we can have hash we can have Z we can have Tri f see as the background color as we used inside the navigation bar as well so after that I think we can put the hover class as well so for providing the hover you need to wrap it inside the strings then you can search for the hover and then you can provide the classes so you can have the BG color that should be we can have the white and you can have the foreground color color of the foreground that should be equals to we can have the black and here now what we can do so here we can provide the login like this so we can have the login do and that's how it's going to look so you can see now have the login and if you want to provide an icon as well after the end of the button it is very easy so you can just search for the react icons over there so here so you can have the login as well here you can have the login and there you can see there are a couple of login icons that you can use and here now what we'll be using so we can use this as well it is looking great and now let's move on to the top and we can import this as well we can import this icon from react icons over there slash we can have the io so here we can use this icon iOS login let's move on and inside the button props let's create another prop over there so that should be End Icon and that should be equals to this icon over there we have the io I login like this and that's how it's going to look so if you save and if you move on so there you can see now we have the login button and that's how it's going to work so you can see now it's looking great now we can move on so now we can move on and now we can handle the form data as well so let's move on so to handle the form data what you need to do so you can see you have provided the name as the uh you have provided the name and the password over there email and the password as the name now you can create a function and you can use the form data to get the values without using any state so you can have the const you can have your handle submit like this so that should be equals to you can have the function over there there and inside this you can get the event and to get the type of the event you can move on to the form you can have the on submit over there you can provide this so you can see you have the event like this you have the react. form event HTML event like this HTML form event so let's move on so let's just use that over there like you have the reactor form event and this is the type of the event then first thing that you want to do is you want to prevent the default Behavior so that the browser should not be refreshed and you can provide the classes over there like you can have the handle submit now after that now you can just create a new form data so you can have the con you the form data over there so that should be equals to a new form data so you have the form data and you need to provide the target of the form so you can have the event dot you have the current Target and that's how it's going to work and after that you can get all of the values for the form as well so you can get the cons email like this so that should be you can have the form data dot you can have the get that should be equals to we can have the email because you have provided the name as the email so it works on the name basis and same for the password as well so you have the password and that should be equals to form data doget that should be equals to the password now you can log all of these values as well you can log the email you can log the password as well and that's how it's going to work so if we say if we move on if we move on to the inspect panel if we move on to the inspect if we move on to the console so there you can see if we provide the Styles over there if you click on the login then you can see now we got the Styles over there we have the anadani test.com then we have the password and everything seems to be working perfectly fine so now we have the data of the form and everything seems to be working perfectly fine and now the final thing that we want to do is now we want to login so after we click on the login now we want to make the API request to the back end so for making the API requests we need a package so what we can do so we can move on to front end once again we can install a package which is the exos so exos is used to send the API request it is used for the communication with the back end and the front end so let's install the exos and with the help of exos we'll be just um exchanging the API tokens with the back end and with the front end so let's move on so here we have the main. TSX file over there and here now we can set some default properties of the xos as well so we can use the xos dot we can have the defaults dot we can have the base URL so we can Prov the base URL for this as well so what's the base URL for the back end we can have the HTTP we can have the Local Host the port of we can have the 5,000 SL we can have the API SL we can have the V1 so that's the base URL and after that we need to set the base configurations as well so we can have the exos dot we can have the defaults dot we can have the width credentials so if you use the width credentials so it will allow setting the cookies directly from the back end and just exchanging the cookies with the back end so with the help of with credentials it will help you to exchange the cookies so with credentials that should be equals to the true so with every request this would be attached and now let's move on let's move on into the source folder let's create a new file for the helpers so we can have the helpers over there like this we can have the helpers and here we can create a new file that should be at the API communicator. TS so from this file we'll be just defining some functions that can be used to work with the API so let's move on let's just have the first function so what we can do so we we can have the ASN C of function so we can have the cons we can have the login user so we can have the user login like this so from here now we can just Define the functions which can be used for the communication so let's move on so we can have the export course we can have the login user like this login user and that should be equals to we can have the asynchronous arrow function over there we have the async arrow function and the param are required like we can have the email the type should be we can have the string password then we can move on so we can have the cons response so that should be equals to we can have the await then we can use the xos package so we can move on to the top so we can import the xcos as well we can have the xcos over there and it should be imported directly from the xos package so we can have the xos like this so await it should be equals to xos xos start we can have the post as well so that's a post request and the URL that we want to Define should be/ user SL we can have the login over there like this so that would be our URL and after that now what do we want to do is the next step so that's a post request so inside the second parameter now we want to provide some data as well along with it so we can send some data so we need to send the email then we need to send the password as well so these are the data that we want to provide and now let's move on so after we get the response then what we can do so we can move on we can verify if the response dot we can have response. status is not equals to we have the 200 it means if it is not okay then what we can do so we can return or we can have the throw new error and we can send the error message suppose that could be we can have the unable to login so that would be error message but if the response. status is the 20 it means if everything is successful then we can grab the data con data and that should be uh equals to that should be equals to what do we need to do so it should be the response do we can have the data so it should be the weight because that's a promise so it should be the response. data and after that the final thing that we want to do is we want to return the data over there and that's how it's going to work and now let's move on to I think inside the O context over there inside the Au context so we have the login function so here we need to use this function as well so what we can do so we can have the return or what we can do so we can have the cons we can have the data so that should be equals to await and await it should be equals to we can have the login user like this we have the log Lo user and from this we would be having the data so login user should be equals to we can have the email then we can send the same password over there and after that we will get the data so we can have verification check if we have the data then only we want to do something then what we want to do then we can move on so we can have the set user so that should be equals to what do we need to do so user should have the email that should be data do we can have the email and the user would be having the name as well so we can have the data do you can have the name like this so we will be having the set user like this and then we will be having the set logged in property as well so we have the set is logged in and that should be equals to the true so that's how it's going to work and after that you can say everything seems to be working perfectly fine and after that now we can move on to the main file which is a form so let's move on to the page so what we can do so we can make this function as an asynchronous function and after we get the data then what we can do so you can see uh if you remember we have installed a library as well which is uh toast bar so we can show the toast notifications so let's move on so again we need to move on to the main. TSX so we can import something from that Library so we can import something from that should be equal to react H toast and we can import the toaster so we have here the toaster so toaster should be there at the root of your file so here we have the root so it should be there at the top hierarchy of your file so that it can add some CSS and all of the things required to make the toast so let's move on so after the Au provider or after the theme provider then we can use the toast bar over there like this so here we have the toas like this and if you want to style some positions as well you can use the position so you can have the top right you uh you can have the top Center like this so I think we can use the top right here and everything should work perfectly fine and now let's move on so now let's move on to the login and let's just use a function of the toast so we can import something that should be equals to from it should be equals to react hot toast and now what we can do so we can have the try catch block so inside the try now what we can do so we can first have the const or what we can do so we can directly use the weight and here we need to use the context here so we can have the con we can have the O so that should be the use Au over there now let's use the context we can have the O DOT we can have the login so we can have the au. login after that we can provide the email we can provide the password as well we have the au. login email and the password and that's how it's going to work and uh I think there some type errors like that could be null as well so yeah this can be null so what we can do so we can have the S we can have the string so we can just skip the type checking we can Pro the S string over there and after that it will be logged in so let's use the toast over there so you need to import this thing over there you you have the toast so I think you need to import the toast directly from the reactor toast so you have the toast so toast is a function which creates the toast so you can have the toast do you have the loading so first we need to show the loading state so we can have the U we can have the signing in like this so we can have the signing in and after that let's move on we can provide the second argument that's the ID so we want to provide only one toast bar inside this one component inside this one page so we need to provide a ID so ID should be same inside all of the toast that can be for the login as well that can be for the success as well and for the error as well so it should have the ID so we can have the ID that should be equals to the one like this or if you want to change the ID that should be for we can have the login over there like this so we have the toast. loing after we are successfully logged in then we can again use a toast and this time it should be the success we can have the signed and we can have the successfully like this and we can have the same ID and then if we get any error then what we can do so we can have the toast to we can have the error we can have the sign in again we can have the signing and we can have the failed so that's how it's going to work and we can also log the error as well so we can have log the error over there like this so that's how it's going to work so now we have these things and now everything should work perfectly fine but now we want to move on to the back end as well so if you move on to the back end so I want to show you one thing if you move on to the users controllers you can see you are just sending the ID over there inside the response you are just sending the ID so instead of the ID now what you can do you can just move on so you can just provide the name of the user that should be you can have the user dot you can have the name you can send the email as well so that should be we can have the user do we can have the email so that's how it's going to work and same thing should be there with the sign up as well so we can move on to the sign up that should be the same thing over there like this and now let's move on and let's just open the development server of the back end as well so here inside this terminal let's move on to back end so when we can have the npm Run we can have the dev so now let's move on so let's see what happens now so so you can see Server open and connected to datab okay so let's move on so now we want to provide the credentials so what credentials did we use so we have used the James at the test.com we can use the password 1 2 3 4 5 6 so let's see what happens if we move on to the network so if we just click on the login so let's see what happens so there you can see now we are getting an error which is the course error you can see it is uh expected because one server because now you are in the server of 5173 and the back end is running on this server of 5,000 so one server so if one server make the request to another server so then that Server doesn't allow any different server to make the request so if the 5173 request some data or send some requests to the 5,000 so 5,000 would not allow the server to make an entry or to do something with their server so that's why we have the course error inside the browsers and it's the security policy that every browser has followed so now we want to Whit list This Server we want to Whit list around server around domain with that server so that we should interact with that API so let's move on so we can move on to the appts over there and there you can see we have already added a package which is a course you can see this is a course which will bypass this error so let's move on to I think inside the app. TS so what we can do so inside the first middleware let's just use the course over there we can have the app. use that should be we can have the course you can import the the course as well you can have the import we can have the course that should be equals to from it should be equals to the course like this so that's how it's going to work and after that you need to use the course and here we need to provide some options as well because here we are using a couple of security attributes as well so now what do we want to do so here we want to use the origin first so what we can do so we can have the origin we can provide the origin and the origin can be ar as well so we can provide the string so that should be we can have the HTTP Local Host the port of we can have the 5173 so this is where our react application is hosted now and then inside the second parameter we can provide the credentials because here we are exchanging the security attributes like the HTTP only cookies so we want to set the credentials that should be equals to we can have the true so with the help of the Cod now we can access This Server only from this domain right so let's just test it out once again so let's move on let's just click on the login again let's just remove everything remove the console window as well so let's see what happens if we click on the login so there you can see now we have the status of 200 you can see now we solve the message as well and another thing that you can see now we are into the go to chat window and we are into the log out as well so everything seems to be working perfectly fine over there you can say this was okay we have the 200 of the okay request you can see we are having the cookies as well so if I want to show you the cookies you can move on to the application you can move on to the cookies and from there you can see now you have the cookie you have the Au token over there and there you can see you have the domain of the Local Host you have the path of the slash you have the expires property as well and there you can see you have the size and there you can see you have the HTTP only flag as well you have the HTTP only flag and that's how it's going to work and after that let's move on and let's just try to get the cookie you have the document. cookie so let's see what happens so you can see document. cookie is empty string because it cannot be accessed by the JavaScript but there's one thing if you just remove the HTTP only attribute double click on that and let's just remove that and there you can see if you run the document or you can have the document of the cookie then you can see now you can get the cookie so you can see that's not secure so that's why we use the HTTP only cookies like this so that it cannot be accessed by the browser so everything seems to be working perfectly fine so let's close all of that and now you can see after completing the login functionality now you can see inside the header as well it has been updated now we can go to chat and we have the log out functionality as well and now let's complete the authentication workflow and let's just quickly start the chat GPD apis and now it seems to be working fine and after that now again we want to move on to the context of the authentication and if you remember that we have created an effect code there it means once the user refreshes or once the user opens this application so if the user has the cookies and if they are valid then we don't want the user user to be logged in once again so let's move on so here now what do we want to do so here we want to make another request inside the backend in which we can verify the token of the user and if the verification token is successful and if the token is verified then the user doesn't need to login again so let's move on so what do we want to do so we can move on to the back end and we can move on to the controller sa so inside the users controller sorry we can move on to the user routes over there and here now what we can do so we can create another route that should be a post request or that should be a get request over there and that should be we can have the login or we can have the O status like this we have the O we can have the status over there we have the O status and here we do not need any data because here we won't be sending anything so here we would require a function so here we require a middle we function which will be used to verify the token if the token verification would be successful then we'll again move on to the different middleware function to just validate the record and to send back the the credentials so let's move on and it would be very very easy so let's move on to the utils once again so inside the utils we have the token manager so here if we can create a token we can again create a new function in which we can verify the token of the user so let's move on so we can have the export cost we can have the verify we can have the token like this we have the verify token and that should be a n synchronous Arrow function and this would be a middle W because now we would be using the verify token here inside this routes inside this of status so let's move on so we can have the verified token like this so it should be used here so that's why it would be requiring a couple of parameters as well directly from the express it could be the request that could be the request object we have the express it should be the response that should be again we can have the response over there directly from the express once again response uh it should be the response like this and it should be the next function as well so that we can move on to the next function so it should be the response it should be the next to move on to the next function over there like this and now after that now what do we want to do so now we would be sending some cookies along with the request so we would be sending some cookies along with the request so cookies would be stored inside the signed cookies so we can the cons we can get the token like this so that should be equals to what we can use so we can have the request dot we can have this signed cookies because here we are signing the cookies and we need to provide the variable name over there the signed cookies so signed cookies is an object which can contain all of the cookies data and again you can move on to application so you can move on to the application you can see here we are storing the O token so we want the O token cie over there so what we can use over there so we can move on we can use the template also over there and that should be we can have the cookie name like this so we already have a parameter so we can get the cookie name so now let's move on and let's just log the request over there let's just log the token but before moving on into this request so now we should create a new request inside the front end as well so let's move on so inside the Au context or we can move on to the API Communicator let's create another request over there it would be a different request it could be we can have the check Au we can have the status like this it could be this request here we do not need any parameters so this would be a get request and it should be user SL we have the we can have the O status over so it has the O status over there and after that now let's move on we don't need to send any data because it's not required who and if the response. status not equals to 200 then we can have the enable to what we can do we can have authenticate like this unable to authenticate and if everything is successful then we'll be sending the same data along with the request so let's move on to the context as well so inside the context now what we can do so here we have the use effect code and inside this what we can do we can Define another function that could be a SN function that could be we can have the check status and inside this we won't be requiring any parameter over there let's remove that and here what we can do so we can have the cons we can have the data that should be equals to a weight and that should be equals to we can have the check out status over there like this check out status and now we want to follow the same steps over there now we want to follow the same steps like this same steps like this let's move on if you have the data then do this or else what we can do so else it would be same like what we can do so we can provide these properties over there and we can set it over null so we can set as the null over there so I think it's not required over there because it would be run on because it will run only one time so it's not required over there if you have the data than this then we want to do this thing and if we have the data and everything seems to be working perfectly fine so now we have this logged in set user two and everything should work perfectly fine so now again we can move back to the users or we can move back to our token controllers so now let's make a new request so if we just refresh the page so let's see what happens if the request goes or not if we refresh the page so let's see what happens so no the request was not processed so let's see what has happened over there let's move on to the homepage as well and let's remove that let's click on the refresh once again let's have I think we can have the fetch xhr so yes yes yes there was an error because we haven't called this function so now we need to call this function as well so we can have the check status over there we have the check status over there like this we have the check status and let's see what happens if we move on so there you can see now instantly we got the token right right so now there you can see instantly we got the token and that's how it's going to work so you can see now everything seems to be working perfectly fine and now let's move on to the Token manager so now we have the token and now the last thing that we want to do here is now we want to verify the token so now we want to verify the token so we can verify the token by just checking that if the token has the data if the token is valid then we can move on to the next metalware but if the token is not valid then what we can do so then final thing that we we can do is now we can just stop this request we can avoid the request and we can send the return message and now let's see that how we can just verify the token of the user so we can have the return we can have the new promise so we can return a new promise uh so here we are using the promise and it's a void because we want to verify some parameters like we can resolve the promise or we can reject the promise as well we can have the reject like this so let's move on so we have the resolve and the reject and after that now what do we want to do so here we can also return one thing we can return the JWT do we can have the verify so JWT has a function of the verify which can verify the token so we need to provide the token string over there so we can have the token like this and then the second thing that we want to do is now we want to provide the secret key so we can provide the process. environment. JWT secret once again so we have the secret key and after that there is a third parameter as well which is a call back in which we will get two parameters first there would be the error if we get any error then it would be stored inside this error and if everything is successful then we would be getting the success inside that it would be the success so now let's move on here so now let's just verify once again so now we can verify just simple thing like if there is an error it means now there was an error with the request then what we can do so we can have the reject we can reject the promise we can have the error dot we have the message as well but I think the promise is void so we don't need the message as as well but it's up to you then we can move on we can have the return response or we can have the status that should be 41 which is unauthorized then we can move on we can have the Json over there we can have the message over there like this or we can have the Json we can have the message like this we can have the JWT or we can have the token expired we have the token expired like this if we get an error but if the error is not there if if we are successful then we can provide the else case insert the else now what we can do so we can just so what we can do here so it would be very simple so we can set some parameters in this function we can set some local parameters for this request in this function and then we can use those parameters inside the next request so it is possible with the express so what we will do so we'll send some local variables over there so first let's have the lock statement we can have the token verification successful we can have the successful over there like this so verification like this token verification successful and then now what we can do so after the lock then we can move on so then we can just have the resolve so we need to resolve the promise as well we can resolve the promise and then we can move on then we can have the response so from this middle web so this middle W can set some local variables from the response and then we can use them from the next middle wave soch technically it is possible with the express because you are setting the local variables directly from this function and then you can use that inside next middleware as well so now we can have the response dot we can have the locals dot we can send some data like we can send the JWT data like this and that should be equals to we can have the success so all of the data should be there inside the success so we will be setting that and then what we can do so we can just return to next middle wave so that was the last thing that now we want to return to to the next midal W so you can say this was the final code for this and we want to use another thing over there like if we don't have the token like this if we don't have the token and if the token dot we have the trim like this we can have the token do trim is equal equals to we can have the empty string so then what do we want to do so now we can just move on we can just return the response to we can have the status that should be again we can have the 41 once again we can send the Json message once again we can send the message over there then we can have the token not received like this so we can have the token not received so that's how it's going to work and if we have the token then only we'll be having this return statement so now let's move on so here you can see it working great it's working fine now let's move on to the user routes once again so we have the user routes and here what we can do we can Define another middleware function in which we can check the authentication status we can have verify something so we can have the verify we can have the verify user like this so we can have this function over there and now inside this function now what do we want to do so here we would be getting some local variables as well right because we have seted some local variables so they can be accessible over here now inside this now what we can do I think so first we can verify if the token was malfunctioned or not so let's move on so inste the try now what we can do so so first we can try and get the user so we can remove this we can have the await user. find one so now we can find the user email so email should be equals to we can have the response do we can have the locals JWT data like this do we can have the email so we can find the user or what we can do so we can have the find by ID as well because we are already encrypting the ID as well so we can have the find by ID and that should be response. locals. jwd data that should be equals to the ID like this so that should be the ID and after that we can check if we don't have the user then we can send this message as well like the user not register or token or we can have the token wall function and after that if we have the user then we can verify like if the user do we can have the idore ID do2 string if the ID is equals to the same of the idid that we are getting inside the response to we have the locals JWT data like this do we have the ID then only we want to move ahead so what we can do here so we can just move on so then if we are getting this ID over there so I think we can just use here this like this if it is not okay if it is not matching then what we can do we can send the response. status 401 then we can send the token and user like we can send here permissions didn't match match like this so we can the permissions didn't match and you can also store these strings inside a separate variable as well and it's also good option but here let's just complete this application so now we have two string and if everything works fine then now what we can do so if we pass this validation check if we are coming here it means everything is working fine then what we can do so then you can see now the token should not be created again so we can remove the token creation code over there let's remove that and let's move on so now we can just send the details to the user so now let's see what happens so if we move on to the application if we refresh so now we should be completing all of that if we refresh if we move on to the network so now we are getting the 401 inside the preview we are getting the user not registered so that's okay let's just check but you can see the token verification was successful let's see that what exactly is happening so now here what we can do so we can lock something we can log the user dot we can have the underscore ID dot we have the two string and then we can just log the response to we can have the locals do JWT data like this do we can have the ID so let's see what happens so let's see what happens here inside this lock statement so if we again refresh this you can see uh what happened with that user not registered so that was the error because you can see now we are running the user login so now let's move on and that should be equals to what was the function so we can have the verify I think we can have the verify like this so we can have the verify user like this so let's see what happens now so that was the error so let's see what happens this time so let's move on so if we again refresh you can see now we are getting the 200 and there you can see now we are getting the details as well so everything seems to be working fine you can see now it is working great you can see now the IDS are same you can see everything seems to be working perfectly fine you can see now we are coming ahead you can see everything seems to be working fine and that's how it's going to work so you can see now it's working great over there so you can see congratulations on completing the secure back end as well so now let's move on to the Token manager and remove this logs as well so just remove these logs over there because blocks should not be there inside the production so that's how it's going to work so now you can see now you completed that and everything seems to be working perfectly fine and now if we refresh the page you can see instantly we'll be moving on to go to chat and now finally now let's work with the open and let's create the chat gbt type application this time so the authentication seems to be working perfectly fine and now we want to move on and now we want to build the chat functionality for this application so before that I want to move on to the open a platform so now you want to move on to this and there you can see you need to click on the GPD so now we'll be using the GPT models for it so there are a couple of models for the GPT GPT 4 GPT 3.5 turbo so here what we'll be using so we'll be using the GPT 3.5 turbo and there you can see how the chat completions API work with the open AI you can see this can be a response you have the Open chat completion. create and there you can see that's how it works so first there would be a role uh you can define a role of the system that you are this this you can Define the name of your model you can Define anything and then after that you have the role so first the user so first the role would be the user and user will ask a question and we have a question inside the content property content is actually the message so we have the content like who won the World Series in 2020 then you have the assistant that the Los Angels and dash dash dash and he has come up with an answer and then again you have the role like this you have the user and then you have the content so that's how the API works with that and you need to store all of these messages to keep the context of the conversation the context means suppose you ask a question like who won the World Series in 2020 and there you can see it has come up with an answer and now you ask that where it was played so you need to store all of these conversations so that the open AI knows that on what topic you are discussing with me something so that's how it works so you need to just store all of these messages so that the open AI sees that what exactly the user is talking about and then give that answer accordingly so now let's move on and we have already created the collection of the user and inside that we have the chats as well so now let's work on them so now I want to move on so we can move on into I think first we can move on into the back end so inside the back end we can move on so here you can see inside if we move on to the controllers so now we should move on to the routes and there you can see now we have the chat routes as well now let's create another route as well for the chats so that it should work accordingly so here now what do we want to do so here there would be a new route for the chat so we can have the chat routes start we can have the post so that would be a post request in which now what do we want to do so we'll be having a chat SL we can have the new like this so we can have the chat SL new and after that this would only work so chat routes is a protected API so we can add that as well and only the authenticated and authorized users can access that so what we can do so after we move on to/ new API chat slne then we can move on so we can have the verified token so we can have the verified token so that we should uh verify the token of the user and then only we want to move ahead and then what we can do so we can define a controller function from which we can generate the chat completion for the user so let's move on to the controllers let's create a new controller that we can have chats controllers like that chat controllers do we can have the TS and after that let's define the controller function for that so we can have the expert cost we can have the uh we can have the generate chat we can have the completion so that would be equals to we can have the asynchronous errow function over there and it would be same like the users controller so the parameters would be same like the request response and the next it should be same so we have the request it should be imported from the express response should be imported from Express the next function is there in the express and that's how it's going to work and after that now what do we want to do so first now we want to configure the open a so for that we want to use the open apis so first we want to configure the open API with that and for configuration let's move on so we can define a function as well inside the utils or we can have the config we can Define the opening i p config dots and here we can Define the function we can have the function configure we can reopen hey I like this so we have this function over there so after that now what do we want to do so here we can have the cons we can have the config like that so that should be equals to we can have a new configuration over there a new configuration like this and that should be we can have the object over there and now we want to provide a couple of keys like first we want to provide the API key for that API key should be equals to begin of the process do begin of the environment dot you can move on to the environment as well you can see here we have here the API Keys as well open I secret so let's just use that so you can copy that and then you can paste that over there and after that let's move on so we can have the API oh sorry we can have the organization ID as well we can have the organization so we can have the process do we can have the envirment dot we can have the open AI I think we can again move on to the envirment so that should be open a organization ID like this so we have this thing over there it should be event like this environment like this so now we have the configuration with that and everything should work perfectly fine so here we have the configure of the open Ai and we can export this function as well so we can the export const we have the configure open a that should be equals to function like this so now we have this function of the configure open Ai and now we want to move on and after that so here inside the generate chat completion now what do we want to do so here we need the message from the user so we want the message from the user so let's get that so we can have the con something that should be equals to we can have the request or we can have the body like this so from the body we'll be accessing the message property directly from the user and now you can see now what do we want to do as the next step now we have the message so we should add the validation as well so let's just complete one by one so let's move on to the validations as well inside the util inside the validators let's copy that the sign up and let's remove all of that so we can have the message over there like this so we can have the message not empty and we can have the message so we can have this function over there the chat completion validator so let's just copy and let's just use that inside the chat routes as well so after coming to the new let's have the verify token so first verify the token of the user and I think before verifying the token let's have the validation so we can have the validate over there and that should be equals to we can have the chat completion valid dat like that then we should be having the verified token and then let's move on to the final thing we can have generate chat completion so there are a couple of middlewares for this request because it's a protected API now let's move on to the chat completion so here we have the message now and after that first thing that we want to do is now again we want to verify the details of the user so we can have the cons we can have the user like this that should be equals to your weight and that should be equals to the user we can uh access the user model dot we can have the find by ID we can find a user by its ID and directly from the response dot we can have the locals JWT data like that dot we can have the ID so with the help of this now we'll be getting the ID now we'll be getting the whole user object and again we can verify if we don't have the user then what we can do we can have the return response to we can have the status that should be 41 to we can have the Json like that message like that and that should be the same message that we have created so we created the same message inside the users controller and I think you should store all of these uh static strings inside inside something like inside the constant TS so it's a good practice so now what we can do so we can just copy that over there like the user not register or the token Mal function we can have the message over there and after that after we have the user then what do we need to do is the next step after we have the user so then we want to just grab all of the chats of the user to get the context text of the conversation so first now what we will do grab chats of user like that so grab the chats of the user then the second thing would be send all chats with new one so we'll be sending all previous chats with the new one to API so that's how it's going to work so there are three simple steps for that send all of the chats with new one to the open API and then we'll be getting the response so there are three steps that we want to do so now what do we want to do so first we need to grab all of the chats of the user so we can have the cons we can have the chats like that and that should be equals to we can have the user dot we can have the chats dot we can have the map so we can map through all of the chats of the user so inside each chat there would be a role property so there would be a role and there would be a Content as well like this so there would be the content like that and you already know that how the role and the content works because each chat message has a role and the content property so we have the role and the content after that now what do we want to do and we can just return the same thing over there like this the role and we can have the content so with the help of this now we'll be having the array of the messages with the role and the content inside that now we have all of the messages of the user and then now what do want to do so this is the static message of the chats okay then we can have the chats like that we have the chats do push the latest message so we'll be pushing the latest message to the chats and inside that we'll be having the content and that should be equals to we can have the message like that the latest message received from the user and the role that we'll be having should be we can have the user like that so the role should also be the user should always be the user and we have the chats like that and then now what do we want to do so here we are just storing all of the chats inside the static array as well inside the static array inside just and this array is just for the memory purpose so now we want to store the chats inside the main user object as well so let's move on so we can have the user model dot we can have the chats like that we have the chats dot we can have the push like that so we can have the push so we can have the chat. push and now what we can do so we can have the content that should be equals to we can have the message and then what we can do so we can have the role as well so we can define the role so that should also be we can have the user like that so we can have the role of the user so that's how it's going to work so now we are grabbing all of the chats of the user and there you can see we have the chats and now the Second Step would be now we want to move on so now we want to move on and now we want to send all of the chats to the open API so let's move on so now we have the configuration of the openi right then we can have the cons we can have the config like that so that should be equals to we can have the configure open a like that so we'll be having the configuration with that and what we are sending from it so we are not sending anything so we should send here the config like that so we should send the configuration directly from it now we can move on into the chat controllers once again now we have the configuration over there and after that let's move on into that so we can have the const opening I like that we can have the const open Ai and that should be equals to we can have the new open AI like that the new open AI like that so now we want to use the open a API so let's import that so import something from that should be open a like that and import you need to import the open a API like this so this is a class for the open API you need to import that so you have the open AI like this API and now we want to provide the config object so now we want to provide the configuration over there and now we would be grabbing the open a complete AP AP with that so with the help of this now we have the complete open API and now the final thing that we want to do so now we can make the request to the open AI so we can have the cons chat we can have the response we have the chat response and that should be equals to now what do we want to do so we can have the await then we can move on so we can add the open AI like this we have the open AI I think we can have the create chat completion so we have the create chat completion and instead that we want to provide an object so now what do we want to do so we want to provide the model so which model do we want to use so we'll be using the model of we can have the GPT and make sure you have the same spelling so GPT we can have the 3.5 we can have the turbo like that so we can have the GPT 3.5 SL we can have the turbo and then we can move on so we can have the messages like that so we can have the messages so that should be equals to the chats array so that would be equals to the chats over there and that's how it's going to work and now you are getting the type error as well so what you need to do so the chats are so after that you can provide the type and donation as well you can have the as you can have the chat completion like that you can import type as well so you can have the chat completion so you have the request message like that and that should be equals to you have the same thing over there chat completion request message array like that and now you can see now you won't be having any type error because now the messages knows it is accepting the same type of arguments like that and now after that now what do we have so after we get the chat response then we would be getting the full chat the latest chat as well and the latest chat is being stored inside this so if you move on so you can see response choices zero message and the content so that's how you can get that so you can have the note JS as well completion. choices z. message. content so let's move on so what do we want to do so we can have the user dot we can have the chats dot we can have the push so we can push to the chats of the user and that should be equals to we can have the chat response dot we can have the data dot we can have the choices dot we can have the latest which is the zero and Dot we can have the message like that so that's how it's going to work and the message contains the completion response message it means role and the content so that's how it's going to work and after that the final thing that we want to do is now we can move on so now we can save the users chat array as well so we can have the weit over there that should be we can have the user dot we can have the save so we can save the user so that's how it's going to work and let's move on so we can have here like this and now what do we want to do is the next step so now after we have all of the chats of the user then we can again we can have the return response we can have the status that should be we can have the 200 it means everything worked successfully then we can have the Json messages over there the Json it should contain the chats like that the chats should be we can have the user to we can have the chats like that and now that s is going to work and there's another thing you can see and that s it will work and everything should work perfectly fine and there's another thing that we haven't used the TR catch block over there and it's very important here so what do you want to do so we can have the try catch block so all of this code should be there inside the try so it should be there inside the try block and inside the catch if we get an error then what do we want to do we need to send the response back to the server to the front end so inside this we'll be sending the message we can have the message we can have we can have this something when we can have the wrong like that and we don't know that what exactly is the error so we can provide this as a Servo error over there we can have the 500 for that and we can log the error as well inside this so we can log the error and that's how it's going to work over there so now you can see now the backend operations with the chat completion is completed so trust me it is completed and now we need to move on to the front end and now we need to design the UI for this and after we build the front end now we'll be testing this API directly with the front end so let's move on so here now what we can do so now we can again move back to the front end over there let's just close the back end let's just move on again to the front end so let's move on so here you can see now what do we have here so inside the chat page now we want to design the chat page so now let's work on the chat for end so let's move on so here you can see now we enter the chat. TSX and here now we have discussed about the layout now we want to design that so first thing first now what do we want to do so first we can just provide here a box so we can just use a box from the material UI so we can have your box and it should be imported directly from the mui so we can import something from we can have from mui material over there like that and now that should be equals to we can have the box and now we can provide a couple of styles using the SX prop so the display could be we can have the flex over there we can have the flex that should be we can have the one over there and then we can move on we can have the width that should be we can have the 100% of the width then we can move on we can have the height as well that should be 100% so it should have the full width and height we can have the margin from the top that should be three and I think the Gap should also be the three between them so that's the parent container of the div so that's the parent div over there and now what do we want to do here so it should contain the sidebar it's not exactly the sidebar but we'll be showing some details of the user during the sidebar now let's move on so we can have another box container over there it should again contain the SX prop then we can have the display so here the display should be I think for the medium devices what we can do so we can have the flex and for the small devices we can remove that so for the small devices we can have the excess that should be we can have the none and same for the MD as well that should be we can have the none over there and that's how it's going to work and after that I think it should be the SM so for the SM as well it should be none so after that this box should be there and inside that we can again use here I think a box over there inside this so we can have another box for containers then we can have the SX prop for that then we can use a display that should be we can have the flex then we can move on we can have the width that should again be the 100% of the parent container the 100% of the parent then we can move on we can again have the height so this time the height should be somewhere around 60 viewb height and that should be enough then we can have I think we can have the background color as well so we can provide some background color and that should be we can have the RGB that should be 17 29 then we can move on so we can have with it 39 like that so we have this background C for that so if we save and if we move on to go to chat so here we would be having that window over there and now after that now what do we want to do so inside this box uh I think after that we can provide some border as well so we can have the Border radius like that and that should be somewhere around what we can do so we can have the five for the bottle radius and then we can have the flex Direction sorry so it should be inside the column basis because there would be a couple of items then we can have the MX that should be we can have the three like that MX should be three from all of the sides so this is the container in which we'll be displaying the Avatar of the user so we can the Avatar like that so Avatar should be imported directly from the mui material so here we have the Avatar and after that let's just use it over there and inside the aatar now what do we want to do we can have the SX prop we can have the MX that should be we can have the auto over there so it should contain inside the center and then we can move on we can the margin from the Y that should be somewhere around two BG color that should be begin at the white over there and then we would be having the foreground color that should be we can have the black over there and the font weight should be we can have the 700 so that's how it's going to work and inside the aatar now what do we want to do so here we would again be getting the user profile user o profile so let's move on so we can have the cons o so that should be equals to what we're going to do so here so here sorry what we have we have the use Au over there like that and here now we want to grab the first and the last letter the first word of the first name and first word of the last name so we can have the O DOT we can have the user dot we can have your the name dot we can have the zero so let's see how it looks so if we save and if we move on if we refresh the page I think there was an error with the back end so let's run the back end as well and PM run we can have the dev so let's see how it looks now so let's move on again let's just refresh it once again so there we can see now we are getting the James and after that now what do we want to do so we can grab the last name as well so here is the person name and then we can add another string then we can have the O I think we can have a o dot we can have your the user property once again dot we can have the name dot we can have the split dot we can have the split dot we can have with the um with the space then we can have the second letter and it should contain the first word of that so let's see how it looks now so so you can see now we have the James and the Marshall and that's how we can do that so it's a temporary thing it's like a jugar in Hindi so that's how it works so now let's move on as the next step so now what do we want to do so I think we and I think we can just provide some of the margins between them there should be some margin between them so after that now let's move on so let's just complete that as well I think the RGB color is not there it was not implemented so that's why we were seeing that so you can see now we have the color and that's how it's going to look and after that now what do we want to do so after that we could have the typography after the Avatar so we can have the typography over there so we can have the typography over there so it should be imported directly from this the typography and now let's move on so inside the typography we can provide a couple of more classes like we can have the SX prop it should contain a couple of things like we can provide the MX that should be we can have the a over there for the MX then we we can move on then we can have the font family so here we should be having the different font family work sense like that and inste this type graphy and what we can use so we can use you are talking to our chat bar like that so now you have this thing over there that you are talking to a chat Bo and that's how it's going to work and after this typography then again you can move on you can create another typography over there you can have another typography you can copy and paste but this typography would have a different thing I think so we can have the MX Auto it would be same then we can have you I think we can have the margin from the Y that should be somewhere around we have the four padding should be somewhere around three so inside this what we can use so we can add a line so you can add this line over there like you can ask a question related to programming uh you can have the knowledge business advises education Etc but avoid sharing the personal information so that's how it's going to work so you can see now it looks like that and that's how it will work and after that now let's move on so here you have this thing over there so that's how it's going to work and after that now let's move on so now we have this typography and after that below that we would be having the button as well so below that we would be having the button I don't think what happen to the Auto Imports over there because it's not working for me so it should be the button over there so it's a button over there so now we should be using the button from the material UI once again so button could be what we can use so we can have the SX prop like that and here now what we can do so we can have the width that should be 200 pixels for that then we can move on we can have the margin from the Y that should be we can have the auto over there so it should be the auto then we can move on we can have the color of the text that should be the white then we can move on so we can can the font weight like that and that should be somewhere around we can have the 700 over there then we can move on the bottle radius so that should be somewhere around we can give the three and again we can move on we can have the MX that should be we can have the auto margin from the X and I think that's enough or we can have the BG color as well so we can have the BG color and that should be we can import the red color from the material UI so we can move on so we can import the color Shades as well from the material so you can import like that you can import something from you can have the mui material so mu material SL we can have the colors and you can import the red color over there like this or you can just use the red directly like this so you can have the red and you can just use the red over there to save the space inside the final bundle so we have the red and inside the red now what we can use so we can use the 500 color or we can use the 300 color for the red so we can have the red do we can have the 3 like that and after that now what we can do so we can have the hover as well so we can have the hover State and inside the H now what we can use so we can have the BG color that should be we can have the red again we can have the Red Dot we can have the a 140 I think we can have the A40 for that so if we save it if you move on so there you can see now we have the button and after that now what do we want to do is the next step then we can move on so we can have the clear conversation because we were having a button as well of the clear conversation now we have this button and that's how it's going to look and after this now you can see this was supposed to be on to the left side but now we will be adding another box container over there so after this now we would be having another box container over there now we can have another box so inside this box now we would be having some Styles over there like inside this box we would be having some Styles like we can have the SX prop that should be we can have the display that should be we can have the flex over there and then what we can use so we can have the flex over there that should be inside an object for the MD the flex should be 0.8 and for the extra small the flex should be somewhere around one and same for the small as well the small the flex should be somewhere around one and after this now what do we want to do so after this we can just write some typography about the model name that we'll be using the typography should be there so I think we can again use the X prop it should contain the text line inside the Cento and then what we can use so we the font size that should be 40 pixels of the font we can just use the color that should be we can the white over there then we can move on we can the font family I think font family should be default for that then we can have the margin from the bottom should be two like that so that's how it's going to work then we can the model that should be we can have the GPT 3.5 to turbo like that so if we save and if you move on so there you can see now we have the model GPT 3.5 turbo and that's how it's going to look and after that now what do you want to do so after that we can have another box container so I think why the styling has mismanaged so we need to see that why this is happening over there so I think uh inside this we can have the display so after this we can provide the flex properties for this as well so I think yeah we should provide the flex properties so after the display then we can have the flex so that should be somewhere around 0.2 for that we can have the flex direction that should be we can have the column like that so now you can see now it looks great over there now it's look great and everything seems to be working perfectly fine over there you can see now it's looking great over there and now you can see now with the model GPD 3.5 turbo I don't think why it's not moving on into the center because now we want to provide the width that should be 100% like that still so instead we can use the MX of the auto and that's how it's going to work so you can see now it's looking great and after that now what do we want to do after the typography now we want to render the actual chats over there so we can have the chats over there so inside this box we can again render the SX prop we can have the SX prop over there and we can use the width that should be again we can use the 100% of the available space then we can have the height that should be 60 viewport height then we can move on so we can the Bott radius so that should be somewhere around we can have the three over there we can have the MX that should be we can have the auto over there for the MX then we can move on we can have the display that should be again inside the flex box again we can have the flex Direction over there that should be we can have the column over there and then we we can have the Overflow like we can have the Overflow that should be equals to Scrolls so we can have the scroll Behavior but the Overflow X would not be visible should not be visible so overflow overflow wax shouldn't be hidden like that should be hidden and then we can have the smooth as well we can have the Overflow Behavior like that we have the scroll Behavior that should be equals to we can have the smoooth like that and that's how it's going to work again you can see now we are coming with this site so we want to fix this display as well after the width so we can remove the width and instead we can have a I think we can have the flex Direction inside it should be the column we can have the padding from the X that should be somewhere around three so here's the error so we have the error of the smooth so that's how it's going going to work over there like that so if we save and if you move on so now we should be having the scroll Behavior as well and that's how it's going to work and then we can have the Overflow why as well and that should be be have the auto like that so now it should not be visible on the initial scroll and that's how it's going to work you can provide the font weight of the 600 as well and it will look great and after that now what do we want to do so after that now we want to render all of the chats of the user so inside this div now we want to render all of the chats but here we do not have any chats of the user so we need to create that and how we can create that so I think now what we can do so as of now we can just render some of the static chats over there so you can get that directly from the chat GPT as well and I think now to render all of the chats over there we can use the static chats now to render all of the static chats let's just move on to the chat gbd and let's move on and let's just create an array of all of these chats so you can see now we can generate the chats like this so we can have create an area of static chats with the assistant like the r string and the content we have the message over there and that's how we can use that so we can just copy the array then we can move on so for now we can just Define the constant array over here so we can have the const we can have the chat messages so that should be this messages over there so we can have the chat messages like that and that's how it's going to work so now let's define all of that so here now what we can use so we can have the chat messages to we can have the map over there so we can have the map and now what do we want to do here so now after the map now we want to run a separate component so now we'll be creating a different component for each chat item so there would be a different component there would be separate component for each chat item to show the chats so here what we need to do here so we'll be having the chat like that so we can have the chat and then now what we want to do so as of now we can just render a normal div in which we can just render something like we can just render we can render the chat like that so we can have the the chat do we can have the message or we can have the content like that so let's see how it going to look so let's see how it looks now so what's happening over there let's see what happens so there you can see now we are seeing all of the chats over there like hello you and see this you can see I'm in New York City and all of that and let's just create the separate component in which we can just display all of the chats same like the chat gbd so let's move on so inside the components let's just move on so let's move on let's create another folder that can be chat and inside the chat we can have the chat item like that dot we have the TSX over there the chat item. TSX and now let's just move on to the chat item so inside the chat item now what do we want to do so we'll be accepting some props as well so we'll be accepting the props like we can have the message then we can have the prop of the role as well so instead of message we'll be having the content over there content and that should be equals to we can have the role and then the content should be inside the format of we can have the string and the role that we'll be getting so rle should be there should be two roles only the role could be we can have a suppose that could be user or there can be the role of assistant like that so the roles can have the user and the assistant so that's how it's going to work and after that we'll be having if we move on to the paint so let's move on again like how each chat item will going to look so suppose that's a chat item over there so inside first corner like this so we can have the Avatar of the user we can have the Avatar icon like we can have the user Avatar icon it can be the user or it can be the chat gpts Avatar icon that could be the open AI then after that we would be having the message over there like we would be having the message like that so let's move on let's just complete that as well so after this now we want to render all of these things according to the conditions so inser the return statement now what we can do so first we can check if the role is equals to we have the assistant then we want to perform different things and if the role is different then we want to perform different things so let's just addite the Mt GSX TX over there like that inside this as well and inside this as well so if the role is the assistant then what we can use so we can use the box from the material once again so let's import that as well we can import something from we can have add the material that should be we can have the box like that so we can have the box and here what do we want to do so here we have the box and inside the box now what we can use so we can have the SX prop we can have the display that should be we can have the flex over there like that we can have the display Flex then we can have the padding that should be somewhere around two we can have the background color as well so for the assistant there would be different background color for each chat item and that should be hash we can have the0 4 d 5612 we have the background color and then now what do we want to do so then we can have the margin from the Y that should be two the gap between the items that should be we can have the two and after that now what do we want to do so first we need to render the Avatar so we can have the Avatar like that so we can have the Avatar like this so we have the Avatar and after this now we have the Avatar over there and again inside the Avatar now what do we want to do we can have the SX prop we can have the margin from the left that should be we can have the zero for this because now the assistant should start from zero again and then inside the Avatar now what do you want to do so if the role is the assistant then we'll be using the image The Source should be equals to open AI dot we have the PNG over there and then we have the alt of the open a once again open a and then we can have the width as well width that should be somewhere around we can the 30 pixels for the width like that so that's how it's going to work and after that we would be having another message as well so we can have the message so inside the message now what do you want to do so we can just render the content directly so we can have the typography for that so we can have the typography so we can just render all of the content there inside the typography over there we can have the typography and inside the typography we can just provide we can have the color over there color we can have the white like that the color should be white then we can the font size so I think the color is already white so we need we just need to provide the font I think we can have this size that should be 20 pixels enough and after that now what do we want to do so we just want to render the content over there like that so it is same like this you can see now we have if the role is assistant then we want to do this and if the role is the user then we want to do a different thing then what we can do so we can again copy this box we can again paste that instead of this now we would be having a different type of styling so we have the petting tube we have the margin from the Y that should be I think margin is not required so we can remove the margin we have the Gap we have the different background color that should be what we need to do so we can have the0 4 d 56 over there so that should be the different background color and after that now what do you want to do so we can have the AAR so again we can use the Au property of the user so we can have the const we can have the Au over that should be equals to we have the use that should be Au over there that should be use and again we can grab this thing over there like this so it's like a temporary thing but still so let's just complete the application then we'll change that so we can just copy this thing over there let's move on to the chat item and let's render this thing inside the Avatar instead of this let's just render this thing and now what do we want to do so then we have the typography and it should be same I think but inide the Avatar we can have the ml Z we can have the BG color like that black then we can have the foreground color so we can have the color that should be we can have the white so if we save and if we move on to the applications so let's see how it looks so suppose we have all of these messages like that and now we have the chat do content but instead we want to write here uh chat item component over there chat item and now we want to send the data we can just for the content that should be we can have the chat do we have the content over there then we can move on we can have the RO that should be we can have the chat dot we can have the rooll so that's how it's going to work and I think the role is mismatching maybe the user and the assistant so that's how it's going to work so then we can send the key as well so we can send the key so as of now we can just send index for the key so it's not like it's not the accepted solution for the keys because sometimes it can get worse so we should provide a key for the ID for the separate ID for that sorry now we are seeing this thing over there hello can you tell me this this this you have the James so I think all messages are directly from the user of the assistant the RO of the assistant so let's move on and let's just see that what is happening over there so that's the error because now we have provided some extra space over there so if you save and if you move on so there you can see now it look looks great you can see first the user sends a message like hello can you tell me the weather forecast for tomorrow sure I can help you please provide me your location I'm in the new Rox behav the behav the message great give me a moment and then there you can see now of the message the weather forecast is we have the sunny we have the dead sound perfect you can see now we have created this type of application you can see it's looking great now the design looks great over there so that's how it's going to work and the final thing that we want to do for the UI is now we want to add the input box as well below that so let's do that as well so what do we want to do so again we can move on to the parent chat and here we can provide the input tag inside this container right inside this container let's move on at the bottom so after this let's add the input tag as well so for this now what we can do so we can just use I think we can directly use the HTML input tag because it would be more preferable HTM input and here we can have the type text we can provide the styling for that the style should be what do we want to do so we can have the width that should we can have the 100% for the width then we can have the background color like that we have the background color that should be we can have the transparent for that like that then we can have the padding that should be 10 pixels for that then we can move on so we can have the Border so that should be we can have the none over there like that border none so we don't need any border over there then we can have the outline that should be again we can use the none for that and I think that's enough so we can also provide the color I think yeah color that should be we can have the white then we can move on we can the font size as well that should be somewhere around 20 pixels over there so these are the styles for the input tag and now what do you want to do so we can just provide a different D for the input so let's move on so in the end we'll be having the icon as well so we can have the div we can provide the styles for the div and this should contain the width that should be we can have the 100% of the width then we can move on so we can have the pading so that should be somewhere around 20 pixels over there padding from all of these sides and then what we can do so we can have the bottle radius so what we can do so we can wrap the input directly inside this div so we can have a sty like input so so we can move on to the input we can have the Border we can have the radius that should be somewhere around we have the eight then we can move on so we can have the background color so we can use different background color for this that should be RGB once again and that should be we can have the 17 27 and that should be we can have the 39 so that's how it's going to look and after that now what do you want to do so after that I think that's enough for that so I think we can have the display as well so display that should be we have the flex because we want to render the icon as well we can have the margin from we can have your the right like this so we can have the margin from the right that should be we can the auto like that and now what do we want to do is the next step have the margin like that that should be Auto like this and now what do you want to do so after this input now we can just render the icon as well to send so that could be a button so we can use the icon button directly from the material UI so we can the icon button so we can move on to the top once again so we can have here the icon button it is used to provide the hover effects and all functionality The Click effects functionality to a normal icon so we can have the icon button over there like that and then we can provide the icon between them so first we can provide the Styles a margin from the left that should be we have the auto we can have the color that should be we can have the white over there for the color and I think we can move on we can import one icon as well from the react icons so we can import we can import I think we can import from the react icons SL IO and the second thing that we want to import should be we should be importing the iomd icon like IO MD we can have this send so I just selected this icon so we can use this icon and let's see see how it looks now so we have thisd send icon over there and that's how it's going to look so if you same it if you move on so there you can see now we have the icon over there and you can see it's working perfectly fine over there you can see now we have the icon it's looking great over there so there you can see it's looking great over there you can see now have the input as well it's working perfectly fine over there like that you can see it's looking great over there so we have this input tag and there you can see in the end we have the button to send the chat as well and you can see that's how it works and there you can see the style looks great over there like that so it looks great and now the final thing that we want to do is is now we want to integrate this input and the chats to the API so let's complete that as well so there we go you can see now the design looks great over there and everything seems to be working perfectly fine and now another thing that we want to do over there we can just check the responsiveness as well we can move on to the inspect panel so we can select the responsive you can see it's looking great over there you can see now we don't have the the clear conversation button inside the mobile devices but on the desktop we have one and there you can see everything seems to be working perfectly fine and now let's move on let's integrate that to the back end as well so let's complete that as well so now we need to move on so you can see we have already created that on the back end we want just to integrate that here so how can we do that so first we need the data of this input right so first we need this input data so let's move on so what we can do so we can deare a ref inside this so we can declare a ref and from that ref we can just get the data of this input so the ref will allow you to get directly to the reference to this input element directly from the Dom so we can provide the ref over there so we can move on we can have the cons we can have the input we can have the ref like that and that should be equals to we can have the use ref over there so we can use the use ref hook directly from the react and initial value could be here we can have the null and we can just provide HTML input element over there HTML input element and that should be equals to null as well like this and after that now what do we want to do so we can copy the input ra over there and we can directly move on to the input so here we have the input and here we can just provide the ref we can provide the ref and that should be equals to we can have the input ref that should be the input ref and that's how we want to do that and after that now what do you want to do so once we click on this send button once we click on this icon button so now we should send the input data so let's move on so we can move on to the top once again so here we have the return statement and before that we can have the cons we can have the handle submit like that or we can have the handle we can have the handle submit over there so that should be again equals to a function and we can Define this function as an asynchronous function as well so we can have the async over there and that's how it's going to work and after that now what do we want to do so inside this function now we'll be getting the data of this input gra so let's move on so we can log the data like this we can have the input ref dot we can have the current dot we can have the value over there because it is directly referenced to the input element so that's why you can get the value you can get the data of the input as well so here we just need to get the value we can just log the value and we can reference this handle submit function to this input like that so we can have the icon button we can have the on click state for this and we can have the handle submit like that so let's see what happens if we are getting the data or the not so let's move on we can have the hello so let's just click on the send so let's just get the data so now we are getting the data and everything seems to be working perfectly fine and again we can move back to the uh to the chat page over there and here we have a couple of Errors like the first error that we have would be the role so as of now what we can do so we can have the TS ignore to ignore the type checking on the next line so now you can see now we do not have any error and now what do you want to do over there so now once we get the input over there once we get the input now what do we want to do so first we want to store all of these chats so first all of the previous chats of the user would be stored and then we want to insert the latest chat into the array so let's move on let's declare the chats array as well so we can again have the use State over there like this we can have the use State we can have the chats or we can have the messages we can have the set messages over there I think chat messages we can have okay we can have the set chat messages and use state would have the initial value of the empty string over there and we can Define the type as well I think so first thing that we want to do is now we can remove the chat messages over there we can remove this and now we have the set chat messages and here we have the use state so as of now we can use here without any type so let's see what happens and after that you can see now we won't be seeing any chat over there now we don't have any chat and after that you can see once we move on so let's move on to the handle submit over there so once we move on so now first thing that we want to do is now we want to get the latest input message so we can have the cons content and that should be equals to we can have the input ref dot we can have the current dot we can have the value like this so we can have the input ref do current do value we can have S we can have the string over there we can have a string and now let's move on so after this now we want to move on so now we want to move on and after that now we can do I think so after we create a new content over there now what we can do we can just remove the ref of the input so we can check if we have the input ref so if we have the input ref and the input ref do we have the current so then what do we want to do so now we can have the input ref do current do we can have the value is equals to the empty string so that now the input should be moved on to the empty string once again and now we have the content over there and after that now what do we want to do so now we'll be creating a new message so we can have the cons we can have the new message like this and that should be equals to an object the role should be of we can have the user over there the role has the user and the content over there so we can have the content like this and that's how it's going to work and after that now what do we want to do so now we want to store that input inside this state as well inside this US state as well so we can have the set chat messages over there we can have the set sorry we can have the set chat messages and inside there now we want to First grab the previous chats so we can have the previous and now we want to create a new array so first all of the previous chats would be stored and then the latest new message would be stored like that so that's how it's going to work and now you can see now we getting some type errors so we can move on so I think what we can do over there we can just declare the types as well so that is the type for a messages so let's move on so we can have the type we can have the messages over there and that should be equals to we can have the type of the message only that should be equals to we can Define the types over there like this so we can have the role string we can have the content of the string the role we can also Define the exact type like the user and the role can be of we can have the assistant as well we have the role user or the assistant and now the use State can have the values of we can have the message array like that and that's how it's going to work over there and the new message is also of type of the message like this so we can have the type of the message and now we should not be getting any type errors as well so this is known as the clean code so because now we have the types of everything that we use and after that now we have the new message and now the new message would be stored inside the set messages array so let's move on so if we send a new message over there like we can send the hero so then I think it should be stored there you can see now we are seeing the hell over there we can have the high we can just click on the send so now you can see now we have the high and everything seems to be working perfectly fine over there and now let's move on so now we have the new messages let's just again refresh this and there now what do we want to do so after this now we can again move back to the chat page over there we can again move back we can close others and now let's complete all of that so there you can see so after we create a new message over there inside this array now what we want to do so now we want to send the API request to the back end with a new message so with that uh with the help of that now we'll be receiving the response as well and we can send the new response inside the set chat messages array so let's move on so what do we want to do here so we can first move on to the API Communicator so let's create another function over there so let's create another function like this so what we can do so the function could be so the function could be we can have the send chat we can have the request over there we have the send chat request and here it would be a synchronous function and here we need the message so we can have the message like this so that should be inside the string so here we have the message over there and now what do we want to do so xos start we can have the post and this time it would be slash chat and Slash new because we have registered this route as well so/ chat SL new and after that inside the second parameter now we need to provide the data as well so we can provide the data the data could be equals to we need to only send the message so that's how it's going to work and after that if the response. status not equals to 200 then we can have the error message Chat like that unable to send chat and after we receive the response then inside the data now we'll be receiving the full list of all of the messages of the user so then what we want to do so now we'll be just replacing the full array with the new list of messages so we can move on so we can have the const over there and then we can have the response like that or we can have the chat data like this and that should be equals to we can have the await then we can have the send chat request and here now we want to create a new message that could be equals to what do we want to do so we can just send the content over there we can send the content or we can send here the new message so we can have the content like that that and now let's move on so after we have the content let's see that what happens this time so after we have the content over there now we'll be receiving the response as well so now after that now what do we want to do so then we can move on so we can have this set chat messages over there set chat messages and that should be equals to an array of all of the messages of the user so we can have the chat data dot we can have the chats over there like that so we have the chat data do chats and that's how it's going to work and now let's see that what happens so first we need to move on to back end to verify all of that if everything works correct or not if everything is properly integrated or not so let's move on to the back end so uh we can move on to the chat routes we have the generate chat completion so here you can see now uh we are creating a new message role of the user user. chats. push and from there we are just sending the chats over there and that's how it's going to work so now let's move on and let's just try it out so let's try it out out once again so here now what I can send is I can send hello how are you today so let's send the message and let's see that what happens this time so let's see what happens so I think we are receiving some errors we can move on to the console so there are some errors over there so let's just refresh the page so now what do we want to do so again we can send a new request and we can track the network response over there so let's move on so we're going to the hello how are you today so let's just click on the send so let's see what happens so now we have the new it means now if we are sending a 44 not found it means now we do not have this uh we do not have this URL registered so I think we can move on to the back end once again so we have a new but inside the index we have the chats so here it should be the chat I think so we can have the chat only so let's see what happens this time so it should be we can have the chats only so let's move on so let's just click on send once again let's just again refresh that we can have the hello how are you doing today so let's see what happens if we just click on this end once again so let's just click on this end you can see now it is pending so now we should be receiving a new so there you can see now we are receiving a new message so you can see here we have a message like hello I am an AI as I don't have any feelings but I here to assist you and how can I help you today you can see everything seems to be working perfectly fine over there we just sended a new message we just sent a new message like hello how are you doing today we got the preview as well and inside the preview we got the ID of the message and there you can see we got the data as well and you can see that's how it works and everything seems to be working perfectly fine over there so you can see it looks great over there so let's send another message like what is we at the JavaScript so let's just send this message and let's see that what happens this time so this is a request and let's see that what happens inside the preview you can see now we are seeing the new chat messages over there you can see everything looks great over there now we have the content you can see JavaScript is the programming language you can see now the design also looks great design also looks similar to the chat gbt model as well you can see that's how it works and it looks great over there you can see it looks great and everything seems to be working perfectly fine so congratulations on successfully integrating the openi API to the monag application and you can see this looks great over there and everything seems to be working perfectly fine and here the last thing that we can do is now we want to do another thing so the thing is that if you access a code block from this open AI so suppose I can send a message like show me the I think we can have show me the code um like we can have show me the syntax that how can I declare function we can have the how can I declare the function and we can have the JavaScript so there you can see now we are receiving the response as well and it works great but there you can see here we have the code blocks as well you can see here we have the JavaScript we have the function function name here we have the Cod Snippets as well and now we want to show the cod snipets as well to the user and how can we do that so we can do that with using a library of the react which is a react syntax highlighter so we can move on so we can have the react syntax highlighter so we can use this Library over there so let's just move on let's just install this library in our application let's install this package and if you want to see the demos as well you can move on so here you have the demo as well inside this you can get the demos you can see you can provide some dark uh some dark themes as well the language as well and everything with that so that's how it works over there so let's move on and let's just Implement that as well so here we want to install this Library so we can move on we have the react syntax highlighter we can just copy that and then we can paste that over there so inside this frontend we can have the npm install react syntax highlighter and after that let's move on to the chat page once again so here we are rendering all of the chats so let's move on to the chat as well here we can move on to the chat item and here now we want to just import something from the prism code highlighter so now we want to import something from the react syntax highlighter so we can have the import we can have this something from it should be equals to from we can have the react syntax highlight o and here we can just move on and we can just import the prism style because if we move on to the npm package so you can see there are a couple of styles we can use the prism as well and that's how it's going to work so we'll be using this type of styles over there like prism as syntax highlighter and we'll be using some themes over there we can use any theme over there and then we can just write here the syntax highlighter language we can detect the language and then we can move on we can just provide the code strings between them so you can see if you move on to the application so could not find the Declaration file okay now we want to install the Declaration files as well so we can just copy this thing over there we can just paste it out here I don't know why I didn't copy we can copy it once again we can paste it out over there I don't know what is happening over there so let's move on so we can click on the DT over there declaration file and again we can move on we can just copy that and then we can paste is that over you and it is npm install it is inside the development dependency so we can write D flag over there like that and now let's install that as well and after that now we want to move on so now we should be having the types over there now we can import the prism over there prism as we can have the syntax we can have the S syntax highlighter over there and that's how it's going to work and after that now we want to move on so now we want to import the Styles as well so you can see again we can move on to documentation now we can get the Styles as well so what we can do so now here we are using the prism so we want to import the styles for the prism we can copy the statement we can import the CSS file directly from it and after that you can see we won't be using the color of the dark we'll be using the color dark like that so we'll be having the colder K dark like that we'll be using this style and it is being imported directly from the prism and after that now you can see now we want to detect that where is the code block between the string so if we move on to the inspect panel if we going refresh this if we refresh so let's see what happens this time I think the frontend server is not open we can have the npm Run Dev so again we can open the server and after that you can see if we move on and there's another thing that we want to do so on the initial request now we want to have the chats of the user as well so we want to maintain that as well so now let's move on so again what we can do so we can just send the hello over there so after we send the hello now will bece saving all of the messages of the user as well like this so that's how it's going to work over there and after that now what do we want to do so now between the string if we open this here the chat are if you open this thing over there like this so we have the message five so there you can see this is the string over there this is the string in which we have the code blocks as well right we have the code blocks but how we can detect that so if you see inside this message so every code block starts from this sign so I think that's the back Tex so it starts from three backticks over there so you can see every code block starts from three back Texs and ends in these three back tcks so with the help of this now we can just grab the code box as well so let's write the condition as well so what we can do so let's just copy it out so let's just test it out our programming skills so let's move on to the inspect panel we can move on to the console and we can have the con we can have the message like this so that should be equals to we can have this message so there we have the message and that's how it's going to work and after that let's move on so here now what we can do so we can have the message like this start we can have this split so we can split the message with these three back ticks over there so we can write that over there and this key is there onto the Escape I think before the escape this key is there so first let's move on and let's just use that over there so you can see now we have the array and inside the array we have seven elements so you can see inside the first one we have inside the Java script we have this rule over there and inside the second value of the array now we have the code block you can see now we have the code block and you can see inside the third as well I think now we have the code block inside this as well now we have the code block so that's how it's going to work and after that let's use the same syntax inside our application as well so let's move on so what do we want to do here so inside the chat item first thing that we want to do we can define a function before the component so before the component let's define the function we can have the extract code we can have from that should be we can have the string so that would be a function and in set this function now we would be expecting a parameter as well which is we can have the message like this we can have the message the type that should be of the string and after that now what do we want to do so we can check a condition like if the message like if the message to have the includes so if the message dot includes these three back takes over there like this if the message do includes this then what do you want to do then we can just renter here this over there now we can renter condition we can have the con we can have the blocks of the message that should be equals to we can have the message dot we can have the split so we can split all of these things inside this and then we can split that directly from the code blocks like this directly from this code blocks and after that now we want to return the array of the blocks so we can return the are of the blocks and that's how it's going to work and after that we need another function function suppose you can see if we move on to the application once again so some strings do not have the code blocks right so some strings do not have this so we should get the error like this thing is not found over there so we should get that error so now what we can do so we can just declare a function in which we can verify if a block is the code block so how we can verify that so there can be multiple rules for that so in this application we'll be declaring a basic syntax a basic validation check in which we can check that if that string includes a code block or note so it would be very simple so what do we want to do so again we can Define the function we can have is code block like that so that would be equals to a function like that and inside that what we can do so we can have the Str Str that should be inside the string format and after that let's think that how we can verify that if a string includes a code or not so there can be multiple parameters so you can see if we move on to the application so each code block contains a parenthesis like this so it can be having a parenthesis like this it can have the semicolons it can have a lot of things so we can verify all that so we can provide some if checks over there so like what we can do so we can have the if we can have the string do we can have the includes if the string do includes and equals to or what we can do we can check another condition or if the string dot we can have includes so if it includes the semicolon so this condition would pass and if the string dot we can have the includes over there so if the string dot includes this as well like this so if the string dot includes this block over there and we can provide a couple of conditions like this so so you can also Define your own conditions as well if you want to do that so here we have these conditions over there formatted and after that we can have another condition as well if the string or we can have the includes and if the string do includes that could be the hash sign for for the comment and if the string again we can have a condition like if the string dot we can have the includes over there once again or it could be the includes and that should be like this sign over there like the comment sign so it is a code block right so that could be a code block so now we can move on and we can verify all of that here so inside each message of this so if the role is assistant now we can verify that condition over there so after this box now we can remove this typography now we can remove this typography and let's move on so after this now first you can see inside this component first we can grab all of the code blocks so let's move on so we can have the cons here we can have the message blocks like that so that should be equals to we can have the extract code from the string and that should be equals to the content over there like this so that should be the content so if we get the empty AR over there so if we get this string are over there it means now we have the message blocks and if we do not get that if it is undefined it means now we do not have any code blocks over there so let's move on let's define the condition inside this block over there let's define that condition so first there would be a condition like if we don't have the message blocks if it is an empty array then what do we want to do so then we can have the condition and instead this we can again use the same typography over there we can have the typography and it can use the SX prop once again for the styling we can have the font size over there the font size could be we can have the 20 pixel like that so that could be this typography and inside this typography we can just render the content over there so that could have this content so you can see this condition works when we do not have the message blocks so let's provide another condition as well so once we have the message blocks and we have the message blocks to we can have the length um is greater than zero so this condition would always be true with the help of that and then we can move on so if we have the message blocks and we have the message blocks do length is not equals to zero so then what do we want to do so we can have the message blocks dot we can have the map so we can map through the message blocks over there and inside that we would be receiving the block string we would be receiving the block string over there and after that now what do we want to do so we can just write the condition and we can render something based on that condition so we can check if that's a code block if this block has the code block over there we can have the block like this so then what do you want to do so if this has a code block then we want to render something else then what do we want to render we can render something else and if it is not the code block then we want to do something else so we can provide the GSX over there the empty jsx tax over there like that and for this as well we can have the empty jsx tax like that and now what do you want to do so I think we are receiving the error inside the escort block because now we haven't return the true over there like that so we should return the true over there like this so we can have the true and if we do not find all of that we can just return the false over there we can return the false so you can see now we should not be getting any error so now if we have the code block then we want to render the syntax highlighter and if we don't have the code block within the same string then we want to render the simple typography so let's move on so inside this now we should be rendering the syntax highlighter we can have the syntax highlighter over there and then what do we want to do so inside that we can move on we can provide the style that should be we can have the colder Cod like that so we would be having this style over there I think we can have your CER we can have the dark so we'll be using this style over there so we can just use same over there like this so we have this style and after that we need to provide the language so this is an assignment for you that how you can grab the language so this is an assignment so you need to find the language of the code and this is very simple and you can find the answer of this assignment inside the GitHub repository so inside my final code you will be seeing the example you will be seeing the assignment solution as well so here now what do you want to do so we can just provide the language that should be for the JavaScript so as of now I am giving here the static type over there but now you should be just solving this assignment you should be solving this problem on yourself so now as of now I have the static language so now what you need to do you need to define a new state for the language as well so now we have the language of the JavaScript and now after that now what do you want to do so after that we need to render the code block between them so we can Rend the code block and that should be equals to we can have the block like this so that should be the block and if we do not have any code block inside that if we don't have the code block then we just need to copy this typography we can just paste it out over there and that should contain the block so that's how it's going to work so you can see that was very simple to explore you can see we just created a condition like if that string contains a code block and you can see first we are grabbing the code blocks from the string then we are very defying it according to this condition then we are rendering that according to these conditions like if that's a code block then we want to render the code or we want to render this thing over there so let's see what happens this time so if I send you the show I think we can have can you show the syntax of declaring variable in JavaScript like this so if I send this query to the chat jity so let's see what happens so what happened so let's move on to the network so there you can see now we are receiving the response as well so inside the response you can see now we are receiving the data can see it looks great over there you can see now we have the code blocks as well between them you can see in JavaScript this this this you can see the code blocks are working fine you can see now you can see all of the code blogs and it looks great over there right it looks great and everything seems to be working perfectly fine you can say it's looking great and there you got the solution of your assignment as well right you got the solution so you can see inside each code block you get the language of the code as well right you got the language of the code so your assignment has already been completed so you just need to grab the first word of the code block and then what you can do you can just move on and then you can just provide the language to the code block so that's how it's going to work so that's your assignment already completed so that's how it's going to work so you can see with the help of this now we are receiving all of the chats you can see it's looking great so that's how the chat G works you can see that's how we can use their apis to do all of the things so that's it for this so now let's move on so we can do the same thing for the users message as well so sometimes users also send a chat messages so what we can do so we can move move on we can just use the same box over there as well inside this so that's how it's going to work over there so let's move on so it would be same over there so that's how it's going to work and after that if you need to provide some margin or the petting between them so I think there's already some margin in the padding you can see the color is starting from there you can provide the margin from this I think so I think this box doesn't have any margin so you can provide the margin from the Y that should be equals to we can have the two and that's how it's going to happen and and everything seems to be working perfectly fine over there you can see it looks great and you can see that looks fine and now let's move on now we need to fix a couple of issues as well inside this application so there are a couple of issues you can see if we refresh this application you can see now we are successfully logged in but here you can see now we do not have any chats so now we need to create a route in which we can get all of the chats of the user as well so let's move on and we can make the request directly from the client so once we move on to the chat page so now we should be receiving all of the chats so let's Implement that so here let's move on to the back end once again so let's just quickly remove all of the shoes from our application so let's move on to the chat routes let's create a new route as well so let's create the chat routes. we can have the get request over there so that should be the get and that should be we can have the all chats like that or we can have the chats like this so that could be the route over there and here I think we do not need any valid date because we won't be sending any data and after that let's create a new function in which we can just send all of the chats to the user so what we can do so we can copy something like this from this from the users controller let's just paste it out there inside the chats controller so let's paste it out and that should be we can have the send chats to we can have the user like this so we can have the send chats to user and after that now what do you want to do so first we can verify the token of the user then if we don't have the user then we we have this conditions over there and after that now we have the return statement and inside the return statement we have the message of the okay then we can send the chats of the user so we can send the chats so that should be we can have the user do we can have the chats like this and that's how it's going to work so the work on the back end has been completed and now we can move on to the front end to implement that so now we can move on to the Au Communicator once again and here now what do you want to do so we can create another request in which what do you want to do so we can copy we can paste it out over there so that should be we can have the get I think we can have the get user chats like that we can have the get user chats and inside this we don't need any message over there we just need to send the exos we the get requests and that should be uh we don't need to send the message so chat that should be equals to I think we can move on to the routes so this is the message over there all chats over there so we need to send all chats over there so let's move on so that should be the all chats and here I found another book so it should not be the generate chat completion it should be I think we can get the chats like that so we can have a chats like that uh we can see so we can directly move on to the chat completion so we can have this send chats to user so that should be the function over there that you want to render so that should be this function and now what do we want to do so again we can move on to the communicator and here I think that's enough for that so we'll be getting the chats over there let's move on to the chat so before the return statement let's render the use effect code as well so we can have the use effect and in set this now what do you want to do so we need to run it only one time and I think instead of the use effect we can use the layout effect as well we can have the layout effect so layout effect runs before it is rent out on the UI so let's move on so after we have the layout effect so we can have a condition like if we have the O DOT we can have this logged in it means now we have the user and we have the o. user as well you can rent another condition like you can have the O do you can have the user so after that now you want to run something so after that you can run the code over there so you can uh you can move on so you can have the toast over there so you can import the toast to you can have the loading then we can have the loading chats like that so we can have the loading chats we can put the message like that we can put the ID over there so that should be we can have the load chats like that we have the ID over there and after that now what do you want to do so we can move on so we can have the get user chats like that get users chats over there and after that we'll be getting the data as well so we can have then we'll be getting the data over there data like this so then what do you want to do so after we get the data then we can have the set messages over there set chat messages that should be we can have an array we can destructure all the elements so we can have the data to we can have the message messages like that we can have the data do I think we have the chats so that's what we want to do so after we set all of these messages then we can have the toast dot we can have the success over there we can have the toast to success so we can copy this string over there we can have toast. success and that should be we can have successfully loaded we can have the chats over there successfully loaded chats and ID of the load chats and that's all we want to do and after that if we get any error then what do we want to do we can renter the catch over there so we can renter the catch statement and inside the catch we get the error first we can log the eror as well we can lock the error inside the console then we can move on so we can have the toast we can have the error as well to. error and that should be equals to we can send the message as well directly like we can have the loading fail like that we have the loading failed and that should be equals to the message as well so we can have the load chats like that we have the ID over there that should be we can have the load chats and that's how it's going to work and I don't know what is the error over there so I think this cannot be the array this should be the call back function so this should be a function over there like this and that's how it's going to work and everything seems to be working perfectly fine so if we refresh so let's see what happens so there you can see if we just refresh the page so I don't know what happen so let's move on to the go to chat and there you can see now we have successfully loaded the chats and everything seems to be working perfectly fine over there and that's how it's going to work so let's move on to the go to chats and there it seems to be working fine and if we refresh this I think on the refresh that's not working so I think the layout effect has been called before the main use effect and then what do you want to do so after that you can see if we refresh the page now you can see now we won't be seeing the chats over there but if we move on to the main route if we again move on to the goto chat then we'll be seeing the loading chats so there is an error so what do you want to do so you can see initially the context is sending the request to the back end regarding the token to check the users's token validity until then it is calling this code so what do you want to do so we need to create the dependency on the O So once the authentication changes now we want to rerun this code so let's move on and if we again refresh this now you can see it works fine you can see now successfully loaded all of the chats and that's how it's going to work you can see it's working perfectly fine and there's another thing that we want to do is you can see now we want to work on the clear conversation Button as well so we want to work on that so how we can do that so we can create another function we can create the cons we can have the handle delete like that handle delete chats like that so that could be equals to when asynchronous Arrow function and inser this now what do you want to do so we can remove everything we can remove the params so here we want to create a function inside the API communicator and we want to create a middleware inside the back end as well so that we can accept a request and then we can delete all of the chats of the user so let's move on so inside the chat route now what do you want to do so we can create another request over there so we can have the chat routes or we can have the delete over there now let's move on so we can have slash we can have the delete over there so we can have slash we can have the delete and after that let's move on so inside this now we can create another function we can just copy it out we can paste it out so we can paste this function over there we can have the delete we can have the chats over there so that's how it's going to work and after we get all of the token user verification check then we can move on so then we can move on so we can have the user do we can have the chats like this so we can have the user do chats is equals to an empty array so now we can set the users chats to the empty array and that's how we want to work and after we set that then I think we have the type error as well so we can expect the type error so we can have the TS we can have the ignore over there and after that now what do you want to do so after we have the user chats then we can have the await then we can have the user to we can have the save like that and that's how it's going to work and then you can see everything seems to be working fine and here now again we are sending the user chats I think it's not required over there so it's not required and that's how it's going to work and then now what do you want to do so again we can move on to the chat routes we can have the delete chats like that we have the delete chats then we can move on to the API Communicator let's create another function we can copy we can paste it out we can have your delete user chats so we can have the delete like this user chats that could be an asynchronous function this should be a delete request over there this should be the delete then we can have the delete like this so we can have the delete that should be chat / delete and I think yeah it's same we have the chat SL delete and after that now what do we want to do so I think everything seems to be working perfectly fine so it should be unable to delete the chats like that we get the error and then we can move on again to to the chat page and here now what do you want to do we can have the try catch for that so we can have the try catch so inside the try we can have here the wait we can have the delete chats of the user we can have the delete user chats and after that we can have the set messages of the user set chat messages that should be an empty array and after that we can run the toast as well toast. we can have the loading we can have the deleting chats like this we can have the ID as well we can have the ID we can have the delete chats over there like this we can just copy and after everything is successful then we can move on we can have the toast dot we can have the success over there then we have the deleted we can have the deleted chats we can have successfully and then we have the same ID then if we get an error then we can move on we can lock the error we can lock the complete error message then we can move on we can paste it out we have the TOs do we have the error we can have the deleting chats we can defail like that so that could be the error message and now we want to reference this function to this button as well to this button let's move on so let's provide the on click as well so we can have the on click over there and that should be we can have the handle delete chats so let's see what happens if we move on so we have successfully loaded chats and let's move on let's just delete all of the chats let's move on let's click on delete deleting chats you can see now the chats are deled successfully and everything seems to be working perfectly fine and now if we refresh now you can see now successfully loaded chats but here we do not have any chats of the user and that's how you can see it's working perfectly fine over there you can see inside the all chats we do not have any chat and it's working great so it seems working fine and now what we want to do as the next step so there you can see now we want to enable the protected routes inside the front end as well so inside the back end we already have the protected routes if we move on to the chat routes you can see first we are verifying all of the tokens we have generate chat completion we are validating all of that so we have a couple of middlewares but now we want to move on to the front end to verify all of the protected routes of the user so and then we want to create the front end as well of the user so that would be very simple so first thing that we want to do is now we can move on to the chat page so if the user is not logged in and if the user tries to enter this page then we want to move on and then we want to redirect the user to the login page so let's move on to the chat over there so it would be very simple so what do we want to do so we can just again have the use effect code over there we can have the US effect over there and inside that now what do you want to do so let's just call it once we change the Au over there so inste the use effect now what do you want to do we can have if we do not have the O DOT we can have the user if that's null then what do you want to do so then we can have the return now we want to return the user to a new route and to use that we need to use use one thing from the react rout Dom which is a navigate so we have a hook inside the react rout Dom which is a navigate so we can use that as well we can have import something and that should be equals to we can have the from we can have the react R Dom and the some thing is we can have the use navigate so this is a hook that we can use so first thing that we can do is we can have the cons and nigate like this we can have the navigate that should have the reference of the use navigate hook and after that now what do you want to do so after we have so after you can see once we do not have the au. user we can have the return we can have the navigate like this we can have the return navigate that should be equals to SL we can have the login like this so that's how it's going to work so if you move on to the application and if you just click on the log out so there you can see now we to the Home Route but you can see now we want to implement the log out functionalities as well so let's move on so if the user is not logged in so let's just Implement that so before for testing this now we want to implement the log out as well so for implementing the log out let's again move back to the back end so we have the users controller so we can move on to the user routes let's create another route of the logout so we can have the user routes do we can have the get that should be equals to we can have the log out so that should be a log out request and inside the verify user let's just copy this function let's just paste it out and inside that we can have the log out we can have the user log out like that user log out like that this and we have this function over there and inste this function there would be nothing but we would be just removing the cookies of the user so we would be removing the cookies of the user so that's how we can create that so you can see here we created the cookies inside the sign up and inside the login so we can remove the cookies of the user as well so how we can use that so we can use the clear cookie function so we can use this over there so we have the logout route and after we verify all of the details of the user then we can move on we can have the response do we can have the clear cookie and inside that we have a couple of things we have the HTTP only domain of the Local Host signed of the true the path is this and let's just try the login oh sorry let's just try the log out as well so let's move on so it should be we can have the use a log out like this so we have this controller function and let's move on to the API Communicator let's create another request that should be we can have the user log out again log out user like this so we have this function that should be a get request only and it should be we can have slash user slash we would have the log out like this the log out so because the front end cannot delete the HTTP only cookies so that's why we need the back end to just remove the cookies so that's how we want to work and after that let's move on so there now we can move on I think so now we can move on to the header over there we can remove we can move on to the header or we can directly move on into I think we can directly move on into the O context so here we need the log out so after that now what do you want to do so we can have the a wait that should be we can have the user log out like this so I think we have the log out user like this so we have the log out user over there so we want to call this function and after that we'll be having the set messages like this sorry we'll be having the set is logged in that should be we can have the false set user that should be we can have the null over there and after that we want to reload the page as well because once you remove the HTTP only cookies it takes some time it does doesn't immediately get uh removed so it takes some time so we can have the window dot we can have the location dot we can have the REO like that so we can reload the web page so let's see what happens this time and let's see that where we are using this function let's move on to the header. TSX so there you can see now we are using the log out so let's just try it out so if we move on to the application if we again move on to go to chat and let's just move on to the inspect let's move on to console or we can move on to the network let's just click on the logout to see what happens so here we have the log out so let's just click on the log out I think nothing is happening over there so we need to do that so we can move on to the navigation link and there you can see we are not doing anything with the log out so we can put the on click prop over there we can have the on click and here what do you want to do so now we can just run near the props on click and it would be very simple now we can move on to the header you can see now here we are providing the on click so it should work perfectly fine over there let's try it out once again so let's move on to the application so let's move on to the network tab over there let's click on the log out so there you can see now we are logged out and there you can see now inside the O status now we are receiving the message like the token not received so everything seems to be working perfectly fine over there so it's working totally fine and now let's move on so here you can see if we refresh now we do not have any token over there and let's move on to the application as well so inside the cookies now you won't find any cookies so now let's move on let's just try and log in once again so let's move on with the J games let's click on the login so now we should be having the cookies I think we are having the error over there I think there's something wrong with that I think it is admin it it should be the James test.com 1 2 3 4 5 6 so email was wrong so let's try it out with the login so you can see it works perfectly fine now we are logged in and if we now refresh now we do not have any error message and that's how it's going to work so that's all we want to do and now let's move on so you can see everything seems to be working fine in our app ation and now we want to move on so if we again click on the log out now you can see now we are logged out but now you can see if we move on to the chat page over there if we move on to we can have local L 5173 then we can have the chat over there like that so let's move on so now you can see now we should be redirected to the login and that's how it works and you can see that's how it works and everything seems to be working perfectly fine so now everything seems to be working perfectly fine and there are a couple of things remaining to do this inside this application the first is the sign up UI we have the homepage UI and we have the protected routes so we are into the middle of protected routes and let's just complete all of that so let's move on to the login so there you can see if we are logged in and if we move on to go to chat you can see suppose I want to show you an example if we click on the log out and if we again move on to SL we can have the chat you can see now we are redirected to the login page so we want to do the similar thing for the login page as well so let's move on to the login so we want to do same like if the user is already logged in then we can redirect the user to the chat page so we can have the effect over there we can have the effect and inside the effect it should run every time the Au changes then we can move on so here it should be very simple so we can check if we have the auth do we have the user then I think what we can do so we can redirect the user to navigate like we can have the navigate over there SL we can have the chat so that's all that we want to do for the login so you can see now if we move on so I have already registered the navigate so with the help of this now we can move on to the chat so if you move on if you click on the login James test.com we can click on the login so you can see everything seems to be working fine but now if we move on to the login page over there like this so then you can see now we'll be redirected to the chat page so everything seems to be working perfectly fine and now we want to do another thing for the protected routes so let's move on again into the main file app. TSX and here now what we can do so we have the chat page over there and this is the protected route so we can only enable this route so we can wrap this inside a condition so we can only enable this route once we have the Au do we have the is logged in is true and we have the Au dot we have the user property so after all of these things then only we want to enable this route over there so now you can see if we again move on click on the log out and if we again move on we can go to/ chat you can see now we'll be moved on to the not found page it means now the user is moving into a page which is not found so everything seems to to be working perfectly fine over there so now this functionality is completed the protected routes let's just work on the sign up as well so we can move onto the login we can copy the complete login page we can paste it out inside the signup because the UI should be same of the authentication of the O screens so that should be we can have the sign up and here as well we should be having a the sign up over there like this so it should have the sign up over there and here we want to do another thing we need another input for for this we have uh we can have the customized input the type should be we can have the text the name should be the name itself of the user the label should also be the name then we can move on we can declare the function for the signup as well so let's move on to the API Communicator so let's just copy the login let's just paste it below that we can have the sign up user like this so then we can have the xl. post that should be we can have the sign up over there like this and we can have the name as well the name should also so we can have the string the email and the password then here as well we'll be having the name email and the password so you can see now it's working fine and the sign up has the 2011 inside that we can have the unable to we can the sign up like this so you can see now we have already defined all of the functions we just want to copy paste all of these functions and change these routes over there now we have the sign up route if the response. status not equals to 2011 unable to sign up then we are just sending the data and now let's move on so now we can move on into the communic I think inside the Au context let's move on let's do inside the signup as well so let's move on so we need to do the same thing inside the signup so let's move on so we can have the data equals to we can have the sign up user like this sign up user we need to provide the name email and the password over there and then we'll be setting all of these properties now finally we can move on to the login sorry to the signup page then we should be having o where is the o uh there is the O it should be the O do we can have this sign up and now we want to get the name as well so we can get the name over there we can get the const we can get the name that should be equals to form data doget that should be equals to the name and now we'll be sending the name email and the password and that's how it's going to work and let's move on so there you can see now we have the text of the login it should be we can have the sign up over there and now it should work perfectly fine and now we have the button it should we can have the sign up over there you can see now we have similar UI we have the sign up we have the name email and the password so this is the sign up so that's how we can do that so we can have the name we can give the name of the Mary like that we can have the Mary we can have a we can have marry we can have the Harry like that so we can give any name like that so then we can have the marry at the test.com we can give the password 1 2 3 4 5 6 so let's just click on the sign up and I think we can move on again so it should be the messages should be we can have the signing in it should be um signing up like this signing up it should be having the signed up once again we can have the sign signing up that should be failed so now we should be having a different ID that should be the sign up here as well we'll be having the sign up here as well we'll be having the sign up so let's just try it out so let's just click on the sign up signing up and there you can see everything seems to be working perfectly fine and you can see now we have the marry that's why we can see the MH over there and now you can see it seems working fine the sign up works now we want to work on the homepage so let's move on let's design the homepage of our application as well so now let's work with the homepage and for the homepage now we'll be using some type of Animation it should be some sort of Animation that we can use inside the typing so that should be a typing animation so we can have the react we have the react over there then we can have the type animation over there we can just use use this Library react type animation and it's a completely animated text Library over there like you can see you can move on to homepage as well like this you can move on to homepage and this is their homepage so then you can move on to their site as well so here we have the demo over there you can move out to the demo you can see this is the demo over there you can write this typing animations as well and that's how they will work so we need to use this type of animations for that and that's how we can use that so let's move on so let's install this Library so we have the react type animation of that so let's install that over there we have the npm install we can have the react type animation over there we need to install that and now let's move on so after installing that we'll be using the component over there you can see this is the component like this so we can use this component like this we can just copy that over there we can just copy here and then we can move on we can paste it out so we can create a shared component once again we can have the typing animation like that so I think let's create a new component for the homepage I think component we can have the tyer like this typer and inside that we can have the typing animation like that or we can typing anim do we have the TSX so we have this component over there and let's just write the ball plate code and after that we can just copy this full component the type animation let's just paste it out here so we have the type animation let's import that and there you can see now it should be used and now after that now we want to provide the text as well so you can see after every 1 second first this should be visible then this then this then this so that's how it's going to work so first that what we can do so we can have the chat with your own AI so we can have the chat with your we can have the your AI then we can move on then we can write built with open AI then we can move on so I have added the Emoji as well then we can move on we can just write something like your own customized chat GPT so that's how we want to work so you can see now we can skip this one we can skip this one and we can give the timing of around we can have your uh 1,000 milliseconds that should be we can have the 2,000 milliseconds and that should be somewhere around we can give a same like 1500 milliseconds for that so here you can see we'll be repeating it for the infinity times we have the style so we can give a customized Styles as well so we have the font size of 2m we can give the font size of around 80 pixels with that the 80 pixels of the font size or I think the 80 would be so enough we can give around 60 pixels for the font size then we can move on so I think the color we can give that should be we can the white over there then we can have the display like this we can have the inline block over there and then we can move on we can have the text Shadow as well we can have the text shadow that should be somewhere around 1 pixels we can have the one pixels then we can have the 20 pixels of the Shadow blow then we can have hash 0 color for the shadow so you can see now we have the typing animation now we can successfully move on to the homepage of our application uh so we can move on to the home. TSX over there we have the home. TSX and now we can render all of that so first we can just provide a box over there from the material UI so we can have the box over there and inside the Box we can just provide the width that should be somewhere around we can give the 100% over there we can have the height as well for the container that should be 100% we can also give here I think the flex for the display so we can have the flex over there for this display Flex then I think we can have the flex over there and then I think we can move on we can have the MX that should be we can have the auto they like that we have the MX that should be we can have the auto now we can move on so that's a parent container now we can move on we can render the box here so we can render another box it should contain a couple of more styes so that could be the container of all of these childrens like the typing animation and after the typing animation then we'll be showing an image as well so it should also have the display of the flex then we can move on the width that should be I think we can give the width or we can have the 100% over there we can have the flex direction that should be inside the column bases then we can move on align items that should be I think inside the center over there and then we can move on we can the MX that should be again that should be Auto and I think this parent condition does not require the flex and the MX Auto so that's should only have a pent container and after that inside the first thing that we want to do so we can just render the typing animation so we can have the typing anim over there like this so we need to only run that so let's see how it looks if we move on to this application if we move on to the homepage so let's see how it looks now so if we refresh the page I think it's not over we can have the npm Run we can have the dev so let's see what happens so there we go now you can see now we have the chat with your own AI you can see it looks great over there build with open Ai and there you can see it is working perfectly fine over there you can see now it looks great over there we can provide some styles from the Mt as well for the Mt that should be somewhere around three like that so you can see now it looks great so you can see that's how we want to do that and after this now we can move on and here after this box let's define another box over there so here we have another box for us and inside this box now what do you want to do so first we can provide the SX we can have the width that's should be we can have the 100% over there again the WID should be the 100% then we can move on we can have the display like this so we can have the display that should again be inside the flex box over there and after that here we need to render two images and two images should be side by side on the medium devices and on the small devices it should be on the up and bottom so we can have a flex Direction it should be regarding the theme we'll be having the responsive so we can have for the medium it should be what we can do so the medium the flex direction should be we can have the row and for the extra small we can have the flex direction that should be equals to we can have I think we can have the column like that so that's how it's going to work and after that let's move on so after that we can move on we can have the gap between them that should be we can have the five then I think we can have the M that should be equals to 10 that's enough for that I think right that's enough and after that here we need to render two images and you will find all of these images inside this section so first image that we want to render The Source could be we can have the robot. we have the PNG over there so you need to create this image over there sorry you have this image for the robot let's move on so here we have the robot image so we need this image over there let's move on we have the robot.png here as well we'll be having the robot over there and after that let's move on so here we can have the style for that so we can have the style for the images we can have a width that should be somewhere around we can give the 200 pixels for the width a WID that should be we can have the 200 pixels and here what we can do so after the width then we can have the margin that should be we can have the auto over there like this we have the margin of the auto so that's how we want to work after that we'll be having another image of the open AI so we can move on so again we can have the open a.png all again should be the open a like that the same should be there so now you can see now we have two images over there and that's how we want to work and everything seems to be working perfectly fine and after that we need to provide some class names for the opening image because here we will be rotating this image so let's move on so here we can have the class name for that that should be Mage Dash we can have the inverted over there like that so that we can have the white color and after that I have added some CSS for that so let's move on to the index. CSS here we have the rotation CSS you can add the rotate over there and inside the rotate you have the animation and here we have the key frames so from 0° to 359° to 360° so we want to rotate and it is infinite sorry it should be completed within 8 seconds and it's a linear so you need to add this CSS over there it's very simple over there and now let's move on let's just copy the rotate over there let's just paste it out you can have the rotate like this over there so let's see how it looks so you can see now it looks great over there now we have the rotation images and everything seems to be working perfectly fine and after this now we want to create another box so that would be the last box let's create another box so what you want to do so you can also create a new one so we can have the box over there like that and inside this now what do we want to do so we can have the SX prop for that and it should include so the SX prop should include some props like we can have the display again that should be we can have the flex for this so display should have the flex so that it should take full available space then we can have the width that should be we can have the 100% over there for the width then we can move on and I think after that we can move on and after the width then we can have the margin from the X that should be we can have the auto over there like that so that's how we want to work after that we want to have the image as well so we can have the image this time it should be we can have the chat do we can have the PNG I think we have the chat. PNG right so we'll be using the our own image for that so we'll be having the chat. PNG we'll be having the chat bot like that so we have the chat bot and then what we want to do so here we can provide a customized style as well so we can have the style we can have again the display that should be inside the flex we can have the margin that should be we can have the auto over there like that we have the margin of the auto then we can move on so after that we can have the width that should be only 60% of the available space the width should be 60% we have the bottle radius that should be somewhere around 20 would be enough 20 pixels would be enough then we can have the box Shadow as well so we need the shadow for this image so the Box shadow that we want to Define could be we can move on and it should have hash 64 F3 D5 so we have this chat over there it is 64 F3 D5 then we can move on we can have the margin from the top as well that should be somewhere around 20 you can see now we have this image over there oh sorry we haven't defined the XY positions for this box Shadow as well we need to define the positions so for the horizontal it should be somewhere around we can have the 5 pixels and for I think the vertical again it should be the minus 5 pixels for that and we want to define the blur that should be 105 pixels for that that's enough so there you can see now we have the image over there and everything seems to be working fine over there you can see now it looks great over there now we have this image and everything seems to be working fine over there if we move on to the 100% you can say it looks great over there we can have the margin from the bottom as well so we can have the margin that should be from we can have the bottom over there that should be somewhere around 20 once again and that's how we want to work and everything seems to be working fine over there you can see now we have the chat with with your own AI we have built with open Ai and if you open that inside the mobile devices you can say it looks great first we have the screens over there first we have the data then first we have these images and then we have the image as well and that's how we want to work and I think we need to move on we need to provide for the smm as well so we can have the smm over there small devices that should be again we can have the column or we can have the column over there so that's how we want to work so now it should look great over there now you can see now it looks fine but I think the image should be increased in the mobile devices so how we can do that so we can give customized style for the mobile and for this and for the desktop so let's move on so we can use mui for that I think we need to First import some things we need to import the Ed media quiry from the M material and then we need to use the theme as well so we can have the use theme over there like that from the a material so what we can do we can create a media query so we can have the cons we can have the theme and that should be equals to so we can have the use theme over there like that and after that we need to create a variable we can have the cons is U we can have the below medium like this is below MD that should be equals to we can have the use media quiry and inside that we'll be having a Boolean as the return then we can move on we can have the theme dot we can have the break points DOT we can have the down that should be from the MD so with the help of this now we can get if that's a mobile device or not with is below MD so if the screen size is below MD or not so we can get these from this so you can see now it looks great over there now it looks perfectly great over there and everything seems to be working perfectly fine over there and now the final thing that we want to do is now we can move on we can move on to the app component so final thing that we can do is now we can create the footer as well within this application so let's move on so here now what do you want to do so we can move on so inside the components let's create a new folder that could be for the photo so inser the photo let's create a new file that could be be of the photo do we have the TSX over there and now we can add some boil update code for that so footer can have the simple Styles over there you can see here we have the simple Styles we have the div and inside the div we have the style over there we have the width of 100% padding of 20 minimum height of 20 V height Max height of 30bh margin top of 50 and then you can see there are a couple of styles for the paragraph as well and after that now we want to provide the link as well for the Indian coders so let's move on so what we can do so here we have the buildt With Love by Indian coders so so we can just provide this span like this so we can have this pan and inside this span we can just use the link directly from I think react Dom so we can have the link over there like this we have the react router Dom over there we can just copy the inter coders we can paste it out and inside the link we can proide the two as well the two should be equals to https we can have the youtube.com/ we can have the Indian coders so we can have this channel name for us so now we have the Indian coders for that and that's how it works over there now we have this link over there and after that now what do you want to do after that now we can provide the class name for the link as well so I think we have the nav link over there like that so we have the nav link for the class name let's move on to this CSS as well so here we have the index. CSS so I think yes we have the nav link over there like this so we can provide the nav link for the class names so let's see how it looks over there so now we have this like this so let's move on let's just render the footer after this now we have the buildt With Love by encoders so I think we are just having some like blue color over there so we can have the style over there we can have the color that should be we can have the white over there like that and now we have built with love B and coders and we can remove this over there and we can also remove the empty space over there which has created so you can see it's looking perfectly great over there now we have the built with love by Indian coders and it looks great over there now what we can do so if we can click on the Indian coders now we should be moved on to the YouTube channel of my YouTube channel you can see Indian coders and you can also please subscribe to the YouTube channel as well I create a lot of videos on the monack fullstack development FB development react native so you can please subscribe to the channel as well and now let's move back so you can see now it looks great over there on the mobile devices as well you can see now it looks great and everything seems to be working perfectly fine over there so now let's move on so there you can see if we now just move on to log out if we can just click on the log out over there now we can just move on we can click on the login we can move on with the login over there so we can login as well and there you can see now we have the loaded chats as well if there would be chats then we would be loading all of the chats of the user then we can again create a new chat like that and I think there's some margin between them right so you can see we are having some extra space between them and now to fix this layout so what do we need to do so we can move on to the chat page so here we have the chat so here you can see here we have the padding of 20 pixels and we have the width of 100% so so either we can remove the padding from this so let's see how it looks so now you can see now we do not have any extra spaces over there and then we can increase the padding within the input so let's move on so let's change it to 30 pixels you can see now it looks great over there and everything seems to be working fine and we can provide the margin for this as well the MX that should be we can have the one and now it should work perfectly fine over there like this so we can have the MX that should be we can have the one over there you can see now it's working great over there and everything seems to be working perfectly fine over there and there you can see now we can again move on so I think we can remove this I think we can remove this photo inside the chat page so what we can do so instead of rendering the footer inside the main layout so we can remove the footer we can render the footer only inside the homepage like this so only inside the homepage now we can render the footer as well so we can just render here the footer and that's how it works over there now let's move on so if you move on to the homepage so now we should be seeing the footer over there and we can just increase some margin from the top that should be somewhere around 60 like that so now we have some margin and there you can see now it looks great so now you can see now it looks great over there and everything seems to be working perfectly fine and after that I think we can move on to the footer so font says 30 pixels text Aline Center okay so I think we can just keep it default and we can increase the padding to the 20 pixels directly inside the paragraph T and that's how we want to work now you can see now it looks great over there now if you move on to go to chat you can see now we do not have the extra spacing left over there and if you enter any chat over there like hi like this so let's click on the send so now you can see now we have the chats over there and there you can see now it looks great over there hello how can I help you today and you can see I have made another adjustment over there inside the chat item so I added the bottle radius that should be two and my y that should be equals to the one um and here as well we have the Bott radius of two we have the gap of two and that's how we want to do that you can see now it looks great now we have a structured layout for that and here you can see with the help of this now you can see our application looks completed over there now our application feels completed you can see it was a great application we integrated with the open AI we created the back end we created the front end we created the perfect design for that you can see everything looks great over there and everything is working perfectly fine like this so congratulations on completing this application so I hope now you have learned a lot from this course you can see we created the back end we integrated the authentication systems here the authorization system we integrated the open a here and here you can see now we have integrated the material UI for the design we created a perfect design for us you can see everything seems to be working fine over there so now let's move on and let's just close this application so now let's mark is completed and let's move on to the summary part and let's discuss that what we have learned throughout this course and now let's see that what we have done throughout this course so we have learned the mon stack so now you know and now you have a great knowledge about about the mon stack that how the mon stack Works how the backend front end integration Works how we create the back end how we create the front end with the react and then first we created the very basic Express node rest API so we created the rest API we showed you the tutorial that how to get started with the mon stack then we created the fully secured authentication with our back end so it is completely secured with the HTTP only cookies JWT tokens authentication authorization adding middle wees for the security and there was so many things and we have the data w checks as well and then we created an openi project similar to the chat GPD clone so it was a huge project we created the chat GPD clone with the monack so then we created the modern design with the material UI and react so muui is a react UI component Library we integrated that with the react we created the animations we created some components we created the chat type layout we created a lot of designs with the react and the material UI and then we created this seamless integration with the Monch with the back end and the front end and we created the integration with the credentials with the xos and so many things so with all of that let's close this project so it was very nice working with you so now let's move on so now in the end I want one favor from you so please like the video because we spend a lot of time building these type of tutorials for you so we spend all of our weekends and all of the things so we don't go outside we just create some projects like that so if this video deserves one like And subscribe then please do that because it gives me some sort of like relaxation that if I'm creating something then I'm receiving something from you guys as well so that's it from my side so I hope you will be successful in the future you can create the mon stag you can apply for the job opportunities you can share this project into your resume as well so let's move on and let's just wrap everything with this project
