Skip to content

Trading Dashboard

React-based trading dashboard powered by the Algo Tick API with real-time updates. Framework: TypeScript + React.

Live Output Preview

If you ran this bot right now, the API would return:

# Live API output — March 12, 2026
Market Regime: Mean-Reverting
Safety Score: 94.4 (HIGH)

Composite Signals:
  BTC: neutral (score: 0.053)\n  ETH: buy (score: 0.293)\n  SOL: buy (score: 0.221)\n  HYPE: buy (score: 0.298)\n
# The bot would use this data to make trading decisions

Complete Source Code

Copy this code, replace YOUR_API_KEY with your key, and run:

// React component consuming the Algo Tick API
import {{ useState, useEffect }} from "react";

const API_KEY = "YOUR_API_KEY";
const BASE = "https://algotick.dev";

interface MarketData {{
  coin: string;
  price: number;
  regime: string;
  composite: number;
  funding: number;
}}

export function MarketDashboard() {{
  const [data, setData] = useState([]);

  useEffect(() => {{
    const fetchData = async () => {{
      const [vol, comp, spreads] = await Promise.all([
        fetch(`${{BASE}}/v1/signals/volatility?api_key=${{API_KEY}}`).then(r => r.json()),
        fetch(`${{BASE}}/v1/signals/composite?api_key=${{API_KEY}}`).then(r => r.json()),
        fetch(`${{BASE}}/v1/signals/spreads?api_key=${{API_KEY}}`).then(r => r.json()),
      ]);

      const coins = (vol.volatility || []).map((v: any) => ({{
        coin: v.coin,
        price: v.mark_price,
        regime: (comp.signals || []).find((s: any) => s.coin === v.coin)?.regime || "?",
        composite: (comp.signals || []).find((s: any) => s.coin === v.coin)?.composite_score || 0,
        funding: (spreads.spreads || []).find((s: any) => s.coin === v.coin)?.funding_rate || 0,
      }}));
      setData(coins);
    }};
    fetchData();
    const interval = setInterval(fetchData, 60000);
    return () => clearInterval(interval);
  }}, []);

  return (
    

Trading Dashboard

{{data.map(d => (
{{d.coin}}: ${{d.price.toLocaleString()}} | Regime: {{d.regime}} | Score: {{d.composite.toFixed(3)}} | Funding: {{d.funding.toFixed(6)}}
))}}
); }}

Setup Instructions

  1. Get an API key from the API page
  2. Replace YOUR_API_KEY in the code above
  3. Install dependencies: pip install requests (Python) or npm install node-fetch (TypeScript)
  4. Run the script and monitor the output
  5. Connect your exchange API for live trading

API Endpoints Used

Framework
TypeScript + React
Data Source
Algo Tick API
# All endpoints used by this template:
curl -H "X-API-Key: YOUR_KEY" https://algotick.dev/v3/signals/regime
curl -H "X-API-Key: YOUR_KEY" https://algotick.dev/v1/signals/composite
curl -H "X-API-Key: YOUR_KEY" https://algotick.dev/v3/signals/safety
curl -H "X-API-Key: YOUR_KEY" https://algotick.dev/v1/signals/volatility?coin=BTC

Don't just stare at the dashboard. Automate it.

Every metric on this page is available via our sub-millisecond API.
Build trading bots, backtest strategies, and power AI agents with institutional-grade data.

Get API Key →

More Typescript Templates

Other Frameworks