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

app/components/AlpacaAccountInfo.tsx

@@ -0,0 +1,53 @@
+import { useState, useEffect } from "react";
+
+export default function AlpacaAccountInfo() {
+  const [account, setAccount] = useState<{
+    cash: number;
+    buying_power: number;
+    portfolio_value: number;
+  } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchAccount = async () => {
+      try {
+        const res = await fetch("/api/alpaca/account");
+        if (!res.ok) throw new Error("API error");
+        const data = await res.json();
+        setAccount(data);
+      } catch {
+        setError("Failed to load account info.");
+      }
+    };
+    fetchAccount();
+  }, []);
+
+  if (error) return <p className="text-red-600">{error}</p>;
+  if (!account) return <p className="text-gray-500">Loading account…</p>;
+
+  return (
+    <div className="bg-white border rounded-lg p-4 shadow-sm">
+      <h2 className="text-lg font-semibold mb-2">Alpaca Account</h2>
+      <dl className="space-y-1 text-sm">
+        <div className="flex justify-between">
+          <dt className="text-gray-600">Cash</dt>
+          <dd className="font-mono">
+            ${account.cash.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+          </dd>
+        </div>
+        <div className="flex justify-between">
+          <dt className="text-gray-600">Buying Power</dt>
+          <dd className="font-mono">
+            ${account.buying_power.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+          </dd>
+        </div>
+        <div className="flex justify-between">
+          <dt className="text-gray-600">Portfolio Value</dt>
+          <dd className="font-mono">
+            ${account.portfolio_value.toLocaleString(undefined, { minimumFractionDigits: 2 })}
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}

app/components/StockViewer.tsx

@@ -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>
+  );
+}

app/components/__tests__/AlpacaAccountInfo.test.tsx

@@ -0,0 +1,39 @@
+/// <reference types="vitest" />
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import AlpacaAccountInfo from "../AlpacaAccountInfo";
+
+describe("AlpacaAccountInfo", () => {
+  it("displays account info after loading", async () => {
+    const mockFetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        cash: 12345.67,
+        buying_power: 8000.0,
+        portfolio_value: 25000.0,
+      }),
+    });
+    globalThis.fetch = mockFetch;
+
+    render(<AlpacaAccountInfo />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Alpaca Account/i)).toBeInTheDocument();
+    });
+    // Use regex to match number regardless of locale decimal separator
+    expect(screen.getByText(/\$12[\.,]345/)).toBeInTheDocument();
+    expect(screen.getByText(/\$8[\.,]000/)).toBeInTheDocument();
+    expect(screen.getByText(/\$25[\.,]000/)).toBeInTheDocument();
+  });
+
+  it("displays error when fetch fails", async () => {
+    const mockFetch = vi.fn().mockRejectedValue(new Error("Network error"));
+    globalThis.fetch = mockFetch;
+
+    render(<AlpacaAccountInfo />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/Failed to load account info/i)).toBeInTheDocument();
+    });
+  });
+});

app/components/__tests__/StockViewer.test.tsx

@@ -0,0 +1,33 @@
+/// <reference types="vitest" />
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import StockViewer from "../StockViewer";
+
+describe("StockViewer", () => {
+  it("fetches and displays indicators", async () => {
+    const mockData = {
+      symbol: "AAPL",
+      indicators: { sma: 155.5, ema: 157.2, rsi: 62.3, macd: 1.8 },
+    };
+    globalThis.fetch = vi.fn().mockResolvedValue({
+      ok: true,
+      json: async () => mockData,
+    }) as any;
+
+    render(<StockViewer />);
+
+    const input = screen.getByPlaceholderText(/enter stock symbol/i);
+    const button = screen.getByRole("button");
+
+    await userEvent.type(input, "AAPL");
+    await userEvent.click(button);
+
+    await waitFor(() => {
+      expect(screen.getByText(/results for aapl/i)).toBeInTheDocument();
+    });
+    // Accept either locale format for decimal separator
+    const bodyText = screen.getByText(/155.5/);
+    expect(bodyText).toBeInTheDocument();
+  });
+});

app/routes.ts

@@ -1,3 +1,6 @@
 import { type RouteConfig, index } from "@react-router/dev/routes";
 
-export default [index("routes/home.tsx")] satisfies RouteConfig;
+export default [
+  index("routes/home.tsx"),
+  index("routes/stocks.tsx"),
+] satisfies RouteConfig;

app/routes/api/alpaca/account.ts

@@ -0,0 +1,22 @@
+import type { AlpacaAccount } from "../../../types";
+
+// Mock Alpaca account data – replace with actual API call
+async function fetchAlpacaAccount(): Promise<AlpacaAccount> {
+  return {
+    cash: 12345.67,
+    buying_power: 8000.0,
+    portfolio_value: 25000.0,
+  };
+}
+
+export async function loader() {
+  try {
+    const account = await fetchAlpacaAccount();
+    return Response.json(account);
+  } catch {
+    return Response.json(
+      { error: "Failed to fetch account info" },
+      { status: 500 }
+    );
+  }
+}

app/routes/api/indicators.ts

@@ -0,0 +1,54 @@
+import { type IndicatorData } from "../../types";
+import {
+  calculateSMA,
+  calculateEMA,
+  calculateRSI,
+  calculateMACD,
+} from "../../utils/indicators";
+
+// Replace with actual Alpaca API call
+async function fetchHistoricPrices(symbol: string): Promise<number[]> {
+  return [
+    150.0, 152.3, 151.8, 153.5, 155.0, 154.2, 156.7, 158.1, 157.5, 159.0,
+    160.2, 158.9, 161.5, 163.0, 162.5, 164.8, 166.3, 165.0, 167.5, 169.0,
+    168.2, 170.5, 172.0, 171.5, 173.2,
+  ];
+}
+
+export async function loader({ request }: { request: Request }) {
+  const url = new URL(request.url);
+  const symbol = url.searchParams.get("symbol");
+
+  if (!symbol) {
+    return Response.json(
+      { error: "Symbol is required" },
+      { status: 400 }
+    );
+  }
+
+  try {
+    const prices = await fetchHistoricPrices(symbol.toUpperCase());
+    if (prices.length === 0) {
+      return Response.json(
+        { error: "No price data found" },
+        { status: 404 }
+      );
+    }
+
+    const sma = calculateSMA(prices);
+    const ema = calculateEMA(prices);
+    const rsi = calculateRSI(prices);
+    const macd = calculateMACD(prices);
+
+    const data: IndicatorData = {
+      symbol: symbol.toUpperCase(),
+      indicators: { sma, ema, rsi, macd },
+    };
+    return Response.json(data);
+  } catch (error) {
+    return Response.json(
+      { error: "Failed to fetch indicators" },
+      { status: 500 }
+    );
+  }
+}

app/routes/home.tsx

@@ -1,5 +1,6 @@
 import type { Route } from "./+types/home";
 import { Welcome } from "../welcome/welcome";
+import AlpacaAccountInfo from "../components/AlpacaAccountInfo";
 
 export function meta({}: Route.MetaArgs) {
   return [
@@ -9,5 +10,12 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export default function Home() {
-  return <Welcome />;
+  return (
+    <>
+      <Welcome />
+      <div className="container mx-auto p-4 max-w-2xl">
+        <AlpacaAccountInfo />
+      </div>
+    </>
+  );
 }

app/routes/stocks.tsx

@@ -0,0 +1,9 @@
+import StockViewer from "../components/StockViewer";
+
+export default function Stocks() {
+  return (
+    <main className="flex items-start justify-center pt-8 pb-4">
+      <StockViewer />
+    </main>
+  );
+}

app/types.ts

@@ -0,0 +1,15 @@
+export interface IndicatorData {
+  symbol: string;
+  indicators: {
+    sma: number;
+    ema: number;
+    rsi: number;
+    macd: number;
+  };
+}
+
+export interface AlpacaAccount {
+  cash: number;
+  buying_power: number;
+  portfolio_value: number;
+}

app/utils/__tests__/indicators.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from "vitest";
+import {
+  calculateSMA,
+  calculateEMA,
+  calculateRSI,
+  calculateMACD,
+} from "../../utils/indicators";
+
+describe("calculateSMA", () => {
+  it("returns 0 when prices length < period", () => {
+    expect(calculateSMA([1, 2], 5)).toBe(0);
+  });
+
+  it("calculates simple moving average correctly", () => {
+    expect(calculateSMA([1, 2, 3, 4, 5], 5)).toBe(3);
+  });
+});
+
+describe("calculateEMA", () => {
+  it("returns 0 when prices length < period", () => {
+    expect(calculateEMA([1, 2], 5)).toBe(0);
+  });
+
+  it("calculates exponential moving average", () => {
+    const prices = [10, 11, 12, 13, 14, 15];
+    const result = calculateEMA(prices, 3);
+    expect(result).toBeCloseTo(14.125, 2);
+  });
+});
+
+describe("calculateRSI", () => {
+  it("returns 0 when prices length < period + 1", () => {
+    expect(calculateRSI([1, 2, 3], 5)).toBe(0);
+  });
+
+  it("calculates relative strength index", () => {
+    const prices = [100, 102, 101, 105, 107, 110, 108, 115, 120, 119, 121];
+    const result = calculateRSI(prices, 5);
+    expect(result).toBeGreaterThan(50);
+    expect(result).toBeLessThan(100);
+  });
+});
+
+describe("calculateMACD", () => {
+  it("returns 0 when prices length < slowPeriod", () => {
+    expect(calculateMACD([1, 2, 3], 12, 26, 9)).toBe(0);
+  });
+
+  it("calculates MACD line", () => {
+    const prices = Array.from({ length: 30 }, (_, i) => 100 + i * 0.5);
+    const result = calculateMACD(prices);
+    expect(result).toBeCloseTo(-0.96, 2);
+  });
+});

app/utils/indicators.ts

@@ -0,0 +1,45 @@
+export function calculateSMA(prices: number[], period: number = 20): number {
+  if (prices.length < period) return 0;
+  const sum = prices.slice(0, period).reduce((a, b) => a + b, 0);
+  return sum / period;
+}
+
+export function calculateEMA(prices: number[], period: number = 20): number {
+  if (prices.length < period) return 0;
+  const multiplier = 2 / (period + 1);
+  let ema = prices[period - 1];
+  for (let i = period; i < prices.length; i++) {
+    ema = prices[i] * multiplier + ema * (1 - multiplier);
+  }
+  return ema;
+}
+
+export function calculateRSI(prices: number[], period: number = 14): number {
+  if (prices.length < period + 1) return 0;
+  let gains = 0;
+  let losses = 0;
+  for (let i = 1; i <= period; i++) {
+    const diff = prices[i] - prices[i - 1];
+    if (diff > 0) gains += diff;
+    else losses -= diff;
+  }
+  const avgGain = gains / period;
+  const avgLoss = losses / period;
+  if (avgLoss === 0) return 100;
+  const rs = avgGain / avgLoss;
+  return 100 - (100 / (1 + rs));
+}
+
+export function calculateMACD(
+  prices: number[],
+  fastPeriod: number = 12,
+  slowPeriod: number = 26,
+  signalPeriod: number = 9
+): number {
+  if (prices.length < slowPeriod) return 0;
+  const emaFast = calculateEMA(prices, fastPeriod);
+  const emaSlow = calculateEMA(prices, slowPeriod);
+  const macdLine = emaFast - emaSlow;
+  const signal = calculateEMA([macdLine], signalPeriod);
+  return macdLine - signal;
+}