FlowForge HR

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.

Live Demo

Demo

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.

Watch the project walkthrough

Highlights

• 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 -> Automation subflows
• 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

Tech Stack

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

Architecture

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"]

Loading

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.

Project Structure

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 Model

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

Validation Rules

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

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.

Simulation Flow

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.

Run Locally

npm install
npm run dev

The dev server runs on Vite. Open the printed localhost URL in the browser.

Quality Checks

npm run lint
npm run build

npm run build performs TypeScript project compilation and creates a production bundle.

Design Decisions

• 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.

Future Improvements

• 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