Vizzy
Drag Route, Middleware, Handler, and Response blocks onto a canvas — Vizzy wires them together and generates a real, annotated Express server as you build.
Vizzy is a visual learning tool that makes the Express.js request lifecycle tangible. Every endpoint is a linear chain of four block types — Route, Middleware, Handler, Response — and Vizzy makes that chain literal on a ReactFlow canvas. As you connect blocks with wires, a live code panel generates annotated server.js code in real time, with comments explaining req, res, and what each block does. Hit Export and you get a ready-to-run server.js and package.json. There's also a Run mode that animates a request traveling through your route — blocks light up in sequence so you can see the flow before ever writing a line of code. The goal: a developer who has never touched Express ships a working GET endpoint in under five minutes.
Why I built this
Express.js is simple once you understand the mental model, but most tutorials skip to the code before establishing that model. I built Vizzy to make the chain literal — route hits middleware, middleware calls next, handler builds the response. If you can see it, you can reason about it.
Use case
Junior developers and bootcamp students learning backend fundamentals for the first time. Vizzy lets them build intuition by assembling, not copying — and the generated code gives them a real artifact to study, modify, and run.
What I learned
The code output is the product, not the canvas. Beginners don't just need working code — they need code they can actually read and modify. Writing the annotated code generation logic turned out to be the hardest and most important design decision in the entire project.
Where I got stuck
Keeping three pieces of state in sync — the canvas node positions, the wire connections, and the generated code output — without any of them drifting out of sync was harder than expected. Any inconsistency between what the canvas shows and what the code panel renders completely breaks the learning experience. Getting the Zustand store design right took multiple refactors.
Stack used
TypeScript
ReactReactFlowZustand
Vite