Build Your Own Full Stack ChatGPT using React js, OpenAI, ImageKit | AI MERN Stack Project

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:
👉    • Create Full Stack Grocery Delivery Website...  

Watch MERN Stack Food Order Website tutorial:
👉    • How To Create Full Stack Food Delivery Web...  

Watch Full Stack Chat App tutorial:
👉    • Full Stack Real-time Chat Application with...  

Watch Full Stack Music Streaming Website
👉    • How To Create Full Stack Spotify Clone App...  

Watch Full Stack Blog Website Tutorial
👉    • How To Create Full Stack Blog App Using Ne...  

-------------------------------------
Build more React JS projects:

Complete Portfolio Website In React:
👉    • How To Make Portfolio Website Using React ...  

Build ChatGPT Clone In React:
👉    • Build ChatGPT In React JS Using OpenAI API...  

Build AI Image Generator with OpenAI In React
👉    • Build An AI Image Generator App In React U...  

Create Weather App In React
👉    • How To Create Weather App Using React JS I...  

-------------------------------------
Images Credit:
https://www.pexels.com/
https://unsplash.com/
https://www.freepik.com/

-------------------------------------
Connect with me:
👉 https://linktr.ee/iamavinashkr

Connect with GreatStack:
Instagram:   / greatstackdev  
Twitter:   / greatstackdev  
Facebook:   / greatstack