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 examine the most common and crucial components of building a personal financial management app with Mono APIs and 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
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 manual 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, we assume you have a Vue project all 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 been 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
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. Here's the visual output of our tutorial, using this method.
You can find the code for this tutorial in full, here.
Happy building!
