chouzejkl / react-chat

📱 ghChat, a chat tool for github. Front-End : React+Redux+React-router+axios+scss；Back-end: node(koa2)+mysql+JWT(Json web token); socket.io

English | 简体中文

ghChat(react version)

I hope that this project can be a chat tool for GitHub. So I will try to make it do some integration with GitHub. At present，it just support logging in with GitHub authorization and look GitHub user public information in ghChat. If you have anything idea about integration, welcome to create issues about feature suggestion, bug feedback or send pull requests.

Address

GitHub address

Project online address，support logging in with GitHub authorization

Welcome to join this project's group which named 'ghChat'. You click the inviting button from the robot. And you can search to join it as well.

What technology do ghChat use?

Front-End : React+Redux+React-router+axios+scss； Back-end: node(koa2)+mysql+JWT(Json web token); use socket.io to send messages with each other. And get other technology please follow the package.json file.

Features && Progress

• Account system

  • Log in
  • Resister
  • Log in with github authorization
  • Log out

• UI

  • Basic UI components: modal，notification ...
  • Responsive layout.

• Private chat

  • Chat with my contacts
  • Add contact
  • Contact information card
  • Delete contact

• Group chat

  • Chat together in a group
  • Create a group
  • Join a group
  • Group information view, include group members, group notice, group name...
  • Quit the group
  • Editor group information

• Search

  • Search users and groups in local or online obscurely

• Rich chat mode

  • Chat list sort by time every time
  • Send photo
  • Send emoji
  • Send file
  • Download file
  • Press enter key to send message
  • @somebody
  • View photo
  • Search expression online
  • Markdown
  • Quote

• Message notification

  • Browser notification
  • Show chat messages unread number in the chat list

• Performance

  • Open gzip to compress static resource
  • Lazy load chat messages. Fetch twenty messages by one time in every chat.
  • SQL optimization

• Others

  • Robot smart reply (just support Chinese)
  • Add SSL for website
  • PWA
  • Multilingual solution with I18
  • Rewrite back end code with TS，encapsulated as sdk.
  • CI/CD

Demo with photo：

Tips: How to turn on PWA in chrome?

Development

1. clone project code

git clone https://github.com/aermin/react-chat.git

2. create an empty file which names 'secret.js' in the root directory of this project.

But if you want to log in with GitHub authorization, use third part cdn to send files in chat, or separate configuration for DB, jwt secret, you should add content as follows in secret.js. So without this authorization, you just can't use features about send files and log in with GitHub.

module.exports = {
  client_secret: '', // client_secret of github authorization:  github-> settings ->  Developer settings to get 
  db: {
    host: '', 
    port: ,
    database: '',
    user: '',
    password: '',
  },
  secretValue: '', // secret of json web token
  qiniu: { // qiniu cdn configuration
    accessKey: '',
    secretKey: '',
    bucket: ''
  }
};

3. download npm module for front end

cd react-chat

npm i

4. download npm module for back end

cd cd react-chat/server 

npm i

5. init DB

// You should create a MySQL DB which name ghcaht in local
DB configuration follows 'react-chat/server/config.js'

npm run init_sql

6. run front end and back end code

npm run start

cd ..  

npm run start