Expressjs, React/Redux, Nodejs
This application uses ChatEngine, OpenAI and ChatGPT integration.The rontend uses ChatEngine and Redux toolkit for state management and Redux Toolkit Query for API calls and the backend uses NodeJS as the runtime environment and ExpressJS for the route handling.
$ git clone https://github.com/TerribleCodes/Chat-App-with-ChatGPT-API.git
CHAT_APP_WITH_CHATGPT_API
βββ client
β βββ node_modules
β βββ public
β βββ src
β βββ assets
β βββ components
β β βββ chat
β β βββ customHeader
β β βββ customMessageForm
β β βββ login
β βββ state
βββ misc
βββ server
β βββ node_modules
βββ βββ routes
Notice, you need client and server runs concurrently in different terminal session, in order to make them talk to each other
Name | Description | Default Value |
---|---|---|
PORT | Port Number | 1337 |
VITE_PROJECT_ID | Project ID | - |
BOT_USER_NAME | Users | AI_bot_Steve |
BOT_USER_SECRET | User Password | 1234 |
OPEN_API_KEY | Project ID | - |
$ cd client // go to client folder
$ npm i // npm install packages
$ npm run dev // run it locally
Name | Description | Default Value |
---|---|---|
VITE_BASE_URL | URL to the locally running instance | http://localhost:1337 |
VITE_PROJECT_ID | Project ID | - |
$ cd server // go to server folder
$ npm i // npm install packages
$ npm run dev // run it locally
Client-side | Server-side |
---|---|
react: ^18.2.0 | axios: ^1.3.4 |
@heroicons/react: ^2.0.16 | body-parser: ^1.20.2 |
@reduxjs/toolkit: ^1.9.2 | cors: ^2.8.5 |
react-chat-engine-advanced: ^0.1.28 | dotenv: ^16.0.3 |
react-dom: ^18.2.0 | express: ^4.18.2 |
react-dropzone: ^14.2.3 | helmet: ^6.0.1 |
react-redux: ^8.0.5 | morgan: ^1.10.0 |
react-router-dom: ^6.8.1 | openai: ^3.2.1 |
This project was based on the tutorial - Build a Chat App with NEW ChatGPT API by Ed-Roh