DebtRun

Inspiration

Modern fintech has made spending frictionless. With "Buy Now, Pay Later" (BNPL) plans and one-click credit cards, students are constantly targeted by aggressive debt mechanics. Traditional financial literacy tools fail because dry textbooks and boring quizzes lack engagement.

We built DebtRun as a financial "flight simulator"—a safe, gamified sandbox where students can navigate everyday temptations and "crash" their budget without losing real money.

What it does

DebtRun is a web-based credit "flight simulator" that replaces boring personal finance quizzes with a live, 12-month interactive survival game.Simulates Real Dilemmas: Users navigate a 12-month timeline filled with modern financial scenarios, balancing emergency "Needs" (medical bills, car repairs) with tempting "Wants" (sneaker drops, subscription packages).Tracks Modern Payment Methods: For every scenario, the user chooses how to respond using 4 real-world options: Cash, Credit Card, Buy Now, Pay Later (BNPL), or Avoid/Skip Temptation.Imposes Realistic Penalties: Carrying credit card debt automatically incurs a monthly compounding $22\%$ APR interest penalty. If a user's credit utilization crosses $30\%$, their simulated Credit Score drops instantly.Delivers Live Feedback: A built-in rule engine acts as an instant AI Financial Coach, analyzing the user's financial metrics after every single move to offer sharp, strategic advice.Visualizes the Impact: A live Chart.js line graph plots their Cash vs. Debt timeline in real time, showing them exactly how fast compounding interest and micro-loans can destroy a budget.Grades Performance: At Month 12, the simulation freezes, saves their history in a structured Financial Journal ledger, and awards them a custom Financial Personality Grade based on their choices.

How we built it

DebtRun is a lightweight, fully responsive web app built entirely on the client side for a seamless experience:

Frontend: Clean HTML5, structured Tailwind CSS for a premium dark-mode theme, and vanilla JavaScript for the state engine.

Data Visualization: Integrated Chart.js to plot a dynamic, real-time timeline tracking Cash vs. Debt across a 12-month loop.

AI Financial Coach: A rule-based feedback system that instantly analyzes the user's financial metrics after every choice and delivers context-aware advice.

Challenges we ran into

Balancing the Game Stakes: Initially, when we introduced the "Avoid / Skip Temptation" button, playtesters could simply skip every single event to finish the game with perfect metrics. This completely broke the challenge. We resolved this by splitting the scenarios into two strict categories: Wants and Needs. Skipping a "Want" rewards the user's impulse control, while trying to skip an emergency "Need" (like a medical bill) triggers an even harsher delayed financial penalty.

Simulating BNPL Debt Accumulation: Unlike traditional credit cards, "Buy Now, Pay Later" installment plans don't charge immediate interest but quietly lock up future income. It was challenging to track multiple overlapping micro-loans simultaneously on the client side. We solved this by creating a dedicated installment tracking array in JavaScript that automatically deducts 25% of the remaining balances from the user’s cash pool at the start of each subsequent month.

Preventing Dashboard Latency: Because the application updates a live chart, an AI feedback feed, a data table, and five distinct financial metrics all on a single button click, we initially ran into state-synchronization lag. We overcame this by centralizing all state changes into a single global update function that forces a clean, simultaneous re-render of the DOM components and Chart.js instances instantly.

Accomplishments that we're proud of

Here is a strong, confident "Accomplishments that we're proud of" section. It focuses on the slick user experience, the educational impact, and the fact that you built a highly optimized product that works flawlessly.

---

🏆 Accomplishments that we're proud of

*Building a True "Zero-Lag" Dashboard: We are incredibly proud of how fast and responsive the application feels. By writing optimized, vanilla JavaScript to handle the math and state updates entirely on the client side, every single button click instantly and simultaneously syncs the charts, data ledger, AI feed, and financial metrics with zero loading delay. *Creating a Realistic Financial Engine: Translating abstract, real-world economic concepts—like monthly compounding $22\%$ APR interest and dynamic credit utilization thresholds—into an accurate, working game loop was a major win. The math behaves exactly like a real-world bank account, creating an authentic learning experience. *Frictionless, No-Setup Deployment: We successfully managed to build a feature-rich, deeply interactive educational game without relying on heavy backend databases, external servers, or API keys. Anyone can download our three core files (index.html, style.css, app.js), open it in any web browser, and play the game completely offline with zero installation friction. *An Engaging, High-Fidelity Theme: We designed a custom, cohesive dark-mode UI from scratch using a professional slate and zinc color palette. The neon emerald accents for cash assets and neon amber accents for liabilities give the app an immersive, premium "simulator" aesthetic that instantly engages younger users.

What we learned

Here is a short, impactful "What we learned" section that highlights your technical growth and design insights without sounding over-engineered.

---

🧠 What we learned

*The Power of Interactive Learning:We learned that the most effective way to teach complex topics like personal finance is through immediate, visual feedback. Watching a debt graph spike in real time after a single bad choice teaches a student more about compounding interest than reading a ten-page textbook chapter ever could. *Efficient Client-Side State Management:This project forced us to master synchronous data flow in pure JavaScript. We learned how to manage multiple shifting variables—like tracking independent, overlapping BNPL payments alongside credit card utilization ratios—and keep them perfectly mapped to UI components without relying on a bulky backend framework. *Designing for Behavioral Outcomes:We discovered how difficult it is to balance a gamified system so that it mirrors human psychology. Designing the logic for the "Avoid" button taught us how to programmatically separate impulsive "Wants" from unavoidable "Needs," forcing us to think like behavioral economists to build an authentic simulator.

What's next for DebtRun

Here is a forward-thinking "What's next for DebtRun" section. It keeps things realistic and scalable, showing the judges you have a clear vision for how this prototype could grow into a massive real-world platform.

---

🚀 What's next for DebtRun

*Real-World Banking & API Integration:Our primary goal is to integrate safe, read-only open banking APIs. This would allow students to securely sync their real-world checking and credit card accounts to run real-time, parallel "shadow simulations" based on their actual spending habits. *Expanded Dynamic Scenario Engine: We plan to scale the current 12-month loop into a multi-year career and lifestyle simulation. This will introduce long-term macroeconomic variables such as student loan amortization schedules, variable-rate housing mortgages, fluctuating inflation rates, and retirement investment portfolios ($401k/\text{Roth IRA}$). *Multiplayer Classroom Mode:We aim to build a teacher/instructor dashboard utilizing WebSockets. This will allow educators to host live, synchronized group simulations where a whole classroom can compete in real time to see who can achieve the highest credit score and wealth accumulation. *Native Cross-Platform Mobile Apps: To meet students where they spend most of their time, we plan to port the web application into a native mobile app using React Native, incorporating daily push notifications that alert users to sudden mock "financial emergencies" to test their on-the-go decision-making.

Built With

• and
• and-designing-the-modern
• and-powers-the-simulated-rule-based-ai-coach.-chart.js-(via-cdn):-utilized-to-render-and-dynamically-update-the-live-line-graph-tracking-the-user's-cash-vs.-debt-timeline-in-real-time.-font-awesome-(via-cdn):-for-clean
• and-responsive-ui-architecture.-tailwind-css-(via-cdn):-used-for-rapid-utility-styling
• crisp
• dashboard
• debtrun-was-intentionally-built-using-a-lean
• financial
• fluid-spacing
• gameplay
• handles-the-dynamic-financial-calculation-logic
• high-performance-stack-to-ensure-it-runs-completely-client-side-without-any-server-lag-or-deployment-overhead:-html5:-for-the-core-layout
• premium-dark-mode-theme.-vanilla-javascript-(es6+):-the-backbone-of-the-app.-it-manages-the-entire-12-month-game-state-loop
• recognizable
• structured-dashboard-grid
• tracks-the-overlapping-bnpl-payment-arrays