Compare commits
21 Commits
extra-seo-
...
886afab1ef
Author | SHA1 | Date | |
---|---|---|---|
886afab1ef | |||
0f6cd57f3d | |||
ffb8e8d506 | |||
c3867ccbd4 | |||
6bc7be6336 | |||
26d2ec68b8 | |||
5e0ff2891a | |||
1a0428a8e0 | |||
9267018d06 | |||
acec849428 | |||
1e9f2cbc2d | |||
9c460bab22 | |||
4e7705ce53 | |||
d5962bbf9e | |||
64669e5f58 | |||
f05f3fe37c | |||
896b0bf063 | |||
716bcc6fef | |||
31415c10a2 | |||
fe03807739 | |||
30d27a212e |
@@ -1,31 +0,0 @@
|
||||
name: Lint
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
push:
|
||||
branches:
|
||||
- "**" # matches every branch
|
||||
|
||||
jobs:
|
||||
lint_and_typecheck:
|
||||
name: Lint and Typecheck
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
|
||||
|
||||
- name: Install pnpm
|
||||
uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
|
||||
with:
|
||||
node-version: 22
|
||||
cache: "pnpm"
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm install
|
||||
|
||||
- name: Run check
|
||||
run: pnpm run check
|
109
README.md
109
README.md
@@ -1,108 +1,3 @@
|
||||

|
||||
# fire
|
||||
|
||||
# InvestingFIRE 🔥 — The #1 Interactive FIRE Calculator
|
||||
|
||||
**InvestingFIRE** is a responsive web application for calculating your path to Financial Independence and Early Retirement (FIRE). It features a year-by-year projection engine that simulates both accumulation (savings and investment growth) and retirement (withdrawals) phases, allowing users to:
|
||||
|
||||
- Input starting capital, monthly savings, expected annual growth rate, inflation rate, current age, desired retirement age, life expectancy, and desired monthly retirement allowance.
|
||||
- View a dynamic chart displaying projected portfolio balance and monthly allowance over time.
|
||||
- Instantly see their estimated “FIRE number” (required capital at retirement), how long their capital will last, and compare results to the “4% rule.”
|
||||
- Adjust assumptions live, with all calculations and visualizations updating automatically.
|
||||
- Access explanatory content about FIRE methodology, key variables, and additional community resources, all on a single, consolidated page.
|
||||
|
||||
The project’s code is structured using React/Next.js with TypeScript, focusing on user experience, modern UI components, and clarity of financial assumptions.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Features at a Glance
|
||||
|
||||
- **⚡️ Real-Time Projections:** Every field updates the chart _as you type_. Experiment with savings, growth rates, inflation, or retirement age and see your future instantly.
|
||||
- **📈 Interactive Chart:** Dual-area plots for portfolio value and future monthly spending, plus reference lines for FIRE milestones and “4% rule” legends.
|
||||
- **🧠 Education Baked In:** Contextual tooltips, deep-dive sections on how FIRE works, FAQs, and must-read resources included.
|
||||
- **🔎 Detailed Methodology:** Not just a 25x rule — runs a full, year-by-year simulation with inflation-adjusted withdrawals and optional 4%-rule overlays.
|
||||
- **👌 Modern UX:** Typing, sliding, or clicking feels _good_. Responsive on all devices.
|
||||
|
||||
---
|
||||
|
||||
## 🧰 How It Works
|
||||
|
||||
The calculator models your FIRE journey in two phases:
|
||||
|
||||
1. **Accumulation:**
|
||||
- Your starting capital is grown by your expected CAGR (~7% by default).
|
||||
- Monthly savings are added for each year until retirement.
|
||||
- Every variable can be adjusted live (capital, savings, age, growth, inflation, spending, target retirement).
|
||||
|
||||
2. **Retirement:**
|
||||
- Your balance continues to grow by CAGR.
|
||||
- Each year, an inflation-adjusted monthly allowance is withdrawn.
|
||||
- The simulation runs until your selected life expectancy, showing the possibility of portfolio depletion.
|
||||
|
||||
**Key Outputs:**
|
||||
|
||||
- 🔥 “FIRE Number”: Portfolio value at your defined retirement age
|
||||
- 📊 Interactive projection chart: See how your nest egg and withdrawals evolve over time
|
||||
- 4️⃣ “4% Rule” overlays: Compare dynamic results to classic rule-of-thumb
|
||||
|
||||
---
|
||||
|
||||
## 🌟 Try It For Yourself
|
||||
|
||||
To run locally:
|
||||
|
||||
1. **Clone the repo**
|
||||
```bash
|
||||
git clone https://git.schulze.network/schulze/fire.git
|
||||
cd fire
|
||||
```
|
||||
2. **Install dependencies**
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
3. **Run the app**
|
||||
```bash
|
||||
pnpm run dev
|
||||
```
|
||||
4. Visit [http://localhost:3000](http://localhost:3000) and unleash the fire.
|
||||
|
||||
Deployed version: [https://investingfire.com](https://investingfire.com)
|
||||
|
||||
---
|
||||
|
||||
## ✏️ Inputs & Variables
|
||||
|
||||
- **Starting Capital** — How much you’ve already invested
|
||||
- **Monthly Savings** — What you’ll add each month
|
||||
- **Current Age & Retirement Age** — Your FI timeline
|
||||
- **Life Expectancy** — How long do you want income to last?
|
||||
- **Expected Growth Rate (CAGR)** — Portfolio annual % return, before inflation
|
||||
- **Inflation Rate** — Cost of living increases
|
||||
- **Desired Monthly Allowance** — Your lifestyle, today’s dollars
|
||||
|
||||
As you adjust these, all projections update instantly _without needing to hit “Calculate.”_
|
||||
|
||||
Try many “what ifs” fast.
|
||||
|
||||
---
|
||||
|
||||
## 👩💻 Contributing
|
||||
|
||||
Pull requests are welcome! Open issues for bugs, new features, or debate about safe withdrawal rates and tax assumptions.
|
||||
|
||||
---
|
||||
|
||||
## 📄 License
|
||||
|
||||
[GPL-3.0](./LICENSE)
|
||||
|
||||
---
|
||||
|
||||
## 🥇 Why Use InvestingFIRE?
|
||||
|
||||
- You want the truth — not just a 4% fantasy.
|
||||
- You want to learn, not just punch in numbers.
|
||||
- You want clarity, speed, and modern UI.
|
||||
- You want to show your friends the best FIRE tool on the web.
|
||||
|
||||
Enjoy the _rocket ride_ to financial independence.
|
||||
**InvestingFIRE — Know your number. Change your future.**
|
||||
FIRE calculator
|
7266
package-lock.json
generated
Normal file
7266
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
46
package.json
46
package.json
@@ -6,52 +6,52 @@
|
||||
"scripts": {
|
||||
"build": "next build",
|
||||
"check": "next lint && tsc --noEmit",
|
||||
"dev": "next dev --turbopack",
|
||||
"dev": "next dev --turbo",
|
||||
"format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
|
||||
"format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
|
||||
"lint": "next lint",
|
||||
"lint:fix": "next lint --fix",
|
||||
"preview": "next build && next start",
|
||||
"start": "next start"
|
||||
"start": "next start",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^5.0.1",
|
||||
"@radix-ui/react-accordion": "^1.2.8",
|
||||
"@radix-ui/react-label": "^2.1.4",
|
||||
"@radix-ui/react-select": "^2.2.2",
|
||||
"@radix-ui/react-slider": "^1.3.2",
|
||||
"@radix-ui/react-slot": "^1.2.0",
|
||||
"@t3-oss/env-nextjs": "^0.13.0",
|
||||
"@t3-oss/env-nextjs": "^0.12.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.539.0",
|
||||
"next": "^15.4.1",
|
||||
"lucide-react": "^0.503.0",
|
||||
"next": "^15.2.3",
|
||||
"next-plausible": "^3.12.4",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react-hook-form": "^7.56.1",
|
||||
"recharts": "^2.15.3",
|
||||
"tailwind-merge": "^3.2.0",
|
||||
"zod": "^4.0.0"
|
||||
"zod": "^3.24.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "3.3.1",
|
||||
"@tailwindcss/postcss": "4.1.11",
|
||||
"@types/node": "22.17.1",
|
||||
"@types/react": "19.1.8",
|
||||
"@types/react-dom": "19.1.6",
|
||||
"eslint": "9.33.0",
|
||||
"eslint-config-next": "15.4.4",
|
||||
"eslint-plugin-react-hooks": "5.2.0",
|
||||
"postcss": "8.5.6",
|
||||
"prettier": "3.6.2",
|
||||
"prettier-plugin-tailwindcss": "0.6.14",
|
||||
"tailwindcss": "4.1.11",
|
||||
"tw-animate-css": "1.3.6",
|
||||
"typescript": "5.9.2",
|
||||
"typescript-eslint": "8.39.0"
|
||||
"@eslint/eslintrc": "^3.3.1",
|
||||
"@tailwindcss/postcss": "^4.0.15",
|
||||
"@types/node": "^20.14.10",
|
||||
"@types/react": "^19.0.0",
|
||||
"@types/react-dom": "^19.0.0",
|
||||
"eslint": "^9.23.0",
|
||||
"eslint-config-next": "^15.2.3",
|
||||
"postcss": "^8.5.3",
|
||||
"prettier": "^3.5.3",
|
||||
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||
"tailwindcss": "^4.0.15",
|
||||
"tw-animate-css": "^1.2.8",
|
||||
"typescript": "^5.8.2",
|
||||
"typescript-eslint": "^8.27.0"
|
||||
},
|
||||
"ct3aMetadata": {
|
||||
"initVersion": "7.39.3"
|
||||
},
|
||||
"packageManager": "pnpm@10.14.0"
|
||||
"packageManager": "npm@11.2.0"
|
||||
}
|
||||
|
5184
pnpm-lock.yaml
generated
5184
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,6 +0,0 @@
|
||||
ignoredBuiltDependencies:
|
||||
- unrs-resolver
|
||||
|
||||
onlyBuiltDependencies:
|
||||
- '@tailwindcss/oxide'
|
||||
- sharp
|
@@ -1 +0,0 @@
|
||||
wgu5fuk8d5j5wp3pjtta9vrw8d9by9qk
|
@@ -1,11 +0,0 @@
|
||||
{
|
||||
"extends": ["config:best-practices", ":semanticCommits"],
|
||||
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
|
||||
"packageRules": [
|
||||
{
|
||||
"matchUpdateTypes": ["minor", "patch", "pin", "digest"],
|
||||
"automerge": true,
|
||||
"automergeType": "branch"
|
||||
}
|
||||
]
|
||||
}
|
@@ -1,223 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
|
||||
export default function FourPercentRuleCalculator() {
|
||||
const [annualExpenses, setAnnualExpenses] = useState(50000);
|
||||
const [portfolioValue, setPortfolioValue] = useState(0);
|
||||
const [withdrawalRate, setWithdrawalRate] = useState(4);
|
||||
|
||||
// Calculate FIRE number based on withdrawal rate
|
||||
const fireNumber = Math.round(annualExpenses / (withdrawalRate / 100));
|
||||
|
||||
// Calculate safe withdrawal amount from portfolio
|
||||
const safeWithdrawal = Math.round(portfolioValue * (withdrawalRate / 100));
|
||||
|
||||
// Calculate years to FIRE if saving
|
||||
const monthlySavings = 2000; // Default for demo
|
||||
const growthRate = 0.07; // 7% annual growth
|
||||
const yearsToFire =
|
||||
portfolioValue < fireNumber
|
||||
? Math.log(
|
||||
(fireNumber + (monthlySavings * 12) / growthRate) /
|
||||
(portfolioValue + (monthlySavings * 12) / growthRate),
|
||||
) / Math.log(1 + growthRate)
|
||||
: 0;
|
||||
|
||||
// Format currency
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Input Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Calculate Your FIRE Number</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your annual expenses and current portfolio value to see your
|
||||
path to financial independence
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="annual-expenses">Annual Expenses</Label>
|
||||
<Input
|
||||
id="annual-expenses"
|
||||
type="number"
|
||||
value={annualExpenses}
|
||||
onChange={(e) => setAnnualExpenses(Number(e.target.value))}
|
||||
min={0}
|
||||
step={1000}
|
||||
/>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Your yearly spending in retirement
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="portfolio-value">Current Portfolio Value</Label>
|
||||
<Input
|
||||
id="portfolio-value"
|
||||
type="number"
|
||||
value={portfolioValue}
|
||||
onChange={(e) => setPortfolioValue(Number(e.target.value))}
|
||||
min={0}
|
||||
step={10000}
|
||||
/>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Your current invested assets
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="withdrawal-rate">Withdrawal Rate</Label>
|
||||
<span className="text-sm font-medium">{withdrawalRate}%</span>
|
||||
</div>
|
||||
<Slider
|
||||
id="withdrawal-rate"
|
||||
min={3}
|
||||
max={5}
|
||||
step={0.1}
|
||||
value={[withdrawalRate]}
|
||||
onValueChange={(value) => setWithdrawalRate(value[0] ?? 4)}
|
||||
className="w-full"
|
||||
/>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
The classic 4% rule suggests 4%, but adjust based on your risk
|
||||
tolerance
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Results Section */}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Your FIRE Number</CardTitle>
|
||||
<CardDescription>
|
||||
Portfolio needed for {withdrawalRate}% withdrawal rate
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-primary text-4xl font-bold">
|
||||
{formatCurrency(fireNumber)}
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-2 text-sm">
|
||||
This is {Math.round(fireNumber / annualExpenses)}× your annual
|
||||
expenses
|
||||
</p>
|
||||
{portfolioValue > 0 && portfolioValue < fireNumber && (
|
||||
<div className="bg-foreground/5 mt-4 rounded-lg p-3">
|
||||
<p className="text-sm font-medium">Progress to FIRE</p>
|
||||
<div className="mt-2 h-2 rounded-full bg-gray-200">
|
||||
<div
|
||||
className="bg-primary h-2 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${Math.min((portfolioValue / fireNumber) * 100, 100)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-1 text-xs">
|
||||
{Math.round((portfolioValue / fireNumber) * 100)}% complete
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Safe Annual Withdrawal</CardTitle>
|
||||
<CardDescription>From your current portfolio</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-primary text-4xl font-bold">
|
||||
{formatCurrency(safeWithdrawal)}
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-2 text-sm">
|
||||
Monthly: {formatCurrency(safeWithdrawal / 12)}
|
||||
</p>
|
||||
{safeWithdrawal > 0 && safeWithdrawal < annualExpenses && (
|
||||
<div className="mt-4 rounded-lg bg-orange-100 p-3 dark:bg-orange-900/20">
|
||||
<p className="text-sm text-orange-900 dark:text-orange-100">
|
||||
⚠️ Your safe withdrawal ({formatCurrency(safeWithdrawal)}) is
|
||||
less than your annual expenses (
|
||||
{formatCurrency(annualExpenses)})
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{safeWithdrawal >= annualExpenses && (
|
||||
<div className="mt-4 rounded-lg bg-green-100 p-3 dark:bg-green-900/20">
|
||||
<p className="text-sm text-green-900 dark:text-green-100">
|
||||
✓ Congratulations! You've reached FIRE
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Additional Insights */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Quick Insights</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">Gap to FIRE</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{formatCurrency(Math.max(fireNumber - portfolioValue, 0))}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">Monthly Target</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{formatCurrency(annualExpenses / 12)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">25× Rule Result</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{formatCurrency(annualExpenses * 25)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Educational Note */}
|
||||
<Card className="border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/20">
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-sm">
|
||||
<strong>💡 Pro Tip:</strong> The 4% rule is based on a 30-year
|
||||
retirement. For early retirees planning 40-50+ years, consider using
|
||||
3.5% or even 3% for added safety. Remember to account for taxes,
|
||||
healthcare costs, and inflation in your planning.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,429 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import BackgroundPattern from "@/app/components/BackgroundPattern";
|
||||
import Footer from "@/app/components/footer";
|
||||
import FourPercentRuleCalculator from "./FourPercentRuleCalculator";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "4% Rule Calculator - Safe Withdrawal Rate for FIRE | InvestingFIRE",
|
||||
description:
|
||||
"Calculate your safe withdrawal rate using the 4% rule. Determine how much you need to retire early and how long your retirement savings will last. Free FIRE calculator with real-time results.",
|
||||
keywords:
|
||||
"4 percent rule calculator, safe withdrawal rate calculator, 4% rule retirement, FIRE calculator, retirement withdrawal calculator, Trinity Study calculator",
|
||||
openGraph: {
|
||||
title: "4% Rule Calculator - Safe Withdrawal Rate Calculator",
|
||||
description:
|
||||
"Free 4% rule calculator to determine your safe withdrawal rate and retirement portfolio size. Based on the Trinity Study for FIRE planning.",
|
||||
type: "website",
|
||||
url: "https://investingfire.com/calculators/4-percent-rule",
|
||||
},
|
||||
};
|
||||
|
||||
export default function FourPercentRulePage() {
|
||||
const faqData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
mainEntity: [
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "What is the 4% rule?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "The 4% rule is a retirement planning guideline that suggests you can safely withdraw 4% of your retirement portfolio in the first year, then adjust that amount for inflation each subsequent year, with a high probability of not running out of money over 30 years.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "How accurate is the 4% rule?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "The 4% rule, based on the Trinity Study, showed a 95% success rate for a 30-year retirement with a 50/50 stock/bond portfolio. However, it's based on historical U.S. market data and may need adjustment for longer retirements, different asset allocations, or varying market conditions.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "Is 4% too conservative or too aggressive?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "It depends on your situation. For early retirees with 40-50+ year horizons, 4% might be too aggressive. Some prefer 3-3.5%. Conversely, flexible spenders who can reduce withdrawals in down markets might safely use 4.5-5%. Personal factors like other income sources and spending flexibility matter.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "How do I calculate my FIRE number using the 4% rule?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "Simply multiply your annual expenses by 25. For example, if you need $40,000 per year, your FIRE number is $1,000,000 ($40,000 × 25). This gives you a portfolio where 4% equals your annual spending needs.",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const breadcrumbData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
itemListElement: [
|
||||
{
|
||||
"@type": "ListItem",
|
||||
position: 1,
|
||||
name: "Home",
|
||||
item: "https://investingfire.com",
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
position: 2,
|
||||
name: "Calculators",
|
||||
item: "https://investingfire.com/calculators",
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
position: 3,
|
||||
name: "4% Rule Calculator",
|
||||
item: "https://investingfire.com/calculators/4-percent-rule",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-2">
|
||||
<BackgroundPattern />
|
||||
|
||||
{/* Header */}
|
||||
<div className="z-10 mx-auto flex flex-col items-center justify-center gap-4 text-center">
|
||||
<div className="mt-8 flex flex-row flex-wrap items-center justify-center gap-4 align-middle">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-4 transition-opacity hover:opacity-90"
|
||||
>
|
||||
<Image
|
||||
priority
|
||||
unoptimized
|
||||
src="/investingfire_logo_no-bg.svg"
|
||||
alt="InvestingFIRE Logo"
|
||||
width={60}
|
||||
height={60}
|
||||
/>
|
||||
<span className="text-2xl font-bold">InvestingFIRE</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<h1 className="from-primary via-primary-foreground to-primary mt-8 bg-gradient-to-r bg-clip-text text-4xl font-extrabold tracking-tight text-transparent drop-shadow-md sm:text-[4rem]">
|
||||
4% Rule Calculator
|
||||
</h1>
|
||||
<p className="text-primary-foreground/90 max-w-2xl text-xl font-semibold md:text-2xl">
|
||||
Calculate Your Safe Withdrawal Rate & FIRE Number Using the Trinity
|
||||
Study Method
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Breadcrumb Schema */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbData) }}
|
||||
/>
|
||||
|
||||
{/* Calculator */}
|
||||
<div className="z-10 mt-8 w-full max-w-4xl">
|
||||
<FourPercentRuleCalculator />
|
||||
</div>
|
||||
|
||||
{/* SEO Content */}
|
||||
<div className="z-10 mx-auto max-w-4xl px-4 py-12 text-left">
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
Understanding the 4% Rule for Safe Retirement Withdrawals
|
||||
</h2>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
The <strong>4% rule</strong> is one of the most widely recognized
|
||||
guidelines in retirement planning, particularly within the FIRE
|
||||
(Financial Independence, Retire Early) community. This rule of thumb
|
||||
suggests you can withdraw 4% of your retirement portfolio in the
|
||||
first year of retirement, then adjust that dollar amount for
|
||||
inflation each subsequent year, with a high probability of not
|
||||
depleting your savings over a 30-year retirement period.
|
||||
</p>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
Originating from the groundbreaking <strong>Trinity Study</strong>{" "}
|
||||
(1998), which analyzed historical market data from 1926-1995, the 4%
|
||||
rule demonstrated a 95% success rate for mixed portfolios of stocks
|
||||
and bonds over 30-year periods. This simple yet powerful concept
|
||||
revolutionized retirement planning by providing a clear target:
|
||||
accumulate 25 times your annual expenses to achieve financial
|
||||
independence.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
How the 4% Rule Calculator Works
|
||||
</h2>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
Our 4% rule calculator helps you determine two critical numbers for
|
||||
your retirement planning:
|
||||
</p>
|
||||
<ol className="mb-6 ml-6 list-decimal space-y-3 text-lg">
|
||||
<li>
|
||||
<strong>Your FIRE Number</strong> - The total portfolio size
|
||||
needed to support your desired lifestyle using the 4% withdrawal
|
||||
rate
|
||||
</li>
|
||||
<li>
|
||||
<strong>Safe Annual Withdrawal</strong> - How much you can
|
||||
withdraw from a given portfolio size while maintaining the 4% rule
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div className="bg-foreground/10 mb-6 rounded-lg p-6">
|
||||
<h3 className="mb-3 text-xl font-semibold">
|
||||
Quick 4% Rule Formula:
|
||||
</h3>
|
||||
<p className="mb-2 text-lg">
|
||||
<strong>FIRE Number = Annual Expenses × 25</strong>
|
||||
</p>
|
||||
<p className="text-lg">
|
||||
<strong>Safe Annual Withdrawal = Portfolio Value × 0.04</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
For example, if you need $50,000 per year to cover your expenses,
|
||||
your FIRE number would be $1,250,000 ($50,000 × 25). Conversely, if
|
||||
you have a $2,000,000 portfolio, you could safely withdraw $80,000
|
||||
in the first year (2,000,000 × 0.04).
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
Adjusting the 4% Rule for Your Situation
|
||||
</h2>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
While the 4% rule provides an excellent starting point, many
|
||||
financial experts suggest adjustments based on individual
|
||||
circumstances:
|
||||
</p>
|
||||
|
||||
<div className="mb-6 grid gap-6 md:grid-cols-2">
|
||||
<div className="bg-foreground/10 rounded-lg p-6">
|
||||
<h3 className="mb-3 text-xl font-semibold">
|
||||
More Conservative Approaches
|
||||
</h3>
|
||||
<ul className="ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<strong>3.5% Rule</strong> - For early retirees with 40-50+
|
||||
year horizons
|
||||
</li>
|
||||
<li>
|
||||
<strong>3% Rule</strong> - Ultra-conservative for maximum
|
||||
safety
|
||||
</li>
|
||||
<li>
|
||||
<strong>Dynamic Withdrawals</strong> - Adjust based on market
|
||||
performance
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-6">
|
||||
<h3 className="mb-3 text-xl font-semibold">
|
||||
Factors That May Allow Higher Withdrawals
|
||||
</h3>
|
||||
<ul className="ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<strong>Flexible Spending</strong> - Ability to reduce
|
||||
expenses in down markets
|
||||
</li>
|
||||
<li>
|
||||
<strong>Part-time Income</strong> - Earning some money in
|
||||
retirement
|
||||
</li>
|
||||
<li>
|
||||
<strong>Social Security/Pensions</strong> - Additional income
|
||||
sources later
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
4% Rule vs. Other FIRE Strategies
|
||||
</h2>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
The 4% rule is just one approach to achieving financial
|
||||
independence. Here's how it compares to other popular FIRE
|
||||
strategies:
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="bg-foreground/10 rounded-lg p-4">
|
||||
<h3 className="mb-2 text-lg font-semibold">
|
||||
Traditional FIRE (4% Rule)
|
||||
</h3>
|
||||
<p>
|
||||
Target: 25× annual expenses | Best for: Balanced lifestyle with
|
||||
moderate spending
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-4">
|
||||
<h3 className="mb-2 text-lg font-semibold">
|
||||
Lean FIRE (3-3.5% Rule)
|
||||
</h3>
|
||||
<p>
|
||||
Target: 28-33× annual expenses | Best for: Minimalist lifestyle,
|
||||
maximum safety
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-4">
|
||||
<h3 className="mb-2 text-lg font-semibold">
|
||||
Fat FIRE (4-5% Rule)
|
||||
</h3>
|
||||
<p>
|
||||
Target: 20-25× annual expenses | Best for: Luxurious retirement
|
||||
with higher spending
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-4">
|
||||
<h3 className="mb-2 text-lg font-semibold">Coast FIRE</h3>
|
||||
<p>
|
||||
Let investments grow while covering expenses with part-time work
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-lg">
|
||||
Want to explore these strategies in detail? Try our{" "}
|
||||
<Link
|
||||
href="/"
|
||||
className="text-primary font-semibold hover:underline"
|
||||
>
|
||||
comprehensive FIRE calculator
|
||||
</Link>{" "}
|
||||
for a full retirement simulation.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="mb-12">
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqData) }}
|
||||
/>
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
4% Rule Frequently Asked Questions
|
||||
</h2>
|
||||
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
What is the 4% rule?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
The 4% rule is a retirement planning guideline that suggests you
|
||||
can safely withdraw 4% of your retirement portfolio in the first
|
||||
year, then adjust that amount for inflation each subsequent
|
||||
year, with a high probability of not running out of money over
|
||||
30 years.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-2">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
How accurate is the 4% rule?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
The 4% rule, based on the Trinity Study, showed a 95% success
|
||||
rate for a 30-year retirement with a 50/50 stock/bond portfolio.
|
||||
However, it's based on historical U.S. market data and may need
|
||||
adjustment for longer retirements, different asset allocations,
|
||||
or varying market conditions.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-3">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
Is 4% too conservative or too aggressive?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
It depends on your situation. For early retirees with 40-50+
|
||||
year horizons, 4% might be too aggressive. Some prefer 3-3.5%.
|
||||
Conversely, flexible spenders who can reduce withdrawals in down
|
||||
markets might safely use 4.5-5%. Personal factors like other
|
||||
income sources and spending flexibility matter.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-4">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
How do I calculate my FIRE number using the 4% rule?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Simply multiply your annual expenses by 25. For example, if you
|
||||
need $40,000 per year, your FIRE number is $1,000,000 ($40,000 ×
|
||||
25). This gives you a portfolio where 4% equals your annual
|
||||
spending needs.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-5">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
Does the 4% rule account for taxes?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
No, the 4% rule calculates gross withdrawals. You'll need to
|
||||
account for taxes separately based on your account types
|
||||
(traditional vs. Roth IRA, taxable accounts) and tax bracket.
|
||||
Many FIRE planners target a portfolio 25-30% larger than the
|
||||
basic calculation to cover taxes.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-6">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
What asset allocation works best with the 4% rule?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
The original Trinity Study found success with portfolios ranging
|
||||
from 50/50 to 75/25 stocks/bonds. Higher stock allocations
|
||||
generally provided better long-term results but with more
|
||||
volatility. Most FIRE practitioners use 60-80% stocks for the
|
||||
growth needed to sustain long retirements.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</section>
|
||||
|
||||
{/* Call to Action */}
|
||||
<section className="bg-foreground/10 mb-12 rounded-lg p-8 text-center">
|
||||
<h2 className="mb-4 text-2xl font-bold">
|
||||
Ready for a More Detailed FIRE Analysis?
|
||||
</h2>
|
||||
<p className="mb-6 text-lg">
|
||||
While the 4% rule provides a great starting point, our comprehensive
|
||||
FIRE calculator offers year-by-year projections, inflation
|
||||
adjustments, and personalized scenarios for your unique situation.
|
||||
</p>
|
||||
<Link
|
||||
href="/"
|
||||
className="bg-primary text-primary-foreground inline-block rounded-lg px-6 py-3 font-semibold transition-opacity hover:opacity-90"
|
||||
>
|
||||
Try Our Full FIRE Calculator →
|
||||
</Link>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
@@ -1,345 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
|
||||
export default function CoastFireCalculator() {
|
||||
const [currentAge, setCurrentAge] = useState(30);
|
||||
const [retirementAge, setRetirementAge] = useState(65);
|
||||
const [currentPortfolio, setCurrentPortfolio] = useState(50000);
|
||||
const [annualExpenses, setAnnualExpenses] = useState(50000);
|
||||
const [expectedReturn, setExpectedReturn] = useState(7);
|
||||
|
||||
// Calculate years until retirement
|
||||
const yearsUntilRetirement = retirementAge - currentAge;
|
||||
|
||||
// Calculate target FIRE number (25x annual expenses)
|
||||
const targetFireNumber = annualExpenses * 25;
|
||||
|
||||
// Calculate Coast FIRE number (present value of future FIRE number)
|
||||
const coastFireNumber =
|
||||
yearsUntilRetirement > 0
|
||||
? targetFireNumber /
|
||||
Math.pow(1 + expectedReturn / 100, yearsUntilRetirement)
|
||||
: targetFireNumber;
|
||||
|
||||
// Check if already at Coast FIRE
|
||||
const isCoastFire = currentPortfolio >= coastFireNumber;
|
||||
|
||||
// Calculate what portfolio will grow to by retirement
|
||||
const projectedPortfolioAtRetirement =
|
||||
currentPortfolio * Math.pow(1 + expectedReturn / 100, yearsUntilRetirement);
|
||||
|
||||
// Calculate gap to Coast FIRE
|
||||
const gapToCoastFire = Math.max(coastFireNumber - currentPortfolio, 0);
|
||||
|
||||
// Calculate monthly savings needed to reach Coast FIRE in different timeframes
|
||||
const calculateMonthlySavings = (years: number) => {
|
||||
if (years <= 0 || isCoastFire) return 0;
|
||||
const monthlyReturn = expectedReturn / 100 / 12;
|
||||
const months = years * 12;
|
||||
return (
|
||||
(gapToCoastFire * monthlyReturn) /
|
||||
(Math.pow(1 + monthlyReturn, months) - 1)
|
||||
);
|
||||
};
|
||||
|
||||
// Format currency
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Input Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Your Coast FIRE Inputs</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your details to calculate when you can stop saving for
|
||||
retirement
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="current-age">Current Age</Label>
|
||||
<span className="text-sm font-medium">{currentAge}</span>
|
||||
</div>
|
||||
<Slider
|
||||
id="current-age"
|
||||
min={20}
|
||||
max={60}
|
||||
step={1}
|
||||
value={[currentAge]}
|
||||
onValueChange={(value) => setCurrentAge(value[0] ?? 30)}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="retirement-age">Target Retirement Age</Label>
|
||||
<span className="text-sm font-medium">{retirementAge}</span>
|
||||
</div>
|
||||
<Slider
|
||||
id="retirement-age"
|
||||
min={40}
|
||||
max={80}
|
||||
step={1}
|
||||
value={[retirementAge]}
|
||||
onValueChange={(value) => setRetirementAge(value[0] ?? 65)}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="current-portfolio">Current Portfolio Value</Label>
|
||||
<Input
|
||||
id="current-portfolio"
|
||||
type="number"
|
||||
value={currentPortfolio}
|
||||
onChange={(e) => setCurrentPortfolio(Number(e.target.value))}
|
||||
min={0}
|
||||
step={1000}
|
||||
/>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Your current retirement savings
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="annual-expenses">
|
||||
Annual Expenses in Retirement
|
||||
</Label>
|
||||
<Input
|
||||
id="annual-expenses"
|
||||
type="number"
|
||||
value={annualExpenses}
|
||||
onChange={(e) => setAnnualExpenses(Number(e.target.value))}
|
||||
min={0}
|
||||
step={1000}
|
||||
/>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Yearly spending (in today's dollars)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="expected-return">Expected Annual Return</Label>
|
||||
<span className="text-sm font-medium">{expectedReturn}%</span>
|
||||
</div>
|
||||
<Slider
|
||||
id="expected-return"
|
||||
min={4}
|
||||
max={10}
|
||||
step={0.5}
|
||||
value={[expectedReturn]}
|
||||
onValueChange={(value) => setExpectedReturn(value[0] ?? 7)}
|
||||
className="w-full"
|
||||
/>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Average annual investment return before inflation
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Results Section */}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Your Coast FIRE Number</CardTitle>
|
||||
<CardDescription>
|
||||
Amount needed today to coast to retirement
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-primary text-4xl font-bold">
|
||||
{formatCurrency(coastFireNumber)}
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-2 text-sm">
|
||||
Grows to {formatCurrency(targetFireNumber)} in{" "}
|
||||
{yearsUntilRetirement} years
|
||||
</p>
|
||||
{isCoastFire ? (
|
||||
<div className="mt-4 rounded-lg bg-green-100 p-3 dark:bg-green-900/20">
|
||||
<p className="text-sm text-green-900 dark:text-green-100">
|
||||
🎉 Congratulations! You've reached Coast FIRE!
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-foreground/5 mt-4 rounded-lg p-3">
|
||||
<p className="text-sm font-medium">Progress to Coast FIRE</p>
|
||||
<div className="mt-2 h-2 rounded-full bg-gray-200">
|
||||
<div
|
||||
className="bg-primary h-2 rounded-full transition-all duration-300"
|
||||
style={{
|
||||
width: `${Math.min((currentPortfolio / coastFireNumber) * 100, 100)}%`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-1 text-xs">
|
||||
{Math.round((currentPortfolio / coastFireNumber) * 100)}%
|
||||
complete
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Portfolio at Retirement</CardTitle>
|
||||
<CardDescription>
|
||||
What your current savings will grow to
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-primary text-4xl font-bold">
|
||||
{formatCurrency(projectedPortfolioAtRetirement)}
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-2 text-sm">
|
||||
{projectedPortfolioAtRetirement >= targetFireNumber
|
||||
? `${Math.round((projectedPortfolioAtRetirement / targetFireNumber) * 100)}% of target`
|
||||
: `${formatCurrency(targetFireNumber - projectedPortfolioAtRetirement)} short`}
|
||||
</p>
|
||||
{projectedPortfolioAtRetirement >= targetFireNumber && (
|
||||
<div className="mt-4 rounded-lg bg-blue-100 p-3 dark:bg-blue-900/20">
|
||||
<p className="text-sm text-blue-900 dark:text-blue-100">
|
||||
💡 You'll exceed your FIRE target by{" "}
|
||||
{formatCurrency(
|
||||
projectedPortfolioAtRetirement - targetFireNumber,
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Savings Scenarios */}
|
||||
{!isCoastFire && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Monthly Savings to Reach Coast FIRE</CardTitle>
|
||||
<CardDescription>
|
||||
How much to save monthly to hit Coast FIRE in different timeframes
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">In 5 Years</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{formatCurrency(calculateMonthlySavings(5))}
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">per month</p>
|
||||
</div>
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">In 10 Years</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{formatCurrency(calculateMonthlySavings(10))}
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">per month</p>
|
||||
</div>
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">In 15 Years</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{formatCurrency(calculateMonthlySavings(15))}
|
||||
</p>
|
||||
<p className="text-muted-foreground text-xs">per month</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Key Metrics */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Coast FIRE Summary</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Years to Retirement
|
||||
</p>
|
||||
<p className="text-2xl font-bold">{yearsUntilRetirement}</p>
|
||||
</div>
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Target FIRE Number
|
||||
</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{formatCurrency(targetFireNumber)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">Gap to Coast FIRE</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{formatCurrency(gapToCoastFire)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">Growth Multiple</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{Math.pow(
|
||||
1 + expectedReturn / 100,
|
||||
yearsUntilRetirement,
|
||||
).toFixed(1)}
|
||||
×
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Educational Notes */}
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<Card className="border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/20">
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-sm">
|
||||
<strong>🎯 Coast FIRE Strategy:</strong> Once you hit your Coast
|
||||
FIRE number, you can stop saving for retirement entirely. Work
|
||||
only to cover current expenses while your investments grow to your
|
||||
full FIRE target.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-purple-200 bg-purple-50 dark:border-purple-900 dark:bg-purple-950/20">
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-sm">
|
||||
<strong>⚡ Power of Time:</strong> Starting early is crucial. A
|
||||
25-year-old needs only{" "}
|
||||
{formatCurrency(targetFireNumber / Math.pow(1.07, 40))}
|
||||
to coast to a {formatCurrency(targetFireNumber)} retirement at 65
|
||||
(assuming 7% returns).
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,481 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import BackgroundPattern from "@/app/components/BackgroundPattern";
|
||||
import Footer from "@/app/components/footer";
|
||||
import CoastFireCalculator from "./CoastFireCalculator";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Coast FIRE Calculator - When Can You Stop Saving? | InvestingFIRE",
|
||||
description:
|
||||
"Calculate your Coast FIRE number and find out when you can stop saving for retirement. Free Coast FI calculator shows how compound interest can work for you.",
|
||||
keywords:
|
||||
"coast fire calculator, coast fi calculator, coast fire number, barista fire calculator, coast financial independence, stop saving calculator",
|
||||
openGraph: {
|
||||
title: "Coast FIRE Calculator - Stop Saving & Let Compound Interest Work",
|
||||
description:
|
||||
"Discover when you can stop saving for retirement and coast to financial independence. Free calculator with real-time projections.",
|
||||
type: "website",
|
||||
url: "https://investingfire.com/calculators/coast-fire",
|
||||
},
|
||||
};
|
||||
|
||||
export default function CoastFirePage() {
|
||||
const faqData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
mainEntity: [
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "What is Coast FIRE?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "Coast FIRE (Financial Independence, Retire Early) is when you've saved enough that you can stop contributing to retirement accounts and still reach your FIRE number by your target retirement age through compound growth alone. You still need to cover current expenses but no longer need to save for retirement.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "How is Coast FIRE different from regular FIRE?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "Regular FIRE means you have enough saved to retire immediately and live off withdrawals. Coast FIRE means you have enough that will grow to your FIRE number by retirement age without additional contributions. You still work to cover current expenses but can spend everything you earn.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "What's the Coast FIRE formula?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "Coast FIRE Number = FIRE Number ÷ (1 + growth rate)^years until retirement. For example, if you need $1 million at 65 and you're 35 with 30 years to go, assuming 7% growth: $1,000,000 ÷ (1.07)^30 = $131,367.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "Is Coast FIRE realistic?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "Yes, Coast FIRE is very achievable, especially for those who start saving aggressively in their 20s or 30s. The key is front-loading retirement savings early in your career when compound interest has the most time to work. Many achieve Coast FIRE in 10-15 years of focused saving.",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const breadcrumbData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
itemListElement: [
|
||||
{
|
||||
"@type": "ListItem",
|
||||
position: 1,
|
||||
name: "Home",
|
||||
item: "https://investingfire.com",
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
position: 2,
|
||||
name: "Calculators",
|
||||
item: "https://investingfire.com/calculators",
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
position: 3,
|
||||
name: "Coast FIRE Calculator",
|
||||
item: "https://investingfire.com/calculators/coast-fire",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-2">
|
||||
<BackgroundPattern />
|
||||
|
||||
{/* Header */}
|
||||
<div className="z-10 mx-auto flex flex-col items-center justify-center gap-4 text-center">
|
||||
<div className="mt-8 flex flex-row flex-wrap items-center justify-center gap-4 align-middle">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-4 transition-opacity hover:opacity-90"
|
||||
>
|
||||
<Image
|
||||
priority
|
||||
unoptimized
|
||||
src="/investingfire_logo_no-bg.svg"
|
||||
alt="InvestingFIRE Logo"
|
||||
width={60}
|
||||
height={60}
|
||||
/>
|
||||
<span className="text-2xl font-bold">InvestingFIRE</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<h1 className="from-primary via-primary-foreground to-primary mt-8 bg-gradient-to-r bg-clip-text text-4xl font-extrabold tracking-tight text-transparent drop-shadow-md sm:text-[4rem]">
|
||||
Coast FIRE Calculator
|
||||
</h1>
|
||||
<p className="text-primary-foreground/90 max-w-2xl text-xl font-semibold md:text-2xl">
|
||||
Find Out When You Can Stop Saving and Let Compound Interest Do the
|
||||
Work
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Breadcrumb Schema */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbData) }}
|
||||
/>
|
||||
|
||||
{/* Calculator */}
|
||||
<div className="z-10 mt-8 w-full max-w-4xl">
|
||||
<CoastFireCalculator />
|
||||
</div>
|
||||
|
||||
{/* SEO Content */}
|
||||
<div className="z-10 mx-auto max-w-4xl px-4 py-12 text-left">
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
What Is Coast FIRE? Your Path to Stress-Free Saving
|
||||
</h2>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
<strong>Coast FIRE</strong> represents a powerful milestone in your
|
||||
financial independence journey. It's the point where you've
|
||||
accumulated enough investments that you can completely stop saving
|
||||
for retirement and still reach your FIRE number by your target
|
||||
retirement age through compound growth alone.
|
||||
</p>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
Unlike traditional FIRE where you need 25× your annual expenses
|
||||
saved before retiring, Coast FIRE allows you to "coast" to
|
||||
retirement. You still work to cover your current living expenses,
|
||||
but you can spend 100% of your income knowing your future retirement
|
||||
is already secured through the magic of compound interest.
|
||||
</p>
|
||||
|
||||
<div className="bg-foreground/10 my-6 rounded-lg p-6">
|
||||
<h3 className="mb-3 text-xl font-semibold">Coast FIRE Benefits:</h3>
|
||||
<ul className="ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<strong>Reduced financial stress</strong> - No more pressure to
|
||||
save aggressively
|
||||
</li>
|
||||
<li>
|
||||
<strong>Career flexibility</strong> - Take lower-paying but more
|
||||
fulfilling work
|
||||
</li>
|
||||
<li>
|
||||
<strong>Lifestyle upgrade</strong> - Spend your entire paycheck
|
||||
guilt-free
|
||||
</li>
|
||||
<li>
|
||||
<strong>Early achievement</strong> - Often reachable in your 30s
|
||||
or 40s
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
How the Coast FIRE Calculator Works
|
||||
</h2>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
Our Coast FIRE calculator uses the time value of money principle to
|
||||
determine exactly how much you need invested today to reach your
|
||||
retirement goal without any additional contributions. Here's the
|
||||
math behind it:
|
||||
</p>
|
||||
|
||||
<div className="bg-foreground/10 mb-6 rounded-lg p-6">
|
||||
<h3 className="mb-3 text-xl font-semibold">
|
||||
The Coast FIRE Formula:
|
||||
</h3>
|
||||
<p className="mb-4 font-mono text-lg">
|
||||
Coast FIRE Number = Target FIRE Number ÷ (1 + growth rate)^years
|
||||
</p>
|
||||
<p className="text-lg">Where:</p>
|
||||
<ul className="ml-6 list-disc space-y-1 text-lg">
|
||||
<li>Target FIRE Number = 25× your annual retirement expenses</li>
|
||||
<li>
|
||||
Growth rate = Expected annual investment return (e.g., 7%)
|
||||
</li>
|
||||
<li>Years = Time until your target retirement age</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
For example, if you need $1,000,000 to retire in 30 years and expect
|
||||
7% annual returns, you need just $131,367 invested today to coast to
|
||||
retirement. That's the power of compound interest working over
|
||||
decades!
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
Coast FIRE vs Other FIRE Variations
|
||||
</h2>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
Understanding how Coast FIRE fits into the broader FIRE movement
|
||||
helps you choose the right strategy for your situation:
|
||||
</p>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="bg-foreground/10 rounded-lg p-6">
|
||||
<h3 className="mb-3 text-xl font-semibold">Coast FIRE</h3>
|
||||
<p className="mb-2">Stop saving, work for expenses only</p>
|
||||
<ul className="ml-4 list-disc space-y-1 text-sm">
|
||||
<li>Achievable in 10-15 years</li>
|
||||
<li>Reduces financial stress immediately</li>
|
||||
<li>Perfect for career pivots</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-6">
|
||||
<h3 className="mb-3 text-xl font-semibold">Barista FIRE</h3>
|
||||
<p className="mb-2">Similar to Coast but work part-time</p>
|
||||
<ul className="ml-4 list-disc space-y-1 text-sm">
|
||||
<li>Often includes health benefits</li>
|
||||
<li>More lifestyle flexibility</li>
|
||||
<li>Bridge to full retirement</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-6">
|
||||
<h3 className="mb-3 text-xl font-semibold">Traditional FIRE</h3>
|
||||
<p className="mb-2">Full retirement with 4% rule</p>
|
||||
<ul className="ml-4 list-disc space-y-1 text-sm">
|
||||
<li>Need 25× annual expenses</li>
|
||||
<li>Complete work optional</li>
|
||||
<li>Takes longer to achieve</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-6">
|
||||
<h3 className="mb-3 text-xl font-semibold">Lean/Fat FIRE</h3>
|
||||
<p className="mb-2">Variations based on spending</p>
|
||||
<ul className="ml-4 list-disc space-y-1 text-sm">
|
||||
<li>Lean: Minimal expenses</li>
|
||||
<li>Fat: Luxury lifestyle</li>
|
||||
<li>Different savings targets</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
Strategies to Reach Coast FIRE Faster
|
||||
</h2>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
Achieving Coast FIRE is all about front-loading your retirement
|
||||
savings while you're young. Here are proven strategies to accelerate
|
||||
your journey:
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="bg-foreground/10 rounded-lg p-4">
|
||||
<h3 className="mb-2 text-lg font-semibold">
|
||||
1. Maximize Tax-Advantaged Accounts Early
|
||||
</h3>
|
||||
<p>
|
||||
Prioritize 401(k), IRA, and HSA contributions in your 20s and
|
||||
30s. The tax savings compound alongside your investments.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-4">
|
||||
<h3 className="mb-2 text-lg font-semibold">
|
||||
2. Live on One Income (If Partnered)
|
||||
</h3>
|
||||
<p>
|
||||
Save 100% of one partner's income while living on the other.
|
||||
This can cut your Coast FIRE timeline in half.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-4">
|
||||
<h3 className="mb-2 text-lg font-semibold">
|
||||
3. House Hack or Geographic Arbitrage
|
||||
</h3>
|
||||
<p>
|
||||
Minimize housing costs through rental income or moving to lower
|
||||
cost areas while maintaining income.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-4">
|
||||
<h3 className="mb-2 text-lg font-semibold">
|
||||
4. Invest Windfalls Immediately
|
||||
</h3>
|
||||
<p>
|
||||
Bonuses, tax refunds, and gifts go straight to investments.
|
||||
These lump sums have maximum time to compound.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-4">
|
||||
<h3 className="mb-2 text-lg font-semibold">
|
||||
5. Increase Savings Rate Annually
|
||||
</h3>
|
||||
<p>
|
||||
Bump up your savings by 1-2% each year. You won't feel the pinch
|
||||
but will dramatically accelerate your timeline.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="mb-12">
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqData) }}
|
||||
/>
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
Coast FIRE Frequently Asked Questions
|
||||
</h2>
|
||||
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
What is Coast FIRE?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Coast FIRE (Financial Independence, Retire Early) is when you've
|
||||
saved enough that you can stop contributing to retirement
|
||||
accounts and still reach your FIRE number by your target
|
||||
retirement age through compound growth alone. You still need to
|
||||
cover current expenses but no longer need to save for
|
||||
retirement.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-2">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
How is Coast FIRE different from regular FIRE?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Regular FIRE means you have enough saved to retire immediately
|
||||
and live off withdrawals. Coast FIRE means you have enough that
|
||||
will grow to your FIRE number by retirement age without
|
||||
additional contributions. You still work to cover current
|
||||
expenses but can spend everything you earn.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-3">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
What's the Coast FIRE formula?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Coast FIRE Number = FIRE Number ÷ (1 + growth rate)^years until
|
||||
retirement. For example, if you need $1 million at 65 and you're
|
||||
35 with 30 years to go, assuming 7% growth: $1,000,000 ÷
|
||||
(1.07)^30 = $131,367.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-4">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
Is Coast FIRE realistic?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Yes, Coast FIRE is very achievable, especially for those who
|
||||
start saving aggressively in their 20s or 30s. The key is
|
||||
front-loading retirement savings early in your career when
|
||||
compound interest has the most time to work. Many achieve Coast
|
||||
FIRE in 10-15 years of focused saving.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-5">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
What if I already have some retirement savings?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Great! You're already on your way. Enter your current portfolio
|
||||
value in the calculator to see how close you are to Coast FIRE.
|
||||
You might be surprised to find you're closer than you think,
|
||||
especially if you have many years until retirement.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-6">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
Should I actually stop saving once I hit Coast FIRE?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
That's a personal choice! Many people continue saving to reach
|
||||
full FIRE faster, build a buffer for market downturns, or
|
||||
upgrade their retirement lifestyle. Others use Coast FIRE as
|
||||
permission to pursue lower-paying passion projects or reduce
|
||||
work hours. The beauty is having options.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</section>
|
||||
|
||||
{/* Success Stories */}
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
Real Coast FIRE Success Stories
|
||||
</h2>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="bg-foreground/10 rounded-lg p-6">
|
||||
<h3 className="mb-2 text-xl font-semibold">The Teacher's Tale</h3>
|
||||
<p className="text-sm">
|
||||
"I hit Coast FIRE at 32 after 10 years of saving 60% as an
|
||||
engineer. Now I teach high school physics—half the pay but 10x
|
||||
the satisfaction. My retirement is secured, so every paycheck
|
||||
goes to enjoying life now."
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-6">
|
||||
<h3 className="mb-2 text-xl font-semibold">
|
||||
The Entrepreneur's Freedom
|
||||
</h3>
|
||||
<p className="text-sm">
|
||||
"Reaching Coast FIRE at 38 gave me the courage to start my
|
||||
business. Without needing to save for retirement, I could
|
||||
reinvest everything back into growth. Best decision ever."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Call to Action */}
|
||||
<section className="bg-foreground/10 mb-12 rounded-lg p-8 text-center">
|
||||
<h2 className="mb-4 text-2xl font-bold">
|
||||
Want a Complete FIRE Plan?
|
||||
</h2>
|
||||
<p className="mb-6 text-lg">
|
||||
Coast FIRE is just one strategy. Our comprehensive FIRE calculator
|
||||
models your entire journey with multiple scenarios, withdrawal
|
||||
strategies, and detailed projections.
|
||||
</p>
|
||||
<div className="flex flex-col justify-center gap-4 sm:flex-row">
|
||||
<Link
|
||||
href="/"
|
||||
className="bg-primary text-primary-foreground inline-block rounded-lg px-6 py-3 font-semibold transition-opacity hover:opacity-90"
|
||||
>
|
||||
Try Full FIRE Calculator →
|
||||
</Link>
|
||||
<Link
|
||||
href="/calculators/4-percent-rule"
|
||||
className="bg-secondary text-secondary-foreground inline-block rounded-lg px-6 py-3 font-semibold transition-opacity hover:opacity-90"
|
||||
>
|
||||
Explore 4% Rule →
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
@@ -1,157 +0,0 @@
|
||||
"use client";
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
type LucideIcon,
|
||||
HandCoins,
|
||||
Bitcoin,
|
||||
Coins,
|
||||
DollarSign,
|
||||
Euro,
|
||||
IndianRupee,
|
||||
JapaneseYen,
|
||||
PiggyBank,
|
||||
PoundSterling,
|
||||
Wallet,
|
||||
Banknote,
|
||||
ChartCandlestick,
|
||||
CirclePercent,
|
||||
CreditCard,
|
||||
Gem,
|
||||
Receipt,
|
||||
ShoppingBasket,
|
||||
Rocket,
|
||||
RockingChair,
|
||||
Sparkles,
|
||||
ChartPie,
|
||||
ChartBar,
|
||||
BarChart3,
|
||||
ChartLine,
|
||||
TrendingDown,
|
||||
TrendingUp,
|
||||
Vault,
|
||||
Landmark,
|
||||
Briefcase,
|
||||
Handshake,
|
||||
Shield,
|
||||
Lock,
|
||||
CalendarRange,
|
||||
Hourglass,
|
||||
Sprout,
|
||||
Target,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function MultiIconPattern({ opacity = 0.2, spacing = 160 }) {
|
||||
const [width, setWidth] = useState(0);
|
||||
const [height, setHeight] = useState(0);
|
||||
const [rows, setRows] = useState(0);
|
||||
const [columns, setColumns] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const updateDimensions = () => {
|
||||
if (window.innerWidth > width + spacing * 2) {
|
||||
setWidth(window.innerWidth);
|
||||
}
|
||||
if (window.innerHeight > height + spacing * 2) {
|
||||
setHeight(window.innerHeight);
|
||||
}
|
||||
};
|
||||
|
||||
updateDimensions();
|
||||
window.addEventListener("resize", updateDimensions);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", updateDimensions);
|
||||
};
|
||||
}, [height, width, spacing]);
|
||||
|
||||
useEffect(() => {
|
||||
setColumns(Math.ceil(width / spacing) + 3);
|
||||
}, [width, spacing]);
|
||||
|
||||
useEffect(() => {
|
||||
setRows(Math.ceil(height / spacing) + 3);
|
||||
}, [height, spacing]);
|
||||
|
||||
// Explicitly type the array as LucideIcon[]
|
||||
const iconComponents: LucideIcon[] = [
|
||||
HandCoins,
|
||||
Bitcoin,
|
||||
Coins,
|
||||
DollarSign,
|
||||
Euro,
|
||||
IndianRupee,
|
||||
JapaneseYen,
|
||||
PiggyBank,
|
||||
PoundSterling,
|
||||
Wallet,
|
||||
Banknote,
|
||||
ChartCandlestick,
|
||||
CirclePercent,
|
||||
CreditCard,
|
||||
Gem,
|
||||
Receipt,
|
||||
ShoppingBasket,
|
||||
Rocket,
|
||||
RockingChair,
|
||||
Sparkles,
|
||||
ChartPie,
|
||||
ChartBar,
|
||||
BarChart3,
|
||||
ChartLine,
|
||||
TrendingDown,
|
||||
TrendingUp,
|
||||
Vault,
|
||||
Landmark,
|
||||
Briefcase,
|
||||
Handshake,
|
||||
Shield,
|
||||
Lock,
|
||||
CalendarRange,
|
||||
Hourglass,
|
||||
Sprout,
|
||||
Target,
|
||||
];
|
||||
|
||||
const renderIcons = ({
|
||||
rows,
|
||||
columns,
|
||||
}: {
|
||||
rows: number;
|
||||
columns: number;
|
||||
}) => {
|
||||
const icons = [];
|
||||
for (let y = 0; y < rows; y++) {
|
||||
for (let x = 0; x < columns; x++) {
|
||||
// Pick a random icon component from the array
|
||||
const randomIndex = Math.floor(Math.random() * iconComponents.length);
|
||||
const IconComponent = iconComponents[randomIndex]!;
|
||||
|
||||
// Slightly randomize size and position for more organic feel
|
||||
const size = 28 + Math.floor(Math.random() * 8);
|
||||
const xOffset = Math.floor(Math.random() * (spacing / 1.618));
|
||||
const yOffset = Math.floor(Math.random() * (spacing / 1.618));
|
||||
|
||||
icons.push(
|
||||
<IconComponent
|
||||
key={`icon-${x}-${y}`}
|
||||
size={size}
|
||||
className="text-primary fixed"
|
||||
style={{
|
||||
left: `${x * spacing + xOffset}px`,
|
||||
top: `${y * spacing + yOffset}px`,
|
||||
opacity: opacity,
|
||||
transform: `rotate(${Math.round((Math.random() - 0.5) * 30)}deg)`,
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
}
|
||||
return icons;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="absolute h-full w-full">
|
||||
{width > 0 && renderIcons({ rows, columns })}
|
||||
</div>
|
||||
);
|
||||
}
|
File diff suppressed because it is too large
Load Diff
@@ -1,16 +0,0 @@
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="w-full py-8 text-center text-xs">
|
||||
<p className="text-xs">
|
||||
© {new Date().getFullYear()} InvestingFIRE. All rights reserved.{" "}
|
||||
<a
|
||||
href="https://schulze.network"
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Hosting by Schulze.network
|
||||
</a>
|
||||
</p>
|
||||
</footer>
|
||||
);
|
||||
}
|
BIN
src/app/favicon.ico
(Stored with Git LFS)
BIN
src/app/favicon.ico
(Stored with Git LFS)
Binary file not shown.
@@ -1,404 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
export default function FireByAgeCalculator() {
|
||||
const [currentAge, setCurrentAge] = useState(25);
|
||||
const [targetRetirementAge, setTargetRetirementAge] = useState(40);
|
||||
const [currentSavings, setCurrentSavings] = useState(10000);
|
||||
const [annualExpenses, setAnnualExpenses] = useState(50000);
|
||||
const [expectedReturn, setExpectedReturn] = useState(7);
|
||||
const [currentIncome, setCurrentIncome] = useState(75000);
|
||||
|
||||
// Calculate years to retirement
|
||||
const yearsToRetirement = targetRetirementAge - currentAge;
|
||||
|
||||
// Determine withdrawal rate based on retirement age
|
||||
const getWithdrawalRate = (age: number) => {
|
||||
if (age <= 35) return 3;
|
||||
if (age <= 40) return 3.5;
|
||||
if (age <= 45) return 3.75;
|
||||
if (age <= 50) return 4;
|
||||
return 4.25;
|
||||
};
|
||||
|
||||
const withdrawalRate = getWithdrawalRate(targetRetirementAge);
|
||||
const fireMultiplier = 100 / withdrawalRate;
|
||||
|
||||
// Calculate FIRE number
|
||||
const fireNumber = annualExpenses * fireMultiplier;
|
||||
|
||||
// Calculate future value of current savings
|
||||
const futureValueOfCurrentSavings =
|
||||
currentSavings * Math.pow(1 + expectedReturn / 100, yearsToRetirement);
|
||||
|
||||
// Calculate gap
|
||||
const gap = fireNumber - futureValueOfCurrentSavings;
|
||||
|
||||
// Calculate required monthly savings
|
||||
const calculateMonthlySavings = () => {
|
||||
if (yearsToRetirement <= 0 || gap <= 0) return 0;
|
||||
const monthlyReturn = expectedReturn / 100 / 12;
|
||||
const months = yearsToRetirement * 12;
|
||||
return (gap * monthlyReturn) / (Math.pow(1 + monthlyReturn, months) - 1);
|
||||
};
|
||||
|
||||
const requiredMonthlySavings = calculateMonthlySavings();
|
||||
const requiredAnnualSavings = requiredMonthlySavings * 12;
|
||||
const savingsRate = (requiredAnnualSavings / currentIncome) * 100;
|
||||
|
||||
// Format currency
|
||||
const formatCurrency = (value: number) => {
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
minimumFractionDigits: 0,
|
||||
maximumFractionDigits: 0,
|
||||
}).format(value);
|
||||
};
|
||||
|
||||
// Age-specific recommendations
|
||||
const getRecommendations = () => {
|
||||
if (targetRetirementAge <= 35) {
|
||||
return {
|
||||
difficulty: "Extremely Challenging",
|
||||
color: "text-red-600",
|
||||
tips: [
|
||||
"Requires 60-80% savings rate",
|
||||
"Focus on maximizing income",
|
||||
"Consider geographic arbitrage",
|
||||
"Live extremely frugally",
|
||||
],
|
||||
};
|
||||
} else if (targetRetirementAge <= 40) {
|
||||
return {
|
||||
difficulty: "Very Challenging",
|
||||
color: "text-orange-600",
|
||||
tips: [
|
||||
"Requires 50-60% savings rate",
|
||||
"Maximize career growth",
|
||||
"House hack or minimize housing",
|
||||
"Avoid lifestyle inflation",
|
||||
],
|
||||
};
|
||||
} else if (targetRetirementAge <= 45) {
|
||||
return {
|
||||
difficulty: "Challenging",
|
||||
color: "text-yellow-600",
|
||||
tips: [
|
||||
"Requires 40-50% savings rate",
|
||||
"Build multiple income streams",
|
||||
"Consider Coast FIRE strategy",
|
||||
"Plan for healthcare costs",
|
||||
],
|
||||
};
|
||||
} else if (targetRetirementAge <= 50) {
|
||||
return {
|
||||
difficulty: "Moderate",
|
||||
color: "text-blue-600",
|
||||
tips: [
|
||||
"Requires 30-40% savings rate",
|
||||
"Use tax-advantaged accounts",
|
||||
"Consider part-time work",
|
||||
"Plan Roth conversions",
|
||||
],
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
difficulty: "Achievable",
|
||||
color: "text-green-600",
|
||||
tips: [
|
||||
"Requires 25-35% savings rate",
|
||||
"Maximize 401(k) contributions",
|
||||
"Use Rule of 55 if applicable",
|
||||
"Bridge to Social Security",
|
||||
],
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const recommendations = getRecommendations();
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Input Section */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Your FIRE by Age Inputs</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your details to see what it takes to retire at your target age
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="current-age">Current Age</Label>
|
||||
<span className="text-sm font-medium">{currentAge}</span>
|
||||
</div>
|
||||
<Slider
|
||||
id="current-age"
|
||||
min={20}
|
||||
max={55}
|
||||
step={1}
|
||||
value={[currentAge]}
|
||||
onValueChange={(value) => setCurrentAge(value[0] ?? 25)}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="target-age">Target Retirement Age</Label>
|
||||
<Select
|
||||
value={targetRetirementAge.toString()}
|
||||
onValueChange={(value) => setTargetRetirementAge(Number(value))}
|
||||
>
|
||||
<SelectTrigger id="target-age">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="30">Retire at 30</SelectItem>
|
||||
<SelectItem value="35">Retire at 35</SelectItem>
|
||||
<SelectItem value="40">Retire at 40</SelectItem>
|
||||
<SelectItem value="45">Retire at 45</SelectItem>
|
||||
<SelectItem value="50">Retire at 50</SelectItem>
|
||||
<SelectItem value="55">Retire at 55</SelectItem>
|
||||
<SelectItem value="60">Retire at 60</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="current-savings">
|
||||
Current Retirement Savings
|
||||
</Label>
|
||||
<Input
|
||||
id="current-savings"
|
||||
type="number"
|
||||
value={currentSavings}
|
||||
onChange={(e) => setCurrentSavings(Number(e.target.value))}
|
||||
min={0}
|
||||
step={1000}
|
||||
/>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Total invested for retirement
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="current-income">Current Annual Income</Label>
|
||||
<Input
|
||||
id="current-income"
|
||||
type="number"
|
||||
value={currentIncome}
|
||||
onChange={(e) => setCurrentIncome(Number(e.target.value))}
|
||||
min={0}
|
||||
step={1000}
|
||||
/>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Pre-tax annual income
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="annual-expenses">
|
||||
Annual Expenses in Retirement
|
||||
</Label>
|
||||
<Input
|
||||
id="annual-expenses"
|
||||
type="number"
|
||||
value={annualExpenses}
|
||||
onChange={(e) => setAnnualExpenses(Number(e.target.value))}
|
||||
min={0}
|
||||
step={1000}
|
||||
/>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Yearly spending needs
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<Label htmlFor="expected-return">Expected Annual Return</Label>
|
||||
<span className="text-sm font-medium">{expectedReturn}%</span>
|
||||
</div>
|
||||
<Slider
|
||||
id="expected-return"
|
||||
min={4}
|
||||
max={10}
|
||||
step={0.5}
|
||||
value={[expectedReturn]}
|
||||
onValueChange={(value) => setExpectedReturn(value[0] ?? 7)}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Results Section */}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Your FIRE Number</CardTitle>
|
||||
<CardDescription>
|
||||
Target for retiring at {targetRetirementAge}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-primary text-4xl font-bold">
|
||||
{formatCurrency(fireNumber)}
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-2 text-sm">
|
||||
{fireMultiplier.toFixed(1)}× annual expenses ({withdrawalRate}%
|
||||
withdrawal rate)
|
||||
</p>
|
||||
<div className="bg-foreground/5 mt-4 rounded-lg p-3">
|
||||
<p className="text-sm font-medium">Years to Retirement</p>
|
||||
<p className="text-2xl font-bold">{yearsToRetirement}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Required Monthly Savings</CardTitle>
|
||||
<CardDescription>To reach your FIRE goal</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-primary text-4xl font-bold">
|
||||
{formatCurrency(requiredMonthlySavings)}
|
||||
</p>
|
||||
<p className="text-muted-foreground mt-2 text-sm">
|
||||
{formatCurrency(requiredAnnualSavings)}/year
|
||||
</p>
|
||||
<div className="bg-foreground/5 mt-4 rounded-lg p-3">
|
||||
<p className="text-sm font-medium">Savings Rate Required</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{Math.min(savingsRate, 100).toFixed(0)}%
|
||||
</p>
|
||||
{savingsRate > 100 && (
|
||||
<p className="mt-1 text-xs text-red-600">
|
||||
⚠️ Exceeds current income
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Difficulty Assessment */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
Difficulty Assessment: Retiring at {targetRetirementAge}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="mb-4">
|
||||
<p className="text-lg font-medium">Difficulty Level:</p>
|
||||
<p className={`text-3xl font-bold ${recommendations.color}`}>
|
||||
{recommendations.difficulty}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-3 text-lg font-medium">Key Success Factors:</p>
|
||||
<ul className="ml-6 list-disc space-y-2">
|
||||
{recommendations.tips.map((tip, idx) => (
|
||||
<li key={idx} className="text-lg">
|
||||
{tip}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Breakdown */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Your Path to FIRE at {targetRetirementAge}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Current Savings Growth
|
||||
</p>
|
||||
<p className="text-xl font-bold">
|
||||
{formatCurrency(futureValueOfCurrentSavings)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">Additional Needed</p>
|
||||
<p className="text-xl font-bold">
|
||||
{formatCurrency(Math.max(gap, 0))}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Total Contributions
|
||||
</p>
|
||||
<p className="text-xl font-bold">
|
||||
{formatCurrency(requiredAnnualSavings * yearsToRetirement)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-foreground/5 rounded-lg p-4 text-center">
|
||||
<p className="text-muted-foreground text-sm">Investment Growth</p>
|
||||
<p className="text-xl font-bold">
|
||||
{formatCurrency(
|
||||
fireNumber -
|
||||
currentSavings -
|
||||
requiredAnnualSavings * yearsToRetirement,
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Tips Card */}
|
||||
{savingsRate > 50 && (
|
||||
<Card className="border-orange-200 bg-orange-50 dark:border-orange-900 dark:bg-orange-950/20">
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-sm">
|
||||
<strong>⚡ High Savings Rate Required:</strong> Achieving a{" "}
|
||||
{savingsRate.toFixed(0)}% savings rate is challenging. Consider
|
||||
increasing income through side hustles, reducing major expenses
|
||||
like housing/transportation, or adjusting your target retirement
|
||||
age to {targetRetirementAge + 5} for a more manageable{" "}
|
||||
{(
|
||||
((requiredAnnualSavings * yearsToRetirement) /
|
||||
((targetRetirementAge + 5 - currentAge) * currentIncome)) *
|
||||
100
|
||||
).toFixed(0)}
|
||||
% savings rate.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
@@ -1,625 +0,0 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import BackgroundPattern from "@/app/components/BackgroundPattern";
|
||||
import Footer from "@/app/components/footer";
|
||||
import FireByAgeCalculator from "./FireByAgeCalculator";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "FIRE by Age Guide - Retire at 30, 35, 40, 45, 50, 55 | InvestingFIRE",
|
||||
description:
|
||||
"Complete guide to achieving FIRE at any age. Learn how much you need to retire at 30, 35, 40, 45, 50, or 55. Free calculator with age-specific strategies and savings targets.",
|
||||
keywords:
|
||||
"retire at 40, retire at 45, retire at 50, retire at 35, retire at 30, early retirement by age, FIRE age calculator, how much to retire at 40",
|
||||
openGraph: {
|
||||
title: "FIRE by Age Guide - When Can You Retire?",
|
||||
description:
|
||||
"Discover exactly how much you need to retire at 30, 35, 40, 45, 50, or 55. Complete guide with calculator and age-specific strategies.",
|
||||
type: "website",
|
||||
url: "https://investingfire.com/guides/fire-by-age",
|
||||
},
|
||||
};
|
||||
|
||||
export default function FireByAgePage() {
|
||||
const faqData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
mainEntity: [
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "How much do I need to retire at 40?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "To retire at 40, you typically need 25-30x your annual expenses saved. For $50,000/year in expenses, that's $1.25-1.5 million. The higher multiplier accounts for a longer retirement period. Starting at 25, you'd need to save about $3,000-4,000/month assuming 7% returns.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "Can I retire at 50 with $1 million?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "Yes, you can retire at 50 with $1 million if your annual expenses are $40,000 or less (using the 4% rule). For a more conservative 3.5% withdrawal rate, you'd need expenses under $35,000/year. Consider that you'll have 15 years before Medicare eligibility, so factor in health insurance costs.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "What's the best age to retire early?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "The 'best' age depends on your personal circumstances, but many FIRE achievers target 40-50. This balances having enough working years to accumulate wealth with plenty of healthy retirement years. Earlier retirement requires more aggressive saving and potentially lower withdrawal rates.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "How does retirement age affect withdrawal rates?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "Younger retirees should use lower withdrawal rates. While the 4% rule works for 30-year retirements, consider: Age 30-35: 3-3.25% withdrawal rate. Age 40-45: 3.5% withdrawal rate. Age 50-55: 3.75-4% withdrawal rate. Age 60+: 4-4.5% withdrawal rate.",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const breadcrumbData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "BreadcrumbList",
|
||||
itemListElement: [
|
||||
{
|
||||
"@type": "ListItem",
|
||||
position: 1,
|
||||
name: "Home",
|
||||
item: "https://investingfire.com",
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
position: 2,
|
||||
name: "Guides",
|
||||
item: "https://investingfire.com/guides",
|
||||
},
|
||||
{
|
||||
"@type": "ListItem",
|
||||
position: 3,
|
||||
name: "FIRE by Age",
|
||||
item: "https://investingfire.com/guides/fire-by-age",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const ageTargets = [
|
||||
{
|
||||
age: 30,
|
||||
multiplier: 33,
|
||||
withdrawalRate: 3,
|
||||
savingsYears: "5-10",
|
||||
challenges: [
|
||||
"Extremely aggressive saving required",
|
||||
"Limited career earnings time",
|
||||
"60+ year retirement horizon",
|
||||
],
|
||||
strategies: [
|
||||
"Save 70-80% of income",
|
||||
"High-income career essential",
|
||||
"Consider geographic arbitrage",
|
||||
],
|
||||
},
|
||||
{
|
||||
age: 35,
|
||||
multiplier: 30,
|
||||
withdrawalRate: 3.25,
|
||||
savingsYears: "10-15",
|
||||
challenges: [
|
||||
"Very high savings rate needed",
|
||||
"Family formation years",
|
||||
"55+ year retirement",
|
||||
],
|
||||
strategies: [
|
||||
"Save 60-70% of income",
|
||||
"Maximize career growth",
|
||||
"House hack or minimize housing",
|
||||
],
|
||||
},
|
||||
{
|
||||
age: 40,
|
||||
multiplier: 28,
|
||||
withdrawalRate: 3.5,
|
||||
savingsYears: "15-20",
|
||||
challenges: [
|
||||
"Peak earning years cut short",
|
||||
"Children's education costs",
|
||||
"Healthcare before Medicare",
|
||||
],
|
||||
strategies: [
|
||||
"Save 50-60% of income",
|
||||
"Build multiple income streams",
|
||||
"Plan for health insurance",
|
||||
],
|
||||
},
|
||||
{
|
||||
age: 45,
|
||||
multiplier: 27,
|
||||
withdrawalRate: 3.75,
|
||||
savingsYears: "20-25",
|
||||
challenges: [
|
||||
"Mid-career transition",
|
||||
"Aging parents care",
|
||||
"20 years to Medicare",
|
||||
],
|
||||
strategies: [
|
||||
"Save 40-50% of income",
|
||||
"Consider Coast FIRE first",
|
||||
"Build health insurance fund",
|
||||
],
|
||||
},
|
||||
{
|
||||
age: 50,
|
||||
multiplier: 25,
|
||||
withdrawalRate: 4,
|
||||
savingsYears: "25-30",
|
||||
challenges: [
|
||||
"Early retirement penalties",
|
||||
"15 years to Medicare",
|
||||
"Sequence of returns risk",
|
||||
],
|
||||
strategies: [
|
||||
"Save 30-40% of income",
|
||||
"Ladder conversions",
|
||||
"Part-time work option",
|
||||
],
|
||||
},
|
||||
{
|
||||
age: 55,
|
||||
multiplier: 25,
|
||||
withdrawalRate: 4.25,
|
||||
savingsYears: "30-35",
|
||||
challenges: [
|
||||
"10 years to Medicare",
|
||||
"Social Security timing",
|
||||
"Market volatility impact",
|
||||
],
|
||||
strategies: [
|
||||
"Save 25-35% of income",
|
||||
"Rule of 55 withdrawals",
|
||||
"Bridge account planning",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-2">
|
||||
<BackgroundPattern />
|
||||
|
||||
{/* Header */}
|
||||
<div className="z-10 mx-auto flex flex-col items-center justify-center gap-4 text-center">
|
||||
<div className="mt-8 flex flex-row flex-wrap items-center justify-center gap-4 align-middle">
|
||||
<Link
|
||||
href="/"
|
||||
className="flex items-center gap-4 transition-opacity hover:opacity-90"
|
||||
>
|
||||
<Image
|
||||
priority
|
||||
unoptimized
|
||||
src="/investingfire_logo_no-bg.svg"
|
||||
alt="InvestingFIRE Logo"
|
||||
width={60}
|
||||
height={60}
|
||||
/>
|
||||
<span className="text-2xl font-bold">InvestingFIRE</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<h1 className="from-primary via-primary-foreground to-primary mt-8 bg-gradient-to-r bg-clip-text text-4xl font-extrabold tracking-tight text-transparent drop-shadow-md sm:text-[4rem]">
|
||||
FIRE by Age Guide
|
||||
</h1>
|
||||
<p className="text-primary-foreground/90 max-w-2xl text-xl font-semibold md:text-2xl">
|
||||
Complete Guide to Retiring at 30, 35, 40, 45, 50, or 55
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Breadcrumb Schema */}
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbData) }}
|
||||
/>
|
||||
|
||||
{/* Calculator */}
|
||||
<div className="z-10 mt-8 w-full max-w-4xl">
|
||||
<FireByAgeCalculator />
|
||||
</div>
|
||||
|
||||
{/* SEO Content */}
|
||||
<div className="z-10 mx-auto max-w-4xl px-4 py-12 text-left">
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
Your Complete Guide to FIRE at Any Age
|
||||
</h2>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
Achieving{" "}
|
||||
<strong>Financial Independence, Retire Early (FIRE)</strong> is
|
||||
possible at virtually any age, but the strategies, savings rates,
|
||||
and challenges vary dramatically depending on when you want to
|
||||
retire. This comprehensive guide breaks down exactly what it takes
|
||||
to retire at 30, 35, 40, 45, 50, or 55.
|
||||
</p>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
The younger your target retirement age, the more aggressive your
|
||||
approach needs to be. While retiring at 55 might require saving
|
||||
25-35% of your income, retiring at 35 could demand 60-70% savings
|
||||
rates and significant lifestyle adjustments. Let's explore what's
|
||||
realistic for each age milestone.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{/* Age-Specific Sections */}
|
||||
{ageTargets.map((target) => (
|
||||
<section
|
||||
key={target.age}
|
||||
className="mb-12 scroll-mt-20"
|
||||
id={`retire-at-${target.age}`}
|
||||
>
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
How to Retire at {target.age}: Complete Strategy
|
||||
</h2>
|
||||
|
||||
<div className="bg-foreground/10 mb-6 rounded-lg p-6">
|
||||
<h3 className="mb-4 text-xl font-semibold">
|
||||
Quick Facts: Retiring at {target.age}
|
||||
</h3>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div>
|
||||
<p className="font-medium">Target Multiple:</p>
|
||||
<p className="text-primary text-2xl font-bold">
|
||||
{target.multiplier}× annual expenses
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">Safe Withdrawal Rate:</p>
|
||||
<p className="text-primary text-2xl font-bold">
|
||||
{target.withdrawalRate}%
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">Typical Saving Period:</p>
|
||||
<p className="text-primary text-2xl font-bold">
|
||||
{target.savingsYears} years
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-medium">For $50k/year expenses:</p>
|
||||
<p className="text-primary text-2xl font-bold">
|
||||
${(target.multiplier * 50).toLocaleString()}k needed
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6 grid gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 className="mb-3 text-xl font-semibold">Key Challenges</h3>
|
||||
<ul className="ml-6 list-disc space-y-2 text-lg">
|
||||
{target.challenges.map((challenge, idx) => (
|
||||
<li key={idx}>{challenge}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="mb-3 text-xl font-semibold">
|
||||
Winning Strategies
|
||||
</h3>
|
||||
<ul className="ml-6 list-disc space-y-2 text-lg">
|
||||
{target.strategies.map((strategy, idx) => (
|
||||
<li key={idx}>{strategy}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-lg leading-relaxed">
|
||||
{target.age <= 35 &&
|
||||
"This ultra-early retirement requires exceptional discipline and often a very high income. Most successful retirees at this age work in tech, finance, or have entrepreneurial success. Geographic arbitrage is almost essential."}
|
||||
{target.age > 35 &&
|
||||
target.age <= 45 &&
|
||||
"This is the sweet spot for many FIRE achievers - enough time to build wealth while still having decades of healthy retirement. Focus on maximizing your peak earning years and maintaining a high savings rate."}
|
||||
{target.age > 45 &&
|
||||
"This more traditional early retirement timeline allows for a balanced approach. You'll have more time to benefit from compound growth and can use strategies like the Rule of 55 for penalty-free 401(k) access."}
|
||||
</p>
|
||||
</section>
|
||||
))}
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
Age-Specific FIRE Strategies Comparison
|
||||
</h2>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="bg-foreground/5 w-full border-collapse rounded-lg">
|
||||
<thead>
|
||||
<tr className="border-foreground/20 border-b">
|
||||
<th className="p-4 text-left">Retirement Age</th>
|
||||
<th className="p-4 text-center">Savings Rate</th>
|
||||
<th className="p-4 text-center">Years to Save</th>
|
||||
<th className="p-4 text-center">Withdrawal Rate</th>
|
||||
<th className="p-4 text-center">Risk Level</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className="border-foreground/10 border-b">
|
||||
<td className="p-4 font-medium">Retire at 30</td>
|
||||
<td className="p-4 text-center">70-80%</td>
|
||||
<td className="p-4 text-center">5-10</td>
|
||||
<td className="p-4 text-center">3%</td>
|
||||
<td className="p-4 text-center text-red-600">Very High</td>
|
||||
</tr>
|
||||
<tr className="border-foreground/10 border-b">
|
||||
<td className="p-4 font-medium">Retire at 35</td>
|
||||
<td className="p-4 text-center">60-70%</td>
|
||||
<td className="p-4 text-center">10-15</td>
|
||||
<td className="p-4 text-center">3.25%</td>
|
||||
<td className="p-4 text-center text-orange-600">High</td>
|
||||
</tr>
|
||||
<tr className="border-foreground/10 border-b">
|
||||
<td className="p-4 font-medium">Retire at 40</td>
|
||||
<td className="p-4 text-center">50-60%</td>
|
||||
<td className="p-4 text-center">15-20</td>
|
||||
<td className="p-4 text-center">3.5%</td>
|
||||
<td className="p-4 text-center text-yellow-600">
|
||||
Moderate-High
|
||||
</td>
|
||||
</tr>
|
||||
<tr className="border-foreground/10 border-b">
|
||||
<td className="p-4 font-medium">Retire at 45</td>
|
||||
<td className="p-4 text-center">40-50%</td>
|
||||
<td className="p-4 text-center">20-25</td>
|
||||
<td className="p-4 text-center">3.75%</td>
|
||||
<td className="p-4 text-center text-blue-600">Moderate</td>
|
||||
</tr>
|
||||
<tr className="border-foreground/10 border-b">
|
||||
<td className="p-4 font-medium">Retire at 50</td>
|
||||
<td className="p-4 text-center">30-40%</td>
|
||||
<td className="p-4 text-center">25-30</td>
|
||||
<td className="p-4 text-center">4%</td>
|
||||
<td className="p-4 text-center text-green-600">
|
||||
Low-Moderate
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="p-4 font-medium">Retire at 55</td>
|
||||
<td className="p-4 text-center">25-35%</td>
|
||||
<td className="p-4 text-center">30-35</td>
|
||||
<td className="p-4 text-center">4.25%</td>
|
||||
<td className="p-4 text-center text-green-600">Low</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
Critical Considerations by Retirement Age
|
||||
</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="bg-foreground/10 rounded-lg p-6">
|
||||
<h3 className="mb-3 text-xl font-semibold">
|
||||
Healthcare Coverage Gap
|
||||
</h3>
|
||||
<ul className="ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<strong>Retire at 30-40:</strong> 25-35 years until Medicare -
|
||||
Budget $15-25k/year for health insurance
|
||||
</li>
|
||||
<li>
|
||||
<strong>Retire at 45-50:</strong> 15-20 years gap - Consider
|
||||
ACA subsidies and HSA maximization
|
||||
</li>
|
||||
<li>
|
||||
<strong>Retire at 55:</strong> 10-year gap - Explore COBRA,
|
||||
spouse's plan, or private insurance
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-6">
|
||||
<h3 className="mb-3 text-xl font-semibold">
|
||||
Social Security Strategy
|
||||
</h3>
|
||||
<ul className="ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<strong>Retire before 35:</strong> Minimal SS benefits - Plan
|
||||
without relying on it
|
||||
</li>
|
||||
<li>
|
||||
<strong>Retire at 40-45:</strong> Reduced benefits - Factor in
|
||||
25-50% of normal benefit
|
||||
</li>
|
||||
<li>
|
||||
<strong>Retire at 50-55:</strong> Near-full benefits - Can be
|
||||
significant income supplement
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-foreground/10 rounded-lg p-6">
|
||||
<h3 className="mb-3 text-xl font-semibold">
|
||||
Investment Allocation
|
||||
</h3>
|
||||
<ul className="ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<strong>60+ year retirement:</strong> 80-90% stocks for
|
||||
growth, rebalance gradually
|
||||
</li>
|
||||
<li>
|
||||
<strong>40-50 year retirement:</strong> 70-80% stocks,
|
||||
consider bond ladder for first decade
|
||||
</li>
|
||||
<li>
|
||||
<strong>30-40 year retirement:</strong> 60-70% stocks,
|
||||
traditional balanced approach
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="mb-12">
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqData) }}
|
||||
/>
|
||||
<h2 className="mb-4 text-3xl font-bold">FIRE by Age FAQ</h2>
|
||||
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
How much do I need to retire at 40?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
To retire at 40, you typically need 25-30x your annual expenses
|
||||
saved. For $50,000/year in expenses, that's $1.25-1.5 million.
|
||||
The higher multiplier accounts for a longer retirement period.
|
||||
Starting at 25, you'd need to save about $3,000-4,000/month
|
||||
assuming 7% returns.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-2">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
Can I retire at 50 with $1 million?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Yes, you can retire at 50 with $1 million if your annual
|
||||
expenses are $40,000 or less (using the 4% rule). For a more
|
||||
conservative 3.5% withdrawal rate, you'd need expenses under
|
||||
$35,000/year. Consider that you'll have 15 years before Medicare
|
||||
eligibility, so factor in health insurance costs.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-3">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
What's the best age to retire early?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
The "best" age depends on your personal circumstances, but many
|
||||
FIRE achievers target 40-50. This balances having enough working
|
||||
years to accumulate wealth with plenty of healthy retirement
|
||||
years. Earlier retirement requires more aggressive saving and
|
||||
potentially lower withdrawal rates.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-4">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
How does retirement age affect withdrawal rates?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Younger retirees should use lower withdrawal rates. While the 4%
|
||||
rule works for 30-year retirements, consider:
|
||||
<ul className="mt-2 ml-6 list-disc">
|
||||
<li>Age 30-35: 3-3.25% withdrawal rate</li>
|
||||
<li>Age 40-45: 3.5% withdrawal rate</li>
|
||||
<li>Age 50-55: 3.75-4% withdrawal rate</li>
|
||||
<li>Age 60+: 4-4.5% withdrawal rate</li>
|
||||
</ul>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-5">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
Is retiring at 35 realistic?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Retiring at 35 is challenging but achievable with the right
|
||||
circumstances: high income ($100k+), low expenses, 60-70%
|
||||
savings rate, and disciplined investing. Most who achieve this
|
||||
work in high-paying fields, live frugally, and often have no
|
||||
children or delay having them. Geographic arbitrage to low-cost
|
||||
areas helps significantly.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-6">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
What about retiring with kids?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Retiring early with children adds complexity but is doable. Key
|
||||
considerations: Budget $10-15k per child annually, plan for
|
||||
college (529 plans), factor in larger housing needs, and
|
||||
consider part-time work for stability. Many FIRE families find
|
||||
that having more time with kids is worth the extra financial
|
||||
planning required.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</section>
|
||||
|
||||
{/* Quick Reference */}
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
Quick Reference: FIRE Numbers by Age
|
||||
</h2>
|
||||
<div className="bg-foreground/10 rounded-lg p-6">
|
||||
<p className="mb-4 text-lg font-medium">
|
||||
Based on $50,000 annual expenses:
|
||||
</p>
|
||||
<div className="grid gap-3 md:grid-cols-2">
|
||||
{ageTargets.map((target) => (
|
||||
<div
|
||||
key={target.age}
|
||||
className="bg-background/50 flex justify-between rounded p-3"
|
||||
>
|
||||
<span className="font-medium">Retire at {target.age}:</span>
|
||||
<span className="text-primary font-bold">
|
||||
${(target.multiplier * 50).toLocaleString()},000
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Call to Action */}
|
||||
<section className="bg-foreground/10 mb-12 rounded-lg p-8 text-center">
|
||||
<h2 className="mb-4 text-2xl font-bold">
|
||||
Ready to Plan Your Early Retirement?
|
||||
</h2>
|
||||
<p className="mb-6 text-lg">
|
||||
Use our comprehensive calculators to create your personalized FIRE
|
||||
plan, whether you're targeting retirement at 35 or 55.
|
||||
</p>
|
||||
<div className="flex flex-col justify-center gap-4 sm:flex-row">
|
||||
<Link
|
||||
href="/"
|
||||
className="bg-primary text-primary-foreground inline-block rounded-lg px-6 py-3 font-semibold transition-opacity hover:opacity-90"
|
||||
>
|
||||
FIRE Calculator →
|
||||
</Link>
|
||||
<Link
|
||||
href="/calculators/coast-fire"
|
||||
className="bg-secondary text-secondary-foreground inline-block rounded-lg px-6 py-3 font-semibold transition-opacity hover:opacity-90"
|
||||
>
|
||||
Coast FIRE Calculator →
|
||||
</Link>
|
||||
<Link
|
||||
href="/calculators/4-percent-rule"
|
||||
className="bg-secondary text-secondary-foreground inline-block rounded-lg px-6 py-3 font-semibold transition-opacity hover:opacity-90"
|
||||
>
|
||||
4% Rule Calculator →
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
@@ -1,17 +1,15 @@
|
||||
import "@/styles/globals.css";
|
||||
import PlausibleProvider from "next-plausible";
|
||||
import { type Metadata, type Viewport } from "next";
|
||||
import { type Metadata } from "next";
|
||||
import { Geist } from "next/font/google";
|
||||
import { WebVitals } from "./components/web-vitals";
|
||||
|
||||
export const viewport: Viewport = {
|
||||
themeColor: [{ color: "oklch(0.97 0.0228 95.96)" }],
|
||||
};
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "InvestingFIRE | Finance and Retirement Calculator",
|
||||
title:
|
||||
"InvestingFIRE Calculator | Plan Your Financial Independence & Early Retirement",
|
||||
description:
|
||||
"Achieve Financial Independence & Early Retirement! Plan your FIRE journey with the InvestingFIRE calculator and get personalized projections in buttersmooth graphs.",
|
||||
"Achieve Financial Independence, Retire Early (FIRE) with the InvestingFIRE calculator. Get personalized projections and investing advice to plan your journey.",
|
||||
icons: [{ rel: "icon", url: "/favicon.ico" }],
|
||||
};
|
||||
|
||||
const geist = Geist({
|
||||
@@ -26,16 +24,17 @@ export default function RootLayout({
|
||||
<html lang="en" className={geist.variable}>
|
||||
<head>
|
||||
<meta name="apple-mobile-web-app-title" content="FIRE" />
|
||||
<PlausibleProvider
|
||||
domain="investingfire.com"
|
||||
customDomain="https://analytics.schulze.network"
|
||||
selfHosted={true}
|
||||
enabled={true}
|
||||
trackOutboundLinks={true}
|
||||
/>
|
||||
</head>
|
||||
<WebVitals />
|
||||
<body>{children}</body>
|
||||
<PlausibleProvider
|
||||
domain="investingfire.com"
|
||||
customDomain="https://analytics.schulze.network"
|
||||
selfHosted={true}
|
||||
enabled={true}
|
||||
trackOutboundLinks={true}
|
||||
>
|
||||
<WebVitals />
|
||||
<body>{children}</body>
|
||||
</PlausibleProvider>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
415
src/app/page.tsx
415
src/app/page.tsx
@@ -6,73 +6,13 @@ import {
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
import Footer from "./components/footer";
|
||||
import BackgroundPattern from "./components/BackgroundPattern";
|
||||
|
||||
export default function HomePage() {
|
||||
const faqData = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
mainEntity: [
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "What methodology does this calculator use?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "We run a multi-year projection in two phases: 1. Accumulation: Your balance grows by CAGR and you add monthly savings. 2. Retirement: The balance continues compounding, but you withdraw an inflation-adjusted monthly allowance. The result: a precise estimate of the capital you'll have at retirement (your “FIRE Number”) and how long it will last until your chosen life expectancy.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "Why isn't this just the 4% rule?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "The 4% rule is a useful starting point (25× annual spending), but it assumes a fixed withdrawal rate with inflation adjustments and doesn't model ongoing savings or dynamic market returns. Our calculator simulates each year's growth, contributions, and inflation-indexed withdrawals to give you a tailored picture.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "How do I choose a realistic growth rate?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "Historically, a diversified portfolio of equities and bonds has returned around 7-10% per year before inflation. We recommend starting around 6-8% (net of fees), then running “what-if” scenarios—5% on the conservative side, 10% on the aggressive side—to see how they affect your timeline.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "How does inflation factor into my FIRE Number?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "Cost of living rises. To maintain today's lifestyle, your monthly allowance must grow each year by your inflation rate. This calculator automatically inflates your desired monthly spending and subtracts it from your portfolio during retirement, ensuring your FIRE Number keeps pace with rising expenses.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "Can I really retire early with FIRE?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "Early retirement is achievable with disciplined saving, smart investing, and realistic assumptions. This tool helps you set targets, visualize outcomes, and adjust inputs—so you can build confidence in your plan and make informed trade-offs between lifestyle, risk, and timeline.",
|
||||
},
|
||||
},
|
||||
{
|
||||
"@type": "Question",
|
||||
name: "How should I use this calculator effectively?",
|
||||
acceptedAnswer: {
|
||||
"@type": "Answer",
|
||||
text: "Start with your actual numbers (capital, savings, age). Set conservative - mid - aggressive growth rates to bound possibilities. Slide your retirement age to explore “early” vs. “traditional” scenarios. Review the chart—especially the reference lines—to see when you hit FI and how withdrawals impact your balance. Experiment with higher savings rates or lower target spending to accelerate your path.",
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-2">
|
||||
<BackgroundPattern />
|
||||
<div className="z-10 mx-auto flex flex-col items-center justify-center gap-4 text-center">
|
||||
<div className="mt-8 flex flex-row flex-wrap items-center justify-center gap-4 align-middle">
|
||||
<main className="text-primary-foreground to-destructive from-secondary flex min-h-screen flex-col items-center bg-gradient-to-b p-4">
|
||||
<div className="mx-auto flex flex-col items-center justify-center gap-4 text-center">
|
||||
<div className="flex flex-row flex-wrap items-center justify-center gap-4 align-middle">
|
||||
<Image
|
||||
priority
|
||||
unoptimized
|
||||
src="/investingfire_logo_no-bg.svg"
|
||||
alt="InvestingFIRE Logo"
|
||||
width={100}
|
||||
@@ -91,35 +31,29 @@ export default function HomePage() {
|
||||
</div>
|
||||
|
||||
{/* Added SEO Content Sections */}
|
||||
<div className="z-10 mx-auto max-w-2xl py-12 text-left">
|
||||
<div className="mx-auto max-w-2xl py-12 text-left">
|
||||
<section className="mb-12">
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
What Is FIRE? Understanding Financial Independence and Early
|
||||
What is FIRE? Understanding Financial Independence and Early
|
||||
Retirement
|
||||
</h2>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
FIRE stands for{" "}
|
||||
<strong>Financial Independence, Retire Early</strong>. It's a
|
||||
lifestyle movement built around two core ideas:
|
||||
FIRE stands for "Financial Independence, Retire Early."
|
||||
It's a movement focused on aggressive saving and strategic
|
||||
investing to build a substantial portfolio. The goal is for
|
||||
investment returns to cover living expenses indefinitely, freeing
|
||||
you from traditional employment. Achieving FIRE means gaining the
|
||||
freedom to pursue passions, travel, or simply enjoy life without
|
||||
needing a regular paycheck. Sound investing advice is crucial for
|
||||
building the wealth needed.
|
||||
</p>
|
||||
<ul className="mb-4 ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<strong>Aggressive saving & investing</strong>—often 50%+ of
|
||||
income—so your capital grows rapidly.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Passive-income coverage</strong>—when your investment
|
||||
returns exceed your living expenses, you gain freedom from a
|
||||
traditional 9-5.
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-lg leading-relaxed">
|
||||
By reaching your personal <em>FIRE Number</em>—the nest egg needed
|
||||
to cover your inflation-adjusted spending—you unlock the option to
|
||||
step away from a daily paycheck and pursue passion projects, travel,
|
||||
family, or anything else. This calculator helps you simulate your
|
||||
journey, estimate how much you need, and visualize both your
|
||||
accumulation phase and your retirement withdrawals over time.
|
||||
The core principle involves maximizing your savings rate (often
|
||||
50%+) and investing wisely, typically in low-cost, diversified
|
||||
assets like index funds. Your "FIRE number" – the capital
|
||||
needed – is often estimated as 25 times your desired annual
|
||||
spending, derived from the 4% safe withdrawal rate guideline. This
|
||||
FIRE calculator helps you personalize this estimate.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
@@ -128,173 +62,141 @@ export default function HomePage() {
|
||||
How This FIRE Calculator Provides Investing Insights
|
||||
</h2>
|
||||
<p className="mb-4 text-lg leading-relaxed">
|
||||
Our interactive tool goes beyond a simple “25x annual spending”
|
||||
rule. It runs a <strong>year-by-year simulation</strong> of your
|
||||
portfolio, combining:
|
||||
This calculator helps visualize your path to FIRE by projecting
|
||||
investment growth based on your inputs. Understanding these
|
||||
projections is a key piece of investing advice for long-term
|
||||
planning. Here's a breakdown of the inputs:
|
||||
</p>
|
||||
<ul className="mb-4 ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<strong>Starting Capital</strong>—your current invested balance
|
||||
<strong>Starting Capital:</strong> The total amount you currently
|
||||
have invested.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Monthly Savings</strong>—ongoing contributions to your
|
||||
portfolio
|
||||
<strong>Monthly Savings:</strong> The amount you consistently save
|
||||
and invest each month.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Expected Annual Growth Rate (CAGR)</strong>—compounding
|
||||
returns before inflation
|
||||
<strong>Current Age:</strong> Your current age in years.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Annual Inflation Rate</strong>—to inflate your target
|
||||
withdrawal each year
|
||||
<strong>Expected Annual Growth Rate (%):</strong> The average
|
||||
annual return you expect from your investments (after fees, before
|
||||
inflation).
|
||||
</li>
|
||||
<li>
|
||||
<strong>Desired Monthly Allowance</strong>—today's-value
|
||||
spending goal
|
||||
<strong>Desired Monthly Allowance (Today's Value):</strong>{" "}
|
||||
How much you want to be able to spend each month in retirement, in
|
||||
today's money value.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Retirement Age & Life Expectancy</strong>—defines your
|
||||
accumulation horizon and payout period
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-lg leading-relaxed">Key features:</p>
|
||||
<ul className="mb-4 ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<strong>Real-time calculation</strong>—as you tweak any input,
|
||||
your FIRE Number and chart update instantly.
|
||||
<strong>Annual Inflation Rate (%):</strong> The expected average
|
||||
rate at which the cost of living will increase.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Interactive chart</strong> with area plots for both{" "}
|
||||
<em>portfolio balance</em> and{" "}
|
||||
<em>inflation-adjusted allowance</em>, plus reference lines
|
||||
showing your retirement date and required FIRE Number.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Custom simulation</strong>—switches from accumulation
|
||||
(adding savings) to retirement (withdrawing allowance),
|
||||
compounding each year based on your growth rate.
|
||||
<strong>Life Expectancy (Age):</strong> The age until which you
|
||||
want your funds to last.
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-lg leading-relaxed">
|
||||
With this level of granularity, you can confidently experiment with
|
||||
savings rate, target retirement age, and investment assumptions to
|
||||
discover how small tweaks speed up or delay your path to financial
|
||||
independence.
|
||||
The calculator simulates your investment growth year by year,
|
||||
incorporating monthly contributions, the power of compound growth (a
|
||||
core investing principle), and inflation's impact on your
|
||||
target allowance. It estimates the age at which your capital could
|
||||
sustain your desired, inflation-adjusted monthly spending throughout
|
||||
your expected retirement until your specified life expectancy. It
|
||||
calculates your potential "FIRE Number" and the age you
|
||||
might reach financial independence.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqData) }}
|
||||
/>
|
||||
<h2 className="mb-4 text-3xl font-bold">
|
||||
FIRE & Investing Frequently Asked Questions (FAQ)
|
||||
</h2>
|
||||
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<AccordionItem value="item-1">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
What methodology does this calculator use?
|
||||
What is the 4% rule?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
We run a multi-year projection in two phases:
|
||||
<ol className="ml-6 list-decimal space-y-1">
|
||||
<li>
|
||||
<strong>Accumulation:</strong> Your balance grows by CAGR
|
||||
and you add monthly savings.
|
||||
</li>
|
||||
<li>
|
||||
<strong>Retirement:</strong> The balance continues
|
||||
compounding, but you withdraw an inflation-adjusted monthly
|
||||
allowance.
|
||||
</li>
|
||||
</ol>
|
||||
The result: a precise estimate of the capital you'll have
|
||||
at retirement (your “FIRE Number”) and how long it will last
|
||||
until your chosen life expectancy.
|
||||
The 4% rule is a guideline suggesting that you can safely
|
||||
withdraw 4% of your investment portfolio's value in your
|
||||
first year of retirement, and then adjust that amount for
|
||||
inflation each subsequent year, with a high probability of your
|
||||
money lasting for at least 30 years. This calculator uses a more
|
||||
dynamic simulation based on your life expectancy but is related
|
||||
to this concept.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-2">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
Why isn't this just the 4% rule?
|
||||
Is the Expected Growth Rate realistic? Finding the right
|
||||
investing advice often starts here.
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
The 4% rule is a useful starting point (25× annual spending),
|
||||
but it assumes a fixed withdrawal rate with inflation
|
||||
adjustments and doesn't model ongoing savings or dynamic
|
||||
market returns. Our calculator simulates each year's
|
||||
growth, contributions, and inflation-indexed withdrawals to give
|
||||
you a tailored picture.
|
||||
Historically, diversified stock market investments have returned
|
||||
around 7-10% annually long-term (before inflation). A rate of 7%
|
||||
(after fees) is common, but remember past performance
|
||||
doesn't guarantee future results, a fundamental piece of
|
||||
investing advice. Choose a rate reflecting your risk tolerance
|
||||
and investment strategy.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-3">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
How do I choose a realistic growth rate?
|
||||
How does inflation impact my FIRE number?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Historically, a diversified portfolio of equities and bonds has
|
||||
returned around 7-10% per year before inflation. We recommend
|
||||
starting around 6-8% (net of fees), then running “what-if”
|
||||
scenarios—5% on the conservative side, 10% on the aggressive
|
||||
side—to see how they affect your timeline.
|
||||
Inflation erodes the purchasing power of money over time. Your
|
||||
desired monthly allowance needs to increase each year just to
|
||||
maintain the same standard of living. This calculator accounts
|
||||
for this by adjusting your target allowance upwards based on the
|
||||
inflation rate you provide, ensuring the calculated FIRE number
|
||||
supports your desired lifestyle in future dollars.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-4">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
How does inflation factor into my FIRE Number?
|
||||
Can I really retire early with FIRE?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Cost of living rises. To maintain today's lifestyle, your
|
||||
monthly allowance must grow each year by your inflation rate.
|
||||
This calculator automatically inflates your desired monthly
|
||||
spending and subtracts it from your portfolio during retirement,
|
||||
ensuring your FIRE Number keeps pace with rising expenses.
|
||||
Retiring significantly early is achievable but demands
|
||||
discipline, a high savings rate, and smart investing. Success
|
||||
depends on income, expenses, savings habits, and investment
|
||||
returns. Use this FIRE calculator as a planning tool,
|
||||
understanding it provides estimates based on your assumptions
|
||||
and chosen investing approach.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-5">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
Can I really retire early with FIRE?
|
||||
What does FIRE stand for?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
Early retirement is achievable with disciplined saving, smart
|
||||
investing, and realistic assumptions. This tool helps you set
|
||||
targets, visualize outcomes, and adjust inputs—so you can build
|
||||
confidence in your plan and make informed trade-offs between
|
||||
lifestyle, risk, and timeline.
|
||||
FIRE stands for Financial Independence, Retire Early. It
|
||||
represents a lifestyle movement aimed at maximizing your savings
|
||||
rate through increased income and/or decreased expenses to
|
||||
achieve financial independence and retire much earlier than
|
||||
traditional retirement age.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
|
||||
<AccordionItem value="item-6">
|
||||
<AccordionTrigger className="text-xl font-semibold">
|
||||
How should I use this calculator effectively?
|
||||
How much should I save each month?
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-lg leading-relaxed">
|
||||
<ul className="ml-6 list-disc space-y-1">
|
||||
<li>
|
||||
Start with your actual numbers (capital, savings, age).
|
||||
</li>
|
||||
<li>
|
||||
Set conservative - mid - aggressive growth rates to bound
|
||||
possibilities.
|
||||
</li>
|
||||
<li>
|
||||
Slide your retirement age to explore “early” vs.
|
||||
“traditional” scenarios.
|
||||
</li>
|
||||
<li>
|
||||
Review the chart—especially the reference lines—to see when
|
||||
you hit FI and how withdrawals impact your balance.
|
||||
</li>
|
||||
<li>
|
||||
Experiment with higher savings rates or lower target
|
||||
spending to accelerate your path.
|
||||
</li>
|
||||
</ul>
|
||||
FIRE enthusiasts typically aim to save 50-70% of their income.
|
||||
The more you can save, the faster you'll reach your FIRE
|
||||
goal. However, the right amount depends on your income,
|
||||
lifestyle, and target retirement age. Use the calculator to
|
||||
experiment with different monthly savings amounts to see their
|
||||
impact on your retirement timeline.
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
@@ -306,58 +208,50 @@ export default function HomePage() {
|
||||
FIRE Journey & Investing Resources
|
||||
</h2>
|
||||
<p className="mb-6 text-lg leading-relaxed">
|
||||
Ready to deepen your knowledge and build a bullet-proof plan? Below
|
||||
are some of our favorite blogs, books, tools, and communities for
|
||||
financial independence and smart investing.
|
||||
Ready to dive deeper into FIRE and solidify your investing strategy?
|
||||
Explore these valuable resources for financial independence planning
|
||||
and investing advice:
|
||||
</p>
|
||||
|
||||
<div className="bg-foreground my-8 rounded-md p-4 text-lg">
|
||||
<div className="bg-secondary/20 my-8 rounded-md p-4 text-lg">
|
||||
<p className="font-semibold">Getting Started with FIRE:</p>
|
||||
<ol className="ml-6 list-decimal space-y-1">
|
||||
<li>
|
||||
Run your first projection above to find your target FIRE Number.
|
||||
</li>
|
||||
<li>Identify areas to boost savings or reduce expenses.</li>
|
||||
<li>
|
||||
Study index-fund strategies and low-cost investing advice.
|
||||
Calculate your personal numbers using this FIRE calculator and
|
||||
other tools.
|
||||
</li>
|
||||
<li>
|
||||
Join{" "}
|
||||
<a
|
||||
href="https://www.reddit.com/r/Fire/"
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
supportive communities like r/Fire
|
||||
</a>{" "}
|
||||
to learn from real journeys.
|
||||
Seek sound investing advice and consider joining communities
|
||||
like r/Fire for support.
|
||||
</li>
|
||||
<li>Explore books and podcasts to deepen your understanding</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-2">
|
||||
<div>
|
||||
<h3 className="mb-3 text-xl font-semibold">Blogs & Websites</h3>
|
||||
<h3 className="mb-3 text-xl font-semibold">
|
||||
Blogs & Investing Websites
|
||||
</h3>
|
||||
<ul className="ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<a
|
||||
href="https://www.mrmoneymustache.com/"
|
||||
href="https://www.mrmoneymustache.com/2012/01/13/the-shockingly-simple-math-behind-early-retirement/"
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Mr. Money Mustache
|
||||
</a>{" "}
|
||||
- Hardcore frugality & early retirement success stories.
|
||||
Mr. Money Mustache - Simple Math Behind Early Retirement &
|
||||
Investing
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.playingwithfire.co/"
|
||||
href="https://www.playingwithfire.co/resources"
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Playing With FIRE
|
||||
</a>{" "}
|
||||
- Community resources & real-life case studies.
|
||||
Playing With FIRE - Comprehensive Resources
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
@@ -365,15 +259,16 @@ export default function HomePage() {
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
r/Fire
|
||||
</a>{" "}
|
||||
- Active forum for questions, tips, and support.
|
||||
r/Fire Reddit Community
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="mb-3 text-xl font-semibold">Books & Podcasts</h3>
|
||||
<h3 className="mb-3 text-xl font-semibold">
|
||||
Books & Investment Learning
|
||||
</h3>
|
||||
<ul className="ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<a
|
||||
@@ -381,19 +276,18 @@ export default function HomePage() {
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Your Money or Your Life
|
||||
</a>{" "}
|
||||
- The classic guide to aligning money with values.
|
||||
Your Money or Your Life - Foundational FIRE & Investing
|
||||
Principles
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://podcasts.apple.com/us/podcast/biggerpockets-money-podcast/id1330225136"
|
||||
href="https://www.playingwithfire.co/"
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
BiggerPockets Money Podcast
|
||||
</a>{" "}
|
||||
- Interviews on FIRE strategies and wealth building.
|
||||
Playing With FIRE Documentary
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
@@ -401,39 +295,37 @@ export default function HomePage() {
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
InvestingFIRE Calculator Demo
|
||||
</a>{" "}
|
||||
- Deep dive on how interactive projections can guide your
|
||||
plan.
|
||||
BiggerPockets Money Podcast - FIRE Calculators & Investing
|
||||
Strategies
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="mb-3 text-xl font-semibold">
|
||||
Additional Calculators & Tools
|
||||
Additional FIRE & Investing Calculators
|
||||
</h3>
|
||||
<ul className="ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<a
|
||||
href="https://ghostfol.io"
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Ghostfolio
|
||||
</a>{" "}
|
||||
- Wealth management application for individuals.
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://walletburst.com/tools/coast-fire-calculator/"
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Coast FIRE Calculator
|
||||
</a>{" "}
|
||||
- When you “max out” early contributions but let compounding
|
||||
do the rest.
|
||||
Coast FIRE Calculator - For those considering a partial
|
||||
early retirement
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.empower.com/retirement-calculator"
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Empower Retirement Planner - Free portfolio analysis and net
|
||||
worth tracking
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
@@ -441,16 +333,43 @@ export default function HomePage() {
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Compound Interest Calculator
|
||||
</a>{" "}
|
||||
- Explore the power of growth rates in isolation.
|
||||
CAGR Compound Interest Calculator - Understand Investment
|
||||
Growth
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="mb-3 text-xl font-semibold">
|
||||
Recent Investing & FIRE Articles
|
||||
</h3>
|
||||
<ul className="ml-6 list-disc space-y-2 text-lg">
|
||||
<li>
|
||||
<a
|
||||
href="https://www.businessinsider.com/retiring-tech-early-coast-fire-make-me-millionaire-2025-4"
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
Coast FIRE: Retiring in your 30s while becoming a
|
||||
millionaire by 60
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://www.businessinsider.com/financial-independence-retire-early-saving-loneliness-retreat-bali-making-friends-2025-2"
|
||||
target="_blank"
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
The Social Side of FIRE: Finding Community in Financial
|
||||
Independence
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
@@ -1,11 +0,0 @@
|
||||
import type { MetadataRoute } from "next";
|
||||
|
||||
export default function robots(): MetadataRoute.Robots {
|
||||
return {
|
||||
rules: {
|
||||
userAgent: "*",
|
||||
allow: "/",
|
||||
},
|
||||
sitemap: "https://investingfire.com/sitemap.xml",
|
||||
};
|
||||
}
|
@@ -1,31 +0,0 @@
|
||||
import { BASE_URL } from "@/lib/constants";
|
||||
import { type MetadataRoute } from "next";
|
||||
|
||||
export default function sitemap(): MetadataRoute.Sitemap {
|
||||
return [
|
||||
{
|
||||
url: BASE_URL,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "yearly",
|
||||
priority: 1,
|
||||
},
|
||||
{
|
||||
url: `${BASE_URL}/calculators/4-percent-rule`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "monthly",
|
||||
priority: 0.9,
|
||||
},
|
||||
{
|
||||
url: `${BASE_URL}/calculators/coast-fire`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "monthly",
|
||||
priority: 0.9,
|
||||
},
|
||||
{
|
||||
url: `${BASE_URL}/guides/fire-by-age`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "monthly",
|
||||
priority: 0.9,
|
||||
},
|
||||
];
|
||||
}
|
@@ -1,63 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import * as SliderPrimitive from "@radix-ui/react-slider";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function Slider({
|
||||
className,
|
||||
defaultValue,
|
||||
value,
|
||||
min = 0,
|
||||
max = 100,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
|
||||
const _values = React.useMemo(
|
||||
() =>
|
||||
Array.isArray(value)
|
||||
? value
|
||||
: Array.isArray(defaultValue)
|
||||
? defaultValue
|
||||
: [min, max],
|
||||
[value, defaultValue, min, max],
|
||||
);
|
||||
|
||||
return (
|
||||
<SliderPrimitive.Root
|
||||
data-slot="slider"
|
||||
defaultValue={defaultValue}
|
||||
value={value}
|
||||
min={min}
|
||||
max={max}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track
|
||||
data-slot="slider-track"
|
||||
className={cn(
|
||||
"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
|
||||
)}
|
||||
>
|
||||
<SliderPrimitive.Range
|
||||
data-slot="slider-range"
|
||||
className={cn(
|
||||
"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
|
||||
)}
|
||||
/>
|
||||
</SliderPrimitive.Track>
|
||||
{Array.from({ length: _values.length }, (_, index) => (
|
||||
<SliderPrimitive.Thumb
|
||||
data-slot="slider-thumb"
|
||||
key={index}
|
||||
className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
|
||||
/>
|
||||
))}
|
||||
</SliderPrimitive.Root>
|
||||
);
|
||||
}
|
||||
|
||||
export { Slider };
|
@@ -1 +0,0 @@
|
||||
export const BASE_URL = "https://investingfire.com/";
|
Reference in New Issue
Block a user