Finsim

Learn finance by playing

Comment

Inspiration Money decisions are hard to learn by reading; they click when you can “feel” the trade‑offs. We wanted a playful simulator where you try life choices—promotion, a house, loans, a side hustle—and instantly see how they shape savings and net worth. FinSim turns abstract finance into an interactive game with visuals that make sense at a glance.

What it does

  • Lets you set your baseline income and expenses, then stack life events with adjustable amounts.
  • Runs a 10‑year projection locally or on the server and returns KPIs and a timeline.
  • Visualizes net worth and cash flow with clean, responsive charts.
  • Saves scenarios to a database and creates public share links you can send to friends or judges.
  • Optionally pulls market context (e.g., inflation series from FRED) to inform assumptions.

How we built it

  • Frontend: React + Vite + Tailwind for a premium gradient/glass UI; React Router for pages; Zustand for state; Recharts for charts.
  • Backend: Node + Express + TypeScript with Zod validation; Prisma ORM targeting TiDB Cloud (MySQL).
  • Data: FRED endpoints for inflation/time series and CoinGecko for price snapshots.
  • Infra: Vercel (frontend) and Render (backend). Monorepo with client/ and server/.
  • Simulation: A clear, extensible model that compounds net worth annually after applying yearly cash flow from income minus expenses plus event deltas.

Challenges we ran into

  • Windows dev quirks: Prisma engine file locks (EPERM) and fixing client output paths.
  • ESM/CommonJS friction: replaced an ESM-only slug lib with a lightweight generator.
  • JSON over curl on Windows: shell quoting pitfalls solved via file-based payloads.
  • DB connectivity: SSL/allowlist nuances with TiDB; handled via sslaccept options.
  • Keeping the UI gorgeous yet fast: balancing Tailwind styles, chart performance, and accessibility.

Accomplishments that we're proud of

  • A “judge-ready” UI that feels modern and delightful, not just functional.
  • Adjustable life events with instant recalculation and clear KPIs.
  • Side-by-side scenario comparison and shareable public links.
  • Clean, typed API with validation and a schema-backed database.
  • End-to-end deployment on free tiers with environment-configured keys.

What we learned

  • How to translate financial concepts into a simple, explainable simulation.
  • Practical DX patterns for React + Tailwind v4 and Zustand state.
  • Prisma with a serverless MySQL (TiDB) workflow, migrations, and SSL details.
  • Deploying a monorepo cleanly to Vercel (client) and Render (server).
  • Designing UIs that communicate complex outcomes at a glance.

What's next for Finsim

  • Event timing: start year, duration, one-time vs recurring, and monthly vs yearly inputs.
  • More controls: savings rate, investment return, inflation-adjusted views, taxes.
  • Personalization: auth, user profiles, and saved scenario libraries.
  • Curriculum mode: guided challenges and financial literacy lessons.
  • Performance and resilience: caching market data, better error handling, PWA/mobile polish.

Built With

Share this project:

Updates