Real-time shared expense tracker app using Flutter and Firebase: Part 1 — Overview

As a financially contributing member of the family, I found it difficult to manage a budget for daily expenses, even communicating those with my family. We tried this by phone messaging and WhatsApp groups, but I needed something safe and customized for this particular task. So I decided to build an app. In the upcoming series of articles, I’ll discuss the process of making this. It was a good learning process so I’ll also discuss some of the setbacks that I witnessed.

So, as everything starts with a good problem definition, here goes:

Problem Statement:

Need to build an Android application that works like a chat where there is a separate section to see the expense amount and daily or weekly expense summaries. The other members of the chat should be notified when one of us adds an expense and all members should get one notification at midnight about the total expense during the previous day. all of the above from new user addition to application sustainment should be automated and made secure.

Steps to solve the problem:

1. Application system flowchart
2. Creating a Firebase project using Firebase CLI
3. Firebase Authentication for users
4. Creating the chat UI
5. Using Firebase Realtime Database for storing expense and user data
6. Firebase cloud messaging (FCM) for notifications
7. Firebase functions for automating and scheduling tasks

Step 1: Application system flowchart

The project is divided into two sections, the first part is the Flutter application on an Android device. This app will have 3 pages.

1. starting page after installation is the Authentication page, the user will authenticate using Google credentials
2. After user authentication, the user will be moved to the expense chat page, where the user will his/her expense entries on the right and from all other users on the left, like a normal chat experience. The chat page will also have a button to add new expense items and amounts.
3. The chat page has a button which takes the user to a list of historical daily expense summary list view.

The second part of the project is the Firebase cloud utilities. I’ll give a brief explanation of each utility and how it is implemented in the app.

1. Firebase Authentication: This utility enables a variety of user authentication methods and some packages provide a default UI for easy login and signup screen implementations.
2. Firebase real-time database: This is a cloud facility for storing and retrieving data to and from multiple users. data is stored in pathways equivalent to a series of JSON objects. The real-time database provides a lot of functionality for CRUD commands from applications as well as Firebase functions.
3. Firebase Cloud Messaging (FCM): This is a cloud messaging service to sends messages to client applications on providing their fcmtokens. The messages can be scheduled and can be seen as a notification based on the application's state.
4. Firebase Functions: This utility is available under the blaze plan (pay as you go) subscription in Firebase. This tool makes a lot of automation possible and takes some of the logic computation load away from the client side. Out of the many uses functions can 1. Trigger on any of the database updates, 2. Can be custom scheduled. 3. Can be triggered by an application. Functions get default administrative access to other Firebase utilities.

On the Firebase side, our project will need the following:

1. Firebase authentication authenticates the user from the application’s login page and stores if a new user is found. The Firebase functions will then store the user information in the Firebase Realtime database.
2. Firebase Realtime database will store chats coming from the applications chat page, user information coming from the authentication page and daily expense summaries coming from Firebase functions.
3. Firebase Functions will have two dedicated functions for triggering Firebase cloud messaging and real-time database. the first function will be triggered once a user adds an expense to provide notifications to all users. The Second function will be scheduled and triggered once at midnight to implement the logic for adding a day’s expenses and notifying all users.

This is the way in the app is going to be executed. In the next part we will discuss how to use CLI to start the Firebase project in your windows system — Part 2.