Online Chat App using React JS

by React

Online Medical Chat App

? Before you start

  1. Make sure Git and NodeJS is installed
  2. Yarn is faster than Npm. So use Yarn.
  3. Create .env file in both client and server folder.
  4. server/.env

STREAM_API_KEY=xxxxxxxxxx
STREAM_API_SECRET=xxxxxxxxxxxxxxxxxxxxx
STREAM_APP_ID=xxxxx

TWILIO_ACCOUNT_SID=xxxxxxxxxxxxxx
TWILIO_AUTH_TOKEN=xxxxxxxxxxxxxxx
TWILIO_MESSAGING_SERVICE_SID=xxxxxxxxxxxxxxxxx
  1. client/.env
REACT_APP_STREAM_API_KEY_SECRET=xxxxxxxxxx
  1. Create an account in Stream
  2. Create a new app. You can name it whatever you want.
  3. On app dashboard, you can copy your keys and paste it like shown below. Never share them with anyone else.

NOTE: Both STREAM_API_KEY and REACT_APP_STREAM_API_KEY_SECRET are same

  1. To use messaging functionality, Create an account in Twilio
  2. On app dashboard, copy keys which are shown below and paste them in .env file in server folder.
  3. To get Messaging service sid, go to Messaging/Services through dashboard sidebar.
  4. Create a messaging service in case it doesn’t exists
  5. Then, click on messaging service you created and you will be able to see its properties as shown below. Copy Messaging Service SID

Make sure you don’t share them publicly.

? How to use this App?

  1. Clone this repository to your local computer.
  2. Open terminal in root directory and cd server
  3. Type and Run yarn install
  4. Run yarn run build to start back end server
  5. Now, in browser go to this URL http://localhost:5000/
  6. Now, nodejs server is configured and started. Next, we need to setup Client side server.
  7. Open a new Terminal and run yarn install
  8. Once packages are installed, type and run yarn start
  9. Now client side server will be started and you can start using this app ?

? Built with

? Stats

? Follow Me

GitHub

View Github