A modern, production-ready Next.js application for exploring financial market data through the Alpha Vantage API. Built with TypeScript, Tailwind CSS, and featuring interactive charts and tables.
- Time Series Data: Access intraday, daily, weekly, and monthly stock price data with interactive charts
- News & Sentiment Analysis: Real-time news and sentiment analysis for stocks and market topics
- Fundamental Data: Company financials, earnings, balance sheets and cash flow
- Modern UI: Clean, responsive design with dark mode support
- Interactive Visualizations: Charts powered by Recharts for data visualization
- Symbol Search: Autocomplete search for stock symbols
- Error Handling: Graceful error handling with user-friendly messages
- Loading States: Smooth loading indicators for better UX
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Charts: Recharts
- Tables: Built-in responsive tables
- HTTP Client: Axios
- UI Components: Custom components with Tailwind CSS
- Node.js 18+
- npm or yarn
- Alpha Vantage API key (free from Alpha Vantage)
- Clone the repository:
git clone <repository-url>
cd avn- Install dependencies:
npm install- Create a
.env.localfile in the project root:
ALPHAVANTAGE_API_KEY=your_api_key_here- Start the development server:
npm run dev- Open http://localhost:3000 in your browser
avn/
├── app/ # Next.js app directory
│ ├── api/ # API routes
│ │ ├── symbol-search/ # Symbol search endpoint
│ │ ├── timeseries/ # Time series data endpoint
│ │ ├── news-sentiment/ # News sentiment endpoint
│ │ └── fundamentals/ # Fundamental data endpoint
│ ├── timeseries/ # Time series page
│ ├── news-sentiment/ # News sentiment page
│ ├── fundamentals/ # Fundamental data pages
│ │ ├── overview/
│ │ ├── earnings/
│ │ └── ...
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/ # Reusable components
│ ├── ui/ # UI components
│ │ ├── card.tsx
│ │ ├── button.tsx
│ │ ├── input.tsx
│ │ ├── select.tsx
│ │ ├── alert.tsx
│ │ └── loading.tsx
│ ├── layout/ # Layout components
│ │ └── navbar.tsx
│ └── api-key-check.tsx # API key validation component
├── lib/ # Utility functions
│ ├── alphavantage.ts # Alpha Vantage API client
│ └── utils.ts # Helper functions
└── public/ # Static assets
- Welcome page with navigation cards
- API key status check
- Getting started guide
- Fetch stock price data (intraday, daily, weekly, monthly)
- Interactive line chart for closing prices
- Detailed OHLCV data table
- Symbol search with autocomplete
- Search news by tickers and topics
- Filter by date range
- Sentiment analysis indicators
- Direct links to articles
- Company Overview (
/fundamentals/overview): Company info and key metrics - Earnings (
/fundamentals/earnings): Annual and quarterly earnings reports - Additional pages for income statements, balance sheets and cash flow
All API routes are protected server-side and require the ALPHAVANTAGE_API_KEY environment variable.
GET /api/symbol-search?q=<query>: Search for stock symbolsPOST /api/timeseries: Fetch time series dataPOST /api/news-sentiment: Fetch news and sentiment dataPOST /api/fundamentals: Fetch fundamental data
| Variable | Description | Required |
|---|---|---|
ALPHAVANTAGE_API_KEY |
Your Alpha Vantage API key | Yes |
# Run development server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Run linting
npm run lintThis application can be deployed to any platform that supports Next.js:
- Vercel: Zero-config deployment (recommended)
- Netlify: Static export or serverless functions
- Docker: Containerized deployment
- Node.js server: Traditional Node.js hosting
Remember to set the ALPHAVANTAGE_API_KEY environment variable in your deployment platform.
Contributions are welcome! Please feel free to submit a Pull Request.
MIT
- Data provided by Alpha Vantage
- Built with Next.js
- Styled with Tailwind CSS
- Charts by Recharts