Financial Calculator Made Simple

The Retirement Project

Who I am ?

Author

Ankit Chouhan

B.Tech. , MANIT Bhopal

Intern, Web Team, Groww

About The Project

This project encourages people to get financial freedom showing their future estimated savings in a beautiful graphical presentation.

We take some inputs from the user like their present salary, how much they want to save and approximate investment returns. Based on the input we predict the graphical output.

App

NavBar

Home

NotFound

Projects

RetireCal

Graph

Form

Model

Project Structure

File Structure

Challenges

Code Structure
Small and Reusable Components
Follow Naming Conventions
Refactor if Possible

Implementation Challenges

Static Icons on Graph
Easy Debugging
Updation of Graph as Form Value Changes
Implementation of Debouncing

Static Icons on Graph

const dataLabels = {
      retirement: {
        useHTML: true,
        //overflow: "allow",
        formatter() {
          return `<div style="
                            -webkit-border-top-left-radius: 0;
                            -webkit-border-top-right-radius: 35px;
                            -webkit-border-bottom-right-radius: 35px;
                            -webkit-border-bottom-left-radius: 35px;
                            -webkit-transform:rotate(-135deg);
                            box-shadow: 1px 1px 7px #1a1a1a;">
                    <img style="height: 30px;
                          width:30px;
                          margin:4px;
                          -webkit-transform:rotate(135deg);"
                          src="https://img.icons8.com/office/50/000000/old-man-skin-type-6.png"/>
                  </div>`;
        },
      }

Easy Debugging

Button.defaultProps = {
  type: "primary",
};

Button.propTypes = {
  onClick: PropTypes.func.isRequired,
  label: PropTypes.string.isRequired,
  type: PropTypes.string,
};

Updation of Graph as Form Value Changes

// Buggy Code
handleChange = (field, value) => {
    const data = cloneDeep(this.state.input);
    data[field].value = parseInt(value);
    this.setState({ input: data });
    this.updateOutput();
  };

// Do not always expect that the state has changed after calling setState().

// Fixed Code
handleChange = (field, value) => {
   const data = cloneDeep(this.state.input);
   data[field].value = parseInt(value);
   this.setState({ input: data }, this.updateOutput);
};

Implementation of Debouncing

componentWillMount() {
    this.handleDebouncedOutput = debounce(this.updateOutput, 400);
  }

So What's Next ?

Implementing more finance-based calculator with awesome visualization tools
Developing login/register feature for Premium Projects