Technology Stack

Relevant source files

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

• client/package.json
• client/tailwind.config.ts
• client/src/app/layout.tsx
• client/src/components/StockChart/index.tsx
• client/src/components/StockSummary/index.tsx
• client/src/app/quote/[ticker]/page.tsx
• client/src/app/portal/page.tsx
• client/src/components/StockRating/index.tsx
• client/src/components/TickerChat/index.tsx
• client/components.json

The Greenline application is a modern web platform built primarily with a JavaScript/TypeScript-based frontend. It leverages a rich ecosystem of libraries and external APIs to deliver real-time market data, financial analysis, and AI-powered insights. The architecture is centered around a Next.js client that acts as the main user interface, orchestrating calls to various specialized third-party services for data retrieval and content generation.

The core of the application is its ability to aggregate and present complex financial information in an intuitive way. This is achieved through a combination of a robust frontend framework, a flexible styling system, and integrations with leading financial data providers. Additionally, the application incorporates machine learning capabilities, both through the OpenAI API for textual analysis and a custom backend service for price forecasting.

High-Level Architecture

The system is composed of a frontend client application that communicates with several external and internal services to gather and process data.

This diagram illustrates the main components and their interactions within the Greenline technology stack.

Frontend

The frontend is a single-page application built with Next.js and React.

Sources: client/package.json:5-8

Framework and Language

• Next.js: The application uses Next.js as its primary React framework. This is evident from the dependency list and the project structure, which includes next scripts for development, building, and starting the application.
  Sources: client/package.json:5-8, client/package.json:19
• React: Core UI is built with React, using functional components and hooks (useState, useEffect) for state management and side effects.
  Sources: client/package.json:22, client/src/components/Hero/index.tsx:3-4
• TypeScript: The entire frontend codebase is written in TypeScript, providing type safety. This is confirmed by the presence of tsconfig.json and .tsx file extensions.
  Sources: client/package.json:41, client/src/app/quote/[ticker]/page.tsx

Key Dependencies

The following table summarizes the key libraries used in the frontend application.

Library	Version	Description
next	14.2.9	React framework for server-rendered applications.
react	^18	A JavaScript library for building user interfaces.
typescript	^5	A typed superset of JavaScript.
@radix-ui/*	various	A collection of low-level, unstyled, accessible UI components.
recharts	^2.13.3	A composable charting library built on React components.
tailwindcss	^3.4.1	A utility-first CSS framework for rapid UI development.

• openai | ^4.72.0 | Official OpenAI Node.js/TypeScript library for API interaction. |
• lucide-react | ^0.439.0 | A library of simply designed icons. |

Sources: client/package.json:10-30, client/package.json:41

Styling and UI Components

The application's UI is built using a combination of Tailwind CSS and a component library based on shadcn/ui.

• Tailwind CSS: Used for utility-first styling. The configuration file tailwind.config.ts defines custom colors, animations (spin-slow, marquee), and plugins like tailwindcss-animate and tailwind-scrollbar.
  Sources: client/tailwind.config.ts, client/src/app/globals.css
• shadcn/ui: The project uses shadcn/ui, which is indicated by the components.json file and the presence of UI components like Button, Card, and Accordion that are characteristic of this library. These components are built upon Radix UI primitives.
  Sources: client/components.json, client/src/components/ui/navigation-menu.tsx, client/src/components/StockSummary/index.tsx:11-15

Backend and External Services

The application does not have a monolithic backend. Instead, it integrates with a variety of specialized external and internal services via REST APIs.

Financial Data APIs

• Polygon.io: This is the primary source for financial data, including stock prices, historical aggregates, news, and company information. The API key is stored as an environment variable NEXT_PUBLIC_POLYGON_API_KEY.
  Sources: client/src/components/Hero/index.tsx:23, client/src/app/quote/[ticker]/page.tsx:50, client/src/components/NewsSection/index.tsx:39
• Financial Modeling Prep: Used specifically for fetching stock rating analysis. The StockRating component makes a direct call to their API.
  Sources: client/src/components/StockRating/index.tsx:44-46

AI & Machine Learning

The application leverages AI for both content generation and predictive analytics.

OpenAI Integration

The StockSummary and TickerChat components use the OpenAI API to generate natural language content.

• Stock Summary: It fetches historical stock data, identifies significant price changes, and then prompts the gpt-3.5-turbo model to provide a concise explanation for each change.
• Ticker Chat: It uses the gpt-4o-mini model to create a conversational chat experience where the AI acts as the stock ticker itself.

The following diagram shows the sequence of events for generating a stock summary.

Price Forecasting Service

The StockChart component includes a feature to forecast future stock prices. It sends historical price data to a local backend service running at http://localhost:8000/forecast/. This service is expected to return forecasted prices and confidence intervals.

// client/src/components/StockChart/index.tsx:154-160
      const response = await fetch('http://localhost:8000/forecast/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ historical_data: historicalData, forecast_days: 5 }),
      });

      if (!response.ok) throw new Error('Failed to fetch forecast');

Sources: client/src/components/StockChart/index.tsx:154-160

Data Flow Example: Loading a Stock Quote Page

When a user navigates to a stock quote page (e.g., /quote/AAPL), the client initiates several parallel API calls to populate the UI.

This sequence diagram illustrates the data fetching process for the stock quote page.