Build a React chat app with push notifications

This sample app shows how to build a React chat application using CometChat Pro that will send push notifications.

TODO: Add macOS screenshot

Jump straight into the code or read the accompanying step-by-step guide here on our blog.

Technology

This demo uses:

Running the demo locally isn't tricky but please do make care to follow the instructions carefully.

Download the repository here or run git clone https://github.com/cometchat-pro-tutorials/react-chat-push-notifications.git
In the react-chat-push-notifications directory, run npm install

### Configure CometChat

Head to the CometChat dsahboard (you'll need to create an account)
Create a new app
Head to the Keys tab and note your app ID and auto-generated full access key
Create a .env file in the root folder of the project and paste the following content in it:

REACT_APP_COMETCHAT_API_KEY=YOUR_API_KEY
REACT_APP_COMETCHAT_APP_ID=YOUR_APP_ID
REACT_APP_COMETCHAT_GUID=supergroup

Replace YOUR_API_KEY and YOUR_APP_IDwith your API KEY, APP ID as obtained from your CometChat dashboard.

Register a Firebase dashboard (you'll need to create an account)
Create a new Firebase app
Add a new web application into your Firebase project
Click on the settings menu, then go to the General tab
Copy the Firebase config variable into src/firebase.js and public/firebase-messaging-sw.js (look at the comments there)
Then in Firebase settings, go to the Cloud Messaging tab. Copy the server key here
Go back into CometChat PRO dashboard, into Push Notification extension and click on Actions -> Settings Paste the FCM server key here
For more detailed steps and screenshots, visit the documentation here
Finally, run npm start

Name	Latest commit message	Commit time
Failed to load latest commit information.
public	FCM update check if messaging isSupported	Sep 17, 2019
screenshots	Update README with screenshots	Aug 31, 2019
src	FCM update check if messaging isSupported	Sep 17, 2019
.env-example	Chat app layout and functions OK	Aug 17, 2019
.gitignore	Chat app layout and functions OK	Aug 17, 2019
README.md	add documentation link for Firebase	Sep 1, 2019
package-lock.json	Update README with screenshots	Aug 31, 2019
package.json	Update README with screenshots	Aug 31, 2019