Building MoneyMath: A Journey into Phased Retirement Planning

Retirement planning is often treated as a simple math problem: save $X, withdraw Y% every year, and hope it lasts. But when I started thinking seriously about my own financial future, that framing felt off. Real life isn't linear — our needs, energy levels, and spending habits change significantly as we age. That realization is what led me to build MoneyMath.

Why I built it

The primary motivation was to move beyond the "one-size-fits-all" retirement calculator. Most tools I tried assumed I'd spend the same inflation-adjusted amount from the day I retire until the day I die. But retirement typically follows three distinct phases, and I wanted a tool that actually modeled them:

• The Go-Go Years: Early retirement — travel, hobbies, higher activity and spending.
• The Slow-Go Years: A natural tapering of activity and discretionary expenses.
• The No-Go Years: Later life, where spending shifts from lifestyle to healthcare and support.

So I built PhaseWise, MoneyMath's flagship tool, specifically to model these transitions. The goal was a more honest picture of what my financial future actually looks like — not just a single line on a graph.

The technical foundation

I built MoneyMath as a modern full-stack web application with a focus on performance, type safety, and user experience. Here's what's under the hood:

• Frontend: React with TypeScript for a robust, component-based UI
• Build tool: Vite for fast development and optimized production builds
• Styling: Tailwind CSS for a clean, responsive design
• Data visualization: Recharts to turn complex financial data into interactive charts
• Backend & auth: Supabase for secure user authentication and cloud data persistence
• AI integration: Google Gemini API for personalized financial insights via an "AI Advisor"
• Reporting: jsPDF and html2canvas for generating downloadable PDF financial reports

Architecture and how the pieces fit together

I wanted a clean separation between the UI and the financial logic, so I structured the app around a few key components:

1. The calculation engine (calculationService.ts)

This is the heart of the app. It handles compound interest, inflation adjustment to maintain purchasing power across decades, phase-based decumulation that dynamically switches withdrawal rates as you move through retirement phases, and solvency analysis — determining exactly when a portfolio might be depleted and calculating the shortfall or surplus. Everything else in the app is downstream of this.

2. Dynamic phase management (PhaseManager.tsx)

The UI lets users add, remove, and edit retirement phases on the fly. Each phase captures a name, an age range, and a monthly spending target. I built in real-time validation to ensure there are no gaps in the retirement timeline — a detail that matters a lot when you're modeling decades of your life.

3. The dashboard (DashboardPage.tsx)

The dashboard acts as the command center. It aggregates inputs from the user, passes them to the calculation engine, and distributes results to three places:

• Visualization: Interactive area and bar charts showing portfolio balance over time and withdrawal structures by phase
• Withdrawal table: A year-by-year breakdown of the portfolio's health
• AI Advisor: A component that sends the structured results to the Gemini API to generate personalized strategic advice

4. Secure persistence (AuthContext.tsx)

By integrating Supabase, I let users save their complex scenarios securely in the cloud. The AuthContext manages session state throughout the app, ensuring data is only accessible to the rightful owner. The core calculator works without an account — sign-up is only required if you want to save your scenarios.

What I learned

A few things stood out during this build. Defining strict TypeScript interfaces for FinancialInputs, RetirementPhase, and CalculationResult upfront saved me from a whole class of bugs that would have been very hard to track down inside complex math operations. When you're compounding numbers across 30-year time horizons, a type mismatch can produce results that look plausible but are completely wrong.

I also found that integrating an AI layer isn't as complex as it sounds when you already have well-structured output from a calculation engine. Passing a clean CalculationResult object to the Gemini API and asking it to comment on the user's financial position produced surprisingly useful and contextually accurate advice.

Finally, building something I'd actually use myself made every design decision feel more concrete. When you're your own first user, there's no ambiguity about what "good" means.

The best financial tools don't give you answers — they help you ask better questions.

What's next

MoneyMath is still actively evolving. The retirement calculator is the first tool, but the vision is a broader personal finance platform — covering savings rate analysis, debt payoff modeling, and scenario comparison. If there's a tool you'd find useful, I'd genuinely love to hear about it.

---

You can try MoneyMath at moneymath.ajtech.dev. It's free to use and doesn't require an account for the core calculator.