Routing
Relevant source files
The following files were used as context for generating this wiki page:The Greenline client application utilizes the Next.js App Router, a file-system-based routing mechanism. This approach uses directory structures within the src/app directory to define URL paths. Each route is defined by a folder, and a page.tsx file within that folder serves as the UI component for that route segment.
The routing system supports static routes for primary pages, dynamic routes for displaying detailed information (like stock quotes), and a root layout that provides a consistent structure and theme across the entire application. Navigation between these routes is handled both declaratively with the Link component and programmatically using the useRouter hook for dynamic interactions.
Core Concepts
File-based Routing
The application's routes are directly mapped from the file system. The app directory is the root, and subdirectories define the URL structure.
The following diagram illustrates the mapping between the file system and the application's routes.
Root Layout
The RootLayout component, defined in client/src/app/layout.tsx, is the top-level layout that wraps all pages. It is responsible for defining the <html> and <body> tags, applying global styles, and wrapping the application in a ThemeProvider.
Key responsibilities include:
- Setting the document language to "en".
- Including the favicon.
- Applying the
Open_Sansfont and antialiasing to the body. - Wrapping all child components with the
ThemeProviderto enable light/dark mode functionality.
Sources: client/src/app/layout.tsx:25-45
Route Definitions
The application defines several key routes within the src/app directory.
| Route Path | File Path | Description |
|---|---|---|
/ | src/app/page.tsx | The main landing page, rendering the HeroSection and NavbarHome components. |
/portal | src/app/portal/page.tsx | The main application dashboard, displaying market overview and news. |
/quote/[ticker] | src/app/quote/[ticker]/page.tsx | A dynamic route that displays detailed information for a specific stock ticker. |
Sources: client/src/app/page.tsx:16-22, client/src/app/portal/page.tsx:31-253, client/src/app/quote/[ticker]/page.tsx:39-183
Static Routes
Home Page (/)
The home page is defined by client/src/app/page.tsx. It serves as the public-facing landing page and is composed of two main components:
NavbarHome: A navigation bar specific to the home page.HeroSection: The main content area with marketing information and a call-to-action link to the/portalpage.
Sources: client/src/app/page.tsx:18-21
Portal Page (/portal)
The portal page, at client/src/app/portal/page.tsx, acts as the user's main dashboard. It fetches and displays real-time market status and a list of recent financial news articles from the Polygon.io API.
Sources: client/src/app/portal/page.tsx:31-33
Dynamic Routes
Stock Quote Page (/quote/[ticker])
The application uses a dynamic route to display information about individual stock tickers. The file client/src/app/quote/[ticker]/page.tsx handles this. The [ticker] part of the path is a dynamic segment.
The StockPage component receives the ticker symbol from the URL through its params prop. This ticker is then used to fetch detailed stock information, related companies, news, and ratings from various APIs.
// client/src/app/quote/[ticker]/page.tsx
interface StockPageProps {
params: {
ticker: string;
};
}
const StockPage: React.FC<StockPageProps> = ({ params }) => {
const ticker = params.ticker.toUpperCase();
// ... fetch logic using ticker
}
Sources: client/src/app/quote/[ticker]/page.tsx:19-25, client/src/app/quote/[ticker]/page.tsx:40-41
Navigation
Navigation between pages is handled using both declarative links and programmatic routing.
Declarative Navigation (<Link>)
The next/link component is used for standard, hyperlink-based navigation. This enables client-side transitions between routes without a full page reload. An example is found in the HeroSection component, which links to the /portal page.
// client/src/components/Hero/index.tsx:192-204
<Link href="/portal" className="block sm:inline-block mt-8 lg:mt-0">
<Button
size="lg"
className="w-full sm:w-auto group relative bg-[#D4FF00] lg:mt-12 rounded-full text-black
hover:bg-[#D4FF00]/90 text-lg px-8 py-6 font-medium tracking-wide
transition-all duration-300
hover:shadow-lg hover:shadow-[#D4FF00]/20"
>
<span className="flex font-sans items-center justify-center gap-2">
Access Portal
<ArrowRight className="transition-transform group-hover:translate-x-1" />
</span>
</Button>
</Link>
Sources: client/src/components/Hero/index.tsx:192-204
Programmatic Navigation (useRouter)
For more complex navigation logic, such as redirecting after a user action, the useRouter hook from next/navigation is employed. This is prominently used in the Navbar search functionality and in clickable StockCard components.
When a user selects a search result in the Navbar, the handleSelectResult function is called, which programmatically navigates to the corresponding dynamic quote page using router.push().
The following sequence diagram shows the flow of searching for a ticker and navigating to its page.
Similarly, the StockCard component uses router.push() to navigate to a stock's detail page when the card is clicked.