Pipeline Builder

A visual, drag-and-drop pipeline builder built with React and ReactFlow on the frontend, backed by a FastAPI service that validates submitted pipelines.

Project Structure

frontend_technical_assessment/
├── backend/
│   └── main.py          # FastAPI server — pipeline parse & DAG validation
└── frontend/
    ├── public/
    └── src/
        ├── nodes/       # All node type components
        ├── App.js
        ├── draggableNode.js
        ├── store.js     # Zustand global state
        ├── submit.js    # Submit button + API call
        ├── toolbar.js   # Node palette toolbar
        └── ui.js        # ReactFlow canvas

Features

• Drag-and-drop canvas powered by ReactFlow
• 9 built-in node types: Input, Output, LLM, Text, Filter, Transform, Note, API Call, Merge
• Global state managed with Zustand
• Submit pipeline to the backend and receive:
  • Total node count
  • Total edge count
  • Whether the pipeline forms a valid DAG (Directed Acyclic Graph)

Prerequisites

• Node.js v16+ and npm
• Python 3.9+

Getting Started

1. Start the Backend

cd backend
pip install fastapi uvicorn
uvicorn main:app --reload

The API will be available at http://localhost:8000.

2. Start the Frontend

cd frontend
npm install
npm start

The app will open at http://localhost:3000.

Backend API

GET /

Health check — returns { "Ping": "Pong" }.

POST /pipelines/parse

Accepts a pipeline payload and returns analysis results.

Request body:

{
  "nodes": [{ "id": "...", "type": "...", "data": {}, "position": {} }],
  "edges": [{ "id": "...", "source": "...", "target": "..." }]
}

Response:

{
  "num_nodes": 3,
  "num_edges": 2,
  "is_dag": true
}

DAG detection uses a DFS 3-color algorithm (white / gray / black) to identify back edges (cycles).