Slack clone powered by Chatkit. See it in action here https://pusher.github.io/react-slack-clone
This is a static, single page web app bootstrapped with create-react-app for ease of setup, distribution and development. It is a thin UI wrapper around the pusher-chatkit-client library to demonstrate how different features can work together to form a compelling real-time chat client with various potential product applications.
The Chatkit SDK allows you to implement features you would expect from a chat client. These include:
- 📝 Public and private chat rooms
- 📡 Realtime sending and receiving of messages
- 📦 Rich media attachments (drag and drop)
- 💬 Typing and presence indicators
- 📚 Read message cursors
Want to get involved? We have a bunch of beginner-friendly GitHub issues.
The demo attempts to be feature complete according to documentation here. Feature requests should be made via issues or pull requests to this repository.
- CreateMessageForm - to send a message with a textual body and trigger typing indicators.
- CreateRoomForm - to create a new room and join it upon creation.
- FileInput - to send a message with a rich media attachment.
- Message - to render out a message that potentially includes an attachment.
- MessageList - to render a list of messages from a key value store.
- RoomHeader - to display useful information about a given room.
- RoomList - to render a list of rooms which can be subscribed to by the current user.
- TypingIndicator - to signify to the user that another user is typing in a given room.
- UserHeader - to display useful information about a given user.
To run the application locally; clone the repo, install dependencies and run the app.
$ git clone https://github.com/pusher/react-slack-clone
$ cd react-slack-clone
$ yarn && yarn start
The app starts in development mode and opens a browser window on http://localhost:3000. The project rebuilds and the browser reloads automatically when source files are changed. Any build or runtime errors are propagated and displayed in the browser.
The app depends on GitHub authentication and a user creation endpoint that is hosted at https://chatkit-demo-server.herokuapp.com. The endpoints are /auth and /token.
The app implements Github login using OAuth web procedure, which includes a redirect_url. This works in development mode as we have
a localhost: 3000 or something similar to provide a redirect towards. But in disctribution build, index.html is the homepage, and
by the app's existing logic the redirect will point towrads file:// ....... /index.html which is not allows in oAuth implementations.
Hence, to run the app in a demo mode, a user's Git credentials can be hard coded in the app, and the app runs fine with it. Along with this, the steps to create a distribution build is
To build the code in a separate folder
yarn build
To create distribution files (exe, dmg etc)
yarn dist
Necesary changes are already done in package.json
Follow this link for creating production build : https://medium.com/@kitze/%EF%B8%8F-from-react-to-an-electron-app-ready-for-production-a0468ecb1da3