Deuex · Stealth Startup · Jun 2021 – 2022

Architecture Canvas

System Architecture Visualiser

React TypeScript ReactFlow localStorage

This stealth-mode startup set out to build a visual tool for modelling system architecture and component interactions. As the sole developer on the product, I designed and built the node-and-edge canvas that became the core of the experience, spanning everything from CRUD workflows to playback and change review.

Solo build

Sole developer on the product — from canvas architecture to shipped feature

3-way diff

Added, deleted & modified changes surfaced client-side before committing

Persistent history

Local-state import, export & commit preserved graph history across sessions

01 Canvas

A canvas for services, projects, and rebases

I built the core CRUD for services and projects, the graph editing surface itself, and rebase functionality that lets a team move a project from one service to another while preserving its graph structure and history — instead of rebuilding the diagram from scratch.

Canvas — services, datastores, and event stores as typed nodes

Node-and-edge canvas showing a checkout-service node, orders-db datastore, and order-events event store

The graph editing surface — services, datastores, and event stores as distinct node types, with edge properties surfaced on selection.

02 Playback

Watching a process move through the system

A static diagram can't show you how a request actually flows. I built sequence and flow execution — letting users play back a saved flow with edges highlighting step by step, so a team could visualise exactly how a process moved through the architecture instead of inferring it from a still image.

Playback — Step 1 of 2, publish flow

Sequence playback view showing a publish flow at step 1 of 2, with the active edge highlighted from checkout-service into orders-db

A saved flow played back step by step, with the active edge highlighted at each stage as it moves through the graph.

03 Review

Reviewing architecture changes before they commit

I designed a client-side visual diff system comparing JSON graph structures — flagging added, updated, deleted, and errored nodes at a glance — so a team could review exactly what an architecture change touched before committing it. Import, export, and commit functionality sat on top, with persistent local state preserving graph history across sessions.

Diff · pending review — 5 nodes

Diff view of a pending graph change: checkout-service unchanged, orders-db updated, billing flagged with an error, legacy-events deleted, and order-events added

Added Updated Deleted Error Unchanged

Also shipped

Added project import/export and commit functionality, with persistent local state to preserve graph history across sessions.
Worked as the sole developer through the platform's initial build-out, adding its core functionality and keeping it demo-ready, before moving off the project.