/financial-calculator-frontend

This project contains the frontend for a financial calculator. The project is coded in JavaScript, using Gulp, jQuery, Nunjuck, Cleave, and FormValidation.

Primary LanguageJavaScriptMIT LicenseMIT

Welcome to financial calculator frontend 👋

Documentation Maintenance License: MIT Twitter: JavierFeliuA

About

This project contains the frontend for a financial calculator. I coded this project in JavaScript, using jQuery (for DOM manipulation), Nunjuck (for templating), Cleave (for form field formatting), and FormValidation (for validating inputs). For styling, I used Bulma.

In conjunction with the Financial Calculator Backend, this project provides a companion calculator for the personal finance book "Mejora Tu Situación."

Design Considerations

For this project, 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 into two:

  1. (This repository) A frontend would provide a user interface for receiving calculation parameters and presenting the results.
  2. (The backend repository) An API in Python would receive the calculation parameters from the frontend and return the results calculated with NumPy.

Important links

  1. You can take a look at the backend code here.
  2. Find the live calculator here.
  3. This project runs in a Kubernetes cluster at DigitalOcean. For information on how to create your cluster visit my do-managed-kubernetes repository.

Install

To use the project in your development machine, clone it, and go to the project's root:

git clone https://github.com/wanderindev/financial-calculator-frontend.git
cd financial-calculator-frontend

From the project's root, install the dependencies:

npm install

Codebase

The src folder contains the codebase:

  • All JavaScript is in the js folder.
  • The Bulma library and custom styles are in the sass folder.
  • All Nunjucks templates are in the templates folder. This folder also contains the file data.json with structured information on how to render the calculator forms, the results, the result tables, and the charts.
  • The project uses Gulp for workflow automation. You can find the Gulp tasks in gulpfile.js.

The source files are compiled to the dist folder and, from there, they are packaged into a Docker image and deployed to a Kubernetes cluster.

Usage

During develpment use:

gulp watch

to compile the codebase and serve it to your browser.

Edit the source files as needed. The watch task will refresh your browser everytime a change is detected in the source.

Deployment

To deploy, you need to build the Docker image for the project and push it to your Docker Hub account:

gulp
docker build -t wanderindev/fc-frontend .
docker push wanderindev/fc-frontend

Replace wanderindev above (my Docker Hub account id) with your Docker Hub id.

Then, from the root of do-kubernetes project project run:

kubectl delete deployment calcfina-web
kubectl apply -f ./sites/calcfina-web.yml

to create two pods running the frontend and a service exposing them at port 80.

For more information on deploying to a Kubernetes cluster, visit my do-managed-kubernetes repository.

Author

👤 Javier Feliu

Show your support

Give a ⭐️ if this project helped you!

📝 License

This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator