Loading project details.
ArchFlow
A visual system-design workspace with saved boards, reusable templates, and realtime collaboration.
Context & problem
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.
Outcome
Saved boards can be reopened, copied, and edited together with live cursors.
Engineering decisions
Built the board workspace with React Flow, Convex for shared state and persistence, and Zustand for local interactions. Added live cursors, presence, temporary cursor chat, and board duplication so people can return to an idea or review it together.
My contribution
Built the board editor, reusable templates, and realtime collaboration.
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.
Trade-offs
- 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.