Flow Studio

Why this exists

Backend work is easy to show with numbers. Interface work is not: it shows up in whether a drag feels attached to the cursor, whether an edge follows the node, whether undo puts things back exactly where they were.

The hard parts

Pan and zoom. The canvas keeps a single transform matrix; pointer positions are converted to canvas space once, at the edge of the system — nothing below that has to know about zoom.

Connections that behave. Edges re-route as nodes move, and a connection in progress snaps to a valid port, not the nearest pixel.

Undo/redo. Every mutation is an inverted pair; redo is just running the pair the other way — the piece most editors get subtly wrong.

Optimistic state. Editing never waits for the server: the canvas is the truth, an indicator shows how far behind the save is, and a version conflict becomes a choice, with both versions described.

Execution you can watch. Running a flow posts to the .NET service, which walks the graph and narrates itself as numbered Server-Sent Events — nodes go active as their step starts, not when it finishes, and each connection shows the payload that crossed it. The same events are available by polling for networks where the stream never opens.

A second door. A node editor is close to the worst case for assistive technology. The canvas is fully keyboard-operable, connections included, and beside it the same graph exists as a list — select, connect, delete, as ordinary buttons.

Why Vue here

The rest of this portfolio is React. This one is Vue 3 and Nuxt, deliberately: the reactivity model fits a canvas with many small independently-changing nodes, and I would rather show two frameworks than claim familiarity with both.