Feature: Stock Quote Page

Relevant source files

The following files were used as context for generating this wiki page:

• client/src/app/quote/[ticker]/page.tsx
• client/src/components/StockChart/index.tsx
• client/src/components/StockSummary/index.tsx
• client/src/components/StockRating/index.tsx
• client/src/components/TickerChat/index.tsx
• client/src/components/NewsSection/index.tsx
• client/src/components/StockCardMini/index.tsx
• client/src/components/Navbar/index.tsx

The Stock Quote Page is a dynamic Next.js page that provides a comprehensive, multi-faceted view of a specific financial ticker. It aggregates and displays a wide range of data, including real-time and historical price charts, company information, AI-generated summaries and chat, analyst ratings, and related news. The page is constructed from several modular React components, each responsible for fetching and rendering a specific piece of information from various external APIs.

The page is accessible via the URL /quote/[ticker], where [ticker] is the stock symbol. It is a client-rendered page ("use client") that fetches data dynamically based on the ticker provided in the URL parameters.

Sources: client/src/app/quote/[ticker]/page.tsx:1, 23

Architecture and Components

The Stock Quote Page is composed of a main page component (StockPage) that orchestrates the layout and data flow for several child components. Each child component is specialized for a particular data visualization or interaction.

The following diagram illustrates the component hierarchy of the Stock Quote Page.

Key Components

Component	File	Description
StockPage	app/quote/[ticker]/page.tsx	The main container component. Fetches basic stock info and related tickers, and arranges all sub-components.
Navbar	components/Navbar/index.tsx	Provides site navigation and a global stock search bar.
StockChart	components/StockChart/index.tsx	Displays an interactive historical price chart with selectable time windows and a forecasting feature.
TickerChat	components/TickerChat/index.tsx	An AI-powered chat interface allowing users to "talk" to the stock ticker for insights.
StockSummary	components/StockSummary/index.tsx	Generates an AI-powered summary of critical price movements over the last month.
StockRating	components/StockRating/index.tsx	Fetches and displays analyst ratings and detailed metric scores for the stock.
NewsSection	components/NewsSection/index.tsx	Displays a list of recent news articles related to the ticker.
StockCardMini	components/StockCardMini/index.tsx	A small card used to display summary information for related stocks.

Sources: client/src/app/quote/[ticker]/page.tsx:4-15, client/src/components/StockChart/index.tsx, client/src/components/TickerChat/index.tsx, client/src/components/StockSummary/index.tsx, client/src/components/StockRating/index.tsx, client/src/components/NewsSection/index.tsx, client/src/components/StockCardMini/index.tsx

Data Flow and Fetching

On initial load, the StockPage component fetches essential company details and a list of related tickers from the Polygon.io API. Other components on the page then independently fetch their own required data.

Initial Page Load

The following sequence diagram shows the data fetching process when the StockPage is loaded.

Data Structures

The primary data structure for holding company information is StockInfo.

Field	Type	Description
name	string	Company name.
description	string	Company description.
market_cap	number	Market capitalization.
logo_url	string	URL for the company's logo.
website	string	Company's homepage URL.
phone_number	string	Company's phone number.
total_employees	number	Total number of employees.
industry	string	Industry description (from SIC).
primary_exchange	string	The primary stock exchange.

Sources: client/src/app/quote/[ticker]/page.tsx:32-43

Component Details

StockChart Component

This component renders an interactive area chart of the stock's price over various time windows.

• Data Source: Polygon.io API (/v2/aggs/ticker/...)
• Features:
  • Selectable time windows: '1D', '5D', '1M', '6M', 'YTD', '1Y', '5Y', 'MAX'.
  • The chart color (primary: #D4FF00 or accent: #eb5757) changes based on whether the price change is positive or negative.
  • A forecast feature (getForecast) sends historical data to a local backend (http://localhost:8000/forecast/) to predict future prices for 5 days. This is only available for '1D' and '5D' views.

The following diagram shows the data flow for fetching chart data.

TickerChat Component

This component provides an AI-driven chat experience, allowing users to ask questions about the stock.

• AI Model: gpt-4o-mini from OpenAI.
• Functionality: It maintains a message history and sends user input along with a system prompt to the OpenAI API. The system prompt instructs the AI to respond as if it is the stock ticker itself.
• Streaming: The component streams the response from the API, displaying the content as it arrives.

StockSummary Component

This component generates a timeline of significant price changes over the last 6 months and uses AI to provide context for each event.

• Data Source: Polygon.io API for historical data, OpenAI API for descriptions.
• Logic:
  1. Fetches 6 months of daily stock data from Polygon.io.
  2. Identifies days where the price change was greater than 2%.
  3. For each significant change, it calls the OpenAI API (gpt-3.5-turbo) with a prompt to analyze the event and provide a concise description of potential causes.
  4. Displays these events in a vertical timeline format.

StockRating Component

This component displays a detailed rating analysis for the stock.

• Data Source: Financial Modeling Prep API (/api/v3/rating/{ticker}).
• Features:
  • Displays an overall rating score (1-5) and recommendation (e.g., "Strong Buy").
  • Shows a progress bar visualization of the percentage of metrics that are "Buy", "Hold", or "Sell".
  • Provides a table with detailed scores and recommendations for individual financial metrics.

Detailed Metrics

Metric	Full Name
DCF	Discounted Cash Flow
ROE	Return on Equity
ROA	Return on Assets
DE	Debt to Equity
PE	Price to Earnings
PB	Price to Book

Sources: client/src/components/StockRating/index.tsx:40-56, 150-155

NewsSection Component

This component fetches and displays the latest news articles relevant to the stock ticker.

• Data Source: Polygon.io API (/v2/reference/news).
• Functionality: It retrieves the 10 most recent news articles. Each article in the list displays the author, publication date, title, a brief description, and an image if available. Clicking an article opens the full story in a new tab.

Sources: client/src/components/NewsSection/index.tsx:36-52

Related Stocks

This section displays a horizontally scrolling list of stocks related to the current one.

• Data Source: Polygon.io API (/v1/related-companies/{ticker}).
• Component: Uses the StockCardMini component to render each related ticker. The StockCardMini fetches its own data (name, price, market cap) from Polygon.io to display a compact summary.

Sources: client/src/app/quote/[ticker]/page.tsx:81-93, 169-175, client/src/components/StockCardMini/index.tsx:28-56