The Web Tub
Published in

The Web Tub

How to Create a Hybrid Chat App With React.js

Mobile phone with chat application and with chat bubbles above.
Let’s Write chat application.



  • Node v12.22.0 or higher,
  • free account on Monaca,
  • free account on Firebase.


  1. Implement authentication of user.
  2. Create Redux Toolkit store.
  3. Add database of chat groups.
  4. Enable the users to send and receive messages.
  5. Bonus: Building on Windows, PWA and Firebase deployment.

App Wireframe

Three phones with pages showing the wireframe of chat app.
Chat App wireframe.

Setting up The Project

$ npm install -g monaca         // install Monaca CLI
$ monaca login // login with your new account
$ monaca create Chat-App // create new project
Choose: Onsen UI and React -> Framework7 React Blank

User Authentication

Steps to enable authentication in Firebase.
Enabling authentication in Firebase.
Browser screenshot showing information about logged in user.
Information about logged in user.

Redux Toolkit - Store Global State

  1. Run command npm install @reduxjs/toolkit react-redux and create a directory “/store” which will contain all the store logic. Inside that directory, create “/store/slices” directory.
  2. We will use two slices in this app, therefore create “groupsSlice.js” and “userSlice.js”. These slices hold reducer logic and actions for a single feature of app (in this case information about chat groups and the user).
  3. In “/store”, create “store.js” which will include reducer object with all of our slices.
  4. Wrap your application by React Redux <Provider> in “app.jsx” to make the store available in the components.
  5. Use the state with useDispatch() and useSelector() in functional React components, and store.dispatch() and store.getState() in vanilla Javascript files.
React DevTools user interface.
Redux DevTools user interface.

Firestore Database

Groups: {category: string, description: string, image: string, name:    string}.Messages: {avatar: string, group: string, name: string, text: string, time: number, userID: string}.Users: {gender: string, image: string, name: string}.
Screenshot of Firestore Database filled with data.
Information in Firestore Database.

Sending and Receiving Messages

PWA, Windows Build and Firebase Deployment

  • Use Windows build to have standalone desktop app.
  • Build a PWA - this includes creating service-worker.js (registered in index.html), manifest.json and icons in multiple sizes.
  • Deploy to Firebase - after this you can publicly access the app.




Pushing the web current through hybrid mobile and PWA. Presented by ASIAL CORPORATION (

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store