Personal product / Interactive learning
TradeoffMap
Learn the mechanism. Test the tradeoff.
A bilingual learning product that connects system-design problems to concept routes, playable failure-and-recovery experiments, editable capacity estimates, and targeted review exercises.
- My contribution
- My personal product, spanning learning experience, interactive domain logic, and full-stack web delivery. Frameworks, authentication, and canvas libraries provide the underlying foundations.
- Current status
- Public learning product
- Built with
- Next.js, TypeScript, Cloudflare Workers, D1, React Flow, Hono
The problem.
A finished architecture diagram does not explain what happens after a timeout, why a retry can duplicate work, or which capacity assumption changes a design. I wanted learners to observe those decisions, change a condition, and inspect the result.
What I worked on.
- Connected concrete problems to maps, curated concept routes, and English and Chinese lessons.
- Developed browser experiments for upload interruption, saved-session recovery, media publication, and playback behaviour.
- Made capacity estimates editable so learners can see which quantities change when an assumption changes.
- Added bounded agent-review exercises with issue locations, classifications, and actionable feedback.
Resume an interrupted upload.
Create one video and confirm its first parts
The teaching scenario keeps one video identity while three of six parts are confirmed: 6 of 12 MB saved.
Interrupt the connection
The interface separates the client's attempted actions from the parts the server has actually acknowledged.
Query the original session and resume
The recovery step finds the existing parts and continues from the missing part instead of creating a second video.
Inspect processing, publication, and playback
Later steps expose the required outputs and manifest before the simulated video becomes playable.
A retry is no longer an abstract arrow: the saved parts, unchanged video identity, and recovery action are visible together.
This is a resettable browser teaching simulation. It does not upload real media, run a cloud transcoder, or measure production CDN performance.
The actual interface.
Under the hood.
- Interface and domain state
- React learning views connect a problem route to explicit scenario state. Deterministic transitions make success, failure, and recovery repeatable rather than relying on a decorative animation timeline.
- Public delivery and private APIs
- Prebuilt public learning pages are delivered through Cloudflare Workers. Hono request handling, SQL-backed application data, and server-side access checks keep private AI operations separate from the public reader.
- Explainable exercise feedback
- Selected agent-engineering exercises compare structured findings with a bounded answer set. Feedback distinguishes missed findings, false positives, and incorrect categories; it is not a general-purpose AI code reviewer.
Decisions behind the interface.
Simulate the mechanism instead of provisioning a cloud
A deterministic browser model lets learners repeat failures without accounts, cloud bills, or real media infrastructure. The tradeoff is that network timing, processing, and playback policies are deliberately simplified.
Prebuild public teaching, authorize private behaviour
Public content and interactive teaching are separated from account and model operations. This makes the access boundary explicit, but content changes still require a build and release, and asynchronous content loading needs failure handling.
Prefer inspectable rules for targeted practice
A fixed exercise can explain why a finding was missed or misclassified. That reliability comes with a limited answer set: the product does not claim to grade arbitrary code or the quality of every free-text explanation.
Where it stands.
Selected learning experiments and rule-feedback paths were exercised locally in the October 2026 review. The locally captured images show the product's teaching interface, not a live media backend.
Available to explore
- Public maps, concept routes, and bilingual lessons
- Browser experiments and editable teaching estimates
- Rule-based practice in selected agent-engineering problems
Still evolving
The full library does not yet share one adaptive learn-practice-retest loop. AI conversations, history, and notes are restricted to owner testing; payments are not presented as a publicly available commercial flow.
Future direction
Connect more selected exercises back to the concepts behind a mistake, while keeping feedback specific and explainable.
Why I keep building it.
Production support taught me to distinguish a request being sent from a result being confirmed. TradeoffMap turns that habit into learning experiences where state, failure, and recovery can be inspected.
This is my personal product, separate from my professional banking-support work.