A Next.js application for searching and viewing real-time stock data using the AlphaVantage API.
- Real-time stock search with auto-suggestions
- Stock detail pages with current price, volume, and key metrics
- 30-day price history charts
- Favorites management with localStorage
- Responsive mobile design
- Next.js 15 (App Router with TypeScript)
- TanStack Query for data fetching and caching
- Tailwind CSS + shadcn/ui for styling
- Recharts for price charts
- AlphaVantage API for stock data
# Install dependencies
npm install
# Add your API key
echo "ALPHAVANTAGE_API_KEY=your_key_here" > .env.local
# Run development server
npm run devGet a free API key at https://www.alphavantage.co/support/#api-key
The app uses Next.js API routes (/api/stock/*) to proxy requests to AlphaVantage. This keeps the API key secure on the server and allows for server-side caching.
The popular stocks list on the homepage uses static mock data to avoid an unnecessary API call on every page load. All search results and stock detail pages fetch real-time data from the API. This approach balances user experience with API quota preservation.
TanStack Query is configured with a 5-minute staleTime to reduce API calls. AlphaVantage's free tier has a 25 requests/day limit, so aggressive caching is essential.
Search queries are debounced by 500ms to avoid excessive API calls while typing.
The project uses strict TypeScript settings including noUncheckedIndexedAccess, noImplicitReturns, and noUnusedLocals. The readonly modifier is used strategically on API response types and data models for immutability.
src/
├── app/ # Pages and API routes
├── components/ # React components
├── hooks/ # Custom hooks (debounce, queries)
├── lib/ # API service layer
└── types/ # TypeScript interfaces
npm run dev # Development server
npm run build # Production build
npm run lint # Run linter
npm run type-check # TypeScript checkBuilt to deploy on Vercel with zero configuration. Environment variables can be added through the Vercel dashboard.