Getting Started
Relevant source files
The following files were used as context for generating this wiki page:
- client/package.json
- backend/ml_model.py
- client/src/app/quote/[ticker]/page.tsx
- client/src/components/StockChart/index.tsx
- client/src/components/Hero/index.tsx
- client/src/app/portal/page.tsx
- client/src/components/StockSummary/index.tsx
- client/src/components/TickerChat/index.tsx
- client/src/components/StockRating/index.tsx
- client/src/components/Navbar/index.tsx
Welcome to Greenline, an advanced market intelligence platform designed to provide AI-driven market insights and predictive analytics. This document serves as a starting point for developers to understand the project's architecture, key components, and data flow. The application is built with a Next.js frontend and leverages multiple external APIs for real-time data, along with a custom machine learning backend for forecasting.
The core of the application is to "harness the power of advanced algorithms and real-time market data" to help users "make informed decisions with institutional-grade analytics." Key features include price predictions, market trend analysis, and risk analysis, all accessible through a user-friendly portal.
Sources: client/src/components/Hero/index.tsx:153-157
Project Architecture
The Greenline project consists of a client-side application and a backend service.
- Client: A Next.js application responsible for the user interface, data visualization, and interaction with various APIs.
- Backend: A Python-based service that provides machine learning models, specifically for stock price forecasting.
Frontend Application
The frontend is a modern web application built with Next.js and TypeScript. It handles all user-facing aspects, from the landing page to detailed stock analysis views.
Key Dependencies
The client application relies on several key libraries to function.
| Library | Description |
|---|---|
next | The React framework for server-side rendering and static site generation. |
react | The core UI library. |
tailwindcss | A utility-first CSS framework for styling. |
@radix-ui/* | A collection of unstyled, accessible UI components (e.g., Accordion, Navigation Menu). |
recharts | A composable charting library for data visualization. |
openai | The official client library for interacting with the OpenAI API. |
lucide-react | A library of simply beautiful icons. |
date-fns | A modern JavaScript date utility library. |
Sources: client/package.json:12-30
Page Structure
The application is organized into several main pages within the client/src/app directory.
| Route | Page File | Description |
|---|---|---|
/ | page.tsx | The main landing page, featuring the HeroSection component. |
/portal | portal/page.tsx | The market overview dashboard, showing market status and news. |
/quote/[ticker] | quote/[ticker]/page.tsx | The detailed stock analysis page for a specific ticker. |
Sources: client/src/app/page.tsx, client/src/app/portal/page.tsx, client/src/app/quote/[ticker]/page.tsx
This diagram shows the basic page and component hierarchy for the main user-facing sections.
Core Components
The UI is built from a set of reusable React components. The following are central to the application's functionality.
StockChart
This component is responsible for rendering the main price chart on the stock detail page. It fetches historical data from the Polygon.io API and can display it across various time windows (1D, 5D, 1M, etc.). It also includes a feature to generate and display a 5-day price forecast by calling the internal ML backend.
Sources: client/src/components/StockChart/index.tsx
StockSummary
This component generates a "Critical Summary" for a stock. It fetches historical daily data, identifies significant price changes (>2%), and then uses the OpenAI API (gpt-3.5-turbo) to generate a concise explanation for each significant event. The result is displayed as an interactive timeline.
Sources: client/src/components/StockSummary/index.tsx:68-101
TickerChat
An AI-powered chat interface that allows users to "talk" to a stock ticker. It uses the OpenAI API (gpt-4o-mini) with a system prompt that instructs the model to respond as if it were the ticker itself, providing insights and information.
Sources: client/src/components/TickerChat/index.tsx:23-29, client/src/components/TickerChat/index.tsx:64-69
StockRating
Fetches and displays a detailed rating analysis for a stock from the Financial Modeling Prep API. It provides an overall score and recommendation (e.g., "Strong Buy"), along with a breakdown of scores for individual metrics like DCF, ROE, and PE.
Sources: client/src/components/StockRating/index.tsx:43-52
Navbar
The main navigation bar includes a global search functionality. As a user types a ticker or company name, it debounces the input and queries the Polygon.io ticker search endpoint to provide real-time search results. Selecting a result navigates the user to the corresponding /quote/[ticker] page.
Sources: client/src/components/Navbar/index.tsx:49-64
Data Flow and API Integration
The application heavily relies on external and internal APIs to source its data.
External APIs
| API Provider | Purpose | Example Endpoint | Used In |
|---|---|---|---|
| Polygon.io | Market data, news, company details, related companies, ticker search. | https://api.polygon.io/v2/aggs/ticker/... | StockChart, StockSummary, NewsSection, Navbar |
| Financial Modeling Prep | Stock rating and fundamental analysis. | https://financialmodelingprep.com/api/v3/rating/... | StockRating |
| OpenAI | Generative AI for summaries and chat. | chat.completions.create | StockSummary, TickerChat |
Sources: client/src/components/StockChart/index.tsx:162-167, client/src/components/StockRating/index.tsx:45-47, client/src/components/StockSummary/index.tsx:88-93
Internal ML Backend
The StockChart component has a "Forecast" feature that communicates with a local backend service running on http://localhost:8000/forecast/. This endpoint accepts historical price data and returns a 5-day price forecast with confidence intervals.
Sources: client/src/components/StockChart/index.tsx:120-124
Data Flow for Stock Page
The following sequence diagram illustrates the data fetching process when a user navigates to the /quote/[ticker] page.
Summary
Getting started with the Greenline project involves understanding its two main parts: a feature-rich Next.js frontend and a specialized Python ML backend. The frontend is responsible for all user interaction and data visualization, orchestrating calls to multiple third-party APIs (Polygon.io, Financial Modeling Prep, OpenAI) for data and AI-driven insights. Key features like interactive charting, AI-generated summaries, and chatbot functionality are encapsulated in well-defined React components, making the system modular and extensible.