Skip to content

Commit 89a2110

Browse files
React Chat samples for React UIKit v1.0.7 is updated
1 parent 7df20fe commit 89a2110

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+67067
-0
lines changed
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
# Table of Content
2+
3+
- [About](#about)
4+
- [Requirements](#requirements)
5+
- [Screenshots](#screenshots)
6+
- [Features](#features)
7+
- [How to launch](#how-to-launch)
8+
* [1. Install Node.js and NPM integration](#1-install-nodejs-and-npm-integration)
9+
* [2. Run on development server](#4-run-on-development-server)
10+
+ [2.1 Get application credentials](#21-get-application-credentials)
11+
+ [2.2 Set application credentials](#22-set-application-credentials)
12+
+ [2.3 Run the application](#23-run-the-application)
13+
- [Documentation](#documentation)
14+
- [License](#license)
15+
16+
# About
17+
[](#about)
18+
QuickBlox UIKit React Sample
19+
20+
This is a code sample for [QuickBlox](http://quickblox.com/) platform. It is a great way for developers using QuickBlox platform to learn how to integrate private and group chat, add text and image attachments sending into your application.
21+
22+
# Requirements
23+
[](#requirements)
24+
25+
The minimum requirements for QuickBlox UIKit for React sample are:
26+
27+
- JS QuickBlox SDK v2.15.5
28+
- QuickBlox React UIKit library v0.1.2
29+
- React JS v.18.0
30+
- TypeScript v.4.9.3
31+
32+
# Screenshots
33+
1. Sign In page;
34+
35+
![sign_in](./src/assets/screenshorts/sign-in-react-chat-sample.png)
36+
37+
2. Sign Up page;
38+
39+
![sign_in](./src/assets/screenshorts/sign-up-react-chat-sample.png)
40+
41+
3. UIKit;
42+
43+
![quickblox-ui-kit](./src/assets/screenshorts/react-qb-uikitweb-doc.png)
44+
45+
# Features
46+
47+
* Sign in/Sign up and Log out
48+
* Set up custom theme
49+
* Send and receive message/attachment
50+
* Create and leave a 1-to-1 and group chat
51+
* Create a public chat
52+
* Display users who have received/read the message
53+
* Mark messages as read/delivered
54+
* Send typing indicators
55+
* List and delete chats
56+
* Display chat history
57+
* Display a list with chat participants
58+
59+
# How to launch
60+
## 1. Install Node.js and NPM integration
61+
62+
You should use QuickBlox JavaScript SDK and QuickBlox UIKit with server-side applications on NodeJS through the native node package.
63+
Just install the package in your application project:
64+
65+
Navigate the current project folder ***\samples\react-chat*** and type
66+
67+
```bash
68+
npm install
69+
```
70+
71+
## 2. Run on development server
72+
73+
### 2.1 Get application credentials
74+
75+
QuickBlox application includes everything that brings messaging right
76+
into your application - chat, video calling, users, push notifications,
77+
etc. To create a QuickBlox application, follow the steps below:
78+
79+
1. Register a new account following [this
80+
link](https://admin.quickblox.com/signup). Type in your email and
81+
password to sign in. You can also sign in with your Google or Github
82+
accounts.
83+
2. Create the app clicking **New app** button.
84+
3. Configure the app. Type in the information about your organization
85+
into corresponding fields and click **Add** button.
86+
4. Go to **Dashboard =\> *YOUR\_APP* =\> Overview** section and copy
87+
your **Application ID**, **Authorization Key**, **Authorization
88+
Secret**, and **Account Key**.
89+
90+
### 2.2 Set application credentials
91+
92+
Before run a code sample:
93+
1. get appId, authKey, authSecret, and accountKey
94+
2. put these values in file **QBconfig.ts** following **samples =\>
95+
react-chat =\> src\** directory.
96+
97+
TypeScript
98+
```ts
99+
export const QBconfig = {
100+
credentials: {
101+
appId: '',
102+
authKey: '',
103+
authSecret: '',
104+
accountKey: ''
105+
}
106+
}
107+
```
108+
109+
### 2.3 Run the application
110+
111+
Run `npm start` for a dev server. Navigate to `http://localhost:3000/`. The app will automatically reload if you change any of the source files.
112+
113+
# Documentation
114+
[](#documentation)
115+
Sample documentation is available [here](https://docs.quickblox.com/docs/react-uikit).
116+
117+
# License
118+
[](#license)
119+
MIT License [here](https://github.com/QuickBlox/react-ui-kit/blob/main/LICENSE.md).
120+
121+
Copyright © 2023 QuickBlox

0 commit comments

Comments
 (0)