benjies / visual-dollar

Budget Visualizer. Input income and expense cash flows to reach a conclusion page where the magic of chart.js comes to life.

Visual Dollar : Visualize Your Budget

Built with React using key features:

• HOOKS! : useState, useRef
• Routes & Switches
• Chart.js intergration
• Array manipulation

Built to Visualize Incomes and Expenses.

I created this project to learn more about React and the "reactive mindset" that you need when working with React.

Challenges

• Re-render loops : One of the greatest thing this project taught me was how to manage my re-renders and remove myself from vanilla Javascript thinking and think in a more reactive way. For this, I took extensive time learning the benefits of useRef.
• Chart.js with custom dataset : In hindset, I should have looked at the documentation for how the chart is built. Instead I built all my datasets first, then implemented the chart. However, with some Javascript magic, I was able to reconfigure my dataset to match the chart's request.
• Reactiveness : My biggest downfall was not using React as something that is reactive. I was still using vanilla javascript methods to select DOM elements and conditional functions instead of conditional loading. This project taught me how React should be used and how it should not be.

Planned Updates

• Update UI to deliver a flawless experience across all resolutions
• Provide a more in-depth conclusion page for meaningful data anaylsis

View a live demo here hosted with Netlify.