Stock data visualization app. The backend fetches OHLCV data from Yahoo Finance and serves it as JSON. The frontend displays it as a searchable table with stat cards.
Stack: Node.js · TypeScript · Express (backend) / React · Vite (frontend)
Node.js 18+ is required. To check: node --version
To install or upgrade on Windows:
winget install OpenJS.NodeJS.LTS
After install, reload your terminal's PATH:
$env:PATH = [System.Environment]::GetEnvironmentVariable("PATH","Machine") + ";" + [System.Environment]::GetEnvironmentVariable("PATH","User")If you see "running scripts is disabled on this system" when using npm, run once:
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUserThe app has two servers that need to run at the same time — open two terminal windows.
Terminal 1 — backend
cd backend
npm install
npm run dev
The backend starts on http://localhost:3001. You should see:
Backend running on http://localhost:3001
Terminal 2 — frontend
cd frontend
npm install
npm run dev
The frontend starts on http://localhost:5173. You should see:
VITE v5.x.x ready in Xms
➜ Local: http://localhost:5173/
Open http://localhost:5173 in a browser. The backend must be running first — the frontend's Vite dev server proxies all /api/* requests to localhost:3001.
Try it: Type a symbol in the search box (e.g. TSLA, AAPL, ^GSPC, BTC-USD) and press Search.
Backend reads from backend/.env. The file is already created with defaults:
PORT=3001
To use a different port, change PORT in backend/.env. No other configuration is required.
To verify TypeScript without running the app:
cd backend && npm run typecheck
cd frontend && npm run typecheck
Integration tests live in validation/ and run against the real Yahoo Finance API — network access is required.
Run all backend tests
cd backend
npm test
This runs four test files in sequence:
| File | What it tests |
|---|---|
yahoo-finance.adapter.test.ts |
Raw adapter against the live Yahoo endpoint |
stock-service.test.ts |
Normalization logic with a fake adapter (no network) |
stock-service.integration.test.ts |
Full adapter → service pipeline on real TSLA and ^GSPC data |
stock-route.test.ts |
Express route error mapping and query param defaults |
Run a single test file
cd backend
npx tsx ../validation/backend/yahoo-finance.adapter.test.ts
Yahoo has two error paths; both throw a message prefixed with Yahoo Finance:
- Nonsensical symbols → HTTP 404 →
Yahoo Finance HTTP 404 ... - Valid-looking but nonexistent symbols → HTTP 200 with error in body →
Yahoo Finance error [code]: ...