AI SaaS Chat Bot using MERN Stack – Tutorial

Learn how to build a secure and scalable AI chatbot with the MERN Stack and advanced authentication in this comprehensive course! The project is a ChatGPT Clone. The project uses React, Node, MongoDB, Express, and Typescript. By the end of this video you will have a deep understanding of creating an advanced, secure, and production ready SaaS applications with the MERN stack.

✏️ Created by @IndianCoders

Key features:
- MERN stack deep guide
- Create user authentication and authorization system
- Implementing express-validators middleware to validate data
- Storing user's chats in MongoDB
- Generating custom and our own authentication system
- Using JWT authorization tokens, HTTP only cookies
- Protecting user routes with verification checks
- Modern React app with Vite
- Creating beautiful chat UI with Material UI library
- Complete responsive design
- Modern design
- Integrating OpenAI with Node, Express MERN stack app
- A full stack ChatGPT like clone
- Storing user sessions

⭐️ Contents ⭐️
0:00:35 Introduction, Demo and Overview
0:07:39 Deep Introduction About Our Goals
0:08:33 What is MERN Stack?
0:09:56 Why should we use MERN Stack instead of other stacks?
0:12:30 Technical Introduction On Our Project
0:13:57 Setup Node, Express Starting Project With TypeScript
0:18:52 How to create REST API With NodeJS and Express (Practical)
0:31:15 Setup MongoDB Database Connection
0:43:46 Get API Keys From OpenAI
0:46:05 Setting Up Routes For Users and Chats
0:53:19 Define Database Models and Schema
0:59:30 Creating our first GET Request to get all users
1:05:24 Creating User Signup POST Route To Store Users
1:13:35 What is a Middleware?
1:18:20 Setting up data validation middleware with express-validator library
1:29:34 Creating User Login Route
1:37:51 Deep dive into User Authentication and Authorization With JWT Access Tokens and HTTP Only Cookies (Explanation)
1:44:45 Implementing JWT Tokens
1:49:50 Setting HTTP Only Cookies with Cookie-parser
1:57:05 Setting Up Frontend. A React App With Vite and Typescript, Installing Dependencies, Importing Fonts
2:08:29 Creating a customized theme of Material UI
2:09:58 Add Routes with react-router-dom
2:14:16 Design App's Header
2:23:30 Adding Authentication Context Provider
2:36:32 Adding Navigation Links To Header
2:46:07 Designing Login Screen UI
3:05:40 Creating and Sending API Request to backend
3:19:33 Keeping the user logged in: Verify JWT Token Validity and Login the user
3:35:43 Integrating OpenAI to NodeJS application and creating chat completion route request
3:51:57 Designing Chat Page UI on Frontend
4:25:03 Sending API Request For Chat completion
4:34:26 Display Code Blocks in React App
4:51:00 Fetch All Chats Of User On Refresh
4:58:16 Deleting all chats of user
5:02:56 Adding Protected Routes and Logout user request
5:11:50 Creating Signup UI
5:15:30 Design Homepage UI: Adding Typing Animation and Images Rotation and Screenshot of our chat.
5:31:21 Fixing alignment issues
5:34:35 Summary!

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama

--

[dhananjaydeshmukh]

Now this is a project you can show in your portfolio.

[rajkumarpatel]

After completing this 5:30 hr tutorial, I can say that I learnt a new and better ways of handling authentication. Better way of using context APIs. It's very rare to see MUI being used the way it should, however inline-styles should be avoided.

I would request to go along with Nikhil in this tutorial so that one will get good understanding of writing MERN stack code.

[earnstein]

Wow, one hour into this and this is the best course I've seen so far on mern... Everything I've learnt from watching previous videos just made sense.

[skykazi]

After watching this tutorial
My NodeJS knowledge: "Everything seems to be working perfectly fine!!!" 🤭
Thank you so much for step by step explanations 🙌

[iitians]

Hey I complete this on 3/10/2024 Thanks a lot and my project working perfectly fine . So I stucked with one part api response (500 internal server error) on around 4 hour and 32 min i think. Here is how I resolved either you can take subscription on Open AI api by credit card but I don't have so I created a new gmail and then now I got 5 dollars as trial basis for 3 months and then I generated new API key form that account now everything is fine. Thanks buddy Form Haryana

[TransmentalMe]

This is incredible and very thorough, thank you for sharing this with the community.

[nikhilmugganawar]

Everything seems to be working perrrfectly finne! Over theree!

[maskman]

This is gonna be a wonderful and exciting course, thank you 🙏🙏

[lumilo]

7:24 Course Begins
2:57:00 create front
5:33:00 summary

[ami-inn]

i watched and learned so many things.and its perfectly fine :)

[vipuldhomane]

Amazing tutorial. its the first mern project i built after learning full stack web dev. can someone please help me with the deployment of this project.
by following the tutorial I've written every piece of code by myself.
thank you for this amazing work. keep it

[maxfrischdev]

50% of Comments are engagement pods - style "thank you very important!" (Didn't watch it..)
And 50% are "Sir can you please make a tutorial on <totally different topic>
😅🤪

[yunuenmeza]

Thanks, I'm becoming a big fan of your channel.✨✨

[themcc]

What I learned: and so that’s how it’s gonna work.

[TransmentalMe]

Just finished working through the whole video and I love how well structured everything is. However, I would have liked to see an explanation or demo of hosting the app on Heroku or AWS. Not necessarily a how to on cloud hosting, but just a quick walkthrough of the steps to deploy the app outside of your local environment since there is a front and backend and cors needs to be handled properly.

[bokthair]

00:05 Build a state-of-the-art AI chatbot using MERN Stack
02:11 This tutorial explains how to create an AI chat bot using MERN stack.
06:24 The video discusses building an AI chatbot using the MERN stack.
08:21 MERN Stack is a collection of JavaScript technologies for full stack web development.
12:23 This tutorial is about building an AI chatbot using the MERN stack
14:18 Set up the back end folder and install dependencies
17:43 Create a basic Node and Express application with TypeScript using routing.
19:20 Creating routes and middlewares in the application using MERN Stack
22:40 Middleware functions handle the request
24:23 The video discusses sending data using the body in a MERN Stack application.
27:41 Dynamic routing in Express allows us to handle dynamic parameters in the URL
29:17 Create folders for models, routes, controllers, and utilities
32:31 Mongodb Cloud provides scalable database storage and virtual CPUs.
34:11 Connect to the MongoDB database from any network using the connection URL.
37:28 Export a function to connect to MongoDB database.
39:09 Creating functions for connecting and disconnecting from the database
42:17 Application connected to database with error handling
43:53 Get API keys for OpenAI
47:08 Create middleware and route handler for the application.
48:44 The app router handles requests made on /API/slv1 endpoint.
52:15 Defining the user model and its fields
53:55 Create user schema using Mongoose in the application
57:04 Creating a chat bot using MERN stack and implementing required properties for role and content.
58:39 Using Mongoose models in Node.js to create, find, and retrieve records from a database
1:01:53 Logging errors in the API request
1:03:53 Creating API endpoints for getting all users and user signup
1:07:12 Create a user with name, email, and password in the backend
1:08:52 Encrypt passwords before storing them in the database using bcrypt
1:12:19 Implementing validation checks for name, email, and password in the user creation process.
1:13:57 Introduction to Middleware in Node.js and Express
1:17:42 Using middleware for data validation checks
1:19:27 Creating validators for sign up data
1:22:59 Using express-validator for validations in an AI SaaS Chat Bot using MERN Stack
1:24:39 The video discusses validation in the AI SaaS Chat Bot using MERN Stack tutorial.
1:28:12 Validating user input and creating new users
1:29:58 Remove name from login and remove email and password from signup
1:33:35 Verify user password for authentication purposes
1:35:23 User authentication process and error handling
1:39:00 Authentication is the first step of user authentication, followed by authorization using a token.
1:40:52 Using JWT to send token with HTTP only cookies for user authentication
1:44:32 Implementing token creation function in the utils folder.
1:46:15 Using JWT (Json web token) in the AI SaaS chat bot
1:49:41 Using cookie-passer package to send cookies from backend to frontend
1:51:17 Create a cookie with specified options.
1:54:35 Setting up cookies in MERN Stack
1:56:16 Creating the front end and login system
1:59:33 Overview of the front end structure and files in the MERN stack app.
2:01:12 Publish application to GitHub and exclude unnecessary files
2:04:32 The video discusses importing and using the normal 400 when working with a web application.
2:06:13 Material UI is a popular React library used by major companies.
2:09:36 Wrap the app component with the theme
2:11:19 The video explains how to create a chat bot using MERN Stack.
2:14:43 Import toolbar from MUI package and customize styles
2:16:23 Add styles and logo to chat bot
2:19:48 Customize the image inversion and typography using Material UI
2:21:34 Customize typography styles and logo in the application
2:24:57 The context provides functionalities for user authentication and stores user details
2:26:33 Defining user types and functions
2:29:55 Implement login functionality and authentication logic
2:31:43 Implementing login, logout, and signup functionality
2:35:08 Using context or Redux can help solve the issue of managing props and data in child components
2:36:50 Create a navigation link component
2:40:19 Customized navigation links for logged in and logged out users.
2:42:14 Implementing navigation links for log out and home page.
2:45:40 Designing the login screen
2:47:25 Using the material UI box component for layout design
2:50:47 Add customized styling to the form
2:52:24 Add login text using typography and customize input tag
2:55:52 Creating a customized input using MERN stack
2:57:28 Changing the style and outline of elements
3:01:04 Render a button with specific styling and hover effect
3:02:49 Creating a login button with an End Icon using React Icons.
3:06:09 Setting the base URL and configurations for the back end
3:07:46 Using XOS package for making a POST request with data
3:11:15 Using the react-toast package to create and customize toast notifications in MERN stack
3:12:58 Implementing toast notifications for login, success, and error messages.
3:16:36 Configuring the middleware to set security attributes
3:18:11 The video discusses cookies and HTTP-only flag in the context of authentication
3:21:37 Sending cookies along with the request and retrieving the token
3:23:23 Checking the response status and authenticating the data
3:26:49 The video discusses how to verify a JWT token using the verify function.
3:28:35 Using Express, local variables can be set in one middleware and used in the next middleware.
3:32:17 Check if the ID is valid and send appropriate response
3:34:19 The authentication seems to be working fine and now we want to build the chat functionality for this application.
3:37:45 Create a new route for chat functionality and ensure it is a protected API.
3:39:36 Define and configure the open AI API keys and organization ID
3:42:56 The main steps are: verify user existence, create appropriate response messages if user does not exist, grab all user chats, and send chats to API.
3:44:55 Storing user chats in an array for memory purposes
3:48:21 Using GPT models like GPT 3.5 SL to generate chat responses
3:50:08 Save user chat array
3:53:37 Creating box containers with different properties
3:55:20 Displaying user avatar with MUI material
3:59:03 Creating a chat bot using MERN stack
4:00:49 Set the bottle radius to 3 and import the red color from Material UI
4:04:27 Adjusting column width and rendering chats in MERN Stack Chat Bot
4:06:20 Fixing the display by removing width and using flex
4:09:38 The chat bot will have two roles - user and assistant
4:11:21 Customize chat item appearance with display, padding, background color, margin, and typography.
4:14:59 Creating a chat application using the MERN stack
4:16:44 Add input box with styling
4:20:20 Importing icons and testing responsiveness
4:21:59 Integrating the data input
4:25:16 Removing chat messages and creating new messages
4:26:54 Create a chat bot using MERN stack to store previous chats and new messages
4:30:13 Creating a new message and sending chat data
4:31:55 Tracking network response and sending messages in AI SaaS Chat Bot
4:35:19 Implementing react syntax highlighter with prism code highlighter
4:37:03 Installing dependencies and importing styles for Prism syntax highlighter
4:40:22 Defining functions in the chat item
4:42:06 Syntax validation check for code blocks in a string
4:45:38 Implementing conditional rendering based on the presence of code blocks.
4:47:17 The assignment is to find the language of the code and the answer can be found in the GitHub repository.
4:50:51 Fixing issues and implementing chat functionality
4:52:30 The backend work is completed and now we can move on to the frontend implementation.
4:55:54 Successfully loaded chats and successfully logged error in console.
4:57:32 Fix error in loading chats and implement clear conversation button
5:00:44 The user can delete chats and set chat messages as an empty array.
5:02:29 Enable protected routes in the front end and create front end for user
5:05:43 Implementing user logout functionality
5:07:24 Debugging log out functionality
5:10:27 Implementing protected routes for login and chat
5:12:09 The video discusses implementing the sign-up functionality using the MERN stack.
5:15:31 Using react type animation library for animated text
5:17:13 Creating a customized chatbot using AI SaaS
5:20:33 The video demonstrates building an AI SaaS chatbot using a MERN (MongoDB, Express, React, Node.js) stack.
5:22:13 Adding robot and open AI images with styles
5:25:24 Implementing AI SaaS chat bot using MERN stack
5:27:06 Increase image size in mobile devices using MUI
5:30:18 Fix layout spacing issue in chat page
5:31:46 Adding margins and improving layout
5:34:57 Created a project with authentication and authorization using MERN stack

[pailo]

I built this project. Its pretty cool, thank you. I would like to add a few cool features for a cohort I am in and try to make it one of the top projects in the next 4 weeks, . Any help and advice will be much Appreciated.

[consolelog]

Completed this project with OpenAI V4 Migration.
Thank you for Teaching.

[MD_SAMEER___]

Thank you so much. So glad for your project tutorial and how beatifully you explained

[Deban]

Fantastic course for beginners but one small suggestion, please work on your over there...I was hearing you say "there" perfectly fine then what is up with the over there.