⚽

Track, Manage and Analyze Personal Finance

image

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. 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.

Our team was accepted to YCombinator Startup School for this project and graduated in Nov 2018

TECHNOLOGY 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 (Create, Read, Update and Delete) operations on a transaction. The transaction should have attributes such as 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. This functionality should also work 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 users are facing with existing solutions from banks, how they track expenses and income. We were also interested to understand what aspects of personal finance are crucial to users.
  • Created wireframes to organized the information on each web page.
  • Created screen designs in Sketch using Google Material Design System. It standardized a consistent theme, color, typography, shapes, icons and components across the application.
  • Performed usability testing via prototyping feature available in Sketch App.
  • Implemented application logic using serverless architecture.
  • Introduced 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 and commit code changes to git.
  • Provided features such as ability to add custom categories, a dedicated way to submit in-app feedback and create budgets.
  • Managed product roadmap, sprint schedules and release cycles.
  • Identified potential blockers and managed the scope of work for future 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 load the data in the app faster due to cache-first strategy. Very minimal mobile data is used because only the new and updated information is sent over the network. It also helped us reduce the cost of transferring the data to and from the backend.
  • Gathering continuous in-app feedback help us prioritise features for new releases.