Project
Roulette

Compound Interest Explorer

Drag the contribution slider and watch thirty years redraw instantly.

BeginnerWeb appData viz6–14hAI-buildable 5/5no setup

A financial projection tool where every input redraws the chart live. Stacked areas separate contributions from growth, which is the visual that makes compounding click. Straightforward maths, and a good exercise in making a chart feel responsive rather than laggy.

UI
Logic
Useful

Hosting · Free forever

Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.

Deploy it and share a link.

Core features · 7

  • Inputs for initial amount, monthly contribution, rate and duration
  • A chart projects the balance over time
  • Contributions and growth render as separate stacked areas
  • Hovering the chart shows the exact values for that year
  • A summary shows total contributed against total growth
  • Inputs are validated so impossible values can't break the chart
  • The configuration encodes into a shareable URL

The interesting part

  • Compounding frequency that matches the contribution schedule
  • Keeping the chart smooth while a slider is being dragged

Once it works

  • Add an inflation adjustment toggle
  • Compare two scenarios on one chart
  • Add a withdrawal phase after the growth phase

Suggested stack

reacttypescripttailwindrecharts

Track it