Financial Calculator Web Application

In this project, I built the financial calculator meant as a companion to the personal finance book “Mejora Tu Situación.”

The book author presented me with a series of calculators built on MS Excel. The goal was to produce an online calculator that, given the same inputs, would return the same results as the Excel samples.

Most of Excel’s financial formulas have the calculation method obfuscated. That is, you can’t see how it arrives at the result. The Python library NumPy contains 1:1 equivalents to all of Excel’s financial formulas. For this reason, I decided to break up the problem in two:

1. A frontend, that provided the user interface for receiving calculation parameters and presenting the results.

2. An API in Python that performed the calculations using NumPy and returned the results in JSON format to the frontend.

Some additional details about the project below.

  • For the frontend, I used:
    • jQuery (DOM manipulation)
    • Nunjucks (templating)
    • CleaveJS (formatting form inputs)
    • FormValidation (validating form-data)
    • Plotly (charting results)
    • Bulma (styles)
    • Gulp (workflow automation)
  • For the backend, I used:
    • Python, with Flask and NumPy
    • UnitTest (automated testing)
    • Postman (connecting to endpoints during development)
  • For deployment, I used:
    • Docker, NGINX, and Kubernetes (containerization and orchestration)
    • Let’s Encrypt (SSL certificates)

Visit the GitHub repository for the frontend here and for the backend here.

The live application is here.

Input form and summary of results.

Input form and tabulated results.

Input form and plotted results.

Calculator class.

Specific calculators, for instance the CreditCardCalculator, inherit from the Calculator class.

Credit card calculator endpoint.

Well tested: 98% coverage.

Used NunjucksJS templating library for templates and partials.

Used singleton pattern to keep the global scope clean.

Used Gulp to automate frontend development tasks.