Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

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

GreatStack via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn to develop a comprehensive full-stack AI chatbot application similar to ChatGPT using the MERN stack (MongoDB, Express.js, React.js, Node.js) in this 6-hour tutorial. Build an interactive platform where users can sign up, generate AI-powered text content, and create images through prompts using Google Gemini AI model and ImageKit integration. Master the complete development process from creating responsive React components including home page, sidebar, chatbox, loading screens, community features, and credit system pages to implementing user authentication with a dedicated login system. Develop a robust backend server with MongoDB database integration, custom middlewares, and comprehensive API testing. Integrate advanced AI capabilities by connecting Google Gemini API for text generation and ImageKit for AI image creation and storage. Implement monetization features through Stripe payment gateway integration for credit purchases. Deploy both backend and frontend components online for production use. Follow along with detailed timestamps covering project overview, React project setup, component creation, backend development, database connection, API integration, payment processing, and complete deployment workflow. Gain hands-on experience with modern web development technologies while building a marketable AI application that demonstrates full-stack development skills.

Syllabus

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

Taught by

GreatStack

Reviews

Start your review of Build Your Own Full Stack ChatGPT using React.js, OpenAI, ImageKit - AI MERN Stack Project

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.