Retire Your Risk

Retirement Score Calculator Module

Website & Vue.js/Vuex Component Development, RESTful API requests, testing
img
Project Description

Developed a front end solution for a retirement calculator using a RESTful API request that will return a result that will be rendered to the page in the user’s browser. Functioning much like calculating a credit score, this app will instead return a score based on your savings, stocks and bonds allocations, and expenses as you approach retirement. The entire app is built in Vue.js and all technologies listed below.

The tabbed navigation at the top of the application represents the panels the user navigates through before being able to finally calculate and receive their retirement score. The user cannot advance through the tabs until filling out each tab, starting with simple profile information on th first tab. Information items requested on the first tab include name, age, gender, and projected age of retirement. User can then hit 'Continue' to swipe left through remaining tabs to fill out financial information. These items are required and include estimated savings, stocks and bonds allocations at the time of retirement, pension and social security earnings, living expenses and medical expenses. Most of these items also have the option to account for increase in inflation.

Once the user has filled out all required fields, the final step is to calculate and display their retirement score in the last Summary tab. Much like a credit score, the best, maximum score is 850. This score is calculated by building a JSON object from all values filled in by the user, and sending this object to a third-party API endpoint to calculate the score based on the input values, and then send back a response. Once the response is returned, the data that is received (the RISE score and relevant content) is rendered in the user's browser. Please visit the Alliance site and try out the calculator for yourself. The link directly to the application is provided to the right.

Technology used
  • Vue.js
  • HTML5
  • SCSS/CSS3
  • GSAP Animation
  • Javascript/jQuery/JSON
  • AJAX/Axios
  • RESTful API
Project Details

My roles and responsibilities: Technical consultation, development of single page application module, animation, RESTful API requests with results renderered in consumer-facing page.

visit the site