youtor.org
AI SaaS Chat Bot using MERN Stack – Tutorial
>> YOUR LINK HERE: ___ http://youtube.com/watch?v=wrHTcjSZQ1Y
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: https://github.com/Nikhilthadani/MERN... • ✏️ 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: https://www.freecodecamp.org • Read hundreds of articles on programming: https://freecodecamp.org/news
#############################
