Measured runtime and rendering behavior
Map for O(1) user lookup and duplicate prevention.DocumentFragment batching for DOM updates.No network latency - fully deterministic execution.
Trust boundaries and protection model
UserService.Validation enforced across UI, model, and service layers.
What improved engineering quality over time
Resulting system quality and product impact
Delivered a fully static, CI-deployed expense engine capable of:
Building a serious product with high engineering standards? Let's architect it with clarity.
Start a Conversation
Slide 1 of 2
Client-side expense settlement engine with deterministic, float-safe debt simplification.
Service-layer settlement engine with sorted two-pointer resolution
Map-based indexing for O(1) identity checks and lookups
Float tolerance safeguards for deterministic financial output
Constraints and product-level risks
Splitting group expenses typically involves:
The challenge was to design a purely client-side system that:
Implementation direction and execution strategy
Splitter is a client-side expense tracking and settlement system built entirely with strict TypeScript and a layered architecture.
It allows users to add participants, record shared expenses, and compute simplified settlements directly in the browser without backend infrastructure.
The goal was to implement deterministic financial resolution logic while preserving architectural clarity and runtime validation discipline.
System boundaries and layered decisions
Client-side DOM manipulation on a static HTML shell.
No SSR, no hydration layer.
models/ -> Entity validation & ID generation services/ -> Settlement logic & business rules ui/ -> Event handling & DOM rendering utils/ -> DOM helpers & toast abstraction main.ts -> Application bootstrap
Business logic remains UI-agnostic.
Next.js App Router
Structured Data Layer
Domain Boundaries
Runtime Discipline
Trust Boundaries
Client-side DOM rendering on a static HTML shell
(See architecture visual below.)