Afternoon Project Post Mortem: Credit Card Payments Calculator

Over the end of the year holidays I’ve started to learn more about personal finance. That part of my life has been lacking good information despite being a daughter of an accountant and tax consultant. So I made an app which calculates the credit card payments.

End Goal

At the end of 2018 I made a dubious decision of applying for a credit card and lacking information I haven’t been very disciplined throughout 2019, fortunately it’s manageable. Still my goal for my project was to make it a bit more manageable by learning approximately how big my payments are going to be if I am disciplined with my credit card.

Choosing the Technology

Code that calculates payments for a credit card can be solved in several ways. The simplest and most straightforward approach would be to use plain HTML, CSS and Vanilla JavaScript. If this were a project at my job I’d go with this solution to the Product Owner.

Except this isn’t a project at my job. This is a fun project and fun and learning take priority. Plain HTML/CSS/Vanilla JS projects I’ve been deploying since I was a teenager. But I haven’t deployed a single Vue app yet1. So I chose Vue.

One way how this project deviates compared to projects at work is usage of testing. At the setup of a project Vue CLI offers two options for testing, my choice was to use Jest. Unfortunately there’s only one function in the application that happens on click. So for the time being unit testing was removed from the project as it was adding unnecessary complexity.

When the project expands to the point where unit testing would be beneficial to the project, it’ll be reinstated.

Next steps

Since the app is based on Vue, it demands to be expanded in the future. My ideas so far are:

  • D3.js graph to visualize how much is each payment
  • more options when it comes to paying off the loan (extra payments, etc.)
  • send page for creating Sinking/FU funds
  • create better UI styling

Link to the project xgebi.github.io/Credit-Card-Calculator/

  1. Fun fact: In the past I’ve worked on React, Angular and AngularJS apps that were already deployed or I helped creating their deployment scripts