Planning in Offline-First Budgeting App

Introduction

A key element in financial planning is having a budgeting tool that allows you to track both daily and planned transactions.

• This provides a clear picture of your financial status and spending habits.
• However, most budgeting apps available on app stores either require a premium subscription or are bundled with intrusive advertisements.
• To address this gap, we will explore how to build a cost-efficient, offline-first personal budgeting app tailored for daily use.

Preplanning the App Setup

As with previous projects like a drug database PWA or a Blogger PWA, we will use Firebase Studio to scaffold the core structure of this budgeting app. To keep the app cost-effective while feature-rich, it should include:

• User authentication and login
• A transaction page with a form/dialog for adding entries and filtering capabilities
• Cloud syncing of income and expenses
• Charts for balance trends and summary statistics (e.g., today, this week, this month, this year, all time)

Since we are deploying via Firebase, both Authentication and Cloud Firestore need to be enabled in the Firebase Console.

Syncing Strategy with Firestore

IndexedDB will be used to store all transactions locally.

• However, Firestore costs scale with the number of reads, writes, and stored documents.
• If each transaction is stored as an individual document, this quickly becomes unsustainable, especially when supporting multiple devices.
• For example, if a user logs 5 transactions daily, that is 150 transactions monthly. Over 5 years, this could lead to 9000 documents, resulting in significant read/write costs during sync.

Hence, the optimized approach is to use batched monthly documents: /users/{userId}/monthlyTransactions/{YYYY-MM}.

• Each document stores an array of transactions for the corresponding month.
• This greatly reduces document count and cost.

In terms of syncing enhancements across devices, use a synced: true/false flag and implement soft deletion (deleted: true) for historical data.

• Careful handling of soft-deleted data is essential; Not only should they be excluded from transaction lists, but they must also be omitted from any statistical analysis.
• To maintain data integrity, hard deletion of older transactions or limiting sync to just the last six months may not be ideal.
• Fortunately, the relatively low cost of Firestore reads and writes allows the app to scale efficiently without compromising on historical data access.

To minimize unnecessary syncing to Firestore, I implemented a manual sync button, instead of automatic syncing.

• Prior to completing a manual sync, records can be deleted directly without using soft deletion, since they have not yet been uploaded to the cloud.

Firebase Authentication

In the app setup, both guest mode and authenticated user mode are supported.

• The guest mode allows the users to sign in anonymously to explore all features (including offline functionality), with their data stored locally in IndexedDB.
• However, to sync data across multiple devices, users must sign up or log in to be authenticated with Firebase.

To enable Firebase Authentication, go to Firebase Console → Authentication → Sign-in method, and enable the providers you wish to support.

• This includes native providers like Email/Password, as well as third-party options such as Google, Apple or Facebook.

If you use Email/Password authentication, several features should be implemented, including:

• Upgrading anonymous accounts to registered ones
• Email verification for both registration and email changes
• Passwords updates and reset (forgot password)
• User logout and account deletion

When using providers like Google or Facebook, the authentication flow is simpler, as those providers handle user identity verification and reduce the complexity of managing credentials manually.

After setting up Firebase Authentication, the next critical step is to configure Firestore security rules to ensure data privacy.

• Specifically, we need to define rules that allow each authenticated user to read and write only their own documents, and prevent access to other users’ data.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId}/{document=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

Consider this design challenge: How would you implement Firestore security rules for a real-time collaborative time planner where users may belong to multiple calendars, and access must be restricted based on verified roles - viewer, editor, or owner - for each specific calendar?

Statistical Insights

To provide users with a clear and meaningful overview of their financial activity, the app should offer the following statistical insights.

• Total balance, income and expenses
• Balance trend over time
• Category-wise distribution

Each of these insights should support dynamic time filters, like today, this week, this month, this year and all time.

• These filters allow users to gain both short-term and long-term perspectives on their finances,

Offline Functionality

Given that the app is a Progressive Web App (PWA), ensuring flawless offline functionality is essential. To achieve this, we need to:

• Precache the essential app shell using a custom sw.js (service worker), so the core interface loads even when offline.
• Enable IndexedDB persistence and configure storage settings to prevent the browser from automatically clearing stored data under low disk space conditions.

If offline support is not implemented properly, users may find it difficult or impossible to record transactions in areas with limited or no internet connectivity, severely diminishing the app’s usefulness.

• Fortunately, compared to more complex offline-first apps like a drug database PWA or a Blogger-based PWA, offline functionality in a budgeting app is more straightforward to set up.

Additionally, it is important to implement persistent authentication so users remain logged in across sessions, and to request persistent storage permission using the Storage API to reduce the risk of data loss.

Further Enhancements

Here are potential upgrades to improve UX and scalability:

• Mobile optimization
• Use responsive layouts, touch-friendly UI components, and offline caching to ensure the app is smooth and usable on small screens.
• Planned Transactions
• Support once-off and recurring plans with flexible scheduling options: daily, weekly, monthly and annually.
• Include a toggle for manual or automatic approval before converting planned items into actual transactions.
• Store using scalable document paths: /users/{uid}/plannedTransactions/{planId}. This ensures low Firestore costs and efficient synchronization.
• Custom categories (per user)
• Let users define and manage their own transaction categories.
• Sync changes to Firestore to maintain consistency across devices.
• Merge default categories with user-defined ones intelligently.
• User settings and preferences
• Dark mode, currency selection, default time range for statistics, etc.
• Conflict resolution on sync
• Silent merge based on timestamp-based resolution.
• Prompt for manual user review
• Security setup
• Content Security Policy (CSP) to protect from cross-site scripting (XSS) attacks and other injection threats.
• Ensure strong password validation (at least 8 characters, at least one letter, at least one number, at least one special character) in registration and password reset flow.
• Secure API key management
• Store sensitive keys in a .env file for local development.
• Add .env to your .gitignore to prevent accidental exposure in source control (e.g., GitHub).
• Configure environment variables via the apphosting.yaml file and manage secrets securely using Google Secret Manager for production.

Summary

When developing an app, it is crucial to enhance each component incrementally rather than fixating on a complex final result from the start.

• Focusing on one feature at a time allows for cleaner implementation, easier debugging, and better user experience.

App refinement is a continuous, iterative process.

• It requires stepping outside the mindset of a developer and seeing the app through the eyes of the user.
• Even small usability improvements can significantly impact the overall experience.
• To illustrate, from a privacy standpoint, ensure that local data is securely wiped once a user logs out or deletes their account.

For improved UX in category and date selection:

• Use a combobox for categories to allow fast search and selection.
• Implement a drill-down date picker or dropdowns for month/year rather than requiring users to manually scroll through one month at a time.
• Planned transactions should support scheduling up to five years in advance, not just one.

Finally, every new feature or bug fix should be thoroughly tested, as changes may have ripple effects.

• Robust testing is essential to maintaining stability and trust.

Once all the discussed features are carefully implemented, you can produce a robust project that resembles this.