Case study · Investing · Live product

How Much Would I Have If…: a thousand calculator pages, each worth reading

People search for questions like "how much would I have if I invested in Apple in 2010". This site answers that exact question, with a page for every asset and every year: about 1,070 pages. Making the pages was easy. Making each one useful, accurate and fast enough to rank was the real work, on a money topic where Google holds sites to a higher standard.

Visit the live site

Live app: How Much Would I Have If, the investment what if calculator, running in production. Open in a new tab

At a glance

The project in brief

Context	My own product, live at howmuchwouldihaveif.com
My role	Built solo, end to end: strategy, data, design, code, copy and launch
Built with	Real prices from Twelve Data and FRED, hosted on Vercel
Status	Live, with about 1,070 pages. Being indexed, so no traffic numbers yet

01 The problem Context

A thousand pages that all look the same

If a site publishes a thousand near-identical pages, Google treats it as low quality and can push down the whole site, not just the weak pages.

The quick version drops a ticker and a year into the same sentence on every page. It is fast to build and ranks for nothing. The real job was making each generated page worth reading: real data, a real chart, and something specific to say.

The usual approach

Apple since 2010 $X

One template sentence, no sources, no chart. The same as a thousand other pages.

● thin & templated

What this site does

Apple since 2010 $18,200

real prices interactive chart derived insights

A write-up worked out from real monthly prices (best and worst year, biggest drop, value after inflation), plus a chart and search data that match the page.

02 Constraints Limits

What the design had to work within

No PM, no engineering team, no handoff. The hard limits came from outside.

Google's higher bar for money topics

Thin, near-identical pages can push down the whole site.

Data provider rate limits

Every page needs real monthly prices.

Accessibility standards

Charts have to work with a keyboard and a screen reader.

Never financial advice

Every page shows what happened, never what to do.

1,070 pages, one person

Anything slow or heavy is multiplied a thousand times.

03 Decisions Decision

Three decisions that shaped it

Each one traded something away to keep every page accurate, usable and worth ranking.

● Decision 1

One price source at a time

What I chose

Use the precise feed wherever it has data, with the older index only filling in earlier years.

What else I considered

Mixing the two by date for one long history.

Why

Mixing created fake jumps of thousands of percent that looked real. On a money topic, a believable wrong number is worse than a crash.

What I gave up

One continuous series. A test now guards the join.

The detail below

● Decision 2

Charts built by hand

What I chose

Hand-built SVG that works with mouse, touch, keyboard and screen readers.

What else I considered

A charting library, about an hour to add.

Why

It failed keyboard and screen reader users and added over 100 KB to every page.

What I gave up

Build time, including a helper to get theme colors into SVG.

The detail below

● Decision 3

Every sentence worked out from the data

What I chose

Each page's text is calculated from the same numbers as its chart.

What else I considered

One template sentence with the asset and year dropped in.

Why

A thousand near-identical pages rank for nothing and can sink the whole site.

What I gave up

Hand-written copy. The voice comes from rules, not a writer.

The detail below

04 Three calculators Model

Three ways to ask the same question

People ask "what would I have?" in three different ways. Each one gets its own math.

Some imagine one lump sum left alone. Some imagine adding a little every year. Some want to test the "skip the latte" idea. One formula can't answer all three honestly, so the site uses three and says which one is answering.

All at once

One amount invested on day one and left alone.

A bit each year

Money added every year, at different prices. Returns use XIRR, which accounts for when each amount went in. A simple average would give the wrong answer.

Skip the latte

A small everyday spend, invested instead. The cliché, checked against real prices.

05 The components Specimen

The real components, in light and dark

These aren't screenshots. They are the real components, rebuilt here from the site's own design tokens, in both themes.

Every component reads from one set of color variables. A small script sets the theme before the page draws, so there is no flash. The lime answer chip looks the same in both modes, while gains, links and chart lines switch.

The result card

Light

howmuchwouldihaveif.comLump sum

You'd have

$3,318

from $1,000 invested, up 232%.

Multiple3.32×

Per year13.6%

In today's $$2,411

Shares4.47

S&P 500SPXAppleAAPLBitcoinBTCGoldXAU

Dark

howmuchwouldihaveif.comLump sum

You'd have

$3,318

from $1,000 invested, up 232%.

Multiple3.32×

Per year13.6%

In today's $$2,411

Shares4.47

S&P 500SPXAppleAAPLBitcoinBTCGoldXAU

A scenario page

Light

howmuchwouldihaveif.com / apple-since-2010Scenario

Apple · $1,000 since 20102021crosshair readout

Real pricesKeyboard + touch chartDerived insights

A unique narrative computed from real monthly closes: best and worst year, deepest drawdown, inflation-adjusted value. The same numbers render the visible prose and the JSON-LD beneath it.

Dark

howmuchwouldihaveif.com / apple-since-2010Scenario

Apple · $1,000 since 20102021crosshair readout

Real pricesKeyboard + touch chartDerived insights

A unique narrative computed from real monthly closes: best and worst year, deepest drawdown, inflation-adjusted value. The same numbers render the visible prose and the JSON-LD beneath it.

06 The habit calculator Specimen

From one option to its own section

How the habit calculator got its own section

The main calculator asks you to think like an investor: pick an asset, pick a year. The habit calculator starts from something you already know: "I spend too much on this."

"Skip the latte" started as one of the three options, but it drew more interest than the others because it starts from a habit, not an investment. So it got its own section. You arrive knowing you spend $20 a week on bets or $28 on delivery fees, and the page shows what that money could have become. The calculations underneath are the same.

Light

howmuchwouldihaveif.com / habitsHabit engine

Vice$20/wk bets

Sports betting

No judgment, no going without, just the quiet math of the same money, moved somewhere it could grow.

$23,822today · 2.16×

Everyday$28/wk markup

Food delivery

The fees, the service charge, the tip on top, about $28 a week in markup, redirected.

$33,351today · 2.16×

Aspirational$200/mo @ 22

First paycheck

$200 a month, started young, given two decades to compound. No villain here, the wonder of time.

$172,422today · 3.67×

Dark

howmuchwouldihaveif.com / habitsHabit engine

Vice$20/wk bets

Sports betting

No judgment, no going without, just the quiet math of the same money, moved somewhere it could grow.

$23,822today · 2.16×

Everyday$28/wk markup

Food delivery

The fees, the service charge, the tip on top, about $28 a week in markup, redirected.

$33,351today · 2.16×

Aspirational$200/mo @ 22

First paycheck

$200 a month, started young, given two decades to compound. No villain here, the wonder of time.

$172,422today · 3.67×

A rebuild of the live /habits page in both modes. Habits are grouped by how people think about the money, not by type of investment, and the tone stays neutral: no judging, no going without.

07 A data bug Decision

The bug that produced believable wrong numbers

The most dangerous bug never caused an error. It produced wrong numbers that looked right.

Long price histories come from an index. Recent, more precise prices come from an ETF feed. They track the same asset on different scales. The first version mixed them by date, and where they met it created fake jumps of hundreds or thousands of percent that looked real on a chart. That is exactly the failure Decision 1 names.

The fix: wherever the precise feed has data, only that feed is used. The older data only fills in earlier years. A test covers the case, so the bug can't come back.

Before: mixed by date

Reported gain +3,981%

The two sources sit on different scales. Mixing them makes a cliff where they meet, and the chart shows it as a real move.

● plausible & wrong

After: one source at a time

Reported gain +239%

The precise feed is used wherever it has data. The older data only reaches further back. The two scales never mix.

unit-tested regression

The fake-jump case is saved as a test. If a new data source ever brings the problem back, the tests fail before it ships.

08 Written from the data System

Every sentence is worked out from the data

Nobody can write 1,070 pages by hand. So every sentence is worked out from the same numbers as the chart, which keeps it specific and correct.

What every page works out

Best and worst year: the calendar years that helped and hurt most, with their actual returns.
Biggest drop and recovery: the deepest fall, and how long it took to climb back.
How bumpy it was: described in plain words instead of a statistic.
Against the S&P 500: every asset is compared with the obvious alternative.
After inflation: the value in today's dollars, next to the headline number.

One calculation, two uses

The same result feeds the text people read and the data search engines read, so the two can't disagree.

● 0 data errors 14 real big moves coverage → 2026

Checks flagged fourteen extreme moves. Each one was confirmed real (market crashes, COVID, the 2022 fall), not a data error.

09 Charts Decision

Charts built by hand, so everyone can use them

A charting library would have taken an hour to add. It also failed keyboard and screen reader users, and added weight to every one of 1,070 pages.

So the charts are hand-built SVG. One piece of code handles mouse, touch and keyboard: arrow keys move between points, Home and End jump to the ends, and Escape closes. A screen reader announces each value, the page still scrolls on a phone, and animation respects reduced motion. One catch: SVG can't read CSS color variables, so themed lines came out invisible. A small helper, chartColor(), converts the variable into a real color.

Light and dark both come from one set of tokens. The theme is set before the page draws, so there is no flash, and every chart and accent switches together.

Shipped

Keyboard use: arrow keys, Home, End and Escape
Each value read out by screen readers
Touch that still lets the page scroll
A reduced motion version
A helper that turns theme colors into real colors for SVG

Left out on purpose

A 100 KB+ chart library on every page
Canvas charts a screen reader can't see
Tooltips that stop the page scrolling on touch
Animation that ignores reduced motion

10 Search System

Pages built to be found in search

Three kinds of pages bring in search traffic, and the search data only ever describes what the reader can see.

Scenario pages

One page per asset and year, each with its own write-up.

Canonical matchups

"A vs B" pages in one fixed order. The reverse order returns a 404, so two pages never compete for the same search.

The Learn cluster

Explainer pages that answer general questions and link to the calculators.

Search data matches the page

FAQ markup and each asset's figures come from the same calculation as the text. Share images are hidden from search and point back to the real page, so they never compete with it.

The rule: search data can describe what is on the page, but never state a number the reader can't see.

11 Outcome Outcome

What success means: pages that rank and get clicked

The site is new, so rankings and traffic don't mean much yet, and I won't make up a number. Success is pages that rank and get clicked: pages indexed, then search impressions and clicks per page in Search Console.

What I can show now is the standard every page meets. Every page had to be substantive (its own write-up from real data), accurate (verified monthly prices, with the data bug caught before launch), accessible (charts that work with a keyboard and a screen reader), fast (no chart library, static pages) and honest (never presented as advice). It meets all five. Because every page comes from one list of assets, adding the next one costs almost nothing.

Live now

Pages for every asset and year, and for head-to-head comparisons
Real data from Twelve Data and FRED, checked before every build
Light and dark themes from one set of tokens, with no flash on load
Rankings, Compare, Habits, Learn, Search and a blog
Analytics that stay off until visitors consent, and groundwork for ads

What is next

Set up Search Console to measure how the pages rank
Replace the starter data for silver with a paid source (SLV)
Turn on ads only once traffic justifies it
Keep adding assets, which the single asset list makes cheap

12 Reflection Reflection

What I would do differently

I would test the charts with real screen readers earlier, not just against the spec.

More case studies

Three more about numbers people need to trust: a travel payment app that shows the full cost, a home offer signed at the property, and a bill agent that shows every check it ran.

1QR, a travel payment app in an outdoor theme

A payment app for scanning QR codes abroad. It runs in two outdoor modes from the Wolf-Rayet design system: a high contrast day mode that stays readable in direct sun, and a dim night mode in one warm color that protects night vision.

KeySign, signing a home offer at the property

Buyers decide right after a showing, but offer tools need a desk and every state has its own forms. KeySign lets the agent write, sign and send a compliant offer from their phone at the property, then open escrow.

Allowance, an agent that pays the bills inside rules you set

A business banking app for the owner's phone, with a desktop for accounts payable. An AI agent pays a company's routine vendor bills, stops and asks when the bank details are new or the amount is far above the usual, and leaves a day to stop any payment before it goes.

View all case studies