Implementations

Implementations

Choose Your Flavor

Crypto Price Alarm offers two distinct implementations, each designed for different use cases and technical requirements. Both provide the same core functionality but differ in architecture, deployment, and advanced capabilities.

JavaScript vs Python: Decision Matrix

Architecture Overview

Path A: JavaScript App (Client-Side Simplicity)

graph LR
    A[Browser] --> B[app.js]
    B --> C[CoinGecko API]
    C -->|Price Data| B
    B --> D[LocalStorage]
    D -->|Persist| B
    B --> E[Alarm Checking]
    E -->|Trigger| F[Audio Alert]

    style A fill:#2ecc71
    style B fill:#3498db
    style C fill:#e74c3c
    style D fill:#f39c12
    style E fill:#9b59b6
    style F fill:#e67e22

Data Flow:

1. Browser loads index.html with inline JavaScript
2. app.js polls CoinGecko API every 15 seconds
3. Price data stored in browser’s LocalStorage
4. Alarm conditions checked client-side
5. Audio alert plays when conditions met

Philosophy: Zero-friction deployment. No build tools, no servers, no dependencies.

Path B: Python App (Server-Side Power)

graph TB
    A[Browser Client] <-->|WebSocket| B[Flask Server]
    B --> C[Background Scheduler]
    C -->|Every 15s| D[CoinGecko API]
    D -->|Price Data| C
    C --> E[JSON Storage]
    E -->|data/crypto_data_binance.json| C
    C --> F[Alarm Checking]
    F -->|Emit Event| B
    B -->|Real-time Update| A
    A --> G[Audio Alert]

    style A fill:#2ecc71
    style B fill:#3498db
    style C fill:#9b59b6
    style D fill:#e74c3c
    style E fill:#f39c12
    style F fill:#e67e22
    style G fill:#1abc9c

Data Flow:

1. Browser connects to Flask server via WebSocket
2. Server’s background scheduler fetches prices every 15 seconds
3. Price data persisted to JSON file on server
4. Server-side alarm checking runs continuously
5. WebSocket pushes updates to all connected clients in real-time
6. Client-side JavaScript plays audio alert

Philosophy: Centralized monitoring with multi-client support and server-side reliability.

When to Choose Each

Choose JavaScript if you:

• Want instant setup with no installation
• Need portability (run from USB, cloud storage, etc.)
• Prefer client-side data control
• Are monitoring for personal use only
• Don’t want to manage a server

Choose Python if you:

• Need server-side monitoring (runs even when browser closed)
• Want WebSocket real-time updates
• Require centralized data for multiple users
• Need logging and audit trails
• Have infrastructure for Python deployment

Technical Deep Dive: Side-by-Side Comparison

// Store entire state in browser
localStorage.setItem('cryptoPairs', JSON.stringify({
  "BTCUSDT": {
    "currentPrice": 50000,
    "maxPrice": 52000,
    "minPrice": 48000,
    "alarms": [...]
  }
}));

// Retrieve on page load
const data = JSON.parse(localStorage.getItem('cryptoPairs'));

# Server-side JSON file
with open('data/crypto_data_binance.json', 'w') as f:
    json.dump({
        "pairs": {
            "BTCUSDT": {
                "currentPrice": 50000,
                "maxPrice": 52000,
                "minPrice": 48000,
                "alarms": [...]
            }
        }
    }, f, indent=2)

// Browser polls every 15 seconds
setInterval(async () => {
  for (const pair of activePairs) {
    const price = await fetchFromCoinGecko(pair);
    updateUI(pair, price);
    checkAlarms(pair, price);
  }
}, 15000);

# Server pushes updates to all clients
@sched.scheduled_job('interval', seconds=15)
def update_prices():
    for pair in pairs:
        price = fetch_from_coingecko(pair)

        # Broadcast to ALL connected clients
        socketio.emit('price_update', {
            'pair': pair,
            'price': price
        })

// Browser listens for server events
socket.on('price_update', (data) => {
  updateUI(data.pair, data.price);
  checkAlarms(data.pair, data.price);
});

Migration Path

Both apps use compatible data structures. Migrating between implementations requires minimal effort:

1. Export alarm configurations from one app
2. Transform storage format (LocalStorage ↔ JSON)
3. Import into the other app

Detailed migration scripts are available in the DevOps section.

Next Steps

Explore the detailed documentation for each implementation:

• JavaScript App - LocalStorage, client-side architecture
• Python App - Flask, WebSocket, JSON storage