Building a Visual Pipeline Builder with React & FastAPI | Drag & Drop Node Editor
Автор: krish
Загружено: 2025-12-14
Просмотров: 48
🚀 VectorShift Pipeline Builder - A Beautiful Node-Based Workflow Editor
In this video, I showcase a fully-featured visual pipeline builder built with React and FastAPI. Create workflows by dragging nodes, connecting them, and validating your pipeline in real-time!
⚡ KEY FEATURES:
✅ Drag & drop node interface with smooth animations
✅ 10+ node types (Input, Output, LLM, API, Transform, Filter, etc.)
✅ Dynamic variable extraction from text {{variables}}
✅ DAG validation - prevents infinite loops
✅ Dark mode toggle
✅ Real-time pipeline validation
✅ Beautiful UI with Tailwind CSS
✅ Full CORS support for deployment
🛠️ TECH STACK:
• Frontend: React 18 + ReactFlow
• Backend: FastAPI + Python
• Styling: Tailwind CSS
• State Management: Zustand
📂 GITHUB REPO:
https://github.com/krishkumar1577/vectorsh...
🔗 TIMESTAMPS:
0:00 - Introduction & Demo
0:30 - Drag & Drop Functionality
1:00 - Node Types Overview
2:00 - Dynamic Variable Extraction
2:30 - DAG Validation
3:00 - Dark Mode & UI Features
3:30 - Backend API & Pipeline Parsing
4:00 - Code Walkthrough
5:00 - Deployment & Setup
💻 SETUP:
Backend: pip install -r requirements.txt && uvicorn main:app --reload
Frontend: npm install && npm start
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
