current build · solo frontend

Visual cloud infrastructure platform

Solo frontend — architecture, design system, and implementation

Why it exists

Modern infrastructure tooling has a usability problem. Tools like Terraform are powerful but demand real expertise; simpler platforms hide too much and box you in. This project bridges that gap: design, configure, and monitor cloud architecture on an interactive canvas, without giving up control when you need it.

How it works

Resources are draggable nodes that surface status, health alerts, and cost estimates as you build. Edges aren't decoration — they encode dependencies, network links, and security boundaries, so the canvas reads as a truthful map of the system.

A marketplace of production-ready blueprint stacks (payments, RAG pipelines, video transcoding) imports straight onto the canvas as a starting point, and every blueprint keeps a revision history you can step back through.

As much complexity as you need

The hard product problem is balancing abstraction with control: beginners need guidance, senior engineers expect full configurability. The interface is layered so both get what they want — the canvas shows system topology at a glance, a configuration panel exposes resource-level settings like compute sizing, network interfaces, and environment variables, and an advanced mode gives direct terminal access to running resources without leaving the workspace.

Engineering highlights

  • Stacking that stays predictable

    Overlapping nodes and their edges are re-ordered in real time during drag and hover, so connection lines never route through the wrong layer of the canvas.

  • Drag feedback the platform can't give you

    The native HTML5 drag image can't change mid-flight, so the editor manages its own drag ghost — hover an invalid drop target and it restyles instantly to warn you.

  • Connections that rewire themselves

    When a node grows past a couple of network interfaces, its handles reposition to keep the graph legible — and existing edges follow automatically.

  • Editor ergonomics

    Keyboard-driven editing throughout: delete, zoom, undo and redo, and instant local snapshots so work survives a closed tab.

Stack

Next.jsReact FlowTypeScriptZustandTurborepoDesign system