Hello DEV Community! 👋
For the MLH Global Hack Week and the DEV Gemma 4 Challenge, I set out to build a fully functional, premium, glassmorphic visual workflow studio entirely from scratch—without relying on heavy standard canvas packages (like React Flow or jointJS).
I wanted to share my build journey, my design decisions, and how I plan to bring local, zero-latency on-device intelligence directly into the mind canvas.
🎨 The Craft: Why Vanilla JS?
When you look at modern automation platforms, they are often heavily bloated, taking seconds to render and load complex visual pipelines. For Zappnod, my goal was absolute visual fluidity and light footprint.
To achieve this, I engineered a custom coordinate grid and mouse tracker using raw DOM math and CSS. Because it utilizes zero heavy frontend dependencies:
- Instant load times: The canvas initializes in milliseconds.
- Pixel-perfect scaling: Elements scale fluidly with glassmorphism styling.
- Pure DOM lifecycle: Creating, deleting, and dragging cards is handled directly via vanilla event listeners.
🔐 The Foundation (Under the Hood)
Even under high-speed hackathon constraints, security and performance cannot be compromised. I designed and implemented:
- Hybrid Sync Engine: A ultra-fast, local-first database setup. The system caches the visual states of blocks immediately inside a local SQLite database, which is then cleanly synchronized up to Supabase Cloud REST APIs.
- Production-Grade OAuth: Integrated native Google OAuth directly with secure cryptographic session verification (instead of generic simulated flows).
- Robust State Parsing: Handles relational table state updates dynamically, ensuring that when you reload your project repository, your visual pipeline reconstructs exactly where you left off.
🧠 The Gemma 4 Vision: Offline Local AI Nodes
What makes this project perfect for the Gemma 4 Challenge is the vision for the visual "AI Brain" node.
Usually, automation tools rely on expensive, high-latency cloud LLMs. With Gemma 4’s state-of-the-art, lightweight, on-device capabilities, Zappnod aims to run custom prompt-engineering, code generation, and conditional logic nodes entirely locally.
This means:
- Zero API costs: Automations run on-device.
- 100% Privacy: Your customer data (e.g. from shopify/stripe orders) never leaves your visual workspace.
- Offline Capabilities: Run workflows completely offline.
🚀 The 7-Day Roadmap
The foundation is active, but we have exactly 1 week left of active development before submissions close on May 24. Here is the active roadmap for the next 7 days:
- [ ] Complete the node-to-node live connection paths and trigger flow sequences.
- [ ] Connect the local "AI Brain" node to execute workflows using official Gemma 4 local models.
- [ ] Add pre-configured webhook integration handlers for shopify triggers.
💬 I'd love your feedback!
As I build this in public over the next week, I want to design it with the developer community in mind.
- What are your favorite triggers or automation channels?
- What on-device Gemma use cases would you love to see visually mapped?
Drop a comment below and let's build the future of AI automation together! 💻🤖
Top comments (0)