◆ Infrastructure Design Tool

Design systems,
visually.

Infra Designer is a web app for visually designing system infrastructures — a Figma for architecture diagrams, but with structured components, validation rules, and real export targets.

Drag, drop, connect, and configure. Then export to Terraform, Docker Compose, or plain JSON.

4 wks

MVP timeline

Architecture layers

Core entities

Open questions

02 — SCOPE

What we're building

The core job: drag, drop, connect, and configure infrastructure components on a canvas.

★ Must-have · MVP

Canvas with pan / zoom, grid, and snapping
Component palette — compute, storage, network, queues, CDN
Drag-and-drop nodes onto canvas
Connect nodes with typed edges — HTTP, TCP, async
Node config panel — instance size, region, replicas
Save / load projects per user
Export to JSON / YAML
Starter templates — 3-tier web app, event-driven pipeline

◆ Later · Post-MVP

Real-time collaboration
Cost estimation per component
Validation rules — e.g. "DB must live in a private subnet"
Version history & diffing
Import from live cloud providers
Terraform / CloudFormation code generation

03 — TECH STACK

How it's built

React Flow handles the hard part — nodes, edges, minimap, controls, and custom node types — so we can ship an MVP fast.

Frontend

React + TypeScript

Vite for the build. Typed component contracts across the whole canvas layer.

Canvas

React Flow

Nodes, edges, minimap, controls and custom node types out of the box.

State

Zustand

Lightweight store for nodes, edges and current selection.

Tailwind + shadcn/ui

Fast, consistent primitives for panels, dialogs and forms.

Backend

Next.js API Routes

Or Fastify if we'd rather split frontend and backend cleanly.

Database

PostgreSQL + Prisma

Relational fits projects → nodes → edges perfectly.

Auth

Auth.js / Clerk

Session handling and per-user project ownership.

Realtime

Yjs + WebSockets

Deferred to post-MVP for collaborative editing.

Deploy

Vercel + Neon

Frontend on Vercel, Postgres on Neon. Railway / Fly.io as alternates.

04 — ARCHITECTURE

High-level system

Three layers. The browser owns interaction and local state; the server owns identity, persistence and export; Postgres stores the graph.

Browser

React Flow Canvas Zustand Store Config Panel API Client

REST / JSON

Next.js API

Auth Project CRUD Node / Edge CRUD Export Service

Prisma

PostgreSQL

users projects nodes edges

05 — DATA MODEL

Schema

Four entities. Nodes and edges both belong to a project and carry flexible JSON config for provider-specific settings.

schema.prisma Prisma

model User {
  id        String    @id @default(cuid())
  email     String    @unique
  projects  Project[]
}

model Project {
  id        String   @id @default(cuid())
  name      String
  ownerId   String
  owner     User     @relation(fields: [ownerId], references: [id])
  nodes     Node[]
  edges     Edge[]
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

model Node {
  id        String  @id @default(cuid())
  projectId String
  project   Project @relation(fields: [projectId], references: [id])
  type      String  // "server", "database", "loadbalancer"
  label     String
  config    Json    // { size, region, replicas }
  positionX Float
  positionY Float
}

model Edge {
  id        String  @id @default(cuid())
  projectId String
  project   Project @relation(fields: [projectId], references: [id])
  sourceId  String
  targetId  String
  type      String  // "http", "tcp", "async"
  config    Json?
}

User — owns projects Project — one saved diagram Node — a component + position + config Edge — a typed connection between nodes

06 — ROADMAP

Four weeks to MVP

Click any phase to expand it.

Week 1

Scaffold & static canvas

▶

Stand up the Next.js app, wire in React Flow, and render a static canvas with a working component palette.

Next.jsReact FlowPaletteGrid

Week 2

Interaction & config

▶

Node and edge creation, typed connections, the config panel, and all state living in Zustand.

ZustandCustom nodesConfig panel

Week 3

Auth & persistence

▶

Add authentication and persist projects to Postgres through Prisma. Save, load, and list projects per user.

Auth.jsPrismaPostgresCRUD

Week 4

Export, templates & polish

▶

Ship JSON / YAML export, starter templates, empty states, keyboard shortcuts, and the finishing visual pass.

ExportTemplatesPolish

Beyond

Collaboration & intelligence

▶

Real-time multi-user editing with Yjs, architecture validation rules, and live cost estimation from cloud pricing APIs.

YjsValidationCost estimation

07 — OPEN QUESTIONS

Decisions before we start

Five calls that shape the first commit.

Do you want Next.js full-stack, or a separate frontend and backend?

Any preference for the database — Postgres, SQLite, or Supabase?

Is real-time collaboration a day-one requirement, or can it land post-MVP?

Should export target Terraform, Docker Compose, or just JSON first?

Do we generate the initial repo structure and canvas code now?