24/12/2025
Project:

StrategyFlow

StrategyFlow is a low-code trading builder for Kraken that allows users to visually build and execute strategies. The project took second place in the 2.5 week online Kraken Forge Hackathon.

StrategyFlow

Low-Code Trading Builder for Kraken

StrategyFlow is a visual low-code tool that allows crypto traders to build, test, and execute strategies on the Kraken platform—without writing a single line of code. The project was developed during the Kraken Forge Hackathon 2025 and took second place in the Strategy Builder category.

Using drag-and-drop blocks, users can create trading workflows, set parameters via a visual inspection panel, and simulate or execute strategies instantly with live API integration.

Issue

Problem statement

Building automated trading strategies typically requires in-depth programming knowledge. Kraken’s API (with HMAC-SHA512 authentication and nonce handling) in particular presents a high barrier to entry, even for more experienced developers. Moreover, visual feedback is often lacking, making errors difficult to debug.

Solution

Our solution

With StrategyFlow, we make strategy development visual, accessible, and secure. Users can connect blocks via a canvas that correspond to order actions, conditions, or logic. The strategy can be tested directly via a simulator and then executed via the Kraken API.

Key features include:

  • Drag & Drop Editor (with React Flow)

  • Full Kraken API integration (AddOrder, CancelOrder, etc.)

  • Simulator with live debugging

  • Template Gallery with DCA, Stop-Loss & RSI strategies

  • Block configuration via inspection panel

  • Export as JSON or TypeScript SDK

Techniques used

Technical Implementation

The front-end is built with React 19.2, Next.js 16, TypeScript 5, and Tailwind CSS 4. The architecture is modular: each block type (e.g., Order, Condition, Utility) is implemented as a separate component for maximum reusability.

Server-side API routes ensure secure handling of Kraken credentials (keys remain on the server). Blocks are type-safely defined via discriminated unions in TypeScript, ensuring reliability during development and execution.

Performance optimizations such as lazy loading, memoization, and React Flow’s virtualization ensure a smooth user experience, even with large strategies.

Questions? Contact me, or return to the overview