London Baker
← All workSelf-initiated project · 2026 · Design & frontend engineering

Meridian: goal-based investing, built to be trusted

Name a goal and a monthly deposit invests toward it. Designed and built end to end, mock API included.

125tests that find things the way a screen reader does
2themes from one set of color tokens
0charting libraries: the chart is hand-built SVG
  • React
  • TypeScript
  • Mantine
  • TanStack Query
  • Vitest
Try the live demo ↗Read the code ↗
Meridian in dark mode: a total of $20,135 with a green "up $1,985, 10.9%" pill, a teal line chart of value pulling ahead of a dashed line of money put in, and goals below: a house deposit 36% of the way to $20,000 and on track for Oct 2028, and an emergency cushion with its bar full. Sample data.

The problem

Investing apps tell you what your money is worth, not whether you’re getting anywhere. Goal-based investing fixes that: name what you’re saving for, pick a portfolio, and a monthly deposit invests toward it.

The hard part isn’t the happy path. It’s awkward numbers and a slow network, which is where trust is won or lost, as I learned building analytics at Mailchimp.

What I built

One screen, three answers: what it’s all worth, how each goal is tracking (“On track for Oct 2028”), and what happened. Scrub the chart and the headline shows that month.

Goals you can act on. Add money or edit a goal and see the payoff first: “This moves House deposit from Oct 2028 to Sep 2028.”

A mock API with real-world mess. Validation, 404s, 409s and 350 ms of latency, with deliberately awkward data: zeros instead of blanks, a 65-character name, a closed portfolio.

Decisions that matter

  • Writes finish when the page is right. A drawer closes only once the changed data has refetched, and writes never retry on their own.
  • Errors land where they belong. Field messages under the field, a way back from a closed portfolio, and nothing lost on a dropped connection. Three forms, one path.
  • Honest numbers. A goal that hasn’t started says “Starts Dec 1”, not $0 and 0%.
  • Color means one thing. Green and red are gain and loss; goal colors are identity only.

Accessible by default

Labelled controls and tests that query by role, a chart with a screen-reader summary and arrow-key scrubbing, focus-trapping drawers, and no motion for people who prefer less.

How it changed

It began as a timeboxed exercise on a private-markets API. That needed a glossary, so I rebuilt it around goals with my own API, and most of the engineering carried over. I paired with AI throughout and stayed the one deciding; the write-up covers what I kept and overrode.

Next

  • Playwright end-to-end tests for each form’s error paths.
  • A screen reader and contrast pass on the dark palette.
  • Milestones and per-goal history in the chart.