MoNeYSim

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

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.

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 MoNeYSim

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

• axios
• javascript
• prisma
• react
• render
• router
• st.-louis-fred
• tidbcloud
• typescript
• vercel