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:
1 view
256
64
5 months ago 00:01:27 1
SPIDER-MAN 4 - TRAILER (2025) “Spectacular“ Tom Holland Marvel Studios
6 months ago 00:01:29 4
МУ МВД РОССИИ “Балашихинское“ Москаленко м.м. Овсюков с.а. Примите меры к Ступкину с.н. !!!
6 months ago 00:01:51 3
ONPASSIVE - The Impact of Automation on Business Success
6 months ago 00:04:00 7
Ash King [AI] - Raabta | Arijit Singh | Agent Vinod | AI Cover | @AIBeats-AIB
6 months ago 11:12:21 1
Build a Duolingo Clone With Nextjs, React, Drizzle, Stripe (2024)
6 months ago 00:02:48 1
“Ai Ai Kerenski“ - финская песня об Александре Керенском
6 months ago 00:01:56 6
МУ МВД РОССИИ БАЛАШИХИНСКОЕ. КРАЖА ПАСПОРТА. УГРОЗЫ УЧАСТКОВОГО СТУПКИНА С.Н. ПРОКУРАТУРА МОЛЧИТ
6 months ago 00:44:54 1
Expert Talk: Are We Post-Serverless? • Julian Wood & James Beswick • GOTO 2024
6 months ago 00:16:08 1
How To Make Money With Google Maps 2024 ($200 PER DAY!)
6 months ago 00:08:36 1
La mia storia in 10 minuti (#TikTok #repost)
6 months ago 00:59:12 37
face-to-many comfyui pinokio (PS2 Graphics) tutorial + more
6 months ago 00:02:46 1
Bruce Springsteen - Born in the USA - Album Review
7 months ago 00:04:42 1
Encrypted Data - THE ONPASSIVE Ecosystem. - John White & Bill Must