Build a Chat App with NEW ChatGPT API | Full stack, React, Redux Toolkit, Node, OpenAI

Подписаться 82 тыс.

Просмотров 190 тыс.

50% 1

Build a Chat Application with ChatEngine and OpenAI and ChatGPT integration tutorial. The frontend will consist of ChatEngine for our chat application, Redux Toolkit for our state management, Redux Toolkit Query for making api calls, Hero icons for our Icons and React Router for Navigation. For the backend we will be using Node Js as our runtime, Express Js as our backend framework, and OpenAI for Ai integration with our chat. We will be able to talk through our chat application like with ChatGPT.
Important*
When using Chat Engine and creating a new project, if you want your project to be hosted free forever, in the Promo Code type 'edward'. I do receive commission if you upgrade to get more features but it is not necessary to purchase for it to be hosted forever.
Links:
node: nodejs.org/en/download/
npx: www.npmjs.com/package/npx
vscode: code.visualstudio.com/download
nodemon: github.com/remy/nodemon
vite: vitejs.dev/guide/
react router: reactrouter.com/en/v6.3.0/get...
react dropzone: github.com/react-dropzone/rea...
redux toolkit: redux-toolkit.js.org/introduc...
redux toolkit query: redux-toolkit.js.org/rtk-quer...
hero icons: heroicons.com/
dotenv: github.com/motdotla/dotenv
chatengine docs: chatengine.io/docs/react/v2
chatengine storybook: chatengine-io.github.io/react...
chatengine api: rest.chatengine.io/
chatengine styling: chatengine.io/docs/react/v1/c...
openai node npm: github.com/openai/openai-node
openai completion docs: platform.openai.com/docs/api-...
openai playground: platform.openai.com/playground
openai api chatgpt update new: openai.com/blog/introducing-c...
openai api gpt-3.5 docs: platform.openai.com/docs/guid...
Completed Code:
github: github.com/ed-roh/chat-app
css: github.com/ed-roh/chat-app/bl...
code for openai-updated: github.com/ed-roh/chat-app/bl...
Chapters:
0:00 Building a Fullstack Chat Application with ChatGPT
3:44 Frontend Installations and Packages
13:06 Main Chat Application and React Chat Engine Setup
35:33 Chat Custom Header
43:35 Chat Custom Message Form
1:06:47 What is OpenAI and how is it related to ChatGPT
1:09:50 Backend Installations and Packages
1:21:10 AI Chat
2:01:30 AI Code
2:11:25 AI Assist
2:28:27 Authentication and Authorization
2:54:15 Complete Build Fullstack Chat Applaction
-----------
Subscribe to my channel: / @edrohdev for more web development and web 3.0 blockchain tutorials!
My NEW Discord: / discord
-----------
Who is EdRoh? I'm a lead engineer for a publicly traded company and have been developing for a decade now.

Наука

Опубликовано:

16 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 233

@EdRohDev Год назад

Hey all, I’m back and recovered! So glad to be posting new content again. Questions and Discussions about this project can be asked here in discord: discord.gg/2FfPeEk2mX

@tacanda6479 Год назад

Can you make some Vuejs tutorials?

@olawaleolafisoye4148 Год назад

I’m glad to see that you are back. I have missed your content so much and I am still hoping for the day you will respond to my email. Thanks

@deathknight9813 Год назад

Hey Edroh, Can you make a roles+permissions react app? I believe it could be an amazing one!!! tyvm for your amazing job man!!!

@businessuser5146 Год назад

Thanks for the awesome application, next can you build clubhouse clone or tinder clone (web application) using NEXTjs Its good to see you back, full of health and hope u feeling great...

@archamedis Год назад

ayy glad you're feeling better!

@tinkerman1790 Год назад

Glad to hear you are recovered and Thanks for your great tutorial video as always! Stay healthy!

@CoFloCipher Год назад

This was a fantastic tutorial. Extremely well done @EdRoh! Ive been in this field for a lot of years and its so refreshing to watch a video like this from someone with actual experience in the "real world" who gives real advice. Keep up the awesome work!

@bryanwhitecs Год назад

This is the first of your tutorials I'm watching, and it certainly won't be the last. What I really enjoy about these is that I have to stop the video to keep up. Why do I say that? Because SO MANY presenters overexplain, and I find myself waiting, and waiting, and waiting, and waiting, and waiting - and I can't stand waiting for the instructor to pontificate the same way I do about everything else. While I haven't had to do that once with you teaching, at the same time you give good, concise explanations as to why you're doing what you're doing. Enough for the new guy, without bogging down someone with a bit more experience. It's a perfect blend. I'm watching this video for a very specific project, but I can't wait to see what else you teach.

@Kevin-cg7qk Год назад

I was starting to get worried there for a sec, glad you're back!

@emmanuel19602 Год назад

This is the most captivating video I have seen on RU-vid! Thanks, EdRoh!

@pitbul67204 Год назад

We are so glad to see you back this is what we have been waiting for

@yyxx9309 Год назад

Wooohooo you are back!! The dashboard is huge tho I'm still on it!! Can't wait to dive into this one after dashboard!

@kevinzebb Год назад

thanks, ed. Never change man, you're doing helping us noobs so much tbh

@harunjeylan9362 Год назад

Well come back. I'm so happy to see you again.

@srandlee4014 Год назад

glad you back, take care and thanks for all your video🥰

@najumrahim746 Год назад

Nice to see you are back

@eugenem529 Год назад

Man, you are the GOAT. You create all this content by yourself and share with us for free. WOW. You are very much underappreciated. Wish you more subs and get better soon!

@smiley3239 17 дней назад

i jope you're doing well, thank you so much for this!!!! please keep posting videos like this

@Kxneki2433 Год назад

Saved this tutorial! definitely gonna work on this, thanks

@herbylegall9 Год назад

Thank you for this tutorial ! Gonna learn alot from this!

@yantech.4249 Год назад

WOW! Amazing tutorial on Chat GPT

@fedecha Год назад

thanks a ton Ed!

@eshw23 Год назад

So happy your back!

@0Amshalem Год назад

Glad you're back! Love your content, can you make a complete guide on CRM all other guides on the net are always partial

@EdRohDev Год назад

I may consider it. Are you talking about using an already existing CRM like Salesforce or creating one from scratch?

@davronmaxmudov3972 Год назад

@@EdRohDev it would be awesome 🔥

@0Amshalem Год назад

@@EdRohDev Creating one from scretch :) customer, customer profile, orders, settings, notification etc.

@EZHaiYaar Год назад

How can someone create such a masterpiece for free. Hats off to you. love you, big brother🙏

@prashlovessamosa Год назад

Long time no see glad you are back brother.

@EdRohDev Год назад

thank you. glad to be back

@mj2758 Год назад

Great content as usual.

@dfordemo981 Год назад

Making developers happy 😋

@elbezz Год назад

awsome tutorial, thanks for sharing!!

@Ikigai_adventures Год назад

Get well soon, i hope you get better soon.🤗🙂

@AnastasiaAssi Год назад

Great tutorial 💅🏼🔥

@user-kc9uq9ue1i Год назад

good content as usual

@stanb92 Год назад

Welcome back, get well soon 😊

@asoalan5400 Год назад

Thanks for sharing!

@miniq2023 Год назад

nice to c you again...bro.best wishes...

@rodneythecreative6020 Год назад

Love your content

@niteshprajapat7918 Год назад

You are awesome ❤️🔥

@sneakernetwork9201 Год назад

glad you are okay!

@thomasawounfouet7395 Год назад

Thanks for sharing 🤩🙏🏽

@rohitsingh-xj1ey Год назад

Thanks a lot brother

@jonathandejesus9494 Год назад

DUDEEEEE, learned SO F MUCH

@nshnikita Год назад

Great video, although from the title I was expecting you married Chat GPT and let it build your backend :D This could be awesome.

@waelhasnaoui5507 Год назад

thank you man

@Nikitosss91 Год назад

Absolutely Beast

@sung5355 Год назад

Good I will practice it

@wisdomelue Год назад

stay healthy bro and thank for your dedication to putting out content

@zykl78 Год назад

Thanks Ed, i hope you could also teach us a best practice on building a Knowledgedbase app with admin dashboard 🙂

@asadmehboob1300 Год назад

Nice to see you back, May God give you long healthy life..your videos are great , please make project on Nextjs with Nestjs and graphql, prisma and postgres ,

@anshupandey1782 Год назад

try Coder's Gyaan yt channel

@EdRohDev Год назад

next js with prisma is on the way!

@sug_madic7683 Год назад

welcome back Ed

@sneakernetwork9201 Год назад

great VIDEO

@gbtech8602 Год назад

Wel come back

@PizzaLord Год назад

Great work Ed and glad you are better. Have not gone through the whole video but I notice in the github there is no install instructions like what API keys do you need and where you should put them to get this up and running quickly. Do you need any other keys except open ai key like a chat app engine acc and key? If so where do they go?

@aratrik247 Год назад

Get well soon man

@uzgurCoder Год назад

thanx my man, it's cool, but now I am learnig Javascript from scratch I am gonna watch it when I learned redux and react ts

@virajrana1907 Год назад

Hey EdRoh , Great work Bro ! Thank you for this great content. Hope you are doing well now. Next time can you please make content on React Native application and it's best practices. Thanks in advanced

@Alex-pu5dx Год назад

you should make videos about making websites and apps for influencers because they are starting to realize they can make their own websites and apps instead of relying on 3rd party apps for anything! once they all start thinking like this that is gonna create a huge boom in the web development market I think :).

@hamzabadii3575 Год назад

Nice 💓

@vtzhao7427 Год назад

long time no see ser!

@narinderkmaurya Год назад

A tutorial for mern stack blog app with comment and like functionality will be very helpful 🤞

@ashwin134 Год назад

Your the best

@dekaynine6347 Год назад

Thanks for the new video! I was wondering if you can do a project on NextJs with maybe the SWR library.

@EdRohDev Год назад

a Next js project is on the way for sure! Just need to make the final touches.

Год назад

thanks, :D

@alekkiwachira443 Год назад

welcome back

@edgy9263 Год назад

love the vido misse you

@Yahya_Umar Год назад

"I'm thrilled to see you again!" i hope next time you create a real time chat app just like WhatsApp.

@AMAN-un7ji Год назад

Wouldn't be great if you create some projects in angular. thanks

@guilhermemartins7298 Год назад

Great video! I'm following the tutorial, but I keep having this warning on the console, and it keeps piling up: "WebSocket connection to '' failed: WebSocket is closed before the connection is established."

@shreyank1558 Год назад

Awesome!👍👍

@shineLouisShine Год назад

That's a very common mistake, but it's (not intuitively), Should be spelled as "vEEt", and not "vAit". Thanks for the video, and stay healthy!

@ahmadsofwan4069 Год назад

Great content! Normally this kind of project what's your deployment platform you'll be using?

@franklinmayoyo Год назад

I haven't watched the video yet. But generally you deploy to heroku, firebase, digital ocean, or to cloud hosting providers like google cloud, AWS. Or you can split your web app as well and host the frontend to a different provider and the backend to a different provider. Which is often the best approach for security and if one is down you can quickly create a temporary alternative as you handle the problem. For example you deploy your frontend to Vercel or netlify and setup your domain then you host your backend to let's say AWS. In your app you configure the API endpoints of your backend to accept requests from the frontend domain. In the front end you configure your post requests to the backend url. For both approaches you will need to add some package to your backend like PM2 or Forever and many others. You just need one. Because once you deploy the backend there is no terminal to run the backend command let's say 'node app.js' you'll need to use a package like PM2 in your code to make sure your backend server is live. Also note that most hosting platforms can host both backend and frontend. You can even use platforms like Hostinger or siteground among others to host your frontend using their shared plan or buy a plan that offers more features depending on the platform. Also remember you won't just deploy your files the way they are during development. You need to bundle them to a deployable file. Like for the frontend you'll run 'npm build' that's if you used ' create-react-app' or 'npm run build ' if you used 'create vite' ( this is Incase you didn't change the commands in your package.json). Then you can bundle the backend with webpack. This was a generalized response make sure to check the docs of your hosting provider for guidelines. It seems complicated but it is easy.

@theadarshprasad Год назад

probably DigitalOcean, Linode or AWS

@RahulKumar-xl3dd Год назад

@@theadarshprasad did you deploy the project ??

@theadarshprasad Год назад

@@RahulKumar-xl3dd i didn't started it as currently i'm working on some other project

@yash_verma Год назад

great

@frankchen3021 Год назад

thank you a lot for this video. but do you know how to stream the response from the api? So the message keeps popping up like the chatGPT instead of showing up all at once

@chairilashar7022 Год назад

Hello sir, I requested a laundry management system project using MERN, I really support your channel sir

@jamjam3337 Год назад

👏👍

@botagozakhmetova8185 Год назад

is this tutorial beginner-friendly? (like almost total beginner) or it's for intermediate level specialists?

@tafaxtra Год назад

Thank you so much. As a beginner, I followed your tutorial to the core but I am having problems deploying it. On dev, everything works fine at the end. When I did yarn build and yarn preview, nothing loads on the page. When I checked the console, I get the error: require is not defined. When I tried debugging, I found out the error was coming from require("websocket"). I have searched the web tirelessly for solution to this problem, but I couldn't seem to get around it. It appears this is a dependency of the react-chat-engine-advanced. Please, how can I resolve this? Thanks.

@luke43591 10 месяцев назад

I have the same issue plz help us!

@hosnavlogs Год назад

Would’ve been nice to include how to deploy the application

@Yag116 Год назад

he showed that in this video: Build a MERN React Admin Dashboard | Redux Toolkit Query, Backend Focus, Deployment, Data Modeling

@J3R3MI6 Год назад

@@Yag116 once it’s deployed does that mean you essential have a working live product (assuming you use stripe for payments) that can hold new users and scale?

@twynecreativemedia Год назад

@@J3R3MI6”product” would be the wrong word since it wouldn’t be an original idea, I think it’d work better as an auxiliary project on your portfolio

@4mylife4mylove Год назад

Thanks for great tutorial! btw, I used your promo code but I got email it's expired and need to upgrade :D

@dj1984x 10 месяцев назад

i don't understand how this is helpful to people learning, it's a bunch of copy/paste. it's a cool project and looks great, I just don't think I'm actually learning much from this

@rootMedia21 Год назад

Does this app use a database for storing chat info? how to share chat info with others?

@DoorDashPro Год назад

I created a chat app with the old free chat GPT. I'm definitely the goat because I created all of it by myself without the need of any fancy GPT upgrade

@Gulam-E-Mastan 9 месяцев назад

OnSubmit function is not defined.. can you please help?

@MujibmmThe 9 месяцев назад

Has anyone hosted a clone of this and can you link it please Also thank you ed great tutorial as always

@usmanmarkaz Год назад

Bro Plz Make Another Ecommerce Project with Firebase and stripe Payment gateway and make it fully functional plz sir

@anghelgabriel 7 месяцев назад

Which icona theme do you use?

@studiomonty Год назад

Does this code allow "remembering", inside the same chat window? Can you converse with the API and it remembers what has been said?

@drgeneral6610 Год назад

Hi, is it possible to add voice note, video call and voice call also a feed for post like on facebook. I'm working on my final 3rd year project as IT Student Software Developer. Thanks in advance

@dragonemperor8406 Год назад

Can anyone guide me how to deploy it on netlify or vercel or render, and what changed in the code we need to do to do so

@tanmaywaddelwar1907 Год назад

facing issue regarding export and import of custom header file so i can't see chat page on running the project at 40:16

@ajaybabupatel1665 10 месяцев назад

In this can two users also talk to each other oe only with gpt

@eshitajain6406 Год назад

Hey, it’s amazing but login and signup is not working what to do ?

@shashwatsharma5415 Год назад

Can i make it as a basic full stack developer?? 🤔

@medusa121 Год назад

Awesome work! I deployed the client to Vercel and also tried in Netlify but got an Uncaught ReferenceError: require is not defined even though we haven't used require on the client side. Any chance you know what may have caused this?

@RahulKumar-xl3dd Год назад

I think you should use render to deploy the back end part and Vercel/Netlify to deploy the front end part. It should work I guess.

@nattapongCcwr Год назад

Have you solved this problem now?

@medusa121 Год назад

@@nattapongCcwr i was anle to deploy it in vercel by transferring the code to create react app instead.

@medusa121 Год назад

@@nattapongCcwr wow! This will come in handy. Thanks mate

@Mike-xr1fk Год назад

dude you should really switch to nextjs!

@EdRohDev Год назад

nextjs app is coming!

@tanishqa-sv Год назад

Can I follow this for windows10 ?

@mpumuropatrick4288 Год назад

This is great learning materials but i went through the video but i have error of 404 failed to load

@sueraisianzadeh797 Год назад

please give me your github link to grab css file, as you mentioned in the video. thanks

@joaquinmaurtua4773 Год назад

The project is very interesting, but to understand it you must already have knowledge and practice with redux toolkit, otherwise it will be very difficult to understand the video, because the whole part of redux toolkit is not explained well.