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

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: https://nodejs.org/en/download/
npx: https://www.npmjs.com/package/npx
vscode: https://code.visualstudio.com/download
nodemon: https://github.com/remy/nodemon
vite: https://vitejs.dev/guide/
react router: https://reactrouter.com/en/v6.3.0/getting-started/installation
react dropzone: https://github.com/react-dropzone/react-dropzone
redux toolkit: https://redux-toolkit.js.org/introduction/getting-started
redux toolkit query: https://redux-toolkit.js.org/rtk-query/overview
hero icons: https://heroicons.com/
dotenv: https://github.com/motdotla/dotenv
chatengine docs: https://chatengine.io/docs/react/v2
chatengine storybook: https://chatengine-io.github.io/react-chat-engine-advanced/?path=/docs/multichatwindow–default-story
chatengine api: https://rest.chatengine.io/
chatengine styling: https://chatengine.io/docs/react/v1/customize_ui/custom_css
openai node npm: https://github.com/openai/openai-node
openai completion docs: https://platform.openai.com/docs/api-reference/completions/create
openai playground: https://platform.openai.com/playground
openai api chatgpt update new: https://openai.com/blog/introducing-chatgpt-and-whisper-apis
openai api gpt-3.5 docs: https://platform.openai.com/docs/guides/chat

Completed Code:
github: https://github.com/ed-roh/chat-app
css: https://github.com/ed-roh/chat-app/blob/master/client/src/index.scss
code for openai-updated: https://github.com/ed-roh/chat-app/blob/master/server/routes/openai-NEW.js

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: https://www.youtube.com/channel/UCMoEx7gz7IbJHv733yEi2aA/?sub_confirmation=1 for more web development and web 3.0 blockchain tutorials!
My NEW Discord: https://discord.gg/N58wa7JmDB
———————————
Who is EdRoh? I’m a lead engineer for a publicly traded company and have been developing for a decade now.