Inspiration

Data analysis shouldn't require coding expertise. We envisioned a platform where analysts, traders, and researchers could build complex data pipelines through visual drag-and-drop interactions, powered by AI to handle the heavy lifting.

What it does

LiveData OS is a node-based visual data analysis platform that enables users to:

  • Build data workflows visually - Drag nodes, connect them, and watch data flow through your pipeline
  • Process data intelligently - Clean, filter, group, and transform data with built-in processors
  • Analyze financial data - Calculate returns, drawdowns, Sharpe ratios for investment analysis
  • Visualize results - Generate charts and tables with real-time previews
  • Leverage AI - Use AI-powered analysis to extract insights automatically

No coding required - just connect nodes and execute.

How we built it

Frontend Stack:

  • React 18 + TypeScript for type-safe component architecture
  • React Flow for the node editor canvas with custom interactions
  • Zustand for lightweight state management
  • Tailwind CSS for responsive styling
  • Vite for fast development builds

Architecture:

  • Plugin-based system where each node type is a self-contained module
  • Automatic dependency resolution - executing a node triggers all upstream dependencies
  • Real-time data preview within nodes
  • Cycle detection to prevent infinite loops
  • JSON-based workflow serialization for save/load functionality

Key Features Implemented:

  • 14 specialized plugins (data sources, processors, financial analysis, visualization, AI)
  • Right-click context menus for quick actions
  • Smart field selectors that auto-detect upstream data columns
  • Comprehensive error handling with visual feedback
  • Workflow persistence system

Challenges we ran into

  1. Dependency execution order - Ensuring nodes execute in the correct sequence based on connections required implementing a topological sort algorithm
  2. Type safety across plugins - Validating data types between connected nodes while maintaining flexibility
  3. Real-time data preview - Rendering large datasets efficiently within node UI without blocking the canvas
  4. Cycle detection - Preventing users from creating circular dependencies that would cause infinite loops
  5. State synchronization - Keeping React Flow's internal state in sync with our Zustand store for save/load functionality

Accomplishments that we're proud of

  • Zero-code data analysis - Non-technical users can build sophisticated pipelines
  • Intuitive UX - Double-click to execute, right-click for actions, automatic dependency handling
  • Extensible architecture - Adding new node types takes minutes, not hours
  • Real-time feedback - Instant visual feedback on execution status and errors
  • Production-ready - Complete with workflow persistence, error handling, and comprehensive documentation

What we learned

  • Visual programming paradigms require careful UX design - every interaction must be discoverable
  • Plugin architectures need clear interfaces and strong type contracts
  • Real-time data visualization demands performance optimization at every layer
  • User feedback is critical - features like right-click menus and double-click execution came from early testing

What's next for LiveData OS

  • Collaborative editing - Multiple users working on the same workflow in real-time
  • Cloud execution - Run heavy computations on backend servers
  • More data sources - APIs, databases, real-time streams
  • Advanced AI features - Natural language to workflow generation, automated insight discovery
  • Custom plugin marketplace - Community-contributed analysis nodes
  • Export capabilities - Generate Python/R code from visual workflows

Built With

Share this project:

Updates