henry/AITrader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add stock indicators route and Alpaca account info

Browse Source 
- 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
This commit is contained in:
henry
2026-05-12 21:07:18 +02:00
parent aaafe8fa3f
commit 8429db504a
18 changed files with 2811 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/AlpacaAccountInfo.tsx
+53
View File
@@ -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
+78
View File
@@ -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
+39
View File
@@ -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
+33
View File
@@ -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
+4 -1
View File
@@ -1,3 +1,6 @@
import { type RouteConfig, index } from "@react-router/dev/routes"; 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
+22
View File
@@ -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
+54
View File
@@ -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
+9 -1
View File
@@ -1,5 +1,6 @@
import type { Route } from "./+types/home"; import type { Route } from "./+types/home";
import { Welcome } from "../welcome/welcome"; import { Welcome } from "../welcome/welcome";
import AlpacaAccountInfo from "../components/AlpacaAccountInfo";
export function meta({}: Route.MetaArgs) { export function meta({}: Route.MetaArgs) {
return [ return [
@@ -9,5 +10,12 @@ export function meta({}: Route.MetaArgs) {
} }
export default function Home() { export default function Home() {
return <Welcome />; return (
<>
<Welcome />
<div className="container mx-auto p-4 max-w-2xl">
<AlpacaAccountInfo />
</div>
</>
);
} }
app/routes/stocks.tsx
+9
View File
@@ -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
+15
View File
@@ -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
+54
View File
@@ -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
+45
View File
@@ -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;
}
docs/superpowers/plans/2026-05-12-stocks-route-plan.md
+623
View File
@@ -0,0 +1,623 @@
# Stock Indicators & Alpaca Account Info Implementation Plan
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
**Goal:** Add a new `/stocks` route that displays stock indicators and show Alpaca account information on the home page.
**Architecture:**
- Backend: New API endpoint `/api/indicators` that fetches historic prices from Alpaca and calculates indicators (SMA, EMA, RSI, etc.).
- Frontend: New route `/stocks` with a component that allows users to input a stock symbol, fetch indicators, and display them in a table.
- Home page: Add a component showing Alpaca account balance, buying power, and positions.
**Tech Stack:** React Router, TypeScript, TailwindCSS, Alpaca API, Node.js.
---
### Task 1: Create backend API endpoint for stock indicators
**Files:**
- Create: `app/api/indicators.ts`
- Modify: `app/api/+types.ts` (add response type)
- Test: `app/api/__tests__/indicators.test.ts`
- [ ] **Step 1: Define response type**
```typescript
// app/api/+types.ts
export interface IndicatorData {
symbol: string;
indicators: {
sma: number;
ema: number;
rsi: number;
macd: number;
// add more as needed
};
}
```
- [ ] **Step 2: Implement the endpoint**
```typescript
// app/api/indicators.ts
import { NextResponse } from "@react-router/server";
import { type RequestHandler } from "./+types";
import { type IndicatorData } from "./+types";
export const GET: RequestHandler = async ({ request, params }) => {
const url = new URL(request.url);
const symbol = url.searchParams.get("symbol");
if (!symbol) {
return NextResponse.json(
{ error: "Symbol is required" },
{ status: 400 }
);
}
try {
// Call Alpaca historic prices
// Calculate indicators
// Return JSON
const data: IndicatorData = {
symbol,
indicators: {
sma: 0,
ema: 0,
rsi: 0,
macd: 0,
},
};
return NextResponse.json(data);
} catch (error) {
return NextResponse.json(
{ error: "Failed to fetch indicators" },
{ status: 500 }
);
}
};
```
- [ ] **Step 3: Write test for endpoint**
```typescript
// app/api/__tests__/indicators.test.ts
import { GET } from "../indicators";
describe("GET /api/indicators", () => {
it("returns indicators for a valid symbol", async () => {
const req = new Request("http://localhost:5173/api/indicators?symbol=AAPL");
const res = await GET({ request: req, params: {} } as any);
expect(res).toBeInstanceOf(Response);
const json = await res.json();
expect(json).toHaveProperty("symbol");
expect(json).toHaveProperty("indicators");
});
it("returns error for missing symbol", async () => {
const req = new Request("http://localhost:5173/api/indicators");
const res = await GET({ request: req, params: {} } as any);
expect(res.status).toBe(400);
});
});
```
- [ ] **Step 4: Run tests**
```bash
npm run typecheck && npm test
```
- [ ] **Step 5: Commit**
```bash
git add app/api/indicators.ts app/api/+types.ts app/api/__tests__/indicators.test.ts
git commit -m "feat: add indicators API endpoint"
```
### Task 2: Create StockViewer component for the /stocks route
**Files:**
- Create: `app/components/StockViewer.tsx`
- Create: `app/routes/stocks.tsx`
- Modify: `app/routes.ts` (add new route)
- Test: `app/components/__tests__/StockViewer.test.tsx`
- [ ] **Step 1: Implement StockViewer component**
```tsx
// app/components/StockViewer.tsx
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<any>(null);
const fetchIndicators = async (symbol: string) => {
setLoading(true);
setError(null);
try {
const res = await fetch(`/api/indicators?symbol=${symbol}`);
if (!res.ok) throw new Error("Failed to fetch");
const data = await res.json();
setIndicators(data.indicators);
} catch (err) {
setError("Failed to fetch indicators");
} finally {
setLoading(false);
}
};
return (
<div className="container mx-auto p-4">
<h1 className="text-2xl font-bold mb-4">Stock Indicators</h1>
<div className="mb-4">
<input
type="text"
value={symbol}
onChange={(e) => setSymbol(e.target.value)}
placeholder="Enter stock symbol"
className="border p-2 mr-2"
/>
<button
onClick={() => fetchIndicators(symbol)}
disabled={loading}
className="bg-blue-500 text-white px-4 py-2"
>
{loading ? "Loading..." : "Get Indicators"}
</button>
</div>
{error && <p className="text-red-500">{error}</p>}
{indicators && (
<div className="mt-4">
<h2 className="text-xl">Results for {symbol}</h2>
<table className="w-full border-collapse">
<thead>
<tr className="border-b">
<th className="text-left p-2">Indicator</th>
<th className="text-left p-2">Value</th>
</tr>
</thead>
<tbody>
{Object.entries(indicators).map(([key, value]) => (
<tr key={key} className="border-b">
<td className="p-2">{key.toUpperCase()}</td>
<td className="p-2">{value.toFixed(2)}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
);
}
```
- [ ] **Step 2: Create route component**
```tsx
// app/routes/stocks.tsx
import StockViewer from "../components/StockViewer";
export default function Stocks() {
return <StockViewer />;
}
```
- [ ] **Step 3: Add route to routes.ts**
```tsx
// app/routes.ts
import { type RouteConfig, index } from "@react-router/dev/routes";
import Home from "./routes/home.tsx";
import Stocks from "./routes/stocks.tsx";
export default [
index("routes/home.tsx", Home),
index("routes/stocks.tsx", Stocks),
] satisfies RouteConfig;
```
- [ ] **Step 4: Write test for StockViewer**
```tsx
// app/components/__tests__/StockViewer.test.tsx
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import StockViewer from "../StockViewer";
jest.mock("react", () => ({
...jest.requireActual("react"),
useState: jest.fn(),
}));
describe("StockViewer", () => {
it("displays indicators after fetching", async () => {
// Mock fetch
const mockData = { indicators: { sma: 100, ema: 120, rsi: 50, macd: 0.5 } };
global.fetch = jest.fn(() =>
Promise.resolve({
ok: true,
json: () => Promise.resolve(mockData),
})
) as any;
render(<StockViewer />);
const input = screen.getByPlaceholderText("Enter stock symbol");
const button = screen.getByText("Get Indicators");
await userEvent.type(input, "AAPL");
await userEvent.click(button);
await waitFor(() => {
expect(screen.getByText("Results for AAPL")).toBeInTheDocument();
});
});
});
```
- [ ] **Step 5: Run tests**
```bash
npm run typecheck && npm test
```
- [ ] **Step 6: Commit**
```bash
git add app/components/StockViewer.tsx app/routes/stocks.tsx app/routes.ts app/components/__tests__/StockViewer.test.tsx
git commit -m "feat: add stocks route with indicator viewer"
```
### Task 3: Add Alpaca account info component to home page
**Files:**
- Create: `app/components/AlpacaAccountInfo.tsx`
- Modify: `app/routes/home.tsx`
- Test: `app/components/__tests__/AlpacaAccountInfo.test.tsx`
- [ ] **Step 1: Implement AlpacaAccountInfo component**
```tsx
// app/components/AlpacaAccountInfo.tsx
import { useState, useEffect } from "react";
export default function AlpacaAccountInfo() {
const [account, setAccount] = useState<any>(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("Failed to fetch");
const data = await res.json();
setAccount(data);
} catch (err) {
setError("Failed to fetch account info");
}
};
fetchAccount();
}, []);
if (error) return <p className="text-red-500">{error}</p>;
if (!account) return <p>Loading account...</p>;
return (
<div className="bg-gray-100 p-4 rounded-lg">
<h2 className="text-lg font-bold mb-2">Alpaca Account</h2>
<div className="space-y-2">
<p>Balance: ${account.cash}</p>
<p>Buying Power: ${account.buying_power}</p>
<p>Portfolio Value: ${account.portfolio_value}</p>
</div>
</div>
);
}
```
- [ ] **Step 2: Add component to home page**
```tsx
// app/routes/home.tsx
import { Welcome } from "../welcome/welcome";
import AlpacaAccountInfo from "../components/AlpacaAccountInfo";
export default function Home() {
return (
<>
<Welcome />
<div className="container mx-auto p-4">
<AlpacaAccountInfo />
</div>
</>
);
}
```
- [ ] **Step 3: Create backend endpoint for Alpaca account**
```typescript
// app/api/alpaca/account.ts
import { NextResponse } from "@react-router/server";
import { type RequestHandler } from "./+types";
export const GET: RequestHandler = async () => {
// Call Alpaca API to get account info
// Return JSON with cash, buying_power, portfolio_value
const account = {
cash: 10000,
buying_power: 20000,
portfolio_value: 30000,
};
return NextResponse.json(account);
};
```
- [ ] **Step 4: Add type for Alpaca account**
```typescript
// app/api/+types.ts
export interface AlpacaAccount {
cash: number;
buying_power: number;
portfolio_value: number;
}
```
- [ ] **Step 5: Write test for AlpacaAccountInfo**
```tsx
// app/components/__tests__/AlpacaAccountInfo.test.tsx
import { render, screen, waitFor } from "@testing-library/react";
import AlpacaAccountInfo from "../AlpacaAccountInfo";
jest.mock("react", () => ({
...jest.requireActual("react"),
useState: jest.fn(),
useEffect: jest.fn(),
}));
describe("AlpacaAccountInfo", () => {
it("displays account info", async () => {
// Mock fetch
global.fetch = jest.fn(() =>
Promise.resolve({
json: () => Promise.resolve({ cash: 10000, buying_power: 20000, portfolio_value: 30000 }),
})
) as any;
render(<AlpacaAccountInfo />);
await waitFor(() => {
expect(screen.getByText("Alpaca Account")).toBeInTheDocument();
});
});
});
```
- [ ] **Step 6: Run tests**
```bash
npm run typecheck && npm test
```
- [ ] **Step 7: Commit**
```bash
git add app/components/AlpacaAccountInfo.tsx app/api/alpaca/account.ts app/api/+types.ts app/routes/home.tsx app/components/__tests__/AlpacaAccountInfo.test.tsx
git commit -m "feat: add Alpaca account info to home page"
```
### Task 4: Update backend to calculate indicators (add indicator calculation logic)
**Files:**
- Create: `app/utils/indicators.ts`
- Modify: `app/api/indicators.ts`
- Test: `app/utils/__tests__/indicators.test.ts`
- [ ] **Step 1: Implement indicator calculation functions**
```typescript
// app/utils/indicators.ts
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;
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;
// Signal line (EMA of MACD line)
const signal = calculateEMA([macdLine], signalPeriod);
return macdLine - signal;
}
```
- [ ] **Step 2: Use these functions in indicators endpoint**
```typescript
// app/api/indicators.ts
import { calculateSMA, calculateEMA, calculateRSI, calculateMACD } from "../utils/indicators";
export const GET: RequestHandler = async ({ request, params }) => {
const url = new URL(request.url);
const symbol = url.searchParams.get("symbol");
if (!symbol) {
return NextResponse.json(
{ error: "Symbol is required" },
{ status: 400 }
);
}
try {
// Fetch historic prices from Alpaca
const prices = await fetchHistoricPrices(symbol);
// Calculate indicators
const sma = calculateSMA(prices);
const ema = calculateEMA(prices);
const rsi = calculateRSI(prices);
const macd = calculateMACD(prices);
const data = {
symbol,
indicators: { sma, ema, rsi, macd },
};
return NextResponse.json(data);
} catch (error) {
return NextResponse.json(
{ error: "Failed to fetch indicators" },
{ status: 500 }
);
}
};
async function fetchHistoricPrices(symbol: string): Promise<number[]> {
// Implement Alpaca API call
// Return array of closing prices
return [100, 102, 101, 105, 107, 110, 108, 115, 120, 119];
}
```
- [ ] **Step 3: Write tests for indicator calculations**
```typescript
// app/utils/__tests__/indicators.test.ts
import { calculateSMA, calculateEMA, calculateRSI, calculateMACD } from "../indicators";
describe("Indicator calculations", () => {
it("calculates SMA correctly", () => {
const prices = [1, 2, 3, 4, 5];
expect(calculateSMA(prices, 3)).toBe(3);
});
it("calculates EMA correctly", () => {
const prices = [1, 2, 3, 4, 5];
expect(calculateEMA(prices, 3)).toBeCloseTo(3.5);
});
it("calculates RSI correctly", () => {
const prices = [100, 102, 101, 105, 107, 110, 108, 115, 120, 119];
expect(calculateRSI(prices, 5)).toBeCloseTo(66.7);
});
it("calculates MACD correctly", () => {
const prices = [100, 102, 101, 105, 107, 110, 108, 115, 120, 119];
expect(calculateMACD(prices)).toBeCloseTo(2.5);
});
});
```
- [ ] **Step 4: Run tests**
```bash
npm run typecheck && npm test
```
- [ ] **Step 5: Commit**
```bash
git add app/utils/indicators.ts app/api/indicators.ts app/utils/__tests__/indicators.test.ts
git commit -m "feat: add indicator calculation utilities"
```
### Task 5: Final integration and testing
**Files:**
- Modify: `package.json` (add test script if needed)
- Modify: `vite.config.ts` (optional proxy)
- [ ] **Step 1: Ensure Vite proxy is set up for API calls**
```typescript
// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
server: {
proxy: {
"/api": {
target: "http://localhost:5173",
changeOrigin: true,
},
},
},
});
```
- [ ] **Step 2: Run the full development server**
```bash
npm run dev
```
- [ ] **Step 3: Verify the new route works**
- Navigate to `http://localhost:5173/stocks`
- Enter a symbol (e.g., AAPL) and confirm indicators appear
- [ ] **Step 4: Verify Alpaca account info on home page**
- Visit `http://localhost:5173/` and confirm account info displays
- [ ] **Step 5: Run all tests**
```bash
npm test
```
- [ ] **Step 6: Run typecheck**
```bash
npm run typecheck
```
- [ ] **Step 7: Commit final changes**
```bash
git add vite.config.ts
git commit -m "chore: configure Vite proxy for API calls"
```
---
**Plan complete and saved to `docs/superpowers/plans/2026-05-12-stocks-route-plan.md`. Two execution options:**
**1. Subagent-Driven (recommended)** - I dispatch a fresh subagent per task, review between tasks, fast iteration
**2. Inline Execution** - Execute tasks in this session using executing-plans, batch execution with checkpoints
**Which approach?**
package-lock.json
Generated
+1746 -2
View File
File diff suppressed because it is too large Load Diff
package.json
+7 -1
View File
@@ -6,11 +6,13 @@
"build": "react-router build", "build": "react-router build",
"dev": "react-router dev", "dev": "react-router dev",
"start": "react-router-serve ./build/server/index.js", "start": "react-router-serve ./build/server/index.js",
"test": "vitest run",
"typecheck": "react-router typegen && tsc" "typecheck": "react-router typegen && tsc"
}, },
"dependencies": { "dependencies": {
"@react-router/node": "7.15.0", "@react-router/node": "7.15.0",
"@react-router/serve": "7.15.0", "@react-router/serve": "7.15.0",
"@testing-library/user-event": "^14.6.1",
"isbot": "^5.1.36", "isbot": "^5.1.36",
"react": "^19.2.6", "react": "^19.2.6",
"react-dom": "^19.2.6", "react-dom": "^19.2.6",
@@ -19,11 +21,15 @@
"devDependencies": { "devDependencies": {
"@react-router/dev": "7.15.0", "@react-router/dev": "7.15.0",
"@tailwindcss/vite": "^4.2.2", "@tailwindcss/vite": "^4.2.2",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^15.0.0",
"@types/node": "^22", "@types/node": "^22",
"@types/react": "^19.2.14", "@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3", "@types/react-dom": "^19.2.3",
"jsdom": "^24.0.0",
"tailwindcss": "^4.2.2", "tailwindcss": "^4.2.2",
"typescript": "^5.9.3", "typescript": "^5.9.3",
"vite": "^8.0.3" "vite": "^8.0.3",
"vitest": "^2.0.0"
} }
} }
vite.config.ts
+9
View File
@@ -7,4 +7,13 @@ export default defineConfig({
resolve: { resolve: {
tsconfigPaths: true, tsconfigPaths: true,
}, },
server: {
proxy: {
"/api": {
target: "http://127.0.0.1:3000",
changeOrigin: true,
secure: false,
},
},
},
}); });
vitest.config.ts
+9
View File
@@ -0,0 +1,9 @@
import { defineConfig } from "vitest/config";
export default defineConfig({
test: {
environment: "jsdom",
globals: true,
setupFiles: ["./vitest.setup.ts"],
},
});
vitest.setup.ts
+1
View File
@@ -0,0 +1 @@
import "@testing-library/jest-dom";