ArchFlow

Engineers and founders often need a fast way to explore architecture ideas before moving into docs or whiteboards. I built ArchFlow as a serious playground where users can model software visually, compare realistic templates, and understand design consequences through guided storytelling and metadata.

Designed the product around an interactive board workspace using React Flow for explicit node-edge modeling, Convex for realtime synchronization and board persistence, and Zustand for local orchestration. Focused on multiplayer presence, ephemeral cursor chat, dynamic SEO metadata, analytics instrumentation, and continuation flows that make architecture exploration feel collaborative and grounded.

• Built a visual system design workspace with drag-and-drop nodes, edges, and reusable production-grade architecture templates.

• Implemented realtime multiplayer collaboration with live cursors, presence avatars, and ephemeral slash cursor chat.

• Structured board persistence and duplication flows to support seamless architecture exploration across sessions.

• Designed template storytelling layers with stack guidance, metadata, and explicit trade-off explanations.

• Implemented production-ready SEO foundations including dynamic metadata, sitemap, robots, OG, canonical, and favicon handling.

• Integrated Google Analytics instrumentation for real user behavior tracking and template interaction insights.

• Polished interaction details with Framer Motion while maintaining build stability, dead-code discipline, and responsive board behavior.

• Prioritized realistic production templates over broad diagramming flexibility to keep exploration grounded in real-world systems.

• Balanced realtime collaboration richness with board responsiveness and state clarity.