Inside Zappnod: Designing a Zero-Dependency Visual AI Automation Canvas with Vanilla JS

"For MLH Global Hack Week, I challenged myself to build a visual workflow automation studio (Zappnod) from scratch without relying on heavy canvas frameworks like React Flow. In this post, I break down the coordinate grid mapping, mouse offsets for node dragging, and how the core compiles visual connections into executable Node.js tasks. I also share how we implemented secure session synchronization between a local SQLite cache and Supabase Cloud. Let’s talk visual system design!"