Software Development

AI SaaS Chat Bot utilizing MERN Stack – Tutorial



Discover ways to construct a safe and scalable AI chatbot with the MERN Stack and superior authentication on this complete course! The undertaking is a ChatGPT Clone. The undertaking makes use of React, Node, MongoDB, Categorical, and Typescript. By the tip of this video you’ll have a deep understanding of making a complicated, safe, and manufacturing prepared SaaS purposes with the MERN stack.

Thank you for reading this post, don't forget to subscribe!

💻 Code:

✏️ Created by @IndianCoders

Key options:
– MERN stack deep information
– Create consumer authentication and authorization system
– Implementing express-validators middleware to validate knowledge
– Storing consumer’s chats in MongoDB
– Producing customized and our personal authentication system
– Utilizing JWT authorization tokens, HTTP solely cookies
– Defending consumer routes with verification checks
– Trendy React app with Vite
– Creating lovely chat UI with Materials UI library
– Full responsive design
– Trendy design
– Integrating OpenAI with Node, Categorical MERN stack app
– A full stack ChatGPT like clone
– Storing consumer classes

⭐️ Contents ⭐️
0:00:35 Introduction, Demo and Overview
0:07:39 Deep Introduction About Our Objectives
0:08:33 What’s MERN Stack?
0:09:56 Why ought to we use MERN Stack as an alternative of different stacks?
0:12:30 Technical Introduction On Our Undertaking
0:13:57 Setup Node, Categorical Beginning Undertaking With TypeScript
0:18:52 The way to create REST API With NodeJS and Categorical (Sensible)
0:31:15 Setup MongoDB Database Connection
0:43:46 Get API Keys From OpenAI
0:46:05 Setting Up Routes For Customers and Chats
0:53:19 Outline Database Fashions and Schema
0:59:30 Creating our first GET Request to get all customers
1:05:24 Creating Consumer Signup POST Route To Retailer Customers
1:13:35 What’s a Middleware?
1:18:20 Establishing knowledge validation middleware with express-validator library
1:29:34 Creating Consumer Login Route
1:37:51 Deep dive into Consumer Authentication and Authorization With JWT Entry Tokens and HTTP Solely Cookies (Clarification)
1:44:45 Implementing JWT Tokens
1:49:50 Setting HTTP Solely Cookies with Cookie-parser
1:57:05 Setting Up Frontend. A React App With Vite and Typescript, Putting in Dependencies, Importing Fonts
2:08:29 Making a custom-made theme of Materials UI
2:09:58 Add Routes with react-router-dom
2:14:16 Design App’s Header
2:23:30 Including Authentication Context Supplier
2:36:32 Including Navigation Hyperlinks To Header
2:46:07 Designing Login Display screen UI
3:05:40 Creating and Sending API Request to backend
3:19:33 Holding the consumer logged in: Confirm JWT Token Validity and Login the consumer
3:35:43 Integrating OpenAI to NodeJS utility and creating chat completion route request
3:51:57 Designing Chat Web page UI on Frontend
4:25:03 Sending API Request For Chat completion
4:34:26 Show Code Blocks in React App
4:51:00 Fetch All Chats Of Consumer On Refresh
4:58:16 Deleting all chats of consumer
5:02:56 Including Protected Routes and Logout consumer request
5:11:50 Creating Signup UI
5:15:30 Design Homepage UI: Including Typing Animation and Pictures Rotation and Screenshot of our chat.
5:31:21 Fixing alignment points
5:34:35 Abstract!

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

Be taught to code free of charge and get a developer job:

Learn tons of of articles on programming:

source

Comments are closed.