---
title: FIRE退休规划网页应用需求说明文档：通过交互式图表和数据可视化实现财务自由之路
created: 2025-10-11
updated: 2025-10-11
type: summary
tags: ["finance", "fire", "notes", "retirement", "telegram"]
external: http://go/ui/posts/1384/
status: inbox
---

当然可以 👍 下面是对你要构建的 **FIRE Retirement Planning Web App（财务自由退休规划网页）** 的完整、专业级需求说明文档（Software Requirements Specification, SRS）。
你可以导出保存，以后继续扩展开发。

---

# 🧭 FIRE Retirement Planning Web App – Requirements Specification

## 1️⃣ Project Overview

An interactive web application to help users plan their **Financial Independence, Retire Early (FIRE)** journey.
The app allows users to input their financial parameters and instantly visualize projections through dynamic tables and charts.

---

## 2️⃣ Core Features

### A. Input Form Section

Users can input or adjust key financial assumptions:

| Field                                     | Type           | Example | Description                          |
| ----------------------------------------- | -------------- | ------- | ------------------------------------ |
| Current Age                               | Number         | 35      | User’s current age                   |
| Target FIRE Age                           | Number         | 50      | Desired retirement age               |
| Current Net Worth (Financial Assets Only) | Number         | 300000  | Excludes property                    |
| Current Net Worth (Including Property)    | Number         | 900000  | Includes home equity                 |
| Annual Income (before tax)                | Number         | 300000  | Total gross income (including RSUs)  |
| Annual Living Expenses                    | Number         | 200000  | Current annual spending level        |
| Savings Rate                              | Range (slider) | 30–50%  | Portion of income saved annually     |
| Investment Return Rate (p.a.)             | Number         | 8%      | Annualized expected portfolio return |
| Inflation Rate                            | Number         | 2.5%    | Expected annual inflation rate       |

All amounts in **AUD**.
A “Calculate” button triggers simulation and visualization.

---

### B. Computation Logic

#### Annual Projection Formula

```
expenses_t = expenses_0 * (1 + inflation)^t
income_t = income_0 * (1 + inflation)^t * 0.98   // salary grows slightly below inflation
savings_t = income_t * savings_rate
assets_financial_(t+1) = (assets_financial_t + savings_t) * (1 + return_rate)
assets_total_(t+1) = (assets_total_t + savings_t) * (1 + return_rate)
fire_target = expenses_0 * 25     // 4% rule
progress_financial = assets_financial / fire_target
progress_total = assets_total / fire_target
```

#### Simulation Range

* From current age to target FIRE age (e.g., 35 → 50)
* Supports multiple scenarios (conservative, base, optimistic)

---

### C. Output Data Table

Auto-generated after calculation:

| Age | Income (AUD) | Expenses (AUD) | Savings (AUD) | Net Worth (Financial) | Net Worth (Total) | FIRE Target | Progress (%) |
| --- | ------------ | -------------- | ------------- | --------------------- | ----------------- | ----------- | ------------ |

---

### D. Visualization (Charts)

Three main charts displayed after computation:

1️⃣ **Net Worth vs FIRE Target**

* Type: Line Chart
* X-axis: Age
* Y-axis: Net Worth (AUD)
* Shows two curves (financial only & including property) vs FIRE goal line.

2️⃣ **FIRE Progress (%)**

* Type: Line Chart
* X-axis: Age
* Y-axis: % of FIRE Target (0–100%)
* Visualizes financial independence progress over time.

3️⃣ **Annual Cash Flow Breakdown**

* Type: Stacked Bar Chart
* X-axis: Age
* Y-axis: Amount (AUD)
* Shows income, expenses, and savings components per year.

---

## 3️⃣ Technical Stack

| Component              | Technology                                       |
| ---------------------- | ------------------------------------------------ |
| **Frontend Framework** | React (functional components, hooks)             |
| **Styling**            | Tailwind CSS                                     |
| **Charts Library**     | Recharts                                         |
| **State Management**   | React useState / useMemo                         |
| **Deployment**         | Static hosting (Vercel / Netlify / GitHub Pages) |
| **Language**           | English (default)                                |
| **Currency**           | AUD                                              |

---

## 4️⃣ UX & Design Guidelines

* Minimalist layout (white background, soft shadows, rounded corners)
* Responsive design for desktop and mobile
* Form fields grouped with labels and units
* Charts update instantly after form submission
* Show summary statistics at top (e.g. “FIRE goal = AUD 5M”, “Achieved by age 48”)

---

## 5️⃣ Future Extensions (optional)

* Monte Carlo simulation for market volatility
* Include tax modeling (Superannuation, RSU vesting)
* Multi-currency support
* Save/load personal scenarios from local storage
* Export charts as PNG or CSV

---

## 6️⃣ Example Flow

1️⃣ User opens webpage
2️⃣ Inputs financial data → clicks “Calculate”
3️⃣ App computes projection & displays table
4️⃣ 3 charts render interactively
5️⃣ User can adjust assumptions → charts auto-refresh

---

✅ **Summary**
This app is a **fully client-side FIRE simulator**, designed for **engineers/investors** who want an elegant, visual, and interactive way to plan early retirement.
Currency is **AUD**, interface is **English**, and all computations happen in-browser.

---

是否希望我把这份需求文档导出成一个 `.md`（Markdown）或 `.pdf` 文件，方便你保存或版本管理？
