Build Your Own Full-Stack ChatGPT App for Free with React, Express, MongoDB, and Google Gemini AI
React ChatGPT clone full-stack app tutorial. React AI Chatbot app project.
Get Hostinger Discount: https://hostinger.com/lamadev Coupon Code: LAMADEV
Clerk Authentication: https://go.clerk.com/BH0olWG
ImageKit: https://bit.ly/49zmXkt
ImageKit Doc: https://bit.ly/3VXRK7u
VSCode Snippets: https://github.com/safak/snippets
If it is valuable to you, you can support Lama Dev.
Join: / @lamadev
Buy me a coffee: https://www.buymeacoffee.com/lamadev
Source Code:
Start here: https://github.com/safak/chatgpt-clon...
Completed: https://github.com/safak/chatgpt-clon...
Join Lama Dev groups
X / Twitter: https://x.com/lamawebdev
Facebook: / lamadev
Instagram: / lamawebdev
Discord: / discord
00:00 Introduction
02:44 React 19 Project Installation
06:28 React Router Dom Tutorial (React 19)
13:49 React Router Dom How to Create Layouts with Outlet?
18:41 React Layout Design
21:09 React 19 Authentication with Clerk
27:55 React How to Protect Routes?
32:12 React Animated Homepage Design
44:48 React Typing Effect Animation
55:16 React ChatGPT Clone Design
01:12:30 React ChatGPT Clone Chat Page Design
01:24:35 React Image Upload and Optimization Tutorial
01:27:54 How to Create a Backend Server?
01:32:40 React Secure Image Uploading
01:45:56 React Google Gemini API Tutorial
01:50:48 React AI Chat using Gemini API
01:58:26 React AI Chat Image Recognition
02:04:40 React Real-time AI Chat Streaming
02:07:34 React Express MongoDB Tutorial
02:17:47 React MongoDB Add a New Chat
02:32:32 Clerk Express React Session Validation with Clerk Node.js SDK
02:39:15 React MongoDB AI Chat App Fetch All User Chats
02:41:33 React 19 React Query Tutorial
02:47:17 Fetch a Single Chat
02:54:45 React 19 React Query Mutation
02:58:19 React AI Chat Send a New Message and Save it to Database
03:14:04 How to Deploy Full-Stack React Express App to a VPS Server?
03:27:56 Outro
