freeCodeCamp.org

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-AI-ChatBot

✏️ 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 

❤️ Support for this channel comes from our friends at Scrimba – the coding platform that's reinvented interactive learning: https://scrimba.com/freecodecamp

AI SaaS Chat Bot using MERN Stack – Tutorial

AI SaaS Chat Bot using MERN Stack – Tutorial

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path