· 6 years ago · Mar 29, 2020, 09:12 PM
1<div style="width:100%">
2 <div style="width:50%; display:inline-block">
3 <p align="center">
4 <img align="center" width="180" height="180" alt="" src="https://github.com/cometchat-pro/ios-swift-chat-app/blob/master/Screenshots/CometChat%20Logo.png">
5 </p>
6 </div>
7</div>
8<p>CometChat React JS Demo app (built using <strong>CometChat Pro</strong>) is a fully functional messaging app capable of <strong>one-on-one</strong> (private) and <strong>group</strong> messaging along with recent conversations. The app enables users to send <strong>text</strong> , <strong>multimedia messages like audio, video, images, documents and custom messages (eg : location).</strong></p>
9
10
11## Table of Contents
121. [Screenshots](#Screenshots)
132. [Config Development Environment](#Config-your-Development-Environment)
143. [Config Chat App](#Config-Chat-App)
154. [RUN App](#RUN-App)
165. [Contributing](#Contribute)
17
18
19## Screenshots
20<p style="display:block;">
21 <a target="_blank" rel="noopener noreferrer" href="https://github.com/cometchat-pro-samples/javascript-reactjs-chat-app/blob/master/readme screenshots/login.gif"><img align="center" src="readme screenshots/login.gif" style="max-width:100%;"></a>
22</p>
23<p style="display:block;">
24 <a target="_blank" rel="noopener noreferrer" href="https://github.com/cometchat-pro-samples/javascript-reactjs-chat-app/blob/master/readme screenshots/search-and-one-on-one.gif"><img align="center" src="readme screenshots/search-and-one-on-one.gif" style="max-width:100%;"></a>
25</p>
26<p style="display:block;">
27 <a target="_blank" rel="noopener noreferrer" href="https://github.com/cometchat-pro-samples/javascript-reactjs-chat-app/blob/master/readme screenshots/groups.gif"><img align="center" src="readme screenshots/groups.gif" style="max-width:100%;"></a>
28</p>
29
30
31## Config-your-Development-Environment
32Clone or checkout the project using git or svn using the mentioned web URL
33
34```bash
35
36git clone <URL>
37
38```
39
40If you don't have node install, Please download appropriate version from official website: [Nodejs.org](https://nodejs.org/)
41
42Once node and npm is installed successfully. You can verify from running following command :
43```bash
44
45node -v
46
47```
48```bash
49
50npm -v
51
52```
53
54Now you are ready to sync application dependencies. Please follow the following steps:
55
56
57```bash
58
59npm install
60
61```
62
63## Config-Chat-App
64
65<h2> v2.0+ </h2>
66<h4>
67 Checkout master or v2 branch.
68</h4>
69<h4>Get your Application Keys</h4>
70<a href="https://app.cometchat.io/" target="_blank">Signup for CometChat</a> and then:
71
721. Create a new app - select version as v2 and region as Europe or USA.
73<p style="clear:both; display:block;">
74 <a target="_blank" rel="noopener noreferrer" href="https://github.com/cometchat-pro-samples/javascript-reactjs-chat-app/blob/master/readme screenshots/constants.png"><img align="center" src="readme screenshots/create-v2-app.gif" style="max-width:100%;"></a>
75</p>
76
772. Head over to the API Keys section and click on the Create API Key button
78
793. Enter a name and select the scope as Auth Only
80
814. Now note the API Key and App ID
82
835. Replace `APP_ID`, `API_KEY` and `APP_REGION` in *src/constants.js* with your APP ID, API KEY and APP Region respectively.<br/>
84
85
86Note : APP Region values to "us" or "eu".
87
88<p style="clear:both; display:block;">
89 <a target="_blank" rel="noopener noreferrer" href="https://github.com/cometchat-pro-samples/javascript-reactjs-chat-app/blob/master/readme screenshots/constants.png"><img align="center" src="readme screenshots/constants.png" style="max-width:100%;"></a>
90</p>
91
92<h2> v1.0+ </h2>
93<h4>
94 Checkout v1 branch.
95</h4>
96<h4>Get your Application Keys</h4>
97
98<a href="https://app.cometchat.io/" target="_blank">Signup for CometChat</a> and then:
99
1001. Create a new app - select version as v1
101
102<p style="clear:both; display:block;">
103 <a target="_blank" rel="noopener noreferrer" href="https://github.com/cometchat-pro-samples/javascript-reactjs-chat-app/blob/master/readme screenshots/create-v1-app.gif"><img align="center" src="readme screenshots/create-v1-app.gif" style="max-width:100%;"></a>
104</p>
105
1062. Head over to the API Keys section and click on the Create API Key button<br/>
107
1083. Enter a name and select the scope as Auth Only<br/>
109
1104. Now note the API Key and App ID<br/>
111
1125. Replace `APP_ID`, `API_KEY` in *src/constants.js* with your APP ID, and API KEY respectively.<br/>
113
114<p style="clear:both; display:block;">
115 <a target="_blank" rel="noopener noreferrer" href="https://github.com/cometchat-pro-samples/javascript-reactjs-chat-app/blob/master/readme screenshots/constants.png"><img align="center" src="readme screenshots/constants.png" style="max-width:100%;"></a>
116</p>
117
118
119## Run-App
120
121And your are done! You can now run your app by running the following command.
122
123```bash
124
125npm start
126
127```
128
129
130## Contribute
131
132Feel free to make a suggestion by creating a pull request.