FlowForge HR is a production-style workflow builder for configuring, validating, serializing, and testing internal HR processes. The prototype focuses on the core requirements from the Tredence Full Stack Engineering case study: custom workflow nodes, canvas interactions, node-specific forms, mock API integration, validation, and clear project documentation.
The default workflow models employee onboarding, and the canvas can be extended with reusable HR subflows such as document verification, IT provisioning, and benefits enrollment.
A short walkthrough of the main flow: creating nodes, inserting process templates, reconnecting edges, validating the graph, running the sandbox simulation, and exporting the workflow JSON.
- Visual workflow canvas built with React Flow
- Custom typed nodes for Start, Task, Approval, Automated Step, and End steps
- Click-to-add and drag-to-add node creation from the left palette
- One-click process templates that insert complete
Task -> Approval -> Automationsubflows - Group movement for inserted process templates using
Ctrl/Command+ drag - Edge creation, edge reconnection, and inspector-based edge retargeting
- Node-specific configuration forms with typed state updates
- Mock automation API definitions loaded asynchronously
- Validation for required fields, start/end constraints, disconnected nodes, reachability, and cycles
- Test sandbox with animated step-by-step execution through the workflow
- JSON serialization with copy and download actions for the current graph
- Undo/redo toolbar controls and keyboard shortcuts for graph changes
- Collapsible left and right workspace panels to give the canvas more room
- Resizable right-side sandbox panel for Test, Validate, and JSON views
| Area | Choice |
|---|---|
| Frontend | React, TypeScript, Vite |
| Canvas | React Flow |
| UI | shadcn/ui source components, Tailwind CSS |
| State | Zustand |
| Validation | Zod plus custom graph checks |
| Icons | Lucide React |
| Data layer | Typed local mock API |
flowchart LR
User["HR Admin"] --> Palette["Node Palette"]
User --> Canvas["React Flow Canvas"]
User --> Inspector["Inspector Panel"]
User --> Sandbox["Sandbox Panel"]
Palette --> Store["Zustand Workflow Store"]
Canvas --> Store
Inspector --> Store
Sandbox --> Store
Store --> Types["Workflow Types"]
Store --> MockApi["Mock API Layer"]
Store --> Serializer["Workflow Serializer"]
Sandbox --> Validator["Validation Engine"]
Canvas --> Validator
Inspector --> Validator
MockApi --> Simulation["Simulation Result"]
Serializer --> Json["Workflow JSON"]
Validator --> Issues["Node and Graph Issues"]
The app uses a single typed workflow store as the source of truth. React Flow nodes hold their own configuration in node.data.config, which keeps the canvas, inspector, validator, serializer, and simulator aligned without duplicating state.
src/
components/
canvas/
CanvasToolbar.tsx Undo, redo, delete, reset controls
NodePalette.tsx Node type palette and process templates
WorkflowCanvas.tsx React Flow canvas and group-drag behavior
WorkflowNode.tsx Custom visual node renderer
inspector/
InspectorPanel.tsx Node and edge configuration shell
KeyValueEditor.tsx Reusable metadata/parameter editor
NodeForms.tsx Type-specific node forms
sandbox/
SimulationTimeline.tsx Execution timeline
ValidationPanel.tsx Validation issue list
WorkflowSandbox.tsx Test, Validate, and JSON tabs
ui/ shadcn/ui source components
lib/
mock-api.ts Automation definitions and simulation
workflow-serialization.ts Graph serialization helpers
workflow-types.ts Core node, edge, config, and result types
workflow-validation.ts Field and graph validation rules
store/
workflow-store.ts Workflow state, actions, history, templates| Interaction | Behavior |
|---|---|
| Click a node type | Adds a new node instance to the canvas |
| Drag a node type | Drops a new node at the pointer location |
| Connect handles | Creates a directed workflow edge |
| Drag an existing edge endpoint | Reconnects the edge to another node |
| Select an edge | Opens retargeting controls in the inspector |
| Select a node | Opens the correct typed form in the inspector |
| Select a template node | Shows process-template group controls |
Ctrl/Command + drag template node | Moves the entire inserted template subflow |
| Collapse side panels | Hides the node palette or control center into compact rails |
| Expand side panels | Restores the palette or control center from the rail controls |
Ctrl/Command + Z | Undo graph change |
Ctrl/Command + Shift + Z or Ctrl/Command + Y | Redo graph change |
The validation layer combines field-level checks and graph-level checks:
- exactly one Start node
- at least one End node
- Start nodes cannot have incoming connections
- End nodes cannot have outgoing connections
- non-start nodes should be reachable from a previous step
- non-end nodes should connect to a next step
- required node fields must be filled
- automation nodes must reference a valid mock action
- automation action parameters must be completed
- cyclic workflows are flagged because HR processes should resolve to completion
Warnings are allowed for incomplete drafts, while blocking issues prevent simulation from running.
Process templates are reusable subflows intended to make the builder feel closer to a practical internal tool than a bare graph demo.
Current templates:
- Document verification
- IT provisioning
- Benefits enrollment
Each template inserts a connected Task -> Approval -> Automation sequence with realistic labels, assignees, thresholds, and action parameters. Template nodes share a group identifier so the inserted segment can be selected and moved together.
The sandbox calls the mock API simulation against the current graph. Execution starts at the Start node and walks through outgoing edges, producing a timeline of completed steps.
During a run:
- the active edge animates through the canvas
- completed nodes receive a completion state
- the timeline fills progressively
- the final run includes a generated simulation id and timestamp
This makes the testing experience visual instead of only showing a static log.
npm install
npm run devThe dev server runs on Vite. Open the printed localhost URL in the browser.
npm run lint
npm run buildnpm run build performs TypeScript project compilation and creates a production bundle.
- The interface uses a restrained enterprise product style appropriate for an internal HR operations tool.
- React Flow handles canvas primitives, while custom node rendering keeps the domain UI readable.
- Node configuration lives inside React Flow node data so serialization is straightforward.
- Validation is kept outside the store so it can be reused by the canvas, inspector, and sandbox.
- Mock API calls are asynchronous to preserve a realistic data boundary without adding backend setup.
- Process templates add reusable business-level workflows instead of only offering blank node creation.
- Undo/redo is implemented at the graph-state level so higher-risk actions can be reversed safely.
- Inspector-based edge retargeting gives users a precise alternative to manual edge dragging.
- Workflow JSON import with schema migration
- Auto-layout using Dagre or ELK
- Dedicated end-to-end coverage for drag/drop, edge reconnection, and simulation
- Persistent backend storage for saved workflows
- User authentication and shared team workspaces
- Version history for published workflow templates