khurramsagoo / chat-clone

Group Chat

group-chat is an app that showcases a complex chat use case allowing you to see all PubNub Chat Components for React in action. After running the app, you can send messages as a sample user in a 1:1 and group channel, upload files, and add message reactions to messages. Additionally, this app (also referred to as the "moderated chat app") works as a showcase app on which you can test features offered by our Moderation Dashboard to learn how to moderate and manage users, messages, and channels with PubNub.

Prerequisites

This application uses React v18.0.0, ReactDOM v18.0.0, PubNub JavaScript SDK v7.2.0, and PubNub React SDK v3.0.1.

To use the app, you need:

• yarn
• Node.js
• Code editor (e.g. Visual Studio Code)
• PubNub account on the Admin Portal with Publish and Subscribe Keys for your chat app with this configuration enabled: _ Presence _ Files (select a region) _ Message persistence _ Objects (select a region and enable User Metadata Events, Channel Metadata Events, and Membership Events)

Usage

Read the tutorial to learn how to use the app and better understand the logic behind it.

Follow the steps to run the app locally.

1. Clone the repository.

   git clone https://github.com/pubnub/react-chat-components.git

2. Install the dependencies.

   yarn

3. Copy the samples/.env.example file as samples/.env and paste your Publish and Subscribe Keys there.

4. Go to the samples/react/group-chat folder.

   cd samples/react/group-chat

5. Prepopulate sample user and channel object metadata.

   yarn run setup

6. Run the application.

   yarn run start

Components

The group-chat app showcases these PubNub Chat Components for React:

• Chat Provider
• Message List
• Message Input
• Channel List
• Member List
• Typing Indicator