Summary
Keywords
Full Transcript
Learn How to make full stack AI Chatbot like ChatGPT, Google Gemini using React js, OpenAI, ImageKit | MERN Stack Project 👉 ImageKit: https://tinyurl.com/bdzjb55k 👉 Live Preview: https://quick-gpt.vercel.app/ 👉 Source code & assets: http://greatstack.dev/p/quickgpt 👉 ImageKit docs: https://tinyurl.com/tnybufw3 SUBSCRIBE: @GreatStackDev ------------------- In this step-by-step MERN project tutorial, we will walk you through the development and deployment of a AI Chatbot Application using the MERN Stack (MongoDB, Express.js, React.js and Node.js) We will build an app where user can signup and generate text content and images using AI. We will use Google gemini AI model with Open AI react package. To generate images using prompt we will use ImageKit. We will also add online payment gateway to purchase credits online. after building this full stack AI chat-bot app we will deploy it online. #fullstack #mernstack #webdevelopment #fullstackproject #codingprojects #collegeprojects #greatstack #placement #openai #gemini ------------------- Timestamps: 00:00 Project Overview 05:45 Create Basic React Project 12:30 Create Home page and Components 36:40 Create Sidebar Page 01:11:50 Create ChatBox Page 01:47:08 Create Loading Page 01:50:28 Create Community Page 01:56:49 Create Credits Page 02:05:14 Create Login Page 02:14:25 Create Backend Server 02:26:10 Connect MongoDB Database 02:52:14 Create Middlewares 02:59:55 Testing APIs 03:30:25 Add Google Gemini API 03:43:54 Connect ImageKit for image Generation and Storage 04:28:28 Connect Stripe Payment Gateway 04:58:05 Deploy Backend Server 05:06:39 Connect Backend and Fronted 06:04:28 Deploy Project Online ------------------- Watch MERN Stack Grocery Delivery App tutorial: 👉 https://youtu.be/PaQX0pktLnw Watch MERN Stack Food Order Website tutorial: 👉 https://youtu.be/DBMPXJJfQEA Watch Full Stack Chat App tutorial: 👉 https://youtu.be/gbocZlm71nE Watch Full Stack Music Streaming Website 👉 https://youtu.be/KdGfhSpT6pc Watch Full Stack Blog Website Tutorial 👉 https://youtu.be/HdWCh_4XE1Q ------------------------------------- Build more React JS projects: Complete Portfolio Website In React: 👉 https://youtu.be/4ag1LsgIUc0 Build ChatGPT Clone In React: 👉 https://youtu.be/EzkWAviyYgg Build AI Image Generator with OpenAI In React 👉 https://youtu.be/PZG2MvOjud0 Create Weather App In React 👉 https://youtu.be/7JqdjWB88Kk ------------------------------------- Images Credit: https://www.pexels.com/ https://unsplash.com/ https://www.freepik.com/ ------------------------------------- Connect with me: 👉 https://linktr.ee/iamavinashkr Connect with GreatStack: Instagram: https://instagram.com/GreatStackDev Twitter: https://twitter.com/GreatStackDev Facebook: https://facebook.com/GreatStack
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
