Project 27: Crypto Tracker (Real-Time)

📋 Project Brief

Build a real-time cryptocurrency tracker using WebSocket connections for live price updates. Features include flash feedback on price changes, a portfolio calculator, price alerts, and sparkline mini-charts.

✅ Feature Requirements

Feature 1: WebSocket Integration

Acceptance Criteria:

• Connect to a public crypto WebSocket (e.g., Binance, CoinCap)
• Prices update in real-time without page refresh
• Handle WebSocket disconnection with exponential backoff reconnection
• Show connection status indicator (🟢 Connected / 🔴 Disconnected)

Feature 2: Flash Feedback

Acceptance Criteria:

• When a price increases, the row briefly flashes green
• When a price decreases, the row briefly flashes red
• Flash duration: ~500ms with fade-out
• Price change arrow: ▲ for up, ▼ for down

Feature 3: Portfolio Calculator

Acceptance Criteria:

• Users input their holdings (e.g., "0.5 BTC, 10 ETH")
• Total portfolio value updates in real-time with live prices
• Show profit/loss based on a user-entered purchase price
• Holdings persist in localStorage

Feature 4: Price Alerts

Acceptance Criteria:

• Users set a target price for any coin (above or below current)
• When the price crosses the threshold, trigger a browser notification + sound
• Alert can be one-time or recurring
• Active alerts listed in a sidebar panel

Feature 5: Sparkline Charts

Acceptance Criteria:

• Each coin row has a mini line chart showing 24h price history
• Charts are 80×30px, no axes or labels — just the trend line
• Green line if price is up over 24h; red if down
• Built with SVG <polyline> or Canvas

🧪 Testing Checklist

• Unit test portfolio value calculation
• Unit test price alert threshold logic
• Unit test sparkline data point normalization
• Integration test: WebSocket message updates the UI
• Test reconnection logic after simulated disconnect