Excel Workflow Builder (Frontend)

Excel Workflow Builder is a premium, interactive web application that enables users to design, test, and execute complex Excel and CSV data manipulation pipelines visually. By leveraging a drag-and-drop node-based graph editor, users can stitch together multi-step data cleansing, filtering, mathematical, structural, and string transformations without writing code.

Additionally, the builder includes an AI-powered Chatbot Assistant that generates entire flow graphs from natural language prompts, and integrates a dynamic Undo/Redo History and Autosave mechanism for continuous engineering.

---

🏗️ System Architecture & Component Interaction

The diagram below outlines how the frontend React Flow components interact with local state and communicate with the backend Node.js transformation engine.

graph TD
    %% Styling
    classDef frontend fill:#1e1e24,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef backend fill:#27272a,stroke:#10b981,stroke-width:2px,color:#fff;
    classDef storage fill:#374151,stroke:#f59e0b,stroke-width:2px,color:#fff;

    subgraph FE [Excel Workflow Frontend]
        App[App.js]
        Sidebar[Sidebar Component]
        Canvas[FlowCanvas Component]
        PropPanel[NodePropertiesPanel Component]
        Chatbot[ChatBotSideBar Component]
        CustomNode[CustomNode Component]
        CustomEdge[CustomEdge Component]
        HistoryState[History State: Undo/Redo]
    end

    subgraph BE [Workflow Backend - Port 4000]
        UploadAPI[/"/upload & /data/:filename"/]
        ProjectsAPI[/"/projects - CRUD"/]
        ProcessAPI[/"/process-workflow"/]
        ChatbotAPI[/"/api/chatbot"/]
    end

    subgraph Storage [Local/Persistent Storage]
        LocalStorage[(Browser LocalStorage)]
        BackendDb[(Backend Project Store)]
    end

    %% Interactions
    App --> Sidebar
    App --> Canvas
    Canvas --> PropPanel
    Canvas --> Chatbot
    Canvas --> CustomNode
    Canvas --> CustomEdge
    Canvas --> HistoryState

    Canvas -- "1. Uploads Files" --> UploadAPI
    Canvas -- "2. Autosaves/Loads Projects" --> ProjectsAPI
    Canvas -- "3. Executes Steps (Process File)" --> ProcessAPI
    Chatbot -- "4. NLP Prompt to Workflow Schema" --> ChatbotAPI

    Canvas -- "Stores Upload Cache" --> LocalStorage
    ProjectsAPI -- "Stores JSON Flow state" --> BackendDb

    %% Apply Styles
    class App,Sidebar,Canvas,PropPanel,Chatbot,CustomNode,CustomEdge,HistoryState frontend;
    class UploadAPI,ProjectsAPI,ProcessAPI,ChatbotAPI backend;
    class LocalStorage,BackendDb storage;

Loading

---

🔄 Workflow Execution Lifecycle

Here is the sequence of events that takes place when a user designs, validates, and runs a dataset transformation workflow.

sequenceDiagram
    autonumber
    actor User
    participant FE as Flow Canvas (Frontend)
    participant BE as Workflow Engine (Backend)
    participant LLM as AI Chatbot (LLM Service)

    %% Scenario 1: Uploading
    User->>FE: Upload Excel/CSV File
    FE->>BE: POST /upload (File Data)
    BE-->>FE: Returns Saved Filename & Column Schema
    FE->>FE: Save file name metadata to LocalStorage & Dropdowns

    %% Scenario 2: Chatbot Assist
    alt AI Flow Generation (Optional)
        User->>FE: Enter Prompt (e.g. "convert Col A to uppercase and remove nulls")
        FE->>BE: POST /api/chatbot { prompt, fileName }
        BE->>LLM: Generate Flow JSON structure
        LLM-->>BE: React Flow Node & Edge schema
        BE-->>FE: Return JSON structure
        FE->>FE: Render nodes & edges automatically on Canvas
    end

    %% Scenario 3: Execution
    User->>FE: Click "Run Workflow"
    FE->>FE: Topological Sort (getOrderedNodes)
    FE->>FE: Compile steps configuration JSON
    FE->>BE: POST /process-workflow { fileName, steps }
    Note over BE: Read source file<br/>Apply pipeline steps sequentially<br/>Generate output file
    BE-->>FE: Returns Output File Blob (CSV Stream)
    FE->>User: Automatically triggers browser file download

Loading

---

🛠️ Supported Workflow Operations

The sidebar provides 28 built-in operations structured across 6 task categories. The table below details every operation, its configurable parameters in the properties panel, and its function.

Category	Task (Operation)	Configurable Parameters	Description
String Operations	Uppercase	Select Column(s)	Converts text in the selected columns to UPPERCASE.
	Lowercase	Select Column(s)	Converts text in the selected columns to lowercase.
	Trim Whitespace	Select Column(s)	Trims leading and trailing whitespace from cell values.
	Replace	Select Column, Find Value, Replace With	Replaces occurrences of a specific string in a column with another string.
	Concatenate Columns	Select Columns, Separator	Joins two columns with a customizable separator (e.g., space, comma) into a new column.
Data Cleansing	Remove Nulls	Select Column	Drops all rows that have empty/null values in the selected column.
	Fill Nulls	Select Column, Fill Value	Replaces empty/null values in the selected column with a user-provided default value.
	Deduplicate	Select Column(s)	Removes duplicate rows based on the combination of selected columns.
	Remove Special Characters	Select Column(s)	Strips all special characters (e.g. punctuation, symbols) from the selected columns, leaving only alphanumeric values.
	Drop Columns	Select Column(s)	Deletes specified columns from the dataset.
Filtering & Logic	Filter Rows	Select Column, Condition, Value	Keeps only rows that meet the specified condition (e.g. =, >, <, !=, contains).
	Conditional Column	Select Column, Condition, Value, Value If True, Value If False	Adds a new column whose values are conditional based on another column's cell content.
	Drop Rows by Condition	Select Column, Condition, Value	Drops rows that meet the specified condition.
	Flag Conditions	Select Column, Condition, Value, Flag Value	Marks rows matching a condition with a specific flag (e.g., "High Risk", "Verified").
Math & Stats	Sum Columns	Select Column(s)	Calculates the sum of a column or columns.
	Average	Select Column(s)	Calculates the average value of numerical columns.
	Round	Select Column, Decimal Places	Rounds numeric entries in a column to a designated number of decimal places.
	Normalize	Select Column(s), Method	Normalizes numeric values (e.g., Min-Max, Z-score).
	Aggregation	Group By Column, Aggregation Column, Method	Performs group-by aggregations (e.g. Group by 'Department' and Sum 'Salary').
Structure	Rename Columns	Select Column, New Name	Renames an existing column header to a new name.
	Split Column	Select Column, Delimiter, New Columns	Splits a column into multiple new columns using a delimiter (e.g., comma, hyphen).
	Merge Columns	Select Columns, Separator, New Column	Combines multiple columns into one new column with a separator.
	Transpose	(No Options)	Transposes the entire dataset (rows become columns, columns become rows).
	Sort	Select Column, Order	Sorts the table by a specified column in Ascending or Descending order.
Format	Convert File Type	Select Format	Converts the output to a specified format (e.g., CSV, JSON, XLSX).
	Change Column Types	Select Column, New Type	Casts a column's data type (e.g. text to integer, integer to float, date).
	Export Subset	Select Columns, Filter Condition	Filters and exports a specific subset of columns and rows.
	Add Timestamp	Column Name	Appends a column containing the current system timestamp for record keeping.

---

🌟 Key Application Features

• Drag-and-Drop Canvas: Powered by react-flow-renderer for connecting custom nodes and edges smoothly.
• Topological Run-Flow Compilation: Checks dependencies, validates columns, ensures parameters are complete, and runs nodes sequentially.
• Dynamic Configuration Panel: Contextual forms render based on node type to modify settings and map table columns.
• Robust Auto-Save: Syncs changes instantly to the backend when a project is loaded, preserving canvas arrangements.
• History Control: Undo (Ctrl + Z counterpart) and Redo configurations dynamically capture changes.
• AI Agent Integration: Simply describe what changes are needed, and the backend generates the visual layout instantly.
• Local File & Uploads Management: View and reuse files previously uploaded to the backend server.

---

🚀 Getting Started

📋 Prerequisites

Ensure you have Node.js installed on your machine.

⚙️ Installation

Clone the repository, navigate to the project directory, and install dependencies:

npm install

🏃 Running Locally

Start the React development server:

npm start

By default, the application will run at http://localhost:3000.

Make sure the backend services are running on http://localhost:4000 to enable the full functionality of file uploading, project saves, and step executions.

📦 Building for Production

To bundle the app for production:

npm run build

This optimizes the React application, minifies filenames, and puts the outputs in the /build folder.