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: Coupon Code: LAMADEV Clerk Authentication: ImageKit: ImageKit Doc: VSCode Snippets: If it is valuable to you, you can support Lama Dev. Join: Buy me a coffee: Source Code: Start here: Completed: Join Lama Dev groups X / Twitter: Facebook: Instagram: 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 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
Back to Top