Flow Player
An open-source React component that explains a request flow one step at a time, released as an independent library and integrated into this portfolio.
- Role
- Owner and lead: defined the contract and scope, made the product decisions, and directed and reviewed AI-assisted implementation.
- Technologies
- React / TypeScript / Vite / Vitest / Playwright / npm / GitHub Actions
Problem
Explain a supplied request flow without exposing client systems. The examples are illustrative, not production telemetry.
Contract
The v0.1 contract, accepted on 30 September 2026, takes 2–6 nodes in lane order, directional edges only between neighbours, and scripted steps. Playback stays separate from any backend execution.
Playback
Play, pause, step and reset have explicit states. The host supplies the flow and the package owns playback, so version 0.1.0 has no fully controlled playback mode.
Accessibility
Native controls, reduced-motion behavior and a readable explanation of each step describe the process beyond animation. This portfolio also renders the complete flow as text on the server. Manual screen-reader review remains open.
Package and verification
Version 0.1.0 was published to npm on 1 October 2026 under the MIT license, with typed ESM and CommonJS entries and scoped styles. It is verified with React 18.2 and 19.3, TypeScript 4.9.5 and 5.9.3, and browser tests in Chromium, Firefox and WebKit.
Integration
This portfolio installs the exact npm version 0.1.0 and maps its own design tokens and localized labels through an adapter. The sample flows and the surrounding content belong to the portfolio.
Outcome and limits
Released, documented and integrated: the source, the documentation and the playground are public. No adoption, usage or impact metrics are claimed.