About

Architecture and technical overview

Overview

The Trading Strategy Builder is a professional visual workflow editor designed for creating, testing, and deploying automated trading strategies on crypto exchanges. It provides a node-based interface similar to n8n and Zapier, allowing traders to build complex strategies without writing code.

The platform features a drag-and-drop canvas powered by React Flow, real-time validation, execution simulation, and multi-format export capabilities (JSON, TypeScript, API requests). Designed with professional traders in mind, it combines the power of algorithmic trading with an intuitive visual interface.

Tech Stack

Modern web technologies and frameworks

Frontend

React 19

Framework

Next.js 16

Language

TypeScript

Canvas

React Flow

Styling

Tailwind CSS

Exchange

Kraken API

Components

shadcn/ui

State

Zustand

Architecture Diagram

System layers and data flow

UI Layer

React components, canvas editor, sidebars, inspector panels, and interactive controls

Node Engine

React Flow integration, node types, edge connections, validation logic, and execution flow

API Layer

Kraken REST API integration, authentication, order management, and market data fetching

Storage Layer

Local state management, strategy persistence, template library, and export/import

┌─────────────────┐
│   UI Components │ ← User interactions
└────────┬────────┘
         │
┌────────▼────────┐
│   Node Engine   │ ← Strategy graph, validation
└────────┬────────┘
         │
┌────────▼────────┐
│   API Manager   │ ← Exchange communication
└────────┬────────┘
         │
┌────────▼────────┐
│   Kraken API    │ ← Live trading execution
└─────────────────┘

Drag-and-Drop Engine

How nodes and edges are represented

The canvas editor uses React Flow, a powerful library for building node-based interfaces. Each strategy is represented as a directed graph with nodes (blocks) and edges (connections).

Node Structure

{
  id: "order-1",
  type: "orderNode",
  position: { x: 100, y: 200 },
  data: {
    label: "Place Order",
    pair: "BTCUSD",
    type: "market",
    size: 0.1,
    price: 45000
  }
}

Edge Structure

{
  id: "edge-1",
  source: "order-1",
  target: "wait-1",
  type: "smoothstep",
  animated: true
}

Extensibility

Adding custom block types

The platform is designed to be extensible. New block types can be added by following these steps:

  • 1

    Define Block Component

    Create a React component in components/strategy-builder/nodes/

  • 2

    Register Node Type

    Add the node type to the nodeTypes object in the strategy builder

  • 3

    Add to Sidebar

    Include the new block in the sidebar library with appropriate category and metadata

  • 4

    Implement Inspector

    Create the configuration form in the inspector panel for the block's properties

  • 5

    Add Validation Logic

    Implement validation rules to ensure the block is configured correctly before execution