Skip to content

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

Notifications You must be signed in to change notification settings

benjies/visual-dollar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Visual Dollar : Visualize Your Budget

Imgur

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.

About

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

Topics

Resources

Stars

Watchers

Forks