Skip to content
← Index
01 / 08Lead Developer2022 — now

Control

Control is a web-based digital production app: a freehand environment for real-world web production, where designers place elements by eye rather than by layout rules. It is my biggest project to date. I work across both halves of it — the geometry engine that makes freehand editing feel precise, and the server that turns a finished project into a live site on its own domain.

Control — capture
25feature slices
217port interfaces
325infrastructure adapters
57DI modules

The editor

I designed and built the geometry engine — shape manipulation, coordinate-space transformations, snapping and intersection detection, and the other primitives that make freehand editing precise. On top of it sits a custom SDK, so a published site renders editor output independently of the editor itself.

Architecture — clean architecture and SOLID, enforced by structure

The server is organised in four layers, and the dependency rule is enforced by directory rather than by convention. Use cases depend on narrow interfaces that they declare themselves. They do not depend on a specific database or cloud provider.

domainpure entities, no framework imports
appuse cases, each feature owning its own folder of port interfaces
i12einfrastructure adapters — Mongo, Redis, S3, AWS, Auth0, Stripe, GitHub
roota composition root wiring constructor dependencies explicitly, with declared singleton scopes
Dependency inversion, in three lines
export interface UploadFrameFilePort {
  uploadFrameFile(key: string, buffer: Buffer, contentType: string): Promise<void>;
}

Ports are narrow and single-purpose. The video decoding worker takes UploadFrameFilePort & DownloadAssetToFilePort in its constructor and does not depend on S3 directly. This is dependency inversion and interface segregation in practice.

Publishing infrastructure

Publishing a Control site to a custom domain provisions real infrastructure automatically. ACM issues the TLS certificate, CloudFront serves the site with edge configuration in a key-value store, CodeBuild runs the build and distribute jobs, and S3 holds assets and build artifacts. Domain ownership and DNS propagation are verified before cutover, so a site does not go live before its domain works.

Async and realtime

Distributed lockingRedlock over Redis, so concurrent publishes and edits cannot race each other across server instances.
Message busRedis pub/sub fans events out between instances.
Queue workersBullMQ on a dedicated Redis connection: certificate-validation polling, account lifecycle, maintenance, preview generation and republish scheduling. Certificate issuance is slow and asynchronous, so it is a scheduled job rather than a blocked request.
Video scroll decodingA worker pulls a source video, decodes it to WebP frame sequences at 15 fps, uploads the frames and writes them back to the article. This is how published sites can play video that follows the scroll position.
Realtime collaborationA WebSocket server with a channel factory, heartbeat and schema-validated messages, fanned out across instances over the Redis bus.

Commerce and integrations

I own the payment and accounting layer: Stripe subscriptions, plans and quota usage. Around it sit Auth0 for identity, a GitHub App for exporting a project to a repository, esbuild for bundling custom components, and Sentry with structured logging for observability.

Frontend
ReactTypeScriptCanvasWeb Workers
Backend
Node.jsExpressMongoDBRedisBullMQWebSockets
Infrastructure
AWS S3CloudFrontACMCodeBuildECSDocker
Services
StripeAuth0GitHub AppSentry
Next — 02GenesisX →