⚡ FORGE FLOW

🚀 Live Demo: https://forge-flow-ecru.vercel.app/

FORGE FLOW is a modern, node-based pipeline builder and workflow execution engine. It features a stunning dark-mode UI with dynamic glassmorphism, advanced node abstraction, and a lightning-fast Python/FastAPI backend capable of validating Directed Acyclic Graphs (DAGs).

✨ Features

• Beautiful Visual Pipeline Builder: Build complex node connections with a seamless drag-and-drop interface powered by reactflow.
• Intelligent Node Abstraction: Add Input, Output, LLM, Text, Math, Transform, Filter, Delay, and Merge nodes. Nodes automatically resize when text wraps and variables (like {{ input }}) dynamically generate matching connection handles.
• Robust Pipeline Validation: The pipeline is sent to the backend where depth-first search (DFS) algorithms run instantly to detect graph cycles, ensuring only valid Directed Acyclic Graphs (DAGs) can be executed.
• Sleek UX/UI: Implemented with custom modern CSS animations, glowing buttons, "Quick Demo" streaks, and contextual right-click menus for rapid building.

---

🛠️ Tech Stack

Frontend

• React.js (v18)
• React Flow (for node-based canvas rendering)
• Zustand (for lightweight state management)
• Pure, custom-written modern CSS

Backend

• Python 3
• FastAPI (for high-performance API endpoints)
• Uvicorn (ASGI server)

---

🚀 Getting Started

The project is split into two directories: frontend and backend. You must run both servers simultaneously to use the full application.

1. Start the Backend Server (FastAPI)

The backend runs on port 8000. It provides the core pipeline parsing and DAG validation logic.

cd backend
# Create a virtual environment (optional but recommended)
python3 -m venv venv
source venv/bin/activate

# Install requirements
pip install fastapi uvicorn python-multipart

# Start the server
uvicorn main:app --reload --port 8000

2. Start the Frontend Server (React)

The frontend runs on port 3000.

cd frontend
# Install dependencies
npm install

# Start the development server
npm start

Once both servers are running, navigate to http://localhost:3000 in your browser. Click Quick Demo or Sign Up to enter the pipeline builder!

---

💡 How it Works (Architecture)

1. Building: Users drag nodes from the quick-add context menu (right-click) or the left sidebar onto the canvas.
2. Execution: Clicking the "Run Pipeline" button serializes the node and edge state and POSTs it to the FastAPI backend (http://localhost:8000/pipelines/parse).
3. Validation: The backend parses the JSON data, calculates node/edge counts, builds an adjacency list, and uses a recursive DFS check to detect cycles (is it a DAG?).
4. Feedback: The frontend receives the results and presents a clean, user-friendly summary modal overlay.

---

Built with passion for node-based architectures.