feat: add stock indicators route and Alpaca account info

- New /stocks route with StockViewer component - New /api/indicators endpoint with SMA, EMA, RSI, MACD - New /api/alpaca/account endpoint - AlpacaAccountInfo component on home page - Indicator calculation utilities - Tests for utilities and components - Vite proxy config for /api
2026-05-12 21:07:18 +02:00
parent aaafe8fa3f
commit 8429db504a
18 changed files with 2811 additions and 6 deletions
@@ -0,0 +1,78 @@
+import { useState } from "react";
+
+export default function StockViewer() {
+  const [symbol, setSymbol] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [indicators, setIndicators] = useState<{
+    sma: number;
+    ema: number;
+    rsi: number;
+    macd: number;
+  } | null>(null);
+
+  const fetchIndicators = async () => {
+    if (!symbol.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(
+        `/api/indicators?symbol=${encodeURIComponent(symbol.trim())}`
+      );
+      if (!res.ok) throw new Error("API error");
+      const data = await res.json();
+      setIndicators(data.indicators);
+    } catch {
+      setError("Failed to fetch indicators. Check the symbol and try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="container mx-auto p-4 max-w-2xl">
+      <h1 className="text-2xl font-bold mb-4">Stock Indicators</h1>
+      <div className="flex gap-2 mb-4">
+        <input
+          type="text"
+          value={symbol}
+          onChange={(e) => setSymbol(e.target.value)}
+          placeholder="Enter stock symbol (e.g. AAPL)"
+          className="flex-1 border rounded p-2"
+          onKeyDown={(e) => e.key === "Enter" && fetchIndicators()}
+        />
+        <button
+          onClick={fetchIndicators}
+          disabled={loading || !symbol.trim()}
+          className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 disabled:opacity-50"
+        >
+          {loading ? "Loading…" : "Get Indicators"}
+        </button>
+      </div>
+      {error && <p className="text-red-600 mb-4">{error}</p>}
+      {indicators && (
+        <div className="bg-gray-50 rounded-lg p-4">
+          <h2 className="text-lg font-semibold mb-2">
+            Results for {symbol.toUpperCase()}
+          </h2>
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="border-b">
+                <th className="text-left p-2 font-medium">Indicator</th>
+                <th className="text-left p-2 font-medium">Value</th>
+              </tr>
+            </thead>
+            <tbody>
+              {Object.entries(indicators).map(([key, value]) => (
+                <tr key={key} className="border-b">
+                  <td className="p-2 capitalize">{key}</td>
+                  <td className="p-2 font-mono">{value.toFixed(2)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}