Offline-first and Mobile-first Progressive Web Application (PWA)

The Company

Bonsaiilabs, Canada

The Project

moneybonsai is an offline-first and mobile-first Progressive Web Application (PWA) in the personal finance domain. It tracks, manage and analyze financial transactions which includes both credit and debit. It supports 2 level categorization with an ability to create custom categories and sub-categories. Users can create budgets across various categories and there is an extensive support of over 145 currencies.

Tech Stack
  • React

  • Redux

  • Material-UI

  • Google Cloud

  • Firebase

  • Cloud Functions

  • Progressive Web Application (PWA)

  • Sketch App (UX Design)

  • Mobile Web

The Goals
  • User should be able to seamlessly login to the application using popular federated identity providers such as Google, Facebook and Twitter.

  • Users should have an ability to add the financial transactions (credit and debit) in an offline mode. User could also perform CRUD operations on a transaction. The transaction could have optional and mandatory attributes including name, date, amount, currency, category, sub-category and the type of transaction (income or expense).

  • User should be able to create budgets across any category. They should be able to view and delete existing budgets.

  • There should be a dedicated dashboard where user could view the current and historical transactions aggregated at category and sub-category level. The dashboard should also indicate how an individual is doing in a month on the budgeted and non-budgeted categories.

  • The app should allow users to create custom categories of their choice if default categories does not meet their needs and the functionality should work even in offline mode.

  • The app should support major currencies and an ability to change the currency.

  • User should be able to submit feedback from within the app.

  • Provide notification for a new release and upgrade to the latest version in one tap.

The Approach
  • Collected anonymous information using surveys from end users across multiple platforms. The focus was to identify the problems they are facing with existing solutions from banks, how they track expenses and income and what aspects of personal finance are most crucial to them.

  • Created wireframes to organize information on each web page.

  • Created Design using Google Material Design to standardize the consistent use of theme, color, typography, shapes, icons and components.

  • Created UI designs using Sketch App for various mobile screen sizes.

  • Performed usability testing via prototyping feature available in Sketch App.

  • Implemented application logic using serverless architecture.

  • Implemented mobile web application with offline-first capabilities using Service Worker, IndexedDB, Web App Manifest and App Shell Model.

  • Worked on caching mechanisms to serve the content using cache-first strategy to reduce the data consumption on slow and 3G networks.

  • Used Google Cloud Infrastructure as a service to add power, security, authentication and scalability to the application.

  • Developed automated tests and deployment pipeline to run the tests when committing code changes to git.

  • Added features such as ability to have custom categories, a dedicated way to submit in-app feedback and budgeting.

  • Managed product roadmap, sprint schedules and release cycles.

  • Identified potential blockers and managed the scope of work for upcoming releases.

The Results
  • Almost 100 daily active mobile users are using it to track their financial transactions.

  • Using PWA turned out to be cost effective for users and for us as app creators. Users with limited mobile data can load the data in the app faster due to cache-first strategy and less mobile data used because only the new and updated information is sent over the network. It also helped us reduce the cost of transferring the data from the backend.

  • Gathering continuous in-app feedbacks that help us prioritize features for new releases.

Team Structure

2 engineers who conceptualized, designed, implemented and deployed the entire product