Visual Budget Planner (MosaicLedger)

open source
Feb 2026 - Feb 2026
TypeScriptReactNext.jsPostgreSQL

TartanHacks fintech app with Plaid, XRPL round-ups, and d3 treemaps

Engineered a fintech budget planner in a team of 3 at TartanHacks using with Vitest fuzz testing and Playwright E2E tests via CI/CD. Built a deterministic analysis pipeline with recurring charge detection, explorable d3-hierarchy treemap with PNG/SVG export, Plaid Link and Capital One Nessie API for real bank data, and XRPL round-up micro-savings with Testnet payments.

TartanHacks 2026 project: budget visualization and round-up savings. • Stack: pnpm monorepo (8 packages), Next.js, React, TypeScript, Supabase auth/PostgreSQL; Vitest fuzz testing and Playwright E2E in CI/CD. • Analysis: Deterministic pipeline with recurring charge detection using MAD-based confidence scoring. • Visualization: Explorable d3-hierarchy treemap with nested drill-down, glassmorphic SVG rendering, PNG/SVG export. • Banking: Plaid Link and Capital One Nessie API for real transaction ingestion. • Crypto: XRPL blockchain round-up micro-savings with real Testnet payments via xrpl SDK and hex-encoded memo anchoring.

Case Study

Problem

Give users an intuitive way to visualise their bank spending, automatically detect recurring charges, and micro-save into cryptocurrency, all within a 24-hour hackathon.

Architecture

  • pnpm monorepo with 8 packages (Next.js web app, shared UI, API layer, analytics, etc.)
  • Plaid Link + Capital One Nessie API for real transaction ingestion
  • Deterministic recurring-charge detector using MAD-based confidence scoring
  • Explorable d3-hierarchy treemap with drill-down, glassmorphic SVG rendering, PNG/SVG export
  • XRPL blockchain round-up micro-savings with hex-encoded memo anchoring on Testnet
  • Supabase auth + PostgreSQL; Vitest fuzz testing + Playwright E2E in CI/CD

Challenges

  • Integrating Plaid Link inside a 24-hour hackathon time constraint
  • Normalising transaction data across two different banking APIs
  • Making d3 treemap drill-down feel responsive on mobile screens
  • Submitting real XRPL Testnet payments reliably without hitting rate limits

Tradeoffs

  • Chose Next.js App Router over a lighter framework for its built-in SSR and API routes
  • Used Supabase instead of a self-hosted database to ship faster during the hackathon
  • MAD-based recurring detection trades some precision for determinism and zero ML dependencies

Outcome

Shipped a working fintech app at TartanHacks 2026 with live bank data, interactive treemap, and on-chain round-ups, and a full CI pipeline.

What I Learned

  • pnpm monorepo workspace conventions and shared package boundaries
  • How Plaid Link OAuth flows differ from standard OAuth
  • XRPL transaction structure and hex-encoded memo fields
  • d3 hierarchy and treemap layouts with interactive drill-down