Visual Debt Avalanche

Maps your fastest route to zero debt. This interactive visualizer uses the avalanche method and a custom logic engine to generate aggressive, personalized payoff strategies in real-time.

Comment

Inspiration

Managing multiple balances, like student and auto loans, often feels overwhelming without a clear visual timeline. The motivation to aggressively pay down these debts and build a solid financial buffer before finishing school in December 2026 to fund post-graduation travel sparked the idea for this project. Standard spreadsheets lack the dynamic, reactive motivation needed to truly stick to an avalanche strategy, so I wanted to build a tool that makes the math visible, actionable, and encouraging.

How I Built It

I built Visual Debt Avalanche using React (Vite) for a lightning-fast development environment and Tailwind CSS for a clean, accessible UI. The core data visualization is powered by Chart.js.

The application relies on a custom logic engine to calculate the mathematical Avalanche Method. It computes the monthly interest for each loan using the standard formula: $$I = B \times \frac{r}{12}$$ where $$B$$ is the current balance and $$r$$ is the annual interest rate.

The custom algorithmic advisor then dynamically sorts the user's debts in descending order by interest rate ($$r_1 \geq r_2 \dots \geq r_n$$) and calculates how applying extra monthly payments to the highest-rate balance minimizes the amount of interest the bank can collect.

Challenges I Ran Into

  • Complex State Management: Managing dynamic arrays of loan objects where users can infinitely add, edit, or delete items required careful synchronization to prevent the Chart.js canvas from crashing.
  • Simulated Asynchronous Logic: Building a front-end logic engine that parses the user's specific inputs and generates custom advice without a backend API required precise use of useRef and useEffect to safely handle non-blocking loading states and cleanup functions.

What I Learned

  • How to effectively prompt coding models (Codex) to generate precise array reduction functions for real-time mathematical parsing.
  • The intricacies of integrating complex React state arrays with third-party visualization libraries like Chart.js.
  • How to streamline continuous deployment for modern web apps using Vercel.

Built With

Share this project:

Updates