Stocks

Stock tracker with dual API integration, smart caching with different TTLs, and data transformation that converts raw daily prices into weekly and monthly trend averages.

Live VersionRepo
Stocks app demo

Project Goal

Build a stock tracker that integrates multiple APIs, handles rate limits gracefully, and transforms raw daily data into meaningful trend visualizations. The challenge: APIs have strict rate limits, so I needed smart caching. Quotes refresh every 15 minutes, historical data refreshes daily.

Tech Stack

  • React, TypeScript, Vite, plain CSS
  • Vitest for unit testing
  • Custom caching using React Context and a usePersistedState hook

Solo Project

  • Dual API integration: Finnhub for real-time quotes, Alpha Vantage for historical data, with Promise.all for parallel fetching
  • Smart caching with different TTLs: quotes invalidate after 15 minutes, historical data after 24 hours
  • Data transformation pipeline that converts raw daily data to weekly averages and monthly averages for trend charts
  • Auto-refresh system using useAutoUpdateStock hook with 30-second interval checks
  • Debounced search (500ms) to prevent API spam on rapid typing
  • Unit tests with Vitest for data transformation functions

Solo Project

Technical Decisions

Why Two APIs?

Finnhub provides real-time quotes but limited historical data. Alpha Vantage has comprehensive historical data but slower updates. Using both gives users current prices AND meaningful trend analysis. Promise.all fetches both in parallel to minimize load time.

Why Different Cache TTLs?

Stock quotes change throughout the day, so a 15-minute cache keeps data fresh without hitting rate limits. Historical data only changes once daily after market close, so a 24-hour cache is sufficient.

Why Transform Daily to Weekly/Monthly?

Raw daily data over 5 months is noisy and hard to read. Weekly and monthly averages reveal actual trends. Built a generic grouping utility with a GroupType enum so the same logic handles both week and month aggregation.

What I Learned

  • How to design caching strategies with different TTLs for different data types
  • How to transform and aggregate time-series data (daily to weekly to monthly averages)
  • How to integrate multiple APIs with fallback strategies for rate limits
  • How to implement auto-refresh systems with interval-based checks
  • How debouncing prevents unnecessary API calls and improves UX