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

  1.  Code Structure
  2.  Small and Reusable Components
  3.  Follow Naming Conventions
  4.  Refactor if Possible​

Implementation Challenges

  1. ​ Static Icons on Graph
  2.  Easy Debugging
  3.  Updation of Graph as Form Value Changes
  4.  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 ?

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

Thank You

Contribute at https://github.com/ankitchouhan1020/retirement