Chat app
November 16, 2021

How to create a ChatApp Project

By tokslaw

Creating a chat application has become easier using React.js with readily available tools to use without unwarranted bottlenecks.
Let’s study together in creating chat apps using React.js with a chat engine API. This chat engine will handle the back-end and its server code completely. This will expose you to the knowledge of a Live functioning messaging application.

Creating the application

We need to have Npm and Node.js running on our machine. With these two installed, we are ready to get started.

Run the following command on your terminal to create a chat application project.

npx create-react-app taborgchatapp

After installation, cd into the project root folder and install the chat engine as shown below:

cd taborgchatapp
npm i react-chat-engine
npm start

Before running the npm start to start the chat app in your machine hence ,localhost

We need to set up the engine engine from web browser

Setting up chat engine

  • Login to your newly created account in chatengine.io website

Chat Engine Account Homepage

  • Create a New Project and follow the prompts.

Once created you have API keys specific to the Project created.

Project Keys

These Keys: Project ID and secret Keys will be used in the main react chat project.

While still in chatengine.io website, Create a New User.

Creating a ChatEngine component

Configuring a ChatEngine component with Project Keys in the App.js folder of react project implements the back-end of the chat application.

Input these lines of code in App.js folder but bear in mind to put in your Project Keys

import { ChatEngine } from ‘react-chat-engine’;

const App = () => {

return (
<ChatEngine

  height="100vh"
  projectID="xxxxxxx-6547-xxxx-9206-cxxxa829xxx"
  userName="xxxxxx"
  userSecret="xxxxxx"  
 
/>

);
}

export default App;

Implementing messaging app

A few components has to be created to facilitate the project some are:

  • create a ChatFeed.js file component, here are sample of lines of codes that assist in live application of the chat project.

import { useState } from “react”;
import { sendMessage, isTyping } from “react-chat-engine”;
import { SendOutlined ,PictureOutlined } from “@ant-design/icons”;

const MessageForm = (props) => {
const [value, setValue] = useState(”);
const { chatId, creds } = props;

const handleSubmit = (event) => {
    event.preventDefault ();

    const text = value.trim();
    if (text.length > 0 ) sendMessage(creds, chatId , { text });
    setValue ('');
}

const handleChange = (event) => {
    setValue (event.target.value);
    isTyping(props, chatId);
}


const handleUpload = (event) => {
    sendMessage(creds,chatId, { files: event.target.files, text: ''})
}


return (
    <form className="message-form" onSubmit={handleSubmit}>
        <input 
        className="message-input"
        placeholder="sendmessage ..."
        value= {value}
        onChange={handleChange}
        onSubmit={handleSubmit}
        />
    <label htmlFor="upload-button">
        <span className="image-button">
            <PictureOutlined  className="picture-icon"/>
        </span>
    </label>
    <input
            type="file"
            multiple={false}
            id="upload-button"
            style={{display: "none"}}
            onChange={handleUpload}
    />
    <button type='submit' className="send-button">
        <SendOutlined className="send-icon" />
    </button>
    </form>
)

}

export default MessageForm;

Then, run npm start ,viola ,you have built yourself a Chat application.