🚀 Pipeline Builder Frontend

This project is a React-based frontend for building and visualizing data processing pipelines using a drag-and-drop interface. Users can add, connect, and configure various node types to design custom workflows, which are then submitted to a backend for analysis and execution.

---

✨ Features

• 🧩 Drag-and-drop canvas for pipeline creation
• 🔗 Multiple node types
  • Input
  • LLM
  • Output
  • Text
  • Filter
  • Splitter
  • Join
  • Calculator
  • Conditional
• 🧰 Toolbar for adding nodes
• ⚡ Real-time pipeline validation and submission
• 📊 Visual feedback for DAG status

---

📂 Folder Structure

public/       → Static assets and HTML template
src/          → Main source code
│
├── App.js           → Root component
├── draggableNode.js → Node drag logic
├── toolbar.js       → Toolbar for adding nodes
├── ui.js            → Main pipeline canvas
├── store.js         → State management (Zustand)
├── submit.js        → Pipeline submission logic
│
└── nodes/           → Custom node components

---

📦 Main Dependencies

• ⚛️ React
• 🌊 React Flow (for canvas and node management)
• 🧠 Zustand (state management)
• 🧰 React Scripts

---

▶️ How to Run

1️⃣ Install dependencies

npm install

2️⃣ Start the development server

npm start

The app will open at:

http://localhost:3000

---

🏗 Build for Production

npm run build

This creates an optimized production build in the build/ folder.

---

🔌 Backend Integration

The frontend submits pipeline data to:

http://localhost:8000/pipelines/parse

Make sure the backend server is running for full functionality.

---

📖 Additional Notes

For more details, explore the source files in the src/ directory.

---

⭐ If you found this project useful, consider giving it a star!