Skip to main content

Frontend Development

Guide for developing the FacilFlow frontend.

Technology Stack​

  • Framework: React 19
  • Language: TypeScript
  • UI Library: MUI (Material-UI)
  • Flow Diagrams: @xyflow/react (React Flow)
  • State: Zustand
  • Build: Webpack

Project Structure​

src/renderer/
├── App.tsx                     # Main app, routing, theme
├── components/
│   ├── pipeline/               # Pipeline builder
│   │   ├── PipelineBuilder.tsx # React Flow canvas
│   │   ├── NodePalette.tsx     # Draggable nodes
│   │   └── nodes/              # Custom node types
│   │       ├── SourceNode.tsx
│   │       ├── ProcessorNode.tsx
│   │       └── SinkNode.tsx
│   ├── agents/                 # Agent management
│   │   └── EdgeAgentList.tsx
│   └── catalog/                # Data catalog
│       └── DataCatalog.tsx
└── services/                   # API clients

Pipeline Builder​

The pipeline builder uses React Flow with custom node types:

const nodeTypes = {
  source: SourceNode,
  processor: ProcessorNode,
  sink: SinkNode,
};

Adding a New Node Type​

  1. Create component in components/pipeline/nodes/
  2. Register in nodeTypes object
  3. Add to NodePalette for drag-and-drop

Theme​

FacilFlow uses a dark theme matching the Facilis brand:

const theme = createTheme({
  palette: {
    mode: 'dark',
    primary: { main: '#22C55E' }, // Green
    background: {
      default: '#0F172A',
      paper: '#1E293B',
    },
  },
});

Running Tests​

npm test              # Run all tests
npm test -- --watch   # Watch mode