Become a MERN Stack Expert: Build Real World AI Chatbot With Authentication | MERN Stack Projects
Learn to build a secure and scalable AI chatbot with MERN Stack and advanced authentication in this comprehensive course!. You can say ChatGPT Clone 😊
This is a MERN Stack Project, With Advanced Authentication and An AI Chatbot SaaS Platform With React, Node, MongoDB, Express, Typescript. This is a complete MERN Stack tutorial, everything from scratch.
By the end of this video you will have a deep understanding of creating a Advanced, Secure and Production Ready SaaS Applications With MERN Stack
Source Code: https://github.com/Nikhilthadani/MERN...
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
Timestamps:
0:00 Introduction, Demo and Overview
7:04 Deep Introduction About Our Goals
8:07 What is MERN Stack?
9:30 Why should we use MERN Stack instead of other stacks?
12:04 Technical Introduction On Our Project
13:31 Setup Node, Express Starting Project With TypeScript
18:26 How to create REST API With NodeJS and Express (Practical)
30:49 Setup MongoDB Database Connection
43:20 Get API Keys From OpenAI
45:39 Setting Up Routes For Users and Chats
52:49 Define Database Models and Schema
59:00 Creating our first GET Request to get all users
1:04:54 Creating User Signup POST Route To Store Users
1:13:05 What is a Middleware?
1:17:50 Setting up data validation middleware with express-validator library
1:29:04 Creating User Login Route
1:37:21 Deep dive into User Authentication and Authorization With JWT Access Tokens and HTTP Only Cookies (Explanation)
1:44:15 Implementing JWT Tokens
1:49:20 Setting HTTP Only Cookies with Cookie-parser
1:56:35 Setting Up Frontend. A React App With Vite and Typescript, Installing Dependencies, Importing Fonts
2:07:59 Creating a customized theme of Material UI
2:09:28 Add Routes with react-router-dom
2:13:46 Design App's Header
2:23:00 Adding Authentication Context Provider
2:36:02 Adding Navigation Links To Header
2:45:37 Designing Login Screen UI
3:05:10 Creating and Sending API Request to backend
3:19:03 Keeping the user logged in: Verify JWT Token Validity and Login the user
3:35:13 Integrating OpenAI to NodeJS application and creating chat completion route request
3:51:27 Designing Chat Page UI on Frontend
4:24:33 Sending API Request For Chat completion
4:33:56 Display Code Blocks in React App
4:50:30 Fetch All Chats Of User On Refresh
4:57:46 Deleting all chats of user
5:02:26 Adding Protected Routes and Logout user request
5:11:20 Creating Signup UI
5:15:00 Design Homepage UI: Adding Typing Animation and Images Rotation and Screenshot of our chat.
5:30:51 Fixing alignment issues
5:33:55 Summary!
What you'll learn:
👉 What is MERN Stack and why should you use it?
👉 MERN STACK Real World App
👉How to get started with MERN Stack
👉Create A Basic Node and Express App
👉How to build a full-stack project: an AI chatbot
👉How to use OpenAI to power the AI chatbot
👉How to implement advanced authentication using JWT, Http Only Cookies
👉How to Design A Responsive React Project With Vite
👉Create Perfect Design With Material UI Component Library
👉Implement Secure API Calls With Frontend and Backend With Axios
👉Full Stack Project Ideas
📎 Reference Links:
Github Link: https://github.com/Nikhilthadani/MERN...
OpenAI API documentation: https://openai.com/docs/
HTTP Only Cookies documentation: https://developer.mozilla.org/en-US/d...
JWT documentation: https://jwt.io/introduction/
🌐 More Courses
NextJS Advanced Blog Writing SaaS: • Build A Full Stack Advanced Blog App ...
Prisma Course: • Prisma ORM Course: Build a Twitter AP...
Next.JS Full Stack Blog Guide: • Build A Full Stack Blog App: Next.js ...
🤝 Connect With Me
Website: https://indiancoders.in
Instagram: / indiancoders.in
LinkedIn: / indiancoders
Смотрите видео Become a MERN Stack Expert: Build Real World AI Chatbot With Authentication | MERN Stack Projects онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Indian Coders 01 Январь 1970, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 31,820 раз и оно понравилось 1 тысяч людям.