Development Workflow

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/globals.css
• client/src/app/layout.tsx
• client/components.json
• client/src/app/quote/[ticker]/page.tsx
• client/src/components/StockChart/index.tsx
• client/src/components/Navbar/index.tsx
• client/src/components/TickerChat/index.tsx
• client/src/components/StockRating/index.tsx

The Greenline client is a modern web application built with Next.js, React, and TypeScript. The development workflow is centered around a set of npm scripts for running a local development server, building the application for production, and linting the codebase. Styling is managed through Tailwind CSS, extended with custom themes and plugins.

This document outlines the standard procedures for setting up the development environment, running the application, and understanding the core architectural components like styling, routing, and API integration. The project relies heavily on external APIs like Polygon.io, Financial Modeling Prep, and OpenAI to provide its financial data and AI-powered features.

Project Setup and Dependencies

The project is configured as a standard Next.js application. All dependencies are managed via npm and are defined in client/package.json.

Sources: client/package.json

Key Dependencies

The following table lists the primary libraries and frameworks used in the application.

Library	Version	Description
next	14.2.9	The React framework for building the application.
react	^18	The JavaScript library for building user interfaces.
typescript	^5	The language used for static typing.
tailwindcss	^3.4.1	A utility-first CSS framework for styling.
@radix-ui/*	*	A collection of unstyled, accessible UI components.
recharts	^2.13.3	A composable charting library built on React components.
openai	^4.72.0	The official client library for the OpenAI API.
lucide-react	^0.439.0	A library of simply designed icons.

Sources: client/package.json:10-28

Development Dependencies

These packages are used during development and for building the application.

Library	Version	Description
@types/react	^18	TypeScript type definitions for React.
eslint	^8	A tool for identifying and reporting on patterns in JavaScript.
postcss	^8	A tool for transforming CSS with JavaScript.

Sources: client/package.json:30-37

Available Scripts

The development lifecycle is managed through a series of npm scripts defined in client/package.json.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
},

Sources: client/package.json:5-10

The following diagram illustrates the basic development flow using these scripts.

Script Descriptions

Script	Command	Description
dev	next dev	Starts the Next.js development server with hot-reloading enabled.
build	next build	Creates an optimized production build of the application.
start	next start	Starts the Next.js production server. Requires a build to be run first.
lint	next lint	Runs ESLint to check for code quality and style issues.

Sources: client/package.json:5-10

Styling and UI

The project uses a combination of Tailwind CSS and shadcn/ui for its styling and component library.

Tailwind CSS Configuration

Styling is primarily handled by Tailwind CSS. The configuration in client/tailwind.config.ts specifies content paths and extends the default theme with custom colors, animations, and plugins.

• Content Paths: Tailwind scans files in src/pages, src/components, and src/app to generate the necessary utility classes.
• Custom Theme: The theme is extended with custom colors (e.g., chart-1, chart-2), border radiuses, and keyframe animations (spin-slow, marquee).
• Plugins: The configuration includes tailwindcss-animate for animations and tailwind-scrollbar for custom scrollbars.

Sources: client/tailwind.config.ts:4-73

Global Styles and Theming

Global styles and CSS variables for theming are defined in client/src/app/globals.css. This file sets up base styles and defines color variables for both light and dark modes, which are then used by Tailwind's color utilities (e.g., bg-background, text-foreground).

/* client/src/app/globals.css:48-67 */
.dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
}

Sources: client/src/app/globals.css:48-67, client/tailwind.config.ts:10-46

The ThemeProvider component in client/src/app/layout.tsx enables automatic theme switching based on system preference or user selection.

Sources: client/src/app/layout.tsx:40-46

UI Components

The project uses shadcn/ui, which is configured in client/components.json. This is not a traditional component library but a collection of reusable components built using Radix UI and Tailwind CSS. The configuration file defines aliases for component paths, making imports cleaner. The UI components themselves, such as Button, Card, and Accordion, are located in client/src/components/ui.

Sources: client/components.json, client/src/components/ui/navigation-menu.tsx

Project Structure and Routing

The application uses the Next.js App Router, where routing is determined by the directory structure within client/src/app.

• Root Layout: client/src/app/layout.tsx defines the root HTML structure, applies global fonts (Open_Sans), and wraps all pages in a ThemeProvider.
• Pages: Each page is a page.tsx file within a corresponding folder. For example, the market overview page is located at client/src/app/portal/page.tsx.
• Dynamic Routes: Dynamic segments are created using brackets in the folder name. For example, client/src/app/quote/[ticker]/page.tsx handles routes like /quote/AAPL, where ticker is a dynamic parameter passed to the page component.

Sources: client/src/app/layout.tsx, client/src/app/portal/page.tsx, client/src/app/quote/[ticker]/page.tsx

The following diagram shows the routing structure for key pages.

API Integration

The application's dynamic content is sourced from several external APIs. API keys are managed through environment variables (e.g., process.env.NEXT_PUBLIC_POLYGON_API_KEY).

Data Providers

1. Polygon.io: The primary source for stock market data, including aggregates (candles), news, ticker details, and related companies.
2. Financial Modeling Prep: Used for fetching stock rating analysis.
3. OpenAI: Powers AI-driven features like the TickerChat and the StockSummary timeline descriptions.

Sources: client/src/components/StockChart/index.tsx:142-149, client/src/components/StockRating/index.tsx:47-50, client/src/components/TickerChat/index.tsx:61-64

Data Fetching Flow (Example: Stock Chart)

The following sequence diagram illustrates how the StockChart component fetches and displays historical price data from the Polygon.io API.

This diagram shows the flow for fetching stock chart data. The component initiates a fetch request to the Polygon.io API based on the selected time window, processes the response, updates its internal state, and re-renders the chart.

Sources: client/src/components/StockChart/index.tsx:152-177

AI Feature Flow (Example: Ticker Chat)

The TickerChat component provides an interactive chat experience by communicating with the OpenAI API.

This diagram illustrates the streaming interaction between the TickerChat component and the OpenAI API to provide a real-time chat experience.

Sources: client/src/components/TickerChat/index.tsx:51-87