Portfolio Studio
Start a project
Functional DemoConsumer Application

Debt Payoff Battle Planner

A visual debt-payoff planner that turns multiple debts into a motivating, game-like elimination plan.

Debt Payoff Battle Planner landing page with headline 'Turn your debt into a plan you can actually win' and a Create my debt freedom plan button over three feature cards.
Landing page

What it solves

People with multiple debts (credit cards, student loans, auto, medical, mortgage) have no simple, calming way to see how much to pay, which debts to attack first, when each will be gone, and how long until they are debt-free. The usual spreadsheet approach is stressful and easy to abandon.

Built for People with multiple debts who want a clear, affordable payoff plan, including couples, young professionals, homeowners, and small business owners.

Overview

Debt Payoff Battle Planner helps users inventory their debts, set an affordable monthly payment, choose which debt to attack first, and see a projected debt-free date, framed as an interactive battle plan rather than a spreadsheet. It answers four questions: how much debt, what payment is affordable, which debt first, and when they will be free. It launches in guest mode with everything saved to local storage, and optionally enables accounts and cross-device sync when a Supabase project is connected.

What this demonstrates

Implements a debt-payoff simulation across multiple debt types and strategies, with a progressive-enhancement architecture: fully functional guest mode in local storage, upgrading to authenticated cross-device sync via Supabase magic-link auth and row-level security only when configured. Ships with accessibility tests (jest-axe) and a monitoring no-op that activates when endpoints are set.

What makes it different

Not just a calculator — a debt freedom planning experience that turns a stressful spreadsheet into an interactive, motivating battle plan.

  • Never shame the userCreate clarity, confidence, and momentum instead.
  • Game-like and calmingMotivating language, tasteful celebrations, no judgment.
  • Affordability built inPlans are grounded in real monthly cash flow, not just math.
  • See the effect instantlyAdjust payment and watch the freedom date move in real time.
  • Compare strategiesAvalanche, snowball, custom, and balanced side by side.

Core capabilities · 10

  • Debt Entry System

    Add debts fast with smart, editable APR defaults by debt type.

  • Strategy Selection

    Avalanche, snowball, custom, and balanced payoff methods compared.

  • Payoff Engine

    Deterministic month-by-month simulation of interest, payments, and rollover.

  • Monthly Payment Slider

    Interactive budget control that updates the freedom date and interest live.

  • Battle Plan Dashboard

    Summary cards, progress bar, debt cards, and a month-by-month timeline.

  • Scenario Builder

    Create, duplicate, and compare plans like refinance, bonus, or reduced income.

  • Affordability Guardrail

    Optional income and expenses feed a stress meter and safe payoff range.

  • Gamification Layer

    Badges, levels, debt-kill counter, and celebration moments.

  • Export & Sharing

    PDF, printable summary, and read-only shareable plan with disclaimer.

  • Account & Persistence

    Guest mode first, with seamless guest-to-account migration.

How it works

  1. Add your debts with smart APR defaults
  2. Choose a payoff strategy
  3. Set a monthly payoff budget with the slider
  4. See debt-free date, total interest, and interest saved instantly
  5. Compare scenarios
  6. Track progress and unlock milestones
  7. Export or share your plan

Key screens

  • Welcome / OnboardingStart planning without an account.
  • Debt Entry
  • Strategy Selection
  • Battle Plan Dashboard
  • Scenario Builder
  • Affordability Guardrail
  • Export / Share Plan

Data model

  • User
  • Debt
  • PayoffScenario
  • ExtraPayment
  • PayoffProjection
  • MonthlyPlanItem
  • Achievement

Screens · 5

Empty battle-plan state prompting to add your first debt, with Add a debt and Try an example buttons and a planning-only disclaimer.
Empty debt state
Add a debt modal with fields for name, type (Credit Card), current balance $5,000, minimum payment $250, and 22% APR.
Add-a-debt form
Battle-plan overview with 0% debt-free progress, Feb 2028 freedom date, and tiles for total debt, monthly payment, total interest, interest saved, and payoff order.
Battle plan overview
Plan controls for monthly payment $313, payoff strategy (Avalanche selected) with pros and trade-offs, extra payments, affordability check, and a debt list.
Payment and strategy controls
Achievements row (2 of 10 unlocked), an Insights panel, and a month-by-month battle timeline showing $313 payments with principal and interest splits.
Achievements and payoff timeline

How it is built

A Next.js application whose planning logic runs client-side with Zustand state. By default data persists to browser local storage; when Supabase URL and anon key are provided it adds email magic-link accounts and syncs planner snapshots to Postgres protected by row-level security. Optional error/analytics endpoints are wired into the CSP.

APIs and services

Supabase
Supabase Auth

Classification

Industries
Finance
Capabilities
Financial ModelingAnalyticsAuthentication
Technologies
Next.jsNode.jsReactTailwind CSSTypeScriptZod

Related work

Life Decision Simulator

Functional Demo

A life-decision simulator that models the long-term money, career, risk, and lifestyle impact of major choices.

Predictive Wealth Engine

Functional Demo

A game-like wealth simulator with 3D dream-life building and long-term net-worth, cash-flow, and freedom projections.

Tax Burden Simulator

Functional Demo

A tax-planning simulator that estimates federal, state, and self-employment burden, surfaces deductions, and builds CPA-ready reports.

Building something with similar Financial Modeling, Analytics, Authentication functionality?

Start a project and reference this one — the conversation begins with what you have already seen.

Start a project