Mortgage Calculator: A Dynamic, Interactive with Advance Features

What are you most proud of, and what would you do differently next time?

I'm most proud of the smooth user experience and the dynamic elements in the project. The floating digits effect in the canvas background adds a fun and engaging interactive feature that feels fresh and unique. I'm also really happy with the responsive design, as it looks great on both desktop and mobile devices.

Next time, I would focus on optimizing the state management and refactoring the code to make it more modular. The current code works well, but I think I could improve the organization by breaking down the components into smaller, reusable pieces. For example, handling form validation and error messages could be extracted into separate components to make the code more maintainable.

What challenges did you encounter, and how did you overcome them?

One of the biggest challenges I faced was implementing the floating digits effect using the HTML5 <canvas> element. It was tricky to get the numbers to float randomly and animate smoothly across the screen. To solve this, I researched how canvas animations work and leveraged random number generation for placement, making sure the effect was seamless by controlling the drawing frequency and movement speed. It took several iterations to get it to feel natural.

Another challenge was managing the state for both the basic and advanced modes. Since the form data changes based on the mode, I needed to ensure the correct fields were displayed and that the calculations were handled differently in each mode. To tackle this, I used React's useState and useEffect hooks efficiently to update the form dynamically based on the mode and input changes.

What specific areas of your project would you like help with?

I would appreciate feedback on the structure of my components and how to optimize the use of state management. Currently, I’m passing a lot of data between components, and I'm wondering if there's a more efficient way to handle this, perhaps using Context API or a global state management solution like Redux.

Additionally, I’m curious if there are any best practices for handling canvas animations in React.