Pipeline Builder
A visual editor for building node pipelines, validated and executed by a Python backend.
What it is
A node canvas for building pipelines. Drag node types in, wire outputs to inputs, and press Run — the graph goes to a FastAPI backend that counts it, checks it's acyclic, and executes it.
React, Vite, Tailwind and React Flow on the front; Python and FastAPI on the back, deployed across Vercel and Render. Built for a company's frontend technical assessment.
What I built
- Collapsed four copy-pasted node components into one config-driven shell, then added five more node types on top of it without writing a single new component.
- A Text node that grows as you type and turns {{ variable }} references into live input handles as you write them.
- A FastAPI backend with /pipelines/parse and /pipelines/run — counts the graph, detects cycles to confirm it's a DAG, and executes it. Deployed on Render.
- Nine node types across five palette groups — sources, transforms, an LLM node, outputs, and notes for annotating the canvas.
Stack
React, React Flow, Tailwind, Motion, Python, FastAPI