The Architecture

Just as we did for the previous applications, let’s have a brief discussion about the architecture of this application in relation to the concepts we have been focusing on.

The big difference for this application is going to be the way in which we incorporate Firebase which is going to involve several topics we haven’t covered so far including:

• Setting up Firebase emulators for local development
• Creating a development and production environment
• Implementing security rules
• Integrating the firebase and rxfire libraries to communicate with Firebase

Apart from the stuff relating to our backend, most of the rest of the application will follow the same architectural principles we have been using throughout this course. This time we will be using the connect function by default.

This application will have three smart/routed components:

• home
• register (for creating new accounts)
• login

One interesting aspect of our routing set up in this application is that we will have an auth route defined that loads register and login as child routes. More on that later.

We will have a few dumb/presentational components:

• register-form-component
• login-form-component
• message-input-component
• message-list-component

We will also have a couple of shared services:

• AuthService to handle operations related to authenticating users
• MessageService to handle operations related to fetching and storing messages in the database

We will also have a couple of services to manage the local state for our login and register features.

Ok, let’s get into it!