Work / Case study
EYE — Visual Code Execution
I taught myself to code the non-traditional way, and reading walls of text was the hardest part. EYE is the help I needed: it draws code execution as a graph you can watch — calls, branches, what ran when.
Why I built it
I didn’t come to software through a CS degree. I’m a self-taught, non-traditional learner, and when I was learning to program, the standard way in — docs, logs, stack traces, walls of text — fought me the whole way. I could read a function ten times and still not see what it actually did when it ran. What finally helped was making the invisible visible: watching the code instead of just reading it.
So EYE started as the tool I needed for myself. It’s public because of who it’s really for — the next person learning the way I do, stuck where I was stuck, wondering if they’re cut out for this. You might just need to see it.
And to be plain about the why underneath: I’m trying to love God with all I’ve got and love my neighbor as myself. Building the help I needed and handing it to the next person is one small way to do that.
What it does
EYE maps source code into a graph — functions as containers, statements as nodes, control flow as edges — and lays it out automatically. In the full local build, a Python tracer streams execution events to the browser over WebSocket, and the graph animates as the code runs: active nodes light up, edges pulse on calls and returns, and a replay timeline lets you step back through what happened.
The public demo is the smaller, honest version: a static Fibonacci map that loads with no backend, so anyone can open it on a phone. Live tracing stays local until the backend is hosted — the demo says so on screen rather than pretending otherwise.
How it’s built
Every layer of this stack is something I had to teach myself first.
- RenderingPixi.js v8 on WebGL — nodes, edges, and trace activity drawn on canvas, with a Canvas 2D fallback.
- LayoutELK.js layered layout: functions become containers, statements become child nodes, ports keep edges readable.
- FrontendReact 19 + TypeScript + Vite. Monaco editor up top, the execution graph below it.
- TracingA Python tracer behind FastAPI streams call, line, branch, and return events over WebSocket — this part runs locally.
- TransportMessagePack on the trace path, so event streams stay compact.
- ShippingThe public demo builds to static assets — no Python in the cloud. Demo mode is a build flag, not a fork.
What the demo does today
The static graph and source load from the CDN with no backend, render on desktop and a 390px phone, survive navigating away and back, and ship with a clean browser console. Pan, zoom, double-click-to-fit, and click-to-isolate a node’s neighborhood all work on the live page — try them.
Who it’s for
If you’re learning to code and the text walls aren’t working for you, this is for you — no signup, no catch. And if you’re hiring, this page is also how I work: build the real thing, say plainly what works and what doesn’t.