So far, we have been building offline Electron applications. For offline-first applications, we store all the HTML, CSS, and JavaScript content locally and then embed all the files into the resulting package. Then, you can redistribute the package and release new versions of the application in case you need to change the code to bring new features to your application. We also store all the application data locally.

Another popular way of developing Electron applications is storing resources remotely on a server and using your application as a thin client. In this case, you can reduce the number of feature releases and give your application an evergreen. This means that you deploy new changes to the server and all the client applications automatically get new content on the next restart, for instance, or even in real time.

In this chapter, we are going to build a Slack-like chat application with the group chat feature. We are going to store all the data in the remote server and render group and message lists in real time. You are also going to learn how to store new messages on the server. The estimated build time for this project is three hours.

In this chapter, we will cover the following topics:

• Creating an Angular project
• Creating a Firebase account
• Creating a Firebase application
• Configuring Angular Material components
• Building a login dialog
• Connecting the login dialog to Firebase Authentication
• Configuring the Realtime database
• Rendering the group list
• Implementing the group messages page

• Displaying group messages
• Sending group messages
• Verifying the Electron Shell

We have a pretty big agenda, so let's get started and build our chat application. First, however, we are going to define the stack we are about to use.