Frontend Overview
Relevant source files
The following files were used as context for generating this wiki page:
- client/package.json
- client/src/app/layout.tsx
- client/src/app/page.tsx
- client/src/app/portal/page.tsx
- client/src/app/quote/[ticker]/page.tsx
- client/src/components/Hero/index.tsx
- client/src/components/Navbar/index.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/tailwind.config.ts
- components.json
The Greenline frontend is a modern, client-side rendered application built with Next.js and React. It serves as an advanced market intelligence platform, providing users with real-time market data, stock analysis, news, and AI-powered insights. The application is heavily reliant on external APIs, including Polygon.io for financial data, OpenAI for generative AI features, and Financial Modeling Prep for stock ratings.
The user interface is styled using Tailwind CSS and features a component-based architecture. Key functionalities include a market overview dashboard, detailed stock quote pages with interactive charts, AI-driven stock summaries, and a conversational AI chat for individual tickers. State management is handled locally within components using React hooks.
Technology Stack
The frontend is built upon a foundation of modern web technologies. The core dependencies are defined in client/package.json.
| Technology / Library | Description | Source |
|---|---|---|
next | The React framework for building the application, including routing and server-side rendering capabilities. | client/package.json:17 |
react | The JavaScript library for building user interfaces. | client/package.json:20 |
tailwindcss | A utility-first CSS framework for styling the application. | client/package.json:35 |
@radix-ui/* | A collection of unstyled, accessible UI components (Accordion, Avatar, Navigation Menu, etc.). | client/package.json:11-16 |
recharts | A composable charting library built on React components, used for stock charts. | client/package.json:22 |
lucide-react | A library of simply beautiful icons. | client/package.json:18 |
openai | The official Node.js & TypeScript library for the OpenAI API. | client/package.json:19 |
shadcn/ui | A set of reusable UI components built on top of Radix UI and Tailwind CSS. | components.json |
Sources: client/package.json, components.json
Application Structure
The application follows the Next.js App Router paradigm, with pages and layouts defined in the client/src/app directory.
Page Routing
The primary routes of the application are:
| Route | File Path | Description |
|---|---|---|
/ | src/app/page.tsx | The main landing page, featuring the HeroSection. |
/portal | src/app/portal/page.tsx | The "Market Overview" dashboard, displaying market status and news. |
/quote/[ticker] | src/app/quote/[ticker]/page.tsx | A dynamic route that displays detailed information for a specific stock ticker. |
This diagram illustrates the basic page and component structure.
Styling
Styling is managed primarily through Tailwind CSS.
tailwind.config.ts: Defines the theme, custom colors (like#D4FF00), animations (spin-slow,marquee), and plugins (tailwindcss-animate,tailwind-scrollbar).src/app/globals.css: Contains base Tailwind directives, CSS variable definitions for light/dark modes, and global styles.shadcn/ui: The project usesshadcn/uicomponents, which are configured incomponents.json. These components are styled with Tailwind CSS and are highly customizable.
Sources: client/tailwind.config.ts, client/src/app/globals.css, components.json
Core Components
The UI is broken down into a series of reusable React components located in client/src/components.
| Component | Description | Source File |
|---|---|---|
Navbar | A persistent navigation bar with a ticker search functionality that fetches results from the Polygon API. | src/components/Navbar/index.tsx |
HeroSection | The main content for the landing page, including a live market ticker that fetches data for a predefined list of symbols. | src/components/Hero/index.tsx |
StockChart | An interactive area chart that displays historical stock prices. It allows users to select different time windows (1D, 1M, 1Y, etc.) and fetches data accordingly. | src/components/StockChart/index.tsx |
StockSummary | Fetches historical stock data, identifies significant price changes, and uses the OpenAI API to generate a descriptive timeline of "critical events". | src/components/StockSummary/index.tsx |
TickerChat | An AI-powered chat interface that allows users to have a conversation with a stock ticker persona, powered by OpenAI's gpt-4o-mini model. | src/components/TickerChat/index.tsx |
StockRating | Fetches and displays detailed rating analysis for a stock from the Financial Modeling Prep API, including scores for DCF, ROE, PE, and more. | src/components/StockRating/index.tsx |
NewsSection | Fetches and displays the latest news articles related to a specific ticker from the Polygon API. | src/components/NewsSection/index.tsx |
Data Fetching and External APIs
The application is a client-heavy application that fetches data directly from multiple third-party APIs. All API keys are stored as environment variables (e.g., NEXT_PUBLIC_POLYGON_API_KEY).
API Usage Summary
| API Provider | Purpose | Example Components |
|---|---|---|
| Polygon.io | Primary source for all financial data: stock prices, news, ticker details, market status, and related companies. | HeroSection, Navbar, StockChart, NewsSection, portal/page.tsx |
| OpenAI | Powers generative AI features like the stock summary and ticker chat. | StockSummary, TickerChat |
| Financial Modeling Prep | Provides detailed stock rating analysis. | StockRating |
Data Flow: Viewing a Stock Quote
The following sequence diagram illustrates the data flow when a user searches for a ticker and navigates to the quote page.
Data Flow: AI-Powered Ticker Chat
This diagram shows how the TickerChat component interacts with the OpenAI API.
State Management
The application does not use a global state management library like Redux or Zustand. Instead, state is managed locally within each component using React's built-in hooks:
useState: Used for managing component-level state such as search queries, API responses, loading indicators, and error messages.useEffect: Used to trigger side effects, primarily for fetching data from external APIs when a component mounts or when its dependencies (like a ticker symbol) change.
This approach keeps components self-contained and simplifies the data flow, as each component is responsible for fetching and managing its own data.
Sources: client/src/app/portal/page.tsx:28-34, client/src/components/StockChart/index.tsx:80-87, client/src/components/Navbar/index.tsx:23-26