Mono Logo
  • Why Mono
    • Why Choose Mono
      Here's why 250+ Businesses & Developers use Mono APIs
    • Pricing
      Affordable pricing for developers, SMEs, and enterprises
    • See a Demo
      Experience Mono APIs in action
  • Products
    • Connect
      Financial account linking
    • Statement Pages
      No-code bank statement collection
    • DirectPay
      Direct bank payment collection
    • DirectPay Pages
      No-code bank payment collection
    • Portal
      Linked account management
    • Percept
      Corporate finance management
  • Learn
    • About us
    • Blog
    • Tutorials
    • Coverage
  • Developers
    • Overview
    • Documentation
Create free account
Why Mono
  • Why Choose Mono
  • Pricing
  • See a Demo
Products
  • Connect
  • Statement Pages
  • DirectPay
  • DirectPay Pages
  • Portal
  • Percept
Learn
  • About us
  • Blog
  • Tutorials
  • Coverage
Developers
  • Overview
  • Documentation
Create free account
Mono Blog

How to build a simple Personal Finance Management (PFM) App with Mono

7 Feb, 2022Engineering
  • King Kenway
    Growth
  • On this page
    • Steps to be covered
    • What you will need
    • Visualization: the final piece
    Share article
    • Twitter
    • LinkedIn

    Personal finance management is the planning and management of personal financial activities such as earning money, spending it, saving it, investing it, and protecting it. Oftentimes, consumers make use of personal finance management apps to help them manage their money easily. These apps let them categorise their transactions and track their multiple bank accounts, in one place.

    Steps to be covered

    In this article, we will share the most common and crucial components of building a personal financial management app using Mono APIs, NodeJs, VueJS, NPM, and Yarn. We will cover:

    1. Getting your App Keys

    2. Installation of Dependencies on the backend for NodeJS and MongoDB

    3. Setting up the database models in MongoDB

    4. Setting up our controllers

    5. Installation of Dependencies on the frontend for VueJS

    6. Linking a bank account

    7. Fetching transactions

    8. Categorising transactions

    9. Rendering total inflow and total outflow

    10. Unlinking an account

    What you will need

    To follow this article, you will need:

    • Node.JS, installed locally; you can do this by following this article.

    • Sound familiarity with setting up a Vue.js project and using Vue.js components.

    • Public and secret keys generated from your Mono Dashboard.

    Now, let's get started.

    1. Getting your App keys

    Public and Secret keys for an app on Mono

    To get started, log in to the Mono dashboard (create an account here if you don’t have one), and then head over to your Apps page to create an App. Once created, a secret and public key is generated which we would later use to make API calls and also to initiate the Mono Connect widget for account linking.

    2. Installation of Dependencies on the backend for NodeJS and MongoDB

    Here, we assume you already have a NodeJS project created. You can proceed to install the dependencies as follows:

    Using npm:

    Using Yarn:

    3. Setting up the database models in MongoDB

    For this tutorial, three MongoDB models were created in order to build this PFM App. These models are:

    • User - This model serves for holding a user's basic information. The columns for this model include the email, password, name, role, and defaultMonoAccount.

    • Account - This model here holds for every account a user links. The columns for this are the user id, mono account id, account name, account number, bank balance, account currency, bank name, account type, BVN, reauthorisation required status, unlinked status, and the data status.

    • Transaction - This model accounts for transaction data retrieved from a user's bank account. Columns here include the user id, the account id, transaction id, amount, date, narration, transaction type (debit or credit), the balance after a transaction is made, and the transaction category.

    4. Setting up our controllers

    With the above models all set up in their respective modules, creating controllers for each will be quite easy.

    • User/Auth controller: This controller basically comprises the login, register, and token generation for authorization.

      N.B: In our login controller, as soon as a user is authenticated, we try to fetch all linked accounts. After fetching, we immediately try to apply Data Sync to all linked accounts, to ensure that we have up-to-date transactions and account balance data. Also. this ensures that a user can see their most recent account balance and transaction history, after linking their account.

    • Account controller: This controller is for getting an account id, adding a new account, fetching all linked accounts by a user, and also setting a default Mono account to a user.

    • Transaction controller: This controller accounts for getting all transactions from a particular account via the Account ID, categorising any transaction, and then syncing the DB up to date with the most recent transactions.

      With the above controllers on the backend set, you can decide to set up routing for each as you desire. Now, we can proceed to set up our Frontend.

    5. Installation of dependencies on the frontend for VueJS

    Here, after you have had a Vue project created, you can proceed to install the dependencies as follows:

    Using npm:

    Using Yarn:

    6. Linking a bank account

    Enabling a user to link his existing bank account will require you to import our Connect.js SDK to a Vue component or view, which can be placed like this:

    Ensure that you place your public key from your dashboard in a .env file, like so:

    Now, head over to your methods handler in your Vue component and insert this:

    With this all set, we can proceed to bind this launchMono method to a button or image in our template:

    Now, we should have a rendered page that displays the following widget after the button is clicked on:

    The next thing that we need to handle here is the action that takes place once the onSuccess callback is called. In other words, handling appropriately once a user has logged into the widget successfully.

    Already in our store, we have an action that dispatches a fetch Account ID method from the authentication code and also an Add account method in our services module, which both makes a POST request to our NodeJS backend.

    Now, back to our view/component, we include our store action in the onSuccess callback to get the Account ID, and then save this account in the DB.

    With the above implementation all set up, once a user links his bank account, his account id gets received and then we pull his account information and save it to the database. Keep in mind that once this user is saved to the DB, we also update our accounts state so our Vuex session is notified.

    One last thing to take note of is we automatically set the first-ever connected account as the default account. This ensures that when their dashboard page loads up, we instantly generate the necessary insights by default.

    7. Fetching transactions

    With our previous steps well established, we can have our dashboard page make a request to the backend to receive all new transactions on our created hook, on our component/view.

    Already in our Vuex module state, you can have a defaultAccount parameter to track which transactions need to be pulled.

    The getTransactionByAccountId handler resides in our services action like this:

    In your Vue template, you can now have this rendered, like in this example here:

    8. Categorising Transactions

    With the transactions displaying, we can add extra functionality to allow a user to categorise their transactions.

    The categoriseTransaction handler resides in our services action like this:

    While in the methods in your component/page, you can update this as:

    9. Rendering total inflow and outflow

    Rendering inflow and outflow requires logic that can be placed in your component/view methods. When your page loads and the transactions for the default account is pulled, you can place the method below which basically sum all the total inflow or outflow by passing either "debit" or "credit" to the method.

    The template view can be structured like this:

    10. Unlinking an account

    Unlinking an account here typically means that your user wants to unlink their bank account from your app, and remove access to their transaction data. You can easily implement account unlinking in the methods in your components:

    Visualization: the final piece

    Here's the visual output of our tutorial, using this method.

    PFM app build with Mono tutorial

    With the above steps, I have demonstrated how easy it is to build a simple PFM application with Mono. Now, you can decide to add more features like Chart.JS, to provide a graphical insight into each transaction trend.

    You can find the code for this tutorial in full, here.

    Happy building!

    Like what you read?

    Become a subscriber and receive notifications about blog posts, company events and announcements, products and more.

    Next Read

    3 Oct, 2024Engineering

    Building an automated loan recovery process with Mono Direct Debit APIs

    Read the story
    Building an Automated Loan Recovery Process using Mono Direct Debit APIs
    17 Jul, 2024Engineering

    How to Implement the Mono Telco Data API

    Read the story
    How to Implement the Mono Telco Data API

    Start building with Mono

    Access high-quality financial data and start processing payments directly from bank accounts in minutes.

    Start now for freeTalk to Sales
    Products
    • Connect
    • Statement Pages
    • DirectPay
    • DirectPay Pages
    • Portal
    • Transactions
    • Income
    • Information
    • Realtime Data
    Resources
    • Developers
    • Documentation
    • API Reference
    • SDKs
    • Demo
    • Join Slack
    • Consumers
    Company
    • About us
    • Partner stories
    • Blog
    • Coverage
    • Careers
    • Contact
    Legal
    • End-User Policy
    • Privacy Policy
    • Developer Policy
    • Terms of Use
    • Cookies
    • Security
    © Mono Technologies Nigeria Limited
    TwitterLinkedIn