DebtBuster

DebtBuster was born from a very real place, seeing how easily debt can become overwhelming for students and young professionals. I wanted to create something that didn’t just track money but helped & motivate people to deal with their debt step by step, in a friendly, human way.

That’s where the idea started. But as I kept building, it became more than just a dashboard. I started asking: What if it could also give you a plan? What if it could talk to you?

What It Does

DebtBuster is a clean, dashboard-style web app where users can track their debts visually and stay motivated through small, daily nudges. Here’s what it features: -Circular Progress Ring that shows how much debt you’ve paid off—clear and visual. -Income & Allocation Section that lets you track how much of your income is dedicated to repayments. -Smart Tips Area with a dynamic tip refresher, suggesting realistic saving hacks (like skipping coffee runs). -AI-Powered Plan Generator that outlines custom repayment strategies. -Interactive Tabs for switching between progress, your plan. -Debt Breakdown Cards showing your loans, progress bars, and quick payment actions. -Built-In Chatbot in the corner to assist with questions, guidance, or even motivation, like a virtual coach.

All of it was designed to be simple, soothing, and slightly playful. I avoided overly “financial” language on purpose.

How I Built It

The frontend is built using React Framework , Next JS, with all UI crafted using custom CSS (no Bootstrap or external design systems). The layout combines CSS Grid and Flexbox to stay responsive and adaptive. Using OpenAi API for best plans generation. Used Visual studio copilot's autocompletion to generate code faster.

The graph in the “Progress” section was created using canvas tag and scripting, allowing real-time trend visualization for debt over time.

The AI logic (for plan generation and chat) is modular, and while currently mocked, it’s structured in a way that allows easy plug-in of real AI or API-powered logic.

Challenges I Faced -Getting the circular progress ring to align perfectly with animation and percentage values was trickier than expected. -State management for dynamic tips and chat pop-ups needed careful handling to avoid clashing UI behaviors. -Making the entire layout feel cohesive was a visual challenge. I relied on design inspiration from Figma but ended up hand-tuning many components for responsiveness and clarity. - One of the biggest challenges was building AI chatbox that learns from past conversations to better guide users. It connects directly with the Your Plan section, generating smart, personalized repayment strategies based on user data and chat history.

What I Learned

This project deepened my understanding of React hooks, dynamic UI rendering, component styling, and how to handle layout logic in real-world scenarios.

But more than that, it taught me how to translate an idea into an experience. I practiced UI/UX thinking at every step, and I learned how to iterate and improve until it felt right.