Chat with your friends and family with your own React app in 3 easy steps

Create a new React app✌

Use this command: npx create-react-app app_name

Prerequisites for chatting app

ant-design - It is a React UI library that contains many icons for making UI interactive.
Axios - It is a Java Script library to make HTTP requests
react-chat-engine- It is a chat API without which we cannot make our chat app.

Install all these using a single command:

npm install @ant-design/icons axios react-chat-engine

Steps:

1. Go to https://chatengine.io/ and create a new project by clicking on New Project. Give your project a name. I have named it as chat-blog.

2. After the project has been created, it provides us a unique Project ID for each project.

As we can see from the above screenshot, now the chatengine.io shows the steps to setup your project(on left). Follow step 1 to add as many users as you want. Enter username and secret key. Secret is your password, confirm it and you can also enter the email, first name, last name and can also set the profile picture of that username in avatar. You can do the same for any number of users.

Now create chats. Chats are like groups. Each user in that group will have different username but same password in order to access the group.

You can add or delete users and chats.

3. Step 3 shows the code to be embedded in your React app. Copy it and paste that code in your app's App.js file.

You can add as many users and chats you want and share the that particular user's credentials(username and password)with them to have a chat with them.

Run The App:

Use the command: npm start