Introduction and MERN overview

0:00 in this mstat course nickel will guide you step by step in building a state-of-the-art AI chatbot similar to chat GPT through this Hands-On tutorial you'll Master the depths of the M Stack Implement Advanced authentication mechanisms and seamlessly integrate open ai's capabilities into your full stack application by the course's end you'll have a production ready scalable and secure SAS chatbot PL platform underpinned by the latest in web development best practices hi everyone my name is Nel and welcome to a usest project on a channel so in this tutorial you will Master the monack and you will build a fully secured AI software as a service project with a mon stack so this is an AI chatbot built with the open a and the mon stack so users can ask their queries and their doubts to the chatbot and chatbot will come up with an answer so this is similar to theat chat GPD as well so this application includes a fully responsive web page with a modern design so it is completely responsive on any screen size you can check the responsiveness as well and this application starts from the home screen

1:13 so anyone can log in and register and they can start their conversations with the chat B so they just need to click on the login they can provide the credentials over there they can click on the login and after that the user would be logged in and we would be restoring all of the chats of the user with the chatbot and the conversations would be stored in the database so anyone can access their chats any time so you can see this is a UI for the chatbot and this is similar to the chat GPT like thing you can see if you ask any question like show me how can I declare variables in JavaScript so this chatbot will come up with an answer and it will also show you the code blocks as well so if you need any code blocks so it is capable of showing all of the code blocks to the user and the users have the functionality so they can clear the conversation with the chat Bo as well so

2:00 they just need to click on the clear conversation and all of the chats of the user would be deleted and the user session will be active till the 7 days so we'll be storing the cookies inside the browser we'll be storing the HTTP only cookies and we'll be storing the tokens inside that and they can't be accessed by the JavaScript so they cannot be accessed by the JavaScript so they can only be accessed via the back end so users do not need to log in within the 7 Days of logging in so after only 7 days they are required to login again to generate a new token and we'll be using the openi conversational model GP 3.5 turbo and4 and on every chat message the user needs to verify their session and the authorization details as per the security because the security is on top priority so that's the demo of this application that we have created and this is our homepage the user can move on to the register page as well so sign up will look similar to the login so this is all for the demo and now let's understand the text TX that we'll be [Music] using so we will be using the nodejs

3:13 express for the back end for creating the rest API and we'll be using the mongodb database for storing the data efficiently and on the front end side we'll be using the V for fast Dynamic and reliable application and for the authentication and authorization we'll be using the password encryption using the BP we'll be using the jwd Json web tokens and their authorization we'll be using the HTTP only cookies which can only be accessed by the server and we'll be using the validations as well we'll be using multiple middleware checks for the security and much more and for the design and the UI for this application we'll be using the material UI Library which is the best UI component Library out there for react and we'll be using the context API for the re react for providing the authentication as authentication provider as a rapper for whole application and with integrating all these Technologies we can build a modern fully secured and a full stack AI chatbot similar to the chat gity service with mon stack and with the openi integration we'll be using the openi for chat

4:23 completions with the nodejs and we will take care of the security measures for this application and will take care of the API keys that are being kept as a environment variable and all of these things working with the open Ai and we will explain each and everything that how you can integrate the openai with a M Stack application and in terms of the scalability this application is completely scalable to anything so in future if you want to integrate the image completion audio completion video generation as well so this application will work completely fine with all of these things so react and the nodejs is completely scalable and and our back end is completely scalable for that and if you want me to scale that application to create the image completion audio generation and video then please comment down within the video and I will help you out so I think that's enough for the short introduction and let's get our hands dirty into testing this application and seeing the demo once again and then we will move on into the project so let's move on to the project once again so you can see this is our homepage we are using the animations over there we have some animations we are just giving some designs over there and we have built with love by Indian

5:32 coders so this is my channel this is my YouTube channel and there you can see the login screen is there the signup screen is there so the user will be logged in and they can ask any question like we can send hi over there to the chat bot and the chatbot will come up with an answer like hello how can I assist you today and if the user refreshes the page so the user session will be active till 7 days so user does not need to log in again you can see now we have a message of loading chats so on every refresh all of the chats of the user would be restored and the users have the functionality of clearing the conversation as well so with the help of this they can clear the conversations and it's completely responsive so you can open it in any device like this you can see you can open it in any device you can see it will work perfectly fine over there and

6:19 then the user can move on it is completely secure and it is completely responsive over there they can click on the login as well so you can see as for the design it is completely responsive and it is completely secure and you can check the cookies as well for the user so once the user locks in so the cookies would be stored there you can see now we have the authentication token so these cookies are HTTP only cookies so they cannot be accessed by the JavaScript so this is a complete demo for this application and now we will be moving on into the project so have a cup of tea or a coffee and let's start building this project and yeah I know now you want to build this project but before that I want to introduce you to my YouTube channel so if you are new here this is my YouTube channel and I create the videos on the

7:04 web development so I request you to please like this video and please subscribe to the channel as well because it keeps me motivated to create the videos like this and it helps me now that's enough for the introduction and now let's move on into the project hi everyone and I welcome you all to the course so in this section now we'll have a deep introduction that what exactly are we going to do and what technologies that we'll be using and we'll be having the technical overview of the concepts as well so let's start so what exactly are we going to do so we are going to build our own AI chatbot with the help of open AI so it's a AI chatbot so that's why we are using the open aai and we all know about the openai platform so almost all of the modern AI applications are built and hosted on the open AI so we are also

7:52 going to create around chatbot it is similar to the chat GPD so we are going to create that with the open Ai and it is a full stack application so each and every record would be stored inside the database and it can have the correct operations of the database as well so we are going to create a chat gbt type application with the open Ai and now let's just move on let's just understand the technical overview of the course that what technologies we'll be using that why should we use the Technologies if we have other Stacks as well so let's just understand about these so now let's move on and let's just understand that what exactly is the month stack so mon stack is a comprehensive and Powerful web development framework that combines four key Technologies the mongodb express react and the node so it's not exactly the framework but it's a collection of JavaScript technologies that work together to make a full stack web development environment so mongodb serves as the database system allows the user for the efficient data storage and retrieval Express is a backend web application framework that manages the routing the server aspects the metal WS throughout the nodejs application we

9:01 have a react which is a front end library that enables the creation of dynamic and interactive user interfaces and we have the nodejs which is used on the server site to execute the JavaScript and to handle the request and manage the applications backend operations so it all includes the mongodb express react and the node and it creates the full stack web development environment and the integration of these Technologies enables the developers to construct modern full stack applications effectively and efficiently with using the one single code base which is the JavaScript so all of these Technologies uses the JavaScript as their internal code base so we'll be using JavaScript only to create a full stack application with using the mon stack so now let's just understand that why should we use the mon stack so we have other Frameworks as well that can be the nexts T3 stack it is currently in the demand as well like the mon stack we have the lamp stack as well with using the PHP and we have golang as well so why should we use the mon stack so let's just understand that why should we use this so first option that we have is the full stack compatibility so mon stack offers you the full stack compatibility so it

10:09 covers both front-end and backend development using the JavaScript and this leads to a consistent code base and it makes it easier to collaborate and switch between different parts of the application whether that's a front end or whether it's a back end and now let's move on so we have the modern web application development so it's a completely modern development with using the react which allows the creation of dynamic and responsive user interfaces while the Express and the node handles the backend operations and it's a high performance backend services with using the node and the express and currently mongodb is the most used database for now so it's a modern fullstack web development and we have the scalability as well so nodejs which is used in the monack is known for the scalability it can handle a large number of simultaneous connections efficiently with using the event Loop and and it makes it suitable for applications with growing user bases and same with the react so you can create any type of application with the react and now let's move on so we have the realtime applications as well so Monch offers you the realtime applications as well with using the sockets with using some chat applications and all so we have a completely real-time application so we

11:18 are not going to use the socket inside this application but I'm just explaining you the examples that why should we use the monack and now let's see we have the crossplatform so monack can be used to develop web applications that works across different platforms and devices so you can also use the monack with the mobile devices as well what you can do so instead of the react you can use the react native for building the UI part and now we have the open source so this is the last feature that should be use the mon stack so all components of the M are open-source Technologies so you do not need to pay anything because the mongod DB is like a premium purpose so if you want to use the mongod DB then there's a very nominal charge but but only in the production and during the development you do not need to pay anything to the mongod DV and you have the react which is open source the node

12:06 and the express they open source applications and you have the access to their source code as well so these are the options that help us to understand that why should we choose the mon stack over other different Frameworks and now let's move on and let's just again have a very deep introduction about this course so what we are going to do so we'll be having a modern a project which will use the open a API so we are going to use the openai API to create an AI and realtime chatbot and it is similar to the chat GPD so the application is a full stack application which stores the users chats in a database to keep track of the conversations but a user can delete them any time so we have a CED functionality of the users as well in which we'll be having the users we'll be having the chats of the users and user can delete their chats as well anytime and the UI is capable of showing the the code blocks as well if requested by the user so as you saw in the demo so we can also show the code blocks to the user as well with this project so it's a modern AI project and we'll be using the advanced authentication and authorization system with the realtime chatbot so we'll be using the JWT tokens the HTTP only

13:16 cookies and these cookies would be stored inside the users browser but they won't be able to access that and they need to send those cookies once they request for a new chat so it's a completely secure and modern application with the modern a platforms so now let's move on and let's just see that how we can start building this project and now we can start building the back end of this project so now let's move on so first step that we have is to set up the note express application with the types script so this is our first step for building this application so now let's move on to the coding part so for quick start for this course so I'm going to provide you the link inside the description so it's a GitHub link so you can directly move on to the GitHub link and then what you can do so you can download this source code and then you can paste that into your folder so you can move on you can just copy all these files and then you can paste them into the visual studio code so I have opened the folder in the vs code which is a m opening I chatbot so let's create another folder that can be the quick start for the back end then we can paste all of these files here so now I have these files over there and let's start building this

14:24 project so this is a overview so now after just pasting all of these files now you can move on you can press contrl and J on your system if you're on the Windows you can press control and J so you need to just open the terminal so you can move on to the back end folder over there and then you can press the command of the npm install so it will install all of the dependencies that are required so let's start moving on so here we have the source file and inside that we have the index.ts so here inside that you can see we have a lock statement like this is a starter kit for this amazing project with love binding encoders then we have the envirment file as as well and inside there we have a couple of Secrets couple of the we have the database URLs as well we have the cookie secret JWT Secrets then we have the package.json as well and inside the package.json it contains the information

15:11 about our back end you can see the name of the application we have the back end over there we have the main we have the index.ts it is there inside the source with the type of the module then we have the scripts as well so we have the dev command and we are going to use the concurrently package so it's a open source npm package that we can use so it allows you to run multiple commands inside the scripts inside the terminal so first we are going to compile the typescript to the JavaScript in the watch mode then we are going to run the compiled version of the JavaScript then we have the build command as well so it is currently same so after the build I think that could be the Run command so it's a run command or it can be the start command over there and for the build command I think we can move on we can have a new command that could be for the build so we have the build command over there and inside the build command

15:56 now what do we need to do so build command will be just having the TSC which will compile the Javas which will compile the typescript to the JavaScript so here we have the build command over there and that's how it's going to work and after that you can see now we have the start command which will start the production ready application which will start the compiled version with the note index.js then we have the test command as well and this is not required so what we can do so we can remove the test command over there and after that you can see there are a couple of dependencies that we'll be using the first one is the BP which is used for the password encryption and comparing the decrypted password then we have the concurrently package which is used to run multiple commands concurrently with have the cookie passer which is used to set cookies directly from the back end to the front end we'll be using the course package which enables the cross

16:41 origin resource sharing which means like you can make a request to a different server and there won't be an issue we'll be whitelisting that thing over there we have the EnV to use the EnV files over there we have the express application over there we'll be using the Express package we have the validator for the express so it means now we'll be having the data validation checks as well before moving on to the database we have the Json web token for the JWT tokens we have the mongos which uh which is a package which is used to work with the mongod DB we have the open AI Library so we have the open a library to work with the open a systems and now let's move on let's have the configuration file of the typescript so here we have the configuration file and here we have the error we can just move on we can have the es I think we can have the node next to over there like this so I think we

17:27 can move on we can have the next so the error would be gone and now you can see inside this we include all of the files for the typescript which are into the source folder so inside source inside any of the subfolders so if you find an ATS file so it would be compiled inside the build directory and this is the build directly which is the disc and this is a build directory which is a disc so you can move on you can create a new folder that could be for the disc and inside this file the new compile file would be created so that's how it's going to work and after that what you can do so you can just run the npm Run Dev so first time you should get an error your compiler would not find the dis index.js file but after you compile then it would create the index.js file then you can again move on you can clear the screen then you can again press npm

18:13 run Dev now you will see the lock statement over there which is this is a starter kit for this amazing project with law ban coders so with the help of this now we have created the very basic setup of our application and now we want to move on so you can see now we just have the lock statement now we can remove the lock statement and now before moving on to the next steps what I'm going to show you is I'm going to show you that how to create the basic node and express application with the typescript so we are going to create the very basic node and the express application so we'll be using the routing with the express so we create the very basic application so let's move on so how we going to do that so first we want to import the express so we can import the express directly from the Express package so that should be from the express then we can move on what we