DemoBuy

Research & Analysis

Last updated on 2026-05-31

The research module provides four screens for in-depth stock analysis. It covers a comprehensive stock detail page, fundamental financial data, analyst ratings with price targets, and technical indicator analysis. All screens are in the (app) route group.

Stock Detail

Route: /research/detail

A comprehensive stock research page with a hero header and tabbed content sections.

  • Stock header -- StockHeader component displaying ticker symbol, company name, current price (large), change amount, change percentage (color-coded), market cap, volume, and exchange badge
  • Tabbed content -- four tabs for different analysis views:
    • Overview -- key statistics grid and company profile
    • Chart -- interactive price chart with candlestick data
    • Financials -- quarterly financial data cards
    • News -- related news articles
import { StockHeader } from "@/components/research/stock-header"
import { KeyStats } from "@/components/research/key-stats"
import { PriceChart } from "@/components/research/price-chart"
import { NewsList } from "@/components/research/news-list"

Overview Tab

  • Key statistics grid -- KeyStats component showing essential metrics in a responsive grid: Open, High, Low, Previous Close, 52-Week High, 52-Week Low, Volume, Avg Volume, Market Cap, P/E Ratio, EPS, Dividend Yield, Beta, and Shares Outstanding
  • Company profile card -- description paragraph, headquarters, founding year, employee count, and industry classification

Chart Tab

  • Price chart -- PriceChart component rendering OHLCV candlestick data via Recharts with time range selectors (1D, 5D, 1M, 3M, 6M, YTD, 1Y, 5Y, All)
  • Volume bars -- volume histogram displayed below the price chart

Financials Tab

  • Quarterly cards -- grid of cards showing Revenue, Net Income, EPS, and Gross Margin for the most recent quarters, formatted with appropriate units (billions for revenue, dollars for EPS, percentage for margins)

News Tab

  • News list -- NewsList component showing related news articles with title, source, publish date, summary snippet, sentiment badge (Bullish = green, Bearish = red, Neutral = gray), and related ticker tags

Data Sources

Data Source Location
Stock data screenerStocks data/seed.ts
Fundamentals companyFundamentals data/seed.ts
Candlestick data candlestickData data/seed.ts
News articles newsArticles data/seed.ts

Fundamental Analysis

Route: /research/fundamentals

A deep-dive into company financial metrics and historical performance.

  • Fundamentals grid -- FundamentalsGrid component displaying key valuation and financial metrics in categorized sections:
    • Valuation -- P/E Ratio, Forward P/E, PEG Ratio, Price-to-Book, Price-to-Sales, EV/EBITDA
    • Profitability -- Gross Margin, Operating Margin, Net Margin, ROE, ROA
    • Growth -- Revenue Growth, Earnings Growth, Free Cash Flow Growth
    • Financial Health -- Current Ratio, Debt-to-Equity, Interest Coverage
    • Per Share -- EPS, Book Value, Free Cash Flow per Share, Dividend per Share
  • Financials chart -- FinancialsChart component showing quarterly or annual Revenue and Net Income as a grouped bar chart via Recharts
  • Income statement trends -- area chart showing revenue and earnings trends over time
import { FundamentalsGrid } from "@/components/research/fundamentals-grid"
import { FinancialsChart } from "@/components/research/financials-chart"

Valuation Metrics Guide

Metric What It Tells You
P/E Ratio How much investors pay per dollar of earnings
PEG Ratio P/E adjusted for growth rate (< 1 may indicate undervalued)
Price-to-Book Market price relative to book value
EV/EBITDA Enterprise value relative to cash earnings
Price-to-Sales Market cap relative to revenue
Forward P/E P/E based on estimated future earnings

Analyst Ratings

Route: /research/ratings

Analyst consensus, individual recommendations, and price target analysis.

  • Consensus bar -- ConsensusBar component showing the distribution of Strong Buy, Buy, Hold, Sell, and Strong Sell ratings as a stacked horizontal bar with count labels; the overall consensus rating is displayed prominently
  • Price target gauge -- PriceTargetGauge component showing a visual range from the lowest analyst price target to the highest, with the median and average targets marked, and the current price indicated on the scale; the upside/downside percentage is calculated
  • Ratings table -- RatingsTable showing individual analyst recommendations with columns for date, analyst firm, analyst name, rating badge (color-coded: Strong Buy = dark green, Buy = green, Hold = amber, Sell = red, Strong Sell = dark red), price target, and previous price target (with change arrow)
import { ConsensusBar } from "@/components/research/consensus-bar"
import { PriceTargetGauge } from "@/components/research/price-target-gauge"
import { RatingsTable } from "@/components/research/ratings-table"

Analyst Rating Colors

Rating Badge Color
Strong Buy dark green (bg-green-700)
Buy green (bg-green-500)
Hold amber (bg-amber-500)
Sell red (bg-red-500)
Strong Sell dark red (bg-red-700)

Data Sources

Data Source Location
Analyst ratings analystRatings data/seed.ts
Consensus data analystConsensus data/seed.ts

Technical Indicators

Route: /research/technical

Technical analysis with multiple indicator visualizations and signal readings.

  • Indicator chart -- IndicatorChart component rendering technical indicator overlays on a price chart:
    • Moving Averages -- SMA 20, SMA 50, SMA 200 plotted as colored lines on the price chart
    • Bollinger Bands -- upper, middle, and lower bands as a shaded region overlay
    • RSI -- Relative Strength Index as a separate panel below the price chart, with overbought (70) and oversold (30) threshold lines
    • MACD -- MACD line, signal line, and histogram as a separate panel
  • Indicator panel -- IndicatorPanel component showing current indicator values in a grid:
    • RSI with interpretation (Overbought/Oversold/Neutral)
    • MACD value, signal, and histogram with bullish/bearish crossover detection
    • SMA 20/50/200 with price-relative position (Above/Below)
    • EMA 12/26 values
    • Bollinger Bands upper, middle, lower with width
    • ATR (Average True Range)
    • ADX (Average Directional Index) with trend strength
import { IndicatorChart } from "@/components/research/indicator-chart"
import { IndicatorPanel } from "@/components/research/indicator-panel"

Technical Indicator Signals

Indicator Bullish Signal Bearish Signal
RSI Below 30 (oversold) Above 70 (overbought)
MACD MACD crosses above signal MACD crosses below signal
SMA Price above SMA 200 Price below SMA 200
Golden/Death Cross SMA 50 crosses above SMA 200 SMA 50 crosses below SMA 200
Bollinger Bands Price touches lower band Price touches upper band
ADX Above 25 (trending) Below 20 (ranging)

Data Sources

Data Source Location
Technical indicators technicalIndicators data/seed.ts
Candlestick data candlestickData data/seed.ts

Next Steps

Previous

Markets & Screener

Next

Social Trading