Team Chat is our group chat app with features like user login, joining/leaving group conversations, send/receive messages, members online/offline presence, typing indicators, profanity filtering and more. Its UI is built in React, and uses the PubNub Redux framework to manage client state on the application.
We've put together a comprehensive tutorial that explains how key features are built in the team chat app. Read the tutorial now.
About Redux State Manager
PubNub's Redux framework make it easier for developers to manage state of data components inside the application. The framework adds structured data to the Redux store, listens to realtime events generated by the network, and stores these events on the client-side, and triggers updates to the view inside your application. These Redux-specific functions which can be integrated with your existing or new Redux data store.
Run the project
Follow the instructions below to run the app in your local environment.
Clone the GitHub repository.
Navigate to the root directory.
Install the project.
Start the project. You'll be asked to enter your chat app keys from the PubNub Dashboard. Note that Objects should be enabled and a region should be selected on the key.
Open http://localhost:3000 to view the application in your browser if it doesn't open automatically. When you're done, type Control-C in your terminal window to stop the web server.
Add more features
Visit the React and Redux reference docs to add more features to your app like unread message counts, read receipts, reactions, and more.