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. 💻 Code: ✏️ 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 -- Learn to code for free and get a developer job: Read hundreds of articles on programming: