Skip to main content
Special EditionWeb

"HR Workflow Designer" — Visual Workflow Builder

Live capture

A drag-and-drop workflow builder built as a Tredence Analytics case study, where HR admins compose processes like onboarding, leave approval, and document verification from Start, Task, Approval, Automated Step, and End nodes on a React Flow canvas. Workflows are validated live — missing start or end nodes, disconnected steps, cycles, and required fields — with click-to-jump errors, and a simulation sandbox walks through the flow step by step along Approved, Rejected, or Needs-correction branches with per-step owners and timings. Includes labelled edges, undo/redo, auto-layout, mini-map, JSON import/export, autosave, node version history, and ready-made templates, with the API layer isolated behind endpoint-style mock contracts and validation rules covered by Vitest.

Tech Stack
ReactTypeScriptViteReact FlowVitestGraph ValidationWorkflow Simulation