Become a MERN Stack Expert: Build Real World AI Chatbot With Authentication | MERN Stack Projects

hi everyone my name is nikhil and welcome to a newest project on a channel so in this tutorial you will Master them on stack and you will build a fully secured AI software as a service project with a month stack this is an AI chatbot built with the open Ai and the monstack 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 the chat gbd 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 chatbot 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 anytime so you can see this is a UI for the chat bot and this is similar to the chat GPT lag 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 chatbot 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 will be storing the tokens inside that and they can't be accessed via the JavaScript so they cannot be accessed by their JavaScript so they can only be accessed by the front end so users do not need to login 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 are gonna use the open air conversational model GPT 3.5 and 4 and on every chat message the user needs to verify their tokens and the authorization details as per the security because it is on top priority so that's the demo of this application that we have created and this is a home page the user can move on to the register page as well so signup will look similar to the login so this is all for the demo and now let's understand the text tags that we'll be using [Music] so we will be using the node.js express for the backend 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 wheat for fast Dynamic and reliable application and for the authentication and authorization we'll be using the password encryption using the big grip 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 via the server and will 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 react for providing the authentication as authentication provider as a wrapper 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 DBT service with months stacked and with the open air integration we'll be using the open AI for chat completions with the node.js 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 an 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 open AI with a month 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 node.js is completely scalable and our backend 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 heads 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 set this as a home page 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 sign up 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 overloading chats so on every refresh all of the chats of the user would be restored and the users have the functionality of clearing the composition 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 say 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 per 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 you can see we created the videos on the next stairs we create the videos on back-end development like Prisma we create the videos on authentication we create the videos on topics like you can see data patching and caching using the next JS next year's 13 and all so you can see we create these type of projects over there like that could be the Tailwind project for the design and all 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 and the YouTube will also help me out so now that's enough for the introduction and now let's move on into the project [Music] 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 Ai 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 our own 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 will be using that why should we use the Technologies if we have other Stacks as well so let's just understand about this so now let's move on and let's just understand that what exactly is the month stack so month 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 middlewares throughout the node.js 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 node.js which is used on the server side to execute the JavaScript and to handle the request and manage the application's backend operations so it all includes the mongodb express react and denote 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 Azure internal code base so we'll be using JavaScript only to create a full stack application with using the month stack so now let's just understand that y should we use the month stack so we have other Frameworks as well that can be the next CS T3 stack it is currently in the demand as well like the one stack we have the lamp stack as well with using the PHP and we have golang as well so why should we use the monstack so let's just understand that why should we use this so first option that we have is the full stack compatibility so one stack offers you the full stack compatibility so it covers both front-end and back-end 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 denote 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 full stack web development and we have the scalability as well so node.js which is used in the month stack is known for this scalability it can handle a large number of simultaneous connections efficiently with using the event Loop 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 real-time applications as well so monstack offers you the real-time 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 this socket inside this application but I am just explaining you the examples that why should we use them on stack and now let's see we have the cross platform so one stack can be used to develop web applications that works across different platforms and devices so you can also use the monstack 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 we use them on stack so all components of the month are open source Technologies so you do not need to pay anything because the mongodb is like a premium purpose so if you want to use the mongodb then there's a very nominal charge but only in the production and during the development you do not need to pay anything to the mongodb you have the react which is open source the node and the express their 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 month 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 gonna do so we'll be having a modern AI project which will use the open AI API so we are going to use the open AI API to create an AI and real-time chat bot and it is similar to the chat GPT 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 anytime so we have a cut functionality of the users as well in which we'll be having the users will be having the chats of the users and user can delete their chats as well anytime and the UI is capable of showing 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 real-time chatbot so we'll be using the JWT tokens the HTTP only cookies and these cookies would be stored inside the user's 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 AI 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 node express application with the typescript 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 man open AI chat bot 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 overview so now after just pasting all of these files now you can move on you can press Ctrl NJ on your system if you're on the Windows you can press Ctrl ndj so you need to just open the terminal so you can move on to the backend 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 binary encoders then we have the environment file as well and inside there we have a couple of Secrets couple of though 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 backend you can see the name of the application we have the backend over there we have the main we have the index.ts it is driven set 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 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 with 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 all 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 you 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 JavaScript 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 node index.js then with 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 big grip 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 the cookie parser 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 dot EnV to use the EnV files over there we have the express application over there will be using the Express package we have the value data 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 which is a package which is used to work with the mongodb with the open AI Library so we have the open AI library to work with the open AI systems and now let's move on let's have a the notification 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 here the es I think we can have the node next over there like this so I think we can move on we can have the node next so the error would be gone and now you can see inside this will 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 any TS file so it would be combined inside the build directory and this is the build directly which is the dist and this is a build directory which is a dist so you can move on you can create a new folder that could be for the disk and inside this file the new compiled file would be created so that's how it's gonna 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 dist 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 log statement over there which is this is the starter kit for this amazing project with low bind encoders 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 log statement and now before moving on to the next steps what I'm gonna show you is I'm gonna 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're gonna 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 plot 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 5000 so it would be open on the localhost port of the 5000 and then we would be having the Callback as well after that so inside the Callback what we gonna do so we can have the log statement we can have the console dot we can have the log so that should be equals to what we can use over there with the console.log that should be we can have this server open so we have the log statement as well so you can see once we save this file so node mod would detect 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 middlewares 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.getrequest 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 gonna show you as well so there are four type of requests which are mainly used inside the backend development so there are four type of requests which are mainly used inside the backend development so these four requests 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 here 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 post requests 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 why 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 the 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 10 point could be we can have the app dot 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 localhost 5000 slash nothing and if you provide the hello over there suppose that can be the hello it means now you want to make a request on localhost 5000 slash hello and after that what you need to do so you can move on so you can have a callback function so inside the Callback function you have the three parameters the first is the request second is the response the third would be the next so these three are the Callback parameters that you get over there and these three callback 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 is your duty to send back some response so so that's why we use the response over there and we have the next as well so next is use to move on to the next available middle viewers so all of the middlewares that we Define so these are just the middlewares inside the express so Express handles it as a middleware so if you don't know about the middleware so after this chapter now we'll be having the deep understanding that what is the middle wave so middleware are just the functions which handle the request so this is also a middleware so next is used to move on to the next middle waves this is a simple route and you can see suppose you make a request on slash hello and if you want to send something to the client then you can use the return statement then you can have the response term we can have this send you can have the response dot send if you want to send some static string over there that can be we can have the hello it means once you make a request to app.get hello it means now you will be receiving the hello overdue 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 5000 slash weekend at the hello so let's see what happens if we make the get request on this endpoint so let's just click on the send so now you can see now you received the hello overview 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 this end you can see error cannot post this because now this route is not registered over there so you are registering on the 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 this 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 row and we'll be using the Json object will be using the Json so for the input output for this application we'll be using 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 close to we can have the nickel over there it's my name so let's just click on the send so you can see if you just click on this end 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 dot send which is the hello but if you want to read this data like whatever data that different 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 dot we can have the use so we can have the app dot use so app.use is used to define a middleware and the middleware that we used to define is the Express dot we can have the Json so it tells this application that will be using the Json for the incoming and the outgoing request 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 lock that should be equals to awaken up the request so you are sending the body so you are sending the body over there right so you can have the request dot 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 dot 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 it 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 triggers 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 backend suppose that can the database operation modify some sockets and all so it is used with the put so it works same so if you use the put over there it also accepts the date as well if you click on this end then still you will see the nickel over there and that's how it's gonna 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 this send if you just click on the delete if you just click on the send now you will be seeing the nickel over there so it is same but with the put and delete and the get there is 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 user's 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 slash hello suppose that can be slash we can have the user that can be slash ID of the user that can be one two three four five it means now you want to fetch the record of the user and the ID of the user is one two three four five 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 we can have 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 idea 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 dot we can have the params and inside the params you will get the ID over there so you get the idea whether inside the parents so let's just see so if we just click on the send you can see now you've got the params ID which is you can see now you got here the one two three four five and there you can see this is the IDE you can name it whatever you want but if your 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.parents.id 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 node.js you can see we created a couple of routes we created Dynamic routes so and you can see we got the params 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 monstag with the node.js 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 gonna do so we are 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 base over there we have the middle viewers 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 listener we have the connections and we have the list nodes over there and that's how it's going to work you can see now with the connection and listeners now we have this now we have the Declaration and now let's move on let's 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 inside the routes will 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 endpoints 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 it now we have created the very basic setup of this application so if you see the first step over there we have created we have set it 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 mongodb 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 mon we can have the AI we can have the chat bot over there so we have the name of this project then we can click on the next and after that we can just 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 okay and after that you can see there are three options for us we have the M10 option which is 0.08 dollar per hour and you have the storage of around 10 GB you have the 2GB 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 reads then you have the storage uh sorry it's a type of scalable database you have the storage of up to one TV if 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 have 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 with this database so username can be written at the end of other we have the entertaining for the username then we can click on auto generate 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 somewhere 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 access so only from this IP address so this is your IP so only from this IP address now you are gonna connect to this mongodb 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 we 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 is a note as well you need to replace the password for the anthon 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 want to do so you need to copy this connection string you need to paste it 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 prod 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 weekend of the chatbot 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 dot EnV import something from that should be from the dot 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 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 on the folder that could be we can either DB and inside the DB you can just create a new file that could be we can have the connection dot we can have the TS and after this now what do we need to do so here we want to use the Mongoose package to connect to the mongodbit database and if you don't know about the mongos you can just directly move on to the mongos so so first I'm gonna use the test profile over there so that should be we can have the Mongoose over there so it's a odm which is object data modeling with the mongodb so elegant mongodb object modeling for the node.js so you can see it is used to write the mongodb validation casting creating business logic and all of the things you can see first you need to require the Mongoose this is a complete setup of the Mongoose you can say in just five lines first you want to require the Mongoose 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 mongoose.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 say now if you want to create a brand new cat you can add 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 kitty dot save so you just need to call the save function directly from the Mongoose to save a record inside the database and it is completely open source and it is 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 operation so we need to wait for this task and after that we need to import something from the Mongoose 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 Mongoose over there we have the Mongoose and something that you want to use would be we can have the connect so connect function is there inside the Mongoose to connect with the mongodbit 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 Edge block over there you have the track Edge block and there you have the error and after they 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 have the connect so inside the connect you need to prod the URI as well so the URI is already there inside the environment you can just grab this mongodb URL you can have the process the current process of the node.js dot we can have with the environment so environment variables of the current process dot we can have the mongodb URL so it will help you to grab Democratic URL and the connect function will connect to the mongodbit 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 to throw new error or that should be equals to we can you can use anything like we can have to throw new weather that should be equals to we cannot they cannot connect to mongodb like this so we can have the TV like this so you have the new added over there like that and everything seems to be working fine and you can lock this error as well that what was the weather 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 get 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 async 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 params overdue and this will also be an asynchronous 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 it try it now what do we need to do we can have the await and we want to import another function from the mongos that could be 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 lock the error connect to mongodb and these are the functions that we want to use and after that now 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 add 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 app.ts so only this only till this the app.eos so all of the middlewares 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 it now we have the log statement over there and that's how it's going to work and then you get an error so you need to write the JS over there you uh you need to write the JS 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 database and after that only now we want to open the development server so we can move on so we can have the app.liston over there app Dot listen over there then we can have the cache as well so we can have the catch if we get an error then we can move on we can have the console dot 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 error and after that we have this server open and we cannot be connected so I think we can use this string over there you can see now we have string over there we have this we have our open and connected to database so you can see now we have the handshake as well so that's all we are gonna 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 environment we can Define the port over there as well we can have where the application Port so that should be we can have the 5000 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 because we can add the processed or we can have the environment third because of the port over there and if the port is not available then only we want to use the 5000 over there so we can report instead of the 5000 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 with the message of the server open and connected to database and everything seems to be working perfectly fine so now we have connected democrativity 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 openai portal and we want to get the API Keys directly from there so you can see now we'll be creating the application from open AI 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 open AI platform you can move on to platform.openei.com you have the apps you can see all of the modern apps are created on the open AI 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 open AI 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 case 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 environment 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 AI 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 charges 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've 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 begin of the organization we can have the organization we can have the opening organization ID that should be this ID over there we have this idea about you so now we need this ID as well for connecting to the open Ai 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've 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 endpoints for us so let's move on and let's just start building this API 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 viewers 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 insert the backend folder you can install a dependency which is a Morgan so we can add the npm installed we can have the mark on over there so what Morgan package will do so it will just dis so it will just 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 cannot import we picking up the Morgan over there that should be from weekend of 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 middleware that could be app.eos then we can add the more gun over there if 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 close to the dev and after that if we make an API call to this backend then we'll be seeing the log 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 server there so now we want to create the middle base for our application we can have the first middleware we can have the app.tios that could be if we can have the API structure for an application that could be localhost 5000 or any domain slash we can have the API over there slash we can have the API slash beginner the version as well we can add 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 dot 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 USB routing and after that we can add the const we can have the app we can have a router the whole application router 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 requests on app so after we make a request on slash API V1 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 this 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 middle view so on the use if the request is made to slash user then we'll be moving on and then we'll be using the user's routes over there let's create the routes for the user so we can move on so we can have the user 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 calls 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 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 slash user then we want the user router to handle those incoming requests and that's how to handle those incoming requests 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 add 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 slash 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 vegan at 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 slash user then this user routes would handle this requests and if the 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 handing that thing 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 was 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 beginning of the get request so suppose that could be get we can have this slash over there and after this slash now what do we want to do so after the 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 dot begin at the TS so now we want the user'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 above 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 will 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 area 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 mongods so like initially we showed you the Mongoose that how the Mongoose Works to create this schema so that's all you want to create that so we can have the import we can have the one goes over there we can import the full Mongoose 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 Mongoose thought we can have this schema so we can have the store 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 equal to the true so this is not a validation but it creates some indexes for the email to search quickly then we can know the password as well so we can have the password over there we can know 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's also required so we can required like this and that should be costly 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 chats game as well before the user so we can have the cons we can have the chat schema over there like that we can have a chat schema like that and that should be again equals to new we can have the Mongoose dot we can have this scheme over there we're gonna start 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 overview that should be inside you can have this ring over there inside the type and then you can move on you can have the default as fill of the ID so default should be you can import a package from the node.js so we can add import something from we can have the crypto so directly from the crypto you can get something which is we can have the random uuid so it will help you to generate a new ID so we can have the random usual ID for that so it will just create a new uuid for us and after that what we can do so we can just define the role so inside this novel to define the role so there are two roles for using the openai platform that can be the AI chatbot that is the assistant at 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 equally true because the role are required and after the roll 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 required we have we have the type string we have the required which is the true you can see novel schema for the chats so the two main properties are the role and the content role is the assistant or 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 chat schema inside the array it means now the chats would be having the array of the chats key mindset that and that's how it's gonna 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 either export we can have the default that should be equals to begin at the Mongoose or beginner the model over there we can have the Mongoose model that should be we can have the user so now we have the user model for that and then we want to prod 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 start model that could be for the user and everything seems to be working perfectly fine over there and if you want to add some validations for the Mongoose dot model so like suppose like in the next year's applications what happens is sometimes it creates multiple instances of the slot model so you can plot a validation like you can the Mongoose dot we can have the connections over there you have the connections or you can add the Mongoose dot we can have the models over there the models slash we can have the user like that so if you have the Mongoose dot models user then you don't need to create a new model but here inside the node.js it doesn't create that it only have one single instance so there won't be any issue and after that you can see everything seems to be working fine over there now you have the start model of the user and now you will be having a new collection inside the database of Slash users so everything seems to be working perfectly fine and now what do we need to do so now again we can move back to the user's 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 may 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 because of their weight then we can have the user model we can just directly refer to the user model so that's because we find so we have a function inside the Mongoose model which is the find so it works on the query so if we provide any query params if we provide an inquiry inside defined then it will find all 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 error 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 close to the await user.find and after that we can just move on we have the return we can have the response or we can have the status overdo that should be picking up to 200 which is okay then we can send the Json message over there we can send rejection over there so that's all 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 add the message and that could be kind of thing 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 customized 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 cost and that should be we can add the error dot we can have the message overview so you uh so you have a message property inside the error so you will be getting the course over there and now you can just log the error as well you can just lock the complete error and that's how it's going to work so you can say 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 add the month AI begin at the chatbot over there money I 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 or 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 plot the parameters http localhost the port of 5000 slash we can have the apis slash we can have the V1 slash we can have with the users so instead of writing the localhost 5000 slash API what we can do is we can make this as a variable we can have the 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 data variable so we can have this setup variable it means now we want to have the backend Base address we can add the backend Base address like that so we can have the local loss five thousands over there we can I think we can just copy full string over there like that 5000 slash API 5000 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 this 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 monia chatbot we can add the slash API slash 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 slash 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 slash we can have the user over there slash we can have nothing because we don't have anything after the user so let's just click on this 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 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 gonna 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 endpoint was API slash V1 slash 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 round so we have 323 milliseconds for that and you can say this is a unique number so it is coming by the Morgan package so we have added the Morgan over there if we move on to the app.ts so it is coming by this and that's how it's gonna 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 requests 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 in 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 this sign up so it means slash user slash sign up and now we want to create the controller function as well again so we can move on to the user's 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 this 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 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 the user's email name and the password so we need the 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 request 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 this sign up like this so here we have the user sign up request and now let's move on and this could be the post speakers 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 raw 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 nickel we can have this over there then we can set the email of the user as well so that could be the email like that and email should be we can have the nthadani at the rate 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 and it could be we can send any password like one two three four five so this is my password so we'll be sending these details via the postman or any client and now we want to get this data as well inside the backend 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 dot we can have the body and now inside the destructuring we can restructure the name the email the password directly from these things so we have the name email in 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 with 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 set the password along with it but this is the same password that the user is sending so inside the backend we don't usually store these passwords which the user directly sent 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 backend 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 Big Crypt so we have already added that package inside the package.jsl so if we move on to the package.json you will find here the bigger package over there we have the Big Crypt and the big grip 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 Big Crypt over there and something that we need to use is uh we need to use the hash so hash is used to Hash a password is used to encrypt a password and now we have the constant 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 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 a default counts as well so you can provide any number of rounds so it has some techniques to generate the hashed password with the rounds and now we have the hash and that's a promise so we need to update 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 here the hashed password as well we have the hashed password and that's how 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 await we can have the user dot we can have this 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 dot we can have the save over there to save a record and 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 dot 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 directly giving the response to the front end we should use here the two string to convert that into a string and now let's move on so now we have these two 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 does our openend 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 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 we get all users so now we should be receiving one user yes so here we are receiving a new user we have this ID of the user 650 or anything we have the name email and the password and you can see this is the password this the B cap 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 Samsung 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 create some errors inside the database so what do we need to do so before coming to the user signup function so we could add another middleware 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 middlewares to do that so that would be a middleware 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 middleware so what are the middlewares so the middle layers 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 builds can be used to check the Json body validations the tokens or settings of cookie validations directly from the front end the params of 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 will 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 backend so I'm not using any illustrations over there so this is just the normal paint tool and now suppose that's a backend right so this is a backend and decline communicates to the backend and the backend 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 a sign up and inside the sign up will be sending some data along with it so there could be some data like there can be the name email and the password because it is the inside the sign up for moving on directly into the database and store the data we should add we should add another middleware in which we need to verify the data like this can be the middleware function in which first we need to verify all of the data so so we can again move on we can have a verify or Data before just moving on and before just saving the record of the user and then let's move on and then let's create another middleware so there can be another middleware 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 middleware in which now we want to store the user inside the database so let's move on build that and that could be uh we can have the final middleware to store users information you can have the users info like this so we can have the users info like that so we need to store the final user's 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 bakes 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 middleware and if the validation was wrong if there were 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 middlewares and you can take the screenshot of it as well because this could help you if you do not promote the middlewares inside any application so inside web development this is a concept of the middleware so whether it's any framework like the node it can be the C sharp as well ASP as well Java as well so this is only the concept of the middle viewers so let's move on so now let's use the middlewares for the data validation checks and now let's move on so we will be using the expressvalley data package for using the middlewares and this has a set of expressjs middle views that wraps the extensive collection of validators and sanitizes offered by the validator.js so it adds some middlewares 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 even 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 will be moved on to the final function then will be moved on to the final middleware function to execute and to store the user's 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 add the validators dot we can have the TS so that's a validators.ts and here first what we can do so we can Define some validators for this sign up so we can have the cons we can have this sign up valid data like that sign up valid data so that could be an array so insert 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 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 our name is a required field so it should contain the name so then we can have the name dot 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 the required because they are like that 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 response message as well if the name was empty then we can have the function which is with message we can put a customize error message if the name field was empty we can have the name is required like this so this is the 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 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 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 here 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 we can finally again move on if we can have a with message like that we can have the with 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 trim 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 add 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 customize 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 error function it should not be racing so we have the value so we have the validation function over there and inside the params we need to get the sign up well data we need to get all of these validators whether it's a sign up or there can be multiple validators over there so we can have the validation so like this so we can know 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 area 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 middle views 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 async we can have the function over the 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 expressjs and then we'll be having the next function as well which is used to move on to the next middleware we can have the next function over there and that's how it's going to work and that could be an error 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 will 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 do validation of 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 begin at the await then we can have the validation so we can have this validation function meditation 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 be so inside the middleware of the express we have the request as well we need to send the same request over there that we receive 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 weight over there and now let's move on so then we can check another validation 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 we can have the is empty so result means this time the errors so if the result dot 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 add 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 with 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 middleware and if there was no any error then we need to move on to the next middleware function which could be the final middleware to store some data let's move on so we can have if we can have the errors like this if the errors taught we can have site uh what we can do we can have the is errors dot 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 middleware that could be this final user sign up 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 dot 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 or 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 kind of work so that is a 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 uh we have the validate function we can add the validate function directly from the validators and then what we want to validate is the validation chain we can add the sign up validator we can have this sign up validator for that foreign 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 an email or not it's email so let's move on so suppose this is a normal string I remove the at the rate and.com over there let's just click on the send and let's see what happens so there you can see it now we got the errors array you can see we got this status as well we have the errors you can see the type of the field where the value entered any 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 6 so suppose we send the five characters if we click on the send so now you can see now where 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.com we can have the password of one two three four five six 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 201 so that is the status of the credit it should be two one 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 dot 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 foreign so now you can see inside the login and inside the sign up so you can see the email and the password are similar Fields so write the email and the password are similar Fields inside both login and inside the sign up 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 a 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 user's controller so here let's move on to the user routes once again so now it could be we can have the login validator 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 cannot be login and here there could be different fields we don't need the name over there and the other things would be different so let's just remove all of that and let's just see what happens we can comment this out as well and after we get the email and the password directly from this let's move on and here now what do we want to do so first if we need to find the user by its email so let's have this validation check we can have the cons 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 await then we can have the user dot 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 hashed password let's move on so we can have the const 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 how it's going to work so now we have defined 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 dot we can have the status that could be we can have around 401 which is unauthorized then we can set the Json or we can just directly use this 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 let's move on so how can we do that so from the big rep 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 begin at the await then we can have what was the function name so it was a compare so we can have the obit 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 can say the promise resolves with a Boolean and then we'll verify that if the password is correct or not let's move on so we can have if we can have the 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 weaken the 403 which is forbidden then we can send a new message we can have the send and insert 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 dot status of that should be 200 we can send the message of the okay then we can send 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 sign up request over there the James Marshall james.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 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 if you 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 the send 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 a 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 tab you can see now we have completed the basic user authentication system with demon stack we have created the sign up request the login request 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 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 is 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 are 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 hours the user needs to show a token that was sent during the authentication so this ensures that the user is entitled to a resource so that's the complete package of the authentication and authorization so once the user authenticates his 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 how we need to provide that token so we'll be using the JWT so JWT is a library it's exactly the library which is built by the auth zero 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 the 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 there are same like the web cookies so you can move on to the browser's 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 via 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 hacko 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 adds 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 axios with credentials property so once we make the HTTP request so these cookies are automatically sent to the second and once the backend receive 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 these 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 JWT token so we'll send the access 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 backs 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 will be moved on and will provide and process the request and that's all 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 abort 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 JWT 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 y thing 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 exports we can create we can have the token over there so that should be equals to a function and instead this will 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 Innova do 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 cons 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 what do we want to do so here we can have the JWT Json web token dot we can have this 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 shared 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 dot we can again use the environment over there process dot environment dot 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 X the token would be expired so it can be any string so if you hover over the expiration you can see you can provide like suppose that can be two days 10 hours or seven days so the chat gbt how the chat gbt works so it moves on and it expires in seven days so we can provide the same validity we can have the seven days and after the seven days the token would be expired and that's how it's gonna 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 the token at the string now we can just directly move on to the user's 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 accounts 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 two string over there and after that the second probability that you 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 X5 as in so that could be the X pass in only like that and I showed you just for the example so now we have the expires in and everything should work perfectly fine over there and it is of type of this string go with you let's move on to the user's 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 app.ts 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 juice so that should be equals to we can have the cookie password so here you can see now with the cookie parser and here you can see now we want to provide the secret key as well for the cookie so we can use the secret key again we can move on to the environment we can plot 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 dot 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 user's 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 instead the response we have the cookie over there dot cookie to set the cookie right and now we want to provide the name of the cookie name can be we can have the auth we can have the token over there we can have the auth token and then insert 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 response talk okay 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 plot the path so where could be the key stored so the path should be we can have this 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 we can have the domain so as of now we are working inside the Local Host so we'll be using localhost 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 phone now but if you deploy this application then this could be your domain like suppose that can be my domain like indiancotos.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 with 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 seven days let's create the time for that so we can add the const so we can have the const we can have the expires that could be because of the new date then we can have the expires dot 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 dot we can have the get date like this expires don't get date after that we can use plus 7 so after this date plus seven days now we'll be having the X Pass Property and the same property could be used here instead of the expires over the inside the expires and that's how it's going to work and after that we need to add the HTTP on the flag so we can have the HTTP only that could be equals to again that could be the true then we can use this 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 equal to the two so the sign would again the encrypt the cookie inside the signed format so now we have this cookie and everything should work perfectly fine this time and now what do we want to do is 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 locks 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 start we can have the clear cookie like this we can product the name of the cookie we can have the name like this we can have the JWT we cannotic auth token over there and we should store these names inside the constant so we can move on to the utils let's create a new file that could we can have the constants like that foreign so that could be equals to const 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 auth token like that and we should export that is where we have the export constant of the cocaine name so now let's move on so we have the user's controller now that should be equals to the sponsored 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 auth token it should be the cookie as well we have the cookies name and now that's how it's going to work and that's how it's going to work now okay 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 two x pass is not required the domain and the localhost and the sign are required and we want to put 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 the 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 these 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 seven days the user needs to re-log in and that's how it works so now let's try it out in the postman as 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.com let's just click on the send and after that you can see the message is weaken at the okay but inside the cookies we have one parameter you can see now we have the auth token over there we have the auth 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 say it is encrypted in a string we have the domain of the localhost 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 sign up 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 on directly into the backend 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 bot into the chat GPT apis so let's move on so here we have the backend 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 Ctrl 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 wheat so this time we'll be using the wheat over there and you can also use the plane react as well the next JS as well but here the wheat is super preferred for our application so that's why I will be using the wheat 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 next CS application so beat is very fast so that's why I have chosen the week for this application so we can click on get started and after that we want to create a new wheat application so you can use pnpm yarn 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 wheat so we can again move back to the root directory and then we can run the command of the npm we can paste that command as well we can paste it command so npm create beat at the rate 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 swc is the latest in which we'll be having the fast reloading so we can hit on the typescript plus 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 or the react it 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 installed to install all these dependencies on our end and now let's wait till it install all that until that we can get the overview of this app 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 boilerplate 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 wheat application and from this application you create the root and if you are coming from normal create react app or the next.js so this is a main app file so in the app router we have the page.tsx 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 ESPN file which allows you for the linking purposes sometimes there are vulnerabilities in your code so it fixes all of them and we have the git 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 disk folder of the build of our application there can be some environment files as well so it just ignores all of these files and it doesn't includes 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 with the package. education 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 linking 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 tab script so here you have some configurations over there for the typescript and there we have the TS config.node over there for running some back and code over there because it is made on the Node environment then we have the wheat configuration file as well in which there are some configurations to run the react over there and on 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 localhost port of 5173 so we can control and click on that and there you can see now we have the wheat and the react application ready and there you can see it is very fast as compared to the next JSM will react and now let's move on so here we have the power plate code we can mutate the boilerplate 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 world but maybe there are some CSS tiles over there uh you can say 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 point 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 over written 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 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 gonna 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 user 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 cost 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 0 begin the padding that should be weaken up to Zero from all sides we can have a different background for our application that should be we can have the zero five one zero one C we have a darkish background for our application we 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 Roboto slab or we can have the serif 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 do we need to do so now if we move on to the application once again you can see now with 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 gonna 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.com and material UI is a great component library for with the react for with the jsx 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 accordion 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 overdue 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 here the react router that should be we can have the Dom Square so here we have the reactor 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 library 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 or toast then you need to enter that as well so there you can say 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 uh sorry here we'll be creating a round customize theme so we can have the create theme so we need to use the create theme directly from uh imported from the material UI 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 this serif as well after that if we do not find that so we can have this serif and after that we have multiple variants for the typography and for all of these variables 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 and now we need to move on so here after this strict mode then we can just render the theme as well for this so we can use the theme provider directly from the material UI so so here we can use the theme provider like this so we have a team 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 react.dom and something would be equals to what do 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 this 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 dot TSX over there we can write the rafce for the default setup and default ball update code for that we have the rfce 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 dot TSX over there and we can again use the RAF CE for the default ball update code then we can move on so after that we can move on we can have chat dot we have the TSX over there chat.tsx and it should also contain the baller plate code then we can move on and then we can have you know the login page as well login dot we have the TSX over there and that should contain the normal login page we can have the sign up as well we can have this sign up dot we have the TSX over there sign up dot TSX it should also contain the RFC for the default boilerplate 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 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 dot 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 rfce for the default ball update 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 there there would be very simple things so first we need to render 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 router Dom so we can import something from we have the react router 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 route 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 instead that we can plot the path so path of this should be we can have this slash and we can have the element as well l element should be we can have the home page so we can have the home so home should be there inside the slash route and after that let's copy let's paste it so that should be a big enough to 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 slash we can have this sign up and this sign up 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 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 gonna 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 F Bar over there directly from we should have the mui slash material slash 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 mbui and that should be equals to we can have the toolbar like this so that should have the toolbar and it 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 upper over there you can just directly import it from the Mei 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 app bar and inside that you have some toolbar 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 npm Run we can have the dev 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 overview you can see that's how the app bar is gonna 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 plot the position so position should be what we can do so we can have this static over there of the top then we can have some shadows as well I think there are no any 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 display of the studying that should be close 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're gonna do is now we need to render the logo of this application so here what we will do so we'll provide our own logo so we'll use our own logo for 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 dot 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 home page 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 DB test Fiji 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 so we can have this style Pro for the do 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 it inside the Cento then we can have the Gap and that should be we can have something around we're gonna be five or we cannot be 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 router Dom so we can use a link component from the react router Dom we can import that import the link from the another account 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 gonna navigate so we can have the two that should be equal so we can have this 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 dot we have the PNG over there we can have the alt that should be again we can have the opening I like that so credit goes to the open Ai and after that let's move on we can provide some width as well which 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 image inverted over there so we'll be having the customize 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 typography from you can have the mui 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 empty 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 nun 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 Nan 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 two pixels 20 pixels of the blow and you can have hash triple zero color for the shadow so these are some customized styles for the typography and inside that now what you can do so 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 this style over there and that should be you kind of the font size that should be 20 pixels over there 20 pixels so first letter should have a different styles you can have a demon like that you can have the mon and then after that you can use the GPT you have the GPT like that so that's how you can provide some of these 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 moon GPD and that's how it's gonna 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 adding the Styles I think the type of fish 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 we're demon GPT 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 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 hundred percent now if you move back to the application you can see now it looks great so here you have the mon 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 can 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 this 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 a 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 a 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 auth we can have the context dot 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 auth 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 equal 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 we're gonna be cons we can have the auth we can have the context over there so here we have the author context over there and that should be equals to we can have the create contacts 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 auth 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 properties 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 of 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 the 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 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 white 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 the kind of the string the password that should be we can have the type of likes it should be the string and then we have a login function we can have the sign up as well so we can have to 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 logout function as well so we'll be having a 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 backend so once we click on the logout we'll be just clicking a button of the logout and then the backend 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 auth like that the type of the user auth like this or it should be the user auth or it could be the null like this so now we have the auth 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 auth provider like this so we have the auth provider and the provider would wrap all of the children's inside that so we have the auth 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 children one over there like this and it should have the type the type should be we can can 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 snippet like first we'll be having the property of the user we should be having the property of the user I don't think what happened to that we have the user then we have this set user like this and the state should have the value of the user property like this the user or it could be the knowledgeable so we can prod the user or the null should be there inside the state and initial value should also be we can have the null like this so it should be the Nugget and after that now let's move on so after that let's have this 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 settings 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 this logged 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 your 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 fact 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 or we can have the fetch if if the users cookies are valid then um we can update then skip login so we should have this code inside the effect 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 a asynchronous as well so we should write the async over there and we need the parameters as well so we need the same parameters like the E pal and the password we can copy we can paste now we'll 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 logout as well or we can have the sign up like the sign up it should contain 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 logout function as well so we should be having a 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 inside of the email and then here as well 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 register or we can have the sign up function as well so there could be a couple of functions and now the final thing that you want to do is now we want to return all the state code over there and now we want to return all of the states to the children components so we can have the return we can have the auth con text Dot we can have the provider so now we have the auth context dot 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 say it was very simple so Redux implementation looks a bit complicated like sometimes you need to add the middle waves for these functions like the asynchronous code you need to add some middle base 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 children's so this is just a provider now we want to create the context that should be used by the children's so we can Define any names like we can have the cons we use auth or anything like that we can have the auth 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 auth context and that's it with that you can see now we have the context oh sorry it should be your function as well it should be a user there 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 const we can have the use auth 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 auth provider so that's how it's going to work and after that let's move on so you can see now the initial probability of the AC logged in is false now let's move on to the main file the main.tsx now just render all of that so first at the top we would be having the auth provider we should be having the auth provider and now all of the childhood components so the main component the main children is the browser router but the properties and values from directly from the author provider directly can be used in any component in any childhood 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 log statement or either you can have the use auth like this you can have the use auth then you can have the log lock should be we can have the use auth dot you can have the is logged in property like this dot it's logged in like this so use auth thought you can either it's 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 so you have the two over there you can see it now you will be having the true over there and that's how it's gonna work uh sorry and it can solve a couple of problems like the prop drilling as well so suppose if you create the authentication here directly in 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 a 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 our 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 slash header 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 to share it 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 a link like that we can have the navigation link over there and that could be a separate component now we can just render the rfce for the default uh ball update 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 different background suppose the button uses this link we can have the background that should be inside the string and what we can do is and after that we can use the text as well so the text should also be inside the string that we were that what we want to wrap between the link what the text should be visible on 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 did the string and after that we can also require the own 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 own clicks some can use this as a button as well so we can have the own 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 logo and after that so that should be for the log out 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 not a Dom we can import the link directly from we can have the rrd react router Dom slash I think the link is named exports so we can use the link over there and now we want to return your 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 the years so which should contain the props like that should be equals to we can have the props type over there the 2 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 plot the text between them so the text between them should be what you can do we can props dot we can have the text and then we can provide the customized Styles as well we can have the Styles 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 dot 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 dot 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 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 uh 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 render a box or we can rent our 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're going to get the cons we can have the auth so that should be equals to use auth or so now we have the reference now what do we want to do so here we should have a condition like if the auth dot we have the user or we can have the auth dot 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 and GSX stack the empty tag and here is what we'll be having the empty tank 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 double zero 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 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 plot the BG so here BG would be different so we can have hash we can have the five one five three eight 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 use so we can have the text as well that should be awaken up the log out and 2 should not be the logout 2 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 own 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 auth dot we can have the log out so we will be referencing we talk about 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 to navtax 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 it 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 yeah text should be the login the text color should also be the black and here we would be having the same background and default ground color the two should be equals to because of this sign up and that should be we can have this 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 into 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 here 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 custom icss file then it's up to you but I would be defining it inside the index so that should be we can have the nav link and inside there now 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 uppercase then we can move on because of the margin right that should be somewhere around 10 pixels imagine from the left as well 10 pixels we can have the padding that should be a pixels top and bottom the 20 pixels from left and right then we're gonna be 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 overview 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 a letter spacing as well that should be somewhere or one pixels that's enough now we have the enabling and everything seems to be working perfectly fine over there now let's move on to the enabling so now let's move on to the application you can see it now it looks like this now with the login we have this sign up we can click on the login now we are into the login page we can click on this 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 foreign so there you can say 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 logout we enter the home once we move on to the go to chat now we can do it 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 say that how it's gonna 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 enter the form so there can be some items onto the form so that could be the login and design up as well so we can have name email and the password for this sign up but if there are other mobile devices so inside the mobile devices the style will look different so inside the mobile devices what we're gonna do is we can just render so suppose that's a mobile device so it's a mobile device so we only need to render here the form so if 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 inside the login now what do we want to do so first I think we can 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 device just like the div so we can import something that should be at the right time here 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 plot 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 hundred percent for the width we can have the height as well and it should also be we can have the hundred percent 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 for 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 a 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 add the padding that should be it we can have the empty margin from the top that should be again it 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 dot vnf 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 this style overview 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 gate 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 one is equals to the eight and if you have defined the eight it means it 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 your normal things and this box would contain the form so let's move on so here we can plot 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 this 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 adjust the white content that should be inside the center of the screen we can plot 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 plot the padding as well that should be somewhere around two over there we can have the 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 inside that now we can render a form so let's move on so we can just render here the form directly from the HTML tags and here now what we can do so here we can provide a customized starting for that so styling could be we can just plot the margin that should be we can have the auto from all of these sites then we can have the padding as well so we can have the padding that should be around we can give the 30 pixels of the padding from all of these sites the Box Shadow should be there somewhere around beginning of the 10 pixels horizontally 10 pixels for the vertical Shadow 20 pixels we can get for the blow we can give hash triple zero for this color of the Shadow then we can get the Border 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 it none so we don't need to use any border and after that now what can we do so inside this form we can just render another container so we can have a container over there like suppose that could be equals 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 cannot be 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 costly typed graphene so we can have the typography 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 Mi 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's 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 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 here the login like this so if we save and if we 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 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 mei.com so if you move on to the material UI so they provide a different type of input components you can move on to the material UI you can just search for the text field so this is your 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 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 share the text field would be shared so we can have the customized input so we have the customize 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 could 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 this 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 close to the problems 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 from we can have from memory material like this we can am your material slash 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 use so here we can just provide the props dot we can have the name over there we can provide you I think the label as well the labels should be what we can do props dot we have the label for this we can provide you the type as well the type should be again we can have the props dot click in a bit 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 overview 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 it now we have here the email then with 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 this 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 have 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 have this 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 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 process 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 project customize 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 bit then you can use that as well so here we have the 400 pixels then we can move on we can the board or 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 if you have the margin that should be costly 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 inspect 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 Notch outline so what we can do uh so we have your mui input base root mui so I think we are using the outline so what we can do so mui input base I'm going to perform control the input tag as this so you can see we have the mui outline input so we can copy this class name mui outline input so we can copy and we can move on to our CSS file index.css we can paste this style over there now we have this class over here our client 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 muy uh Slash we're going to be focused here so we have the focused 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 I'm your input again we can plot the same style for this as well mui outlined input we have here the notch outline so here now what we can do so we can have the Border color so that should be we can have either white like this and it should be important so let's see how it looks you can see now we have the Border 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 is 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 Wire that should be I think we can get the one over there we can provide the margin from the top that should be we can have the two over there we can plot the width should be same as the form 400 pixels then we can move on we are in the bottom 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 this double zero we can have triple f c 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 busy 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 over there and that's how it's going to look so you can say now with 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 we saw 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 i o 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 overview we have the i o iOS login like this and that's how it's going to look so if we save it if we 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 say now it's looking great now we can move on so now we can move on and now we can handle the form date 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 cons you can have your handle submit like this so that should be equals to you can have the function over 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 const you know the form data over there so that should be close 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 either 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.get that should be costly password now you can log all of these values as well you can lock the email you can log the password as well and that's how it's going to block so if we say that if we move on if we move on to the inspect panel if we move on to this spec if we move on to the console so there you can see if we provide these types over there if we click on the login then you can see now we got the Styles over there we have the enthadani at directtest.com then we have the password and everything seems to be working perfectly fine so now we have the date 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 axios so axios is used to send the API request it is used for the communication with the backend and the front end so let's install the axios and with the help of xcos we'll be just 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 xcos as well so we can use the axios dot we can have the defaults dot we can have the base URL so we can put the base URL for this as well so what's the base URL for the backend we can have the http we can have the localhost the port of we can have the 5000 slash we can have the API slash we can have the V1 so that's the basic URL and after that we need to set the base configurations as well so we can have the xeos dot we can have the defaults dot we can have the with credentials so if you use the with credentials so it will allow setting the cookies directly from the back end and just exchanging the cookies with the backend so with the help of with credentials it will help you to exchange the cookies so with credentials that should be Consolidated 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 new file for the helpers so we can do the helpers over there like this we can have the helpers and here we can create a new file that should be you can have 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 can have the async out of function so we can have the cons we're going to 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 console we're gonna 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 kind of function and the params 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 xcos 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 axios package so we can have the axios like this so await it should be equals to axios Axis or we can have the post as well so that's a post request and the URL that we want to Define should be slash user slash we can have the login over there like this so that would be a URL and after that now what do we want to do as 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 dot 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 a throw new error and we can send the error message suppose that could be we can have the enable to login so that would be error message but if the response dot status is the 200 it means if everything is successful then we can graph the data const data and that should be equals to that should be equals to what do we need to do so it should be the response dot we can have the data so it should be the weight because that's a promise so it should be the response dot 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 auth context over there inside the auth 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 add the cons we can have the data so that should be equals to a weight and await it should be equals to we can have the login user like this we have the login 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 verifications checked 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 this set user so that should be equals to what do we need to do so user should have the email that should be data dot begin of the email and the user would be having the name as well so we can have the data dot you can have the name like this so we will be having the stat user like this and then we would be having the set logged in property as well so we have this set is logged in and that should be costly 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 if you remember we have installed a library as well which is a 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.host 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 auth provider or after the theme provider then we can use it spot over there like this so here will be toast 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 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 or toast and now what we can do so we can have the try catch block so insert 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 await and here we need to use the context here so we can have the cons if we can have the auth so that should be the use auth over there now let's use the context we can have the auth dot we can have the login so we can have the auth Dot Login after that we can provide the email we can provide the password as well we have the login email and the password and that's how it's gonna work and I think there are some type arrows like that could be known 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 produce a string over there and after that it will be logged in so let's use it toast over there so you need to import this thing over there you have the toast so I think you need to import the toast directly from the reactor so you have the toast so toast is a function which creates the toast so you can have the toast Dotty of the loading so first we need to show the loading state so we can have the uh we can have the signing in like this so we can have this signing in and after that let's move on we can produce the second argument that's the ID so we want to provide only one dose 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 a login over there like this so we have the close dot loading 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 this 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 dot we can have the error we can have the sign in again we can do this signing and we cannot be failed so that's how it's going to work and we can also lock the error as well so we can have a log the error overview 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 want to the back end so I want to show you one thing if you move on to the user's 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 dot 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 backend as well so here inside this terminal let's move on to backend 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 database so let's move on so now we want to provide the credentials so what credentials did we use so we have used here the James .com we can use the password one two three four five six 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 say now we are getting an error which is the course error you can see it is expected because one server because now you are in the server of 5173 and the backend is running or This Server of 5000 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 5000 so 5000 would not allow This 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 whitelist This Server we want to whitelist 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 app.ts over there and there you can see we have already added a package which is a course you can say this is a course which will bypass this error so let's move on to anything 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 course as well so you can either import or 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 records 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 array as well so we can provide the string so that should be we can have the http localhost the port of we can have the five one seven three 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 course 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 so 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 auth token over there and there you can see you have the domain of the localhost you have the path of this 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 gonna work and after that let's move on and let's just try to get the cookie you have the document dot 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 is 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're in the document or you can have the document Dottie 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 logout functionality as well and now let's complete the authentication workflow and let's just quickly start the chat GPT 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 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 back end 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 controllers here so inside the user's 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 waking up the login or we can have the auth status like this we have the auth we can have this status over there we have the odd 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 middleware 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 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're going to verify we can have the token like this we have the verify token and that should be an asynchronous error function and this would be a middle wave 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 to conduct 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 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 get 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 auth token so we want the odd token over there so what we can use over this so we can move on we can use the template credit also over there and that should be weaken up 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 auth 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 auth beginner this data select 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 slash we can have the auth we can have the oscillators over so it has the OS 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 starts status not equals to 200 then we can have enabled 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 async 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 your weight and that should be equals to we can check aux status over there like this checkup 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 Z 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 then 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 into set user 2 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 home page as well and let's remove that let's click on the refresh once again let's have a I think we can have the fetch xhr so 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 via 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 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 middleware but if the token is not valid then what we can do so then final thing that we can do is now we can just stop this request we can abort 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 so here we are using the promise and it's avoid because we want to verify some parameters like we can resolve the promise or we can reject the promises 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 dot 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 dot environment.jwt secret once again so we have the secret key and after that there is a third parameter as well which is a callback 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 a 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 well but it's up to you then we can move on we can have the turn response dot picking up the status that should be for one 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 they 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 we are successful then we can plot the else case inside 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 this 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 result 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 middleware so this middleware can set some local variables from the response and then we can use them from the next middleware so 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 stored 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 this 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 middleware so that was the last thing that now we want to return to the next middleware 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 dot 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 dot we can have the status that should be again we can have the four or one once again we can send the Json message once again we can send the message over there then we can have the token not receive like this so we can have the token not received so that's how it's gonna 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 is 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 set it 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 a token was malfunctioned or not so let's move on so instead to try it now what we can do so first we can try and get the user so we can remove this we can have the update user dot find one so now we can find the user email so email should be equals to we can have the response dot we can have the locals dot JWT data like this dot we can have the email so we can find the user or what we can do so we can have defined by ID as well because we are already encrypting the IDS fill so we can have defined by ID and that should be response dot locals.jwt data dot 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 Port 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 dot we can have the ID underscore ID dot tostring if the ID is equals to the same of the ID that we are getting inside the response or we have the locals dot JWT data like this dot 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 dot status for one then we can send the token and user like we can send here permissions didn't match like this so because the permissions didn't match and you can also store these strings inside a separate variable as well and it's also a good option but here let's just complete this application so now we have to string and if everything works fine then now what we can do so if we passed 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 door configuration 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 lock the user dot we can have the underscore ID dot we have the tostring and then we can just log the response torque we can have the locals dot JWT data like this dot 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 here the verify I think we cannot be verified 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 gonna work so you can see now it's working great over there so you can say congratulations on completing this secure backend as well so now let's move on to the Token manager and remove these locks as well so just remove these logs over there because locks should not be there inside the production so that's how it's gonna work so now you can see now you complete 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 Ai and let's create the chat GPT 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 AI platform so now you want to move on to this and there you can see you need to click on the GPT so now we'll be using the GPD models for it so there are a couple of models for the GPT gpt4 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 AI chat completion.create and there you can see that's how it works so first there would be a role or 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 any 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 Angeles and dash dash dash and he has come up with an answer and then again you have the role like this you have by 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 say 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 with the chat routes as well now let's create another route as well for the chats so that it should work accordingly so so here now what do we want to do so here there would be a new route for the chat so we're gonna have the chat routes dot 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 slash we can have the new like this so we can have the chat Slash 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 Slash new API slash chat Slash new then we can move on so we can have the verified token so we can have the verify token so that we should 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 could we can have chats controllers like that chat controllers dot vegan at the TS and after that let's define the controller function for that so we can have the export cons we can have the uh we can have regenerate chat pick another completion so that would be equals to we can have the asynchronous data function over there and it would be same like the user's controller so the parameters would be same like there is 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 AI so for that we want to use the open AI apis so first we want to configure the open AI 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 open AI config.ts and here we can Define the function we can have the function configure we can reopen yeah 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 put out the API key for that API key should be equals to begin of the process dot we can have 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 AI 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 dot we can have the environment dot we can have the open AI now I think we can again move on to the moment so that should be open AI organization ID like this so we have this thing over there 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 add the export const we have the configure open AI that should be equals to add a 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 const 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 with this 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 utils 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 a 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 validator like that then we should be having the verified token and then let's move on to the final thing we can have it 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 I can have the cons we can have the user like this so that should be equals to your weight and that should be because the user we can 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 dot 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 if we don't have the user then what we can do we can have the return response dot we can have the status that should be for one dot we can have the Json like that message like that and that should be the same message that we have created so we created this same message inside the user's controller and I think you should store all of these static strings inside inside something like inside the constant stairs so it's a good practice so now what we can do so we can just copy that over there like the user not registered or the token malfunction 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 of the composition 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 you 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 so inside a 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 load and the content after that now what do we want to do and we can just return the same thing over here like this we roll 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 we 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 dot 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 a reuser 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 you 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 either push like that so we can have the push so we can have the chat dot push and now what we can do so we can have the content that should be equals to begin a message and then what we can do so we can have a role as well so we can define the role so that should also be we can have your 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 knob you want to move on so now we want to move on and now we want to send all of the chats to the opening API so let's move on so now we have the configuration of the open AI right then we can have the cons we can have either config like that so that should be equals to we can have the configure open AI 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 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 AI API so let's import that so import something from that should be open AI like that and import you need to import the open AI API like this so this is a class for the opening API you need to import that so you have the open AI like this API and now we want to provide a config object so now we want to provide the configuration over there and now we would be grabbing the open AI complete API with that so with the help of this now we have the complete open air 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 equal 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 a 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 slash beginning of 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 close to the chats array so that's would be equals to the chats area over there and that's how it's gonna work and now you are getting the type error as well so what you need to do so the chats array so after that you can provide the type animation as well you can have the S 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 message is 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 say response choices zero message and the content so that's how you can get that so you can have the node.js as well completion dot choices zero Dot message dot content so let's move on so what do you want to do so we can have the user dot we can update chats dot we can either push so we can push to the chats of the user and that should be equals to we can have the chatresponse dot we can have the data dot beginner choices dot we can have the latest which is a 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 in the content so that's how it's going to work and after that the final thing that you want to do is now we can move on so now we can save the user's chat array as well so we can have the weight over there that should be we can have the user dot we can have this 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 dot begin of the status that should be we can have the 200 it means everything worked successfully then we can have Json messages over there the Json it should contain the chats like that the chats should be we can have the user talk we can have the chats like that and now that's how it's gonna work and there's another thing you can see and that's how it will work and everything should work perfectly fine and there's another thing that we haven't used the try 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 they try so it should be there inside the try block and inside the catch if we get an error then what do you want to do we need to send the response back to the server to the front end so inside this will 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 errors so we can provide this as a server error overdue we can have the 500 for that and we can lock the address as well inside this so we can lock 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 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 front end so let's move on so here you can see now enter the chat.tsx and here now we have discussed about the layout now we want to design that so first thing folks now what do we want to do so first we can just provider 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 muis so we can import something from we can have from mui material over there like that and now that should be equals to picking up 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 hundred percent of the bit then we can move on we can have the height as well that should be again hundred percent so it should have the full width and diet if 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 Imperium 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 access that should be we can have the none and same for the MD as well that should be we can have the non 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 hundred percent of the parent container the hundred percent of the parent then we can move on we can again have the height so this time the height should be somewhere around 60 viewport height and that should be enough then we can have your 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 color for that so if we save it 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 Border 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 iMac should B3 from all of the sides so this is the container in which we'll be displaying the Avatar of the user so we're going to 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 Avatar now what do we want to do we can have this x 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 to BG color that should be big enough 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 this 700 so that's how it's going to work and inside the Avatar now what do we want to do so here we would again be getting the user profile the user auth profile so let's move on so we can have the costs auth so that should be equals to what we're gonna do so here so here sorry what we have we have the use author over there like that and here now we want to grab the first and the last letter the first part of the first name and first word of the last name so we can have the auth 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 backend 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 you can see now we are getting the James and after that now what do you want to do so we can grab the last name as well so here is the first name and then we can add another string then we can have the auth I think we can have you auth dot we can have your the user property once again dot we can have the name dot we can have this split dot we can have the split dot we can have with the um with a 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 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 jugard in Hindi so that's how it works so now let's move on as the next step so now what do you 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 gonna look and after that now what do you want to do so after that we could have the typography after the avatar so we can have a 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 let's hypography 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 a vmx that should be we can have the got over there for the MX then we can move on then we can have the font family so here we should be having the different Pond family box and select that and insert this type of gravity and what we can use so we can use you are talking to what chatbot like that so now you have this thing over there that you are talking to a chatbot and that's how it's gonna 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 your the MX Auto it would be same then we can have you I think we can have the margin from The Wire that should be somewhere around beginning of 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 you can have the knowledge business advices education Etc but avoid sharing the personal information so that's how it's gonna 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 could be having at the button I don't think what happened 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 kind of the auto over there so it should be the auto then we can move on we can have the color the text that should be the white then we can move on so we cannot deformed weight like that and that should be somewhere around we can have this 700 over there then we can move on the bottom 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 what we can have the busy 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 UI so you can import like that you can import something from you can have the mui material so MBR material slash 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 it right 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 Dot begin with 300 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 hover 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 one four zero I think we can have the a400 for that so if we save it if we move on so there you can say now we have the button and after that now what do you 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 gonna 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 overview 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 flag should be somewhere around 1 and same for the small as well the small the flag should be somewhere around one and after this now what do you want to do so after this we can just write some typography about the model name that we'll be using the typography should we do so I think we can again use the SX prop it should contain the text align inside the center and then what we can use so we're in the font size that should be 40 pixels of the font we can just use the color that should be we can have the white overview then we can move on we can have the font family hunting font family should be default for that then we can have the margin from the bottom should be 2 like that so that's how it's going to work then we're going to the model that should be we can have a GPT 3.5 turbo like that so if we save and if we move on so there you can see now the model GPT 3.5 turbo and that's how it's gonna 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 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 add 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 GPT 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 hundred percent 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 you want to do after the typography now we want to render the actual chat so there so we can have a 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 hundred percent of the available space then we can have the height that should be 60 viewport height then we can move on so we can have the bottom radius so that should be somewhere around we can have the three over there we can have at the MX that should be bigger the auto over there for the MX then we can move on we can have the display that should be again inside the flexbox again we can have the flex Direction over there that should be we can have the column overview and then we can have the Overflow like we can have the Overflow that should be because to Scrolls so we can have this scroll Behavior but the Overflow X would not be visible should not be visible so flow 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 be kind of a smooth 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 bit so we can remove the width and instead we can have your 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 obviously error so we have the error of the smooth so that's how it's going to work over there like that so if you save and if we move on so now we should be having this scroll Behavior as well and that's how it's going to work and then we can add the Overflow why as well and that should be we can 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 prod the font weight of the 600 as well and it will look great and after that now what do you 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 jbd 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 array of static chats with AI assistant like the role 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 cons we can have the chat messages so that should be these messages over there so begin with the chat messages like that and that's how it's going to work so now let's define all of that so so here now what we can use so we can have the chat messages dot we can have here 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 they have 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 uh the chat like that so we can have the chat and then now what do we want to do so as of now we can just render on 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 chat dot we can have the message or we can have the content like that so let's see how it gonna 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 this separate component in which we can just display all of the chats same like the chat gbd so let's move on so insert 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 thank you 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 you want to do so we'll be accepting some props as well so we'll be accepting the props like we can have with a 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 close 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 roles 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 gonna 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 GPS 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 inside the return statement now what we can use so first we can check if the role is equals to we have in 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 add the mtgsx stacks over there like that inside this as well and insert this as well so if the role is the assistant then what we can use so we can use the box from the material UI once again so let's import that as well we can import something from we can have at the rate MBR material that should be we can have the box like that so we can add the Box and 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 either display that should be we can have the flex over there like that we can either 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 will be different background color for each chat item and that should be hash we can have the double zero four D five six one two we have the background color and then now what do you want to do so then we can have your 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 you 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 you 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 0 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 opening I once again open Ai and then we can have the width as well width that should be somewhere around we can have the 30 pixels for the bit 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 this inside the typography over there we can have the typography and insert the typography we can just provide you 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 the size that should be 20 pixels enough and after that now what do you 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 roads 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 padding two 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 do we need to do so we can have the double zero 4D 56 audio so that should be the different background color and after that now what do you want to do so we can have the Avatar so again we can use the auth property of the user so we can have the const we can have the author whether that should be customary of the use auth that should be author over there that should be use auth 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 you want to do so then we have the typography and it should be same I think but isn't that the Avatar we can have the ml0 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 because 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 dot content but instead we want to write here uh chat item component over the chat item and now we want to send the data we can just plot the content that should be we can have a chat dot we have the content over there then we can move on we can have a role that should be we can have the chat dot we can Will Roll 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 spend 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 saying this thing over there hello can you tell me this this you have the James so I think all messages are directly from the user or the assistant the role 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 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 am in the New York City we have the uh we have the message great give me a moment and then there you can see now we have 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 say it's looking great now the design looks great over there so that's how it's gonna 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 pair in 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 here I think we can directly user the HTML input tag because it would be more preferable HTML 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's where we can have the hundred percent for the width then we can have here 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 you know so we can also plot the color I think yeah color that should be kind of the white then we can move on we can have 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 plot a different div 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 kind of the hundred percent of the width then we can move on so we can have the padding so that should be somewhere around 20 pixels over there padding from all of these sites and then what we can do so we can have the bottom radius so what we can do so we can wrap the input directly inside this div so we can have a stylac input 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 gate 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 big enough 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 kind of the auto like that and now what do you want to do is the next step I 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 have 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 functionalities or 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 margin from the left that should be the kind of the auto we can have the color that should be kind of 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 slash i o 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 how it looks now so we have this iom descent icon over there and that's how it's going to look so if we save it if we move on so there you can see now we have the icon over there and you can see it 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 with the input as well it's working perfectly fine over there like that you can say 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 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 out to the inspect panel so we can select the responsive you can say it's looking great over there you can see now we don't have 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 uh 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 so we can declare 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 plot the ref over there so we can move on we can have big cons figure out 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 user F 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 equal signal as well like this and after that now what do you want to do so we can copy the input graph over there and we can directly move on to the input so so here we have the input and here we can just provide any 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 graph 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 own click state for this and we can have the handle submit like that so let's see what happens if we are getting a 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 letter 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 stick here the chats array as well so we can again have the use State over there like this we can have the used State we can have the chats or we can add the messages we can have this set messages over there I think chat messages we can have okay we can have this at chat messages and view State could 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 setchat messages and here we have the use state so as of now we can use a 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 for 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.current.value we can have as we can have this 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 you have the input ref and the input ref towards we have the current so then what do you want to do so now we can have the input graph dot current dot 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 you 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 road 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 you want to do so now we want to store that input inside this state as well inside this use State as well so we can have this set chat messages over there we can have a reset sorry we can have here this 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 gonna work and now you can see now we are 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 from messages so let's move on so we can either type we can have the messages over there and that should be equals to be another 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 area 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 news 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 header so then I think it should be stored there you can say now we are seeing the hell over there we can have the high we can just click on this end 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 you 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 backend 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 a new response inside this set chat messages array so let's move on so what do you 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 this send chat we can have the request over there we have this send chat request and here it would be an asynchronous 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 you want to do so xeos dot 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 slash chat Slash 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 here the message so that's how it's going to work and after that if the response dot 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 a 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 you want to do so we can just send the content over there we can Center the content or we can send here the new message so we can have the content like 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 any 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 dot 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 backend to verify all of that if everything works great or not if everything is properly integrated or not so let's move on to the back end so we can move on to the chat routes we have the generate chat completion so here you can see now 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 gonna work so now let's move on and let's just try it out so let's try it 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 you want to do so again we can send in your request and we can track the network response over there so let's move on so we're gonna be hello how are you today so let's just click on this end so let's see what happens so now we have the new it means now if we are sending a 404 not found it means now we do not have this we do not have this URL registered so I think we can move on to the backend 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 I don't know so let's see what happens if we just click on this and once again so let's just click on this run 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 am 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 send it 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 say it looks great over there so let's send another message like what is we can have a 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 jbd model as well you can see that's how it works and it looks great over there you can say it looks great and everything seems to be working perfectly fine so congratulations on successfully integrating the open AI API to the monstag 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 only show me the code um like we can have the 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 code Snippets as well and now we want to show the code Snippets 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 front end 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 here this something from it should be equals to from we can have the react syntax highlighter 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 a 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 core strings between them so you can see if we move on to the application so could not find the Declaration while 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's 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 that overview 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 and 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 these Styles as well so you can see again we can move on to the documentation now we can get these Styles as well so what we can do so now here we are using the prism so we want to import the style 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 again refresh this if we refresh so let's see what happens this time I think the front-end server is not open we can have the npm Run Dev so again we can open this over 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 hell over there so after we send the hello now we'll be receiving 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 chats array if we open this thing over there like this so we have the message 5 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 backticks so it starts from three back ticks over there so you can see every code block starts from three pack takes and ends in these three back decks 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 cons 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 backticks over there so we can write that over there and this key is there on to 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 it inside the JavaScript we have this rule over there and inside the second value of the array now we have the code block you can see now with 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 this 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 this string so that would be a function and insert 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 you want to do so we can check a condition like if the message like if the message thought we can have the includes so if the message dot includes these three backticks over there like this if the message dot includes this then what do you want to do then we can just render here this over there now we can render a condition we can have the cons we can have the blocks of the message that should be equals to we can have the message dot we can have this 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 ad of the blocks and that's how it's going to work and after that we need another function suppose you can see if we move on to the application once again so 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 not so it would be very simple so what do you 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 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 dot we can have the includes if the screen dot includes n 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 dot includes that could be the hash sign 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 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 say insert 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 area over there so if we get this string carry over there it means now we have the message blocks and if you 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 inside 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 pixels like that so that could be this typography and inside this typography we can just render the content overview 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 or we can have the length 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 dot length is not equals to zero so then what do you 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 will be receiving the block string overdo and after that now what do you want to do so we can just write here the condition and we can grant us 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 you want to render we can render something else and if it's not the code block then we want to do something else so we can provide the jsx over there the mtgs tax over there like that and for this as well we can have the empty jsx tags 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 written the true overview like that so we should return the true over there like this so we can have the true and if you 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 this syntax highlighter over there and then what do you want to do so inside that we can move on we can provide the style that should be we can have the colder cold like that so we'll be having this style over there I think we can have your code 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 you the language that should be for the JavaScript so as of now I am giving you 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 this 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 render the code block and that should be equal so 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 this ring then we are verifying 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 those syntax of declaring variable in JavaScript like this so if I send this query to a chat Deputy 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 insert the response you can see now we are receiving the data you can see it looks great over there you can see it now we have the code blocks as well between them you can see in JavaScript this does this you can see the code blocks are working fine you can see now you can see all of the code blocks 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 this 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 what 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 say it's looking great so that's how the chat DVD 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 user's message as well so sometimes users also send a chat messages so what we can do so we can 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 padding 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 Wire that should be equals to be another two and that's how it's going to happen and everything seems to be working perfectly fine over there you can say 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 issues from our application so let's move on to the chat routes so let's create a new route as well so let's create the chat routes dot 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 all we can have the chats like this so that could be the route over there and here I think we do not need any validate 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 is we can copy something like this from this from the user's 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 this send chats to become a user like this so we can have this send chats for 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 have this conditions over there and after that now we have the turn 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 dot we can have with 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 auth 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 we 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 access dot vegan at 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 a chats like that 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 you 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 inside this now what do you want to do so we need to run 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 rendered 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 auth dot we can have this logged in it means now we have the user and we have the author dot user as well you can run to another condition like you can have the auth dot you can have the user so so after that now you want to run something so after that you can run the code over there so you can you can move on so you can have the toast over there so you can import the toast or you can be loading then we can be loading chats like that so we can have the loading chats we can plot the message like that we can plot the ID over there so that should be awaken up the load chats like that we have the idea over there and after that now what do you want to do so we can move on so we can have the get Chooser 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 out the elements so we can have the data dot we can have the messages like that we can have the data dot 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 be chats over they are successfully loaded chats and the ID of the load chats and that's all we want to do and after that if we get any error then what do you want to do we can render the catch over there so we can randomly cache statement and insert the catch we add the error first we can log the address as well we can lock the error inside the console then we can move on so we can have the toast dot we can have the adder as well toast dot error and that should be equals to we can send the message as well directly like we can have the loading failed like that we have the loading field 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 Callback 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 you refresh so let's see what happens so there you can see if we just refresh the page so I don't know what happens 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 go to 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 backend regarding the token to check the user'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 auth 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 Android delete chats like that so that could be equals to when asynchronous at a function and inside 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 dot we can have the delete over there now let's move on so we can have slash we can have the delete overview so we can have slash we cannot 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 dot we can have the chats like this so we can have the user dot chats is equals to an empty array so now we can set the user's 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 add your weight then we can have the user dot we can have this save like that and that's how it's going to work talk 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 either delete like this so we can either delete that should be chat slash delete and I think yeah it's same we have the chat slash delete and after that now what do you 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 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 dryer we can have here the weight we can have the delete chats of the user we can have the 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 toaster as well those dot 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 this success over there then we have the deleted we can have the deleted chats we can have it 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 because the toast dot we have the error we can have the deleting 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 own 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 deleted successfully and everything seems to be working perfectly fine and now if we refresh now you can see it 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 backend we already have the protected routes if we move on to the chat routes you can say first we are verifying all of the tokens we have generated chat completion we are validating all of that so we have a couple of middleware's 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 different enters value 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 you want to do so we can just again have a use effect code over there we can have the user effect over there and inside that now what do you want to do so let's just call it once we change the author over there so insert the use effect now what do you want to do we can have if we do not have the auth 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 one thing from the react router Dom which is a navigate so we have a hook inside the react router 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 router Dom and the something 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 navigate 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 authority user we can have the return we can have the navigate like this we can have the return navigate that should be equals to slash we can have been 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 logout but you can see now we want to implement the lockout functionalities as well so let's move on so if the user is not logged in so let's just Implement that so before 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 user's 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 dot we can actually get that should be equals to we can have the log out so that should be a logout 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 logout like that user logout like this and we have this function over there and inside 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 dot we can have the clear cookie and inside that we have a couple of things we have the HTTP only domain of the localhost 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 user 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 cat request only and it should be we can have slash user slash we would have at 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 backend 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 auth context so here we need the log out so after that now what do you want to do so we can at the await that should be weaken if the user log out like this so I think we have the log out user like this so we have the logout 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 doesn't immediately get removed so it takes some time so we can have the window dot we can have the location dot we can have the rewrote 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 into 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 log out 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 product the on click prop over there we can have the own click and here what do you want to do so now we can just run near the props dot on click and it would be very simple now we can move on to the header you can see now here we are providing down click so it should work perfectly fine over there so 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 all 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 James 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.com one two three four five six so email was wrong so let's try it out with the login so you can say 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 application and now we want to move on so if we again click on the logout now you can say 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 localhost 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 home page 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 logout and if we again move on to slash 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 author changes then we can move on so here it should be very simple so we can check if we have the auth dot we have the user then I think what we can do so we can redirect the user to navigate like we can have the Navigator over there slash we can have the chat so that's all that we want to 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 we move on if we click on the login james.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 will 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 you can only enable this route so we can wrap this inside a condition so we can only enable this route once we add the auth dot we have the is logged in is true and we have the auth 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 slash chat you can see now will be moved on to the notep found page it means now the user is moving into a page which is not found so everything seems 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 on to the login we can copy the complete login page we can paste it out inside this sign up because the UI should be same of the authentication of the auth screens so that should be we can have the sign up and here as well we should be having a 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 this we have 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 sign up 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 Excel dot 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 be 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 a 201 inside that we can have the unable to we can always 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 dot status not equals to 201 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 community I think inside the auth context let's move on let's do inside the sign up as well so let's move on so we need to do the same thing inside the sign up 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 sign up page then we should be having auth Where is the auth uh there is the auth it should be dot dot 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 dot get that should be close 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 either sign up over there and now it should work perfectly fine and now we have the button it should be 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 you we're gonna marry we can have the hair rely like that so we can give any name like that so then we can have the merry at the redtest.com we connect the password one two three four five six so let's just click on this 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 uh signing up like this signing up it should be having the signed up once again make another sign ing up that should be failed so now we should be having a different ID that should be the sign up here is where we'll be having the sign up here is 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 there you can see now we have the marry that's why we can see the m h over there and now you can see it seems working fine the sign up works now we want to work on the home page so let's move on let's design the home page of our application as well so now let's work with the home page and for the home page 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 this Library react type animation and it's a completely animated text Library over there like you can see you can move on to home page as well like this you can move on to home page and this is their home page 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 installed we can have to 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 home page I think component we can have the typo like this typer and inside that we can have the typing animation like that or begin the typing an IM dot we have the TSX so we have this component over there and let's just write the ball update code and after that we can just copy this full component the type animation let's just paste it out too 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 one 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 our own AI so we can have the chat with your we can have the or AI then we can move on then we can write build with open AI then we can move on so I've added the Emoji as well then we can move on we can just write something like your own customize 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 1000 milliseconds that should be another 2000 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 2em 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 you know 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 do 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're gonna have a text shadow that should be somewhere around one pixels we can have the one pixels then we can have the 20 pixels of the Shadow below then we can have hash triple zero color for the shadow so you can see now we have the typing animation now we can successfully move on to the home page of our application 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 add the box over there and inside the Box we can just provide the width that should be somewhere around we can get the hundred percent over there we're gonna have the height as well for the container that should be hundred percent 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 begin of the MX that should be we can have the auto over there like that we have the MX that should be picking at 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 files so that could be the container of all of these children 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 hundred percent over there we can have the flex Direction that should be inside the column basis 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 have the MX that should be again that should be Auto and I think this parent container does not require the flex in the MX Auto so that should only have a parent 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 anymore 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 home page 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 say 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 m t as well for the empty 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 should be we can have the hundred percent over there again the which the hundred percent 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 you 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 either row and for the extra small we can have the flex direction that should be equals to we can have a 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 y 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 picking up the robot dot we have the PNG over there so you need to create this image over there sorry you have this image 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 this style for that so we're gonna have this style for the images we can have a width that should be somewhere around we can give the 200 pixels for the width of it 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 if we can have the auto overview like this we have the margin of the auto so that's all 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 AI dot PNG or again should be the open AI 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'll be rotating this image so let's move on so here we can have the class name for that that should be page 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 keyframes so from 0 degree to 359 degree to 360 degree so we want to rotate you and it is infinite sorry it should be completed within eight 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 a 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 you 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 a reflex for this so this place 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 hundred percent 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 dot 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 styled as well so we can have this 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 percent of the available space the bit should be sixty percent we have the bottom radius that should be somewhere around 20 would be enough 20 pixels would be enough then we're gonna have the box Shadow as well so we did the shadow for this image so the Box shadow that we want to Define could be we can move on and it should have sash six four F three D5 so we have this chat over there it is 6 4 F 3 D5 then we can move on we can have here 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 X Y positions for this box share as well we need to Define here 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 one zero five 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 hundred percent 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 beginning of the bottom overview 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 with the chat with your own AI we have built with open Ai and if we open that inside the mobile devices you can say it looks great first we have this 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 but I think we need to move on we need to provide air for the SM as well so we can have a DSM 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 use media query from the mui material and then we need to use the theme as well so we can have the use theme over there like that from the material so what we can do we can create a media query so we can have the cons pick another theme and that should be equals to be kind of a use theme over there like that and after that we need to create a variable we can have the cons is we can have the below medium like this is below MD that should be equals to we can have the use media query and inside that will be having a Boolean at the return then we can move on we can have the theme dot we can have the breakpoints dot we can have the down and 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 the is below MD so if the screen size is below MD or not so we can get this 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 footer so inside the photo let's create a new file that could be another footer dot we have the TSX over there and now we can add some boilerplate code for that so footer can have this simple Styles over there you can see here we have the simple Styles we have the div and inside the div we have this style over there we have the width of hundred percent padding of 20 minimum height of 20 viewport height Max height of 30 BH 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 build with love bind encoders so we can just provided this pen like this so we can have this pen and insert this pen we can just use the link directly from I think reactor to Dom so we can have the link over there like this we have the react router Dom over there we can just copy the Indian encoders we can paste it out and insert the link we can provide the two as well the two should be equals to https we can have here the YouTube .com picking up the Indian coders so we can have this channel name for us so now we have the Indian quotas 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 produce last 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 build Love by ND encoders so I think we are just having some like blue color over there so we can have this 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 log binding encoders 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 low binding encoders 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 say Indian coders and you can also please subscribe to the YouTube channel as well I create a lot of videos on the monstack full stack development web 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 here so we can log in as well and there you can see it now we have here 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 is some margin between them right so you can see we are having some extra space between them and want 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 either we can remove the padding from this so let's see how it looks so now we 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 big enough the one and now it should work perfectly fine over there like this so we can have the MX that's 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 footer inside the chat page so what we can do so so instead of rendering the footer inside the main layout so we can remove the footer we can render the footer only inside the home page like this so only inside the home page now we can render the footer as well so we can just render here the photo and that's how it works over there now let's move on so if we move on to the home page 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 texture line 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 tag and that's how we want to work now you can see now it looks great over there now if we move on to go to chat you can see now we do not have the extra spacing left over there and if we enter any chat over there like hi like this so let's click on this end so now you can see now we have the chats over there and there you can see now it looks great over the hello how can I help you today and you can see I have made another adjustment over there inside the chat item so I've added the Border radius that should be 2 and my that should be close to the one hand here as well we have the Border radius of two we have the gap of two and that's all 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 in 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 perfect actually 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 system so the authorization systems we integrated the open AIO 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 them on stack so now you know and now you have a great knowledge about demonstrack that how demand stack Works how the back end front-end integration Works how we create the back end how we create different and 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 monstack then we create the fully secured authentication with our backend so it is completely secured with the HTTP only cookies JWT tokens authentication authorization adding middlewares for the security and there was so many things and we have the data validation checks as well and then we created an open AI project similar to the chat GPT clone so it was a huge project we created the chat Deputy clone with them on stack so then we created the modern design with the material UI and react so mui 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 monstack with the back end and the front end we created the integration with the credentials with the axios 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 that I am 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 demand stack 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 foreign

Channel: Indian Coders

Views: 16,442

Keywords: mern stack tutorial, mern stack project, ai chatbot mern stack, openai project, full stack ai chatbot, full stack ai project, mern stack authentication and authorization, mern stack, mern stack tutorial for beginners, mern auth, chatgpt clone react, indian coders, javascript projects, code with antonio, javascript mastery, mern stack chatgpt clone, mern full stack roadmap, full stack dev projects, full stack developer projects, mern tutorial, mern

Id: PX_YOfEdhRg

Length: 336min 8sec (20168 seconds)

Published: Wed Sep 27 2023