Read the full tutorial here: >> How to Build a Webex Clone Chat App
This demo uses:
- CometChat Pro 3.0.0
- CometChat UI Kit
- Firebase
- React.js
- Uuid
- Validator
- @emotion/core
- dateformat
- emoji-mart
- react-html-parser
- twemoji
To run the demo follow these steps:
- Head to CometChat Pro and create an account
- From the dashboard, add a new app called "webex"
- Select this newly added app from the list.
- From the Quick Start copy the APP_ID, APP_REGION and AUTH_KEY. These will be used later.
- Also copy the REST_API_KEY from the API & Auth Key tab.
- Navigate to the Users tab, and delete all the default users and groups leaving it clean (very important).
- Download the repository here or by running
git clone https://github.com/hieptl/webex.git
and open it in a code editor. - Head to Firebase and create a new project
- Create a file called .env in the root folder of your project.
- Import and inject your secret keys in the .env file containing your CometChat and Firebase in this manner.
REACT_APP_FIREBASE_API_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_FIREBASE_AUTH_DOMAIN=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_FIREBASE_DATABASE_URL=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_FIREBASE_STORAGE_BUCKET=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_COMETCHAT_APP_ID=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_COMETCHAT_REGION=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_COMETCHAT_AUTH_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
REACT_APP_COMETCHAT_API_KEY=xxx-xxx-xxx-xxx-xxx-xxx-xxx-xxx
- Make sure to exclude .env in your gitIgnore file from being exposed online.
- Run the following command to install the app.
npm install
npm run start
Questions about running the demo? Open an issue. We're here to help βοΈ
- π CometChat Homepage
- π Create your free account
- π Documentation
- πΎ GitHub
- π₯ Firebase
- π· React.js