🎯 Ezyr Canvas Executor

A Visual Engineering Platform Proof-of-Concept

Built as a demonstration of Ezyr's "Glass Box" visual engineering concept — a canvas where you build data pipelines with blocks, see data flow in real-time, and view the generated code.

🚀 What This Shows

This prototype demonstrates understanding of Ezyr's core technical challenges:

1. Visual Programming Canvas — React Flow-based drag-and-drop interface
2. Code Execution Engine — Actually executes JavaScript transformations (not mocks)
3. Glass Box Transparency — See data flowing through connections in real-time
4. Visual → Code Compilation — Shows generated JavaScript from the visual flow
5. Modular Block System — 5 different block types with distinct operations

📦 Tech Stack

• Frontend: React 18 + Vite
• Canvas: @xyflow/react (React Flow v12)
• State: Zustand
• Styling: Custom CSS (dark theme matching Ezyr's aesthetic)
• Execution: Custom topological flow executor

🎨 Features

Block Types

Block	Purpose	Ports
📥 Input	Source of data	→ Out
⚡ Transform	Modify data (uppercase, lowercase, reverse, etc.)	In → Out
🌐 API	Mock API call with delay	In → Out
🔀 Condition	If/else routing	In → True/False
📤 Output	Display final result	In →

Execution Features

• Topological Sort — Executes blocks in correct order based on connections
• Edge Animation — Edges glow as data passes through them
• Execution Badges — Each block shows what data it received/sent
• Real-time Logs — Right panel shows execution results per node

Code Generation

The "Generated Code" tab shows JavaScript equivalent of the visual flow:

// Input: input-1
const input_1 = "hello world";

// Transform: uppercase
const transform_1 = transform_uppercase(input_1);

// Output
console.log(transform_1);

🏃 Running Locally

# Install dependencies
npm install

# Start dev server
npm run dev

# Open http://localhost:5173

🎯 How to Use

1. Drag blocks from the left sidebar onto the canvas
2. Connect blocks by dragging from output port → input port
3. Configure blocks by clicking and editing their properties
4. Click Run to execute the flow and see data animation
5. View Code in the right panel to see generated JavaScript

🧪 Pre-loaded Example

The canvas starts with a simple flow:

Input ("hello world") → Transform (uppercase) → Output ("HELLO WORLD")

Click Run to see it execute!

🏗️ Architecture Highlights

Execution Engine (src/workers/executor.js)

• Builds a dependency graph from nodes and edges
• Uses topological sort to determine execution order
• Executes each node asynchronously with visual feedback
• Handles errors and shows them inline

State Management (src/store/useStore.js)

• Zustand store manages the entire flow graph
• Supports undo/redo-ready structure
• Updates are immutable and reactive

Custom Nodes (src/nodes/)

• Each block type is a React component
• Uses React Flow's Handle API for connection ports
• Shows execution results inline after Run

🎓 What This Demonstrates for Ezyr

1. Understanding of Visual Programming UX — Familiar node-based interface like Figma/Unreal
2. Code Execution Complexity — Actually runs transformations, not just UI
3. Graph Theory Application — Topological sort for execution order
4. Component Architecture — Modular, extensible block system
5. Real-time Feedback — Execution state visible throughout the flow

🚢 Deployment Ready

# Build for production
npm run build

# Deploy to Vercel
vercel --prod

# Or deploy to any static host
# (Netlify, GitHub Pages, Railway, etc.)

📈 Next Steps (Future Features)

If building this for production:

• Web Worker sandboxing for safer code execution
• Custom block creation (user-defined functions)
• Subsystem packaging (reusable block groups)
• Real API integration (not mocked)
• Collaborative editing (WebSockets)
• Marketplace for sharing blocks
• Export flows as standalone functions

💡 Interview Talking Points

"I built this overnight to show I understand Ezyr's vision."

Key points to mention:

1. Glass Box Concept — "I made sure data is visible at every step, not hidden in black boxes"
2. Execution Engine — "The hardest part was the topological executor — making sure blocks run in the right order"
3. Visual → Code — "Users see both the visual canvas AND the generated code, so they understand what's happening"
4. Extensibility — "Adding a new block type is just creating a new React component"
5. Why React Flow — "It's the industry standard for node-based UIs (Figma, Webflow, n8n all use similar libraries)"

---

Built with ❤️ in 4 hours to demonstrate technical depth.