FIRE Dashboard

A client-side FIRE (Financial Independence, Retire Early) planning dashboard built with React. No backend, no accounts — all data stays in your browser.

Enter your accounts, income sources, and retirement spending phases, and the dashboard projects your portfolio from today through life expectancy with year-by-year accumulation and drawdown simulations.

Features

Core Planning

• Three account types: cash (emergency buffer, never drawn from), investment (taxable, primary drawdown source), and retirement (locked until access age, e.g. 59.5 for US 401k/IRA)
• Life phases with per-phase monthly spending, one-time lump sums, and recoups
• Multiple income sources with optional inflation adjustment
• Real-return calculation model — all figures in today's dollars
• Die with Zero mode — optimise for spending down to $0 by life expectancy, with age-based withdrawal rate targets that rise as remaining years decrease

Dashboard

• Six metric cards: FIRE Number with progress ring, Years to FIRE, Coast FIRE Age, Projected Portfolio at Retirement, Surplus/Deficit, Depletion Age, Peak Withdrawal Rate
• Metrics adapt for Die with Zero mode — surplus reframed as unspent potential, depletion near life expectancy shown as on-target, projected coverage replaces current-balance progress
• Portfolio balance chart (stacked area: cash / investment / retirement)
• Withdrawal rate chart with SWR danger zones (or DWZ target curve in Die with Zero mode)
• Phase spending breakdown chart
• Risk analysis panel with auto-generated warnings (critical, warning, info, positive) — DWZ-aware
• Toggle between today's dollars and nominal (inflation-adjusted) values

Integrations

• Lunch Money — sync live account balances from Lunch Money via API
• Gemini AI — plain-English plan narrative and conversational what-if Q&A powered by Google's Gemini API

Data Management

• JSON import/export for backup and portability
• All data persisted in browser localStorage
• No server, no tracking, no external data transmission (except explicit API calls to Lunch Money / Gemini when configured)

Getting Started

Prerequisites

• Node.js 22+ (or any recent LTS)
• npm

Install and Run

git clone https://github.com/leonslost/fire.git
cd fire
npm install
npm run dev

The dev server starts at http://localhost:5173.

Build

# Standard build → dist/
npm run build

# Single-file build (all JS/CSS inlined into one HTML file) → dist-single/
npm run build:single

# Both builds
npm run build:all

The single-file build produces a portable dist-single/index.html that can be opened directly in a browser without a server.

Docker

docker compose up -d

The app is served at http://localhost:8080 via Nginx.

How It Works

Calculation Model

All projections use a real-return approach: growth rates are reduced by the inflation rate so that all dollar figures remain in today's purchasing power. Spending is never inflated year-over-year.

• Accumulation (current age to retirement): each account grows independently at its real return rate, with monthly and annual contributions applied
• Drawdown (retirement to life expectancy): spending is deducted from the portfolio each year. Investment accounts are drawn first, retirement accounts only after the access age. Cash accounts are never touched
• FIRE Number: found via binary search — the drawdown portfolio value at retirement that depletes to exactly $0 at life expectancy
• Withdrawal Rate: annual withdrawal divided by start-of-year portfolio. The "sustained" rate excludes one-time lump sums (this is what SWR theory measures)

Die with Zero Mode

When enabled in Profile settings, the dashboard shifts from a "preserve capital" mindset to a "maximise lifetime spending" mindset (inspired by Bill Perkins' Die with Zero):

• Withdrawal rate targets use 1 / remaining years (floored at your configured SWR). This means ~4% in early retirement, rising to ~10% at 10 years remaining, ~20% at 5 years. The withdrawal rate chart shows this as a teal DWZ target curve
• Surplus is unspent potential — flagged as info rather than a positive. The dashboard suggests increasing spending when you're on track to leave money behind
• Portfolio depletion near life expectancy is on-target — depleting within 2 years of life expectancy is a positive outcome, not a critical warning
• Metrics reframe: when projected portfolio at retirement covers the FIRE number, the dashboard shows "On track" with projected coverage percentage rather than misleading current-balance progress
• Early over-withdrawal is still risky — warnings still fire if withdrawal rates exceed the DWZ target in the first 60% of retirement, because sequence-of-returns risk doesn't care about your philosophy

Data Storage

Four keys in browser localStorage:

• fire:profile — personal info, assumptions, API keys
• fire:accounts — account definitions with balances and growth rates
• fire:income — retirement income sources
• fire:phases — life phase spending plan

Changes are auto-saved with a 500ms debounce. No data leaves the browser unless you explicitly use the Lunch Money sync or Gemini AI features.

Integrations

Lunch Money

Sync account balances from Lunch Money, a personal finance app. Add your API key in Profile settings.

• Fetches both manual and Plaid-linked accounts
• Auto-maps account types (depository, brokerage, etc.) to the three FIRE account types
• Detects retirement accounts by name keywords (401k, IRA, Roth, pension, superannuation, etc.)
• Only updates balances and names — contribution rates and growth rates remain user-configured

Gemini AI

Add a Gemini API key in Profile settings to enable AI-powered analysis. Get a free key at Google AI Studio.

Plan Narrative: generates a plain-English summary of your FIRE trajectory — where you stand, biggest risks, highest-impact changes, and what's going well. References your actual account names, phase names, and numbers.

What-If Q&A: ask natural language questions about your plan ("What if I delay retirement by 2 years?", "What if my investments only return 5%?"). The AI reasons about the financial model and tells you which parameters to adjust in the dashboard.

Two models available:

• gemini-3-flash-preview — fast and cheap, recommended for most use
• gemini-3.1-pro-preview — deeper reasoning for complex what-if scenarios

Tech Stack

• React 19
• Vite 8
• Tailwind CSS 4
• Recharts 3
• Lucide React (icons)
• No backend, no database, no state management library

Project Structure

src/
  App.jsx                  # Root component, state management, tab routing
  main.jsx                 # React entry point
  index.css                # Global styles
  calculations.js          # Pure FIRE calculation engine (~1000 lines)
  storage.js               # Browser storage abstraction + migrations
  defaults.js              # Default data shapes and factory functions
  gemini.js                # Gemini AI API integration
  lunchMoney.js            # Lunch Money API integration
  components/
    ProfileForm.jsx        # Profile + API keys form
    AccountsTable.jsx      # Account CRUD table + Lunch Money sync
    IncomeTable.jsx        # Income source table
    PhasesEditor.jsx       # Phase editor with drag-to-reorder + timeline
    MetricsCards.jsx       # Six metric cards with progress ring
    WarningsPanel.jsx      # Collapsible risk analysis panel
    InsightsPanel.jsx      # AI insights + chat panel
    PortfolioChart.jsx     # Stacked area portfolio chart
    WithdrawalRateChart.jsx # Withdrawal rate line chart
    PhaseSpendingChart.jsx # Phase cost bar chart
    ImportExportModal.jsx  # JSON backup/restore modal

Limitations

This planner intentionally does not model:

• Taxes
• Healthcare costs
• Social Security / state pension calculations

Users should bake all costs into their per-phase monthly spending figures.