Navbar Components

Relevant source files

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

• client/src/components/Navbar/index.tsx
• client/src/components/NavbarHome/index.tsx
• client/src/app/portal/page.tsx
• client/src/app/quote/[ticker]/page.tsx
• client/src/app/page.tsx
• package.json

The Greenline application utilizes two distinct, context-specific navigation bar components: Navbar and NavbarHome. These components provide the primary navigation and user interaction points at the top of the application pages. NavbarHome is designed for unauthenticated users on the landing page, offering simple sign-up and login options. Navbar is a more feature-rich component for authenticated users within the application portal, featuring a powerful stock ticker search, and links to user-specific areas like a watchlist and account details.

The selection of which navbar to display is determined by the page being rendered, ensuring that users are presented with the appropriate actions and information based on their authentication state and location within the app.

Component Usage

The application routes specific pages to use one of the two navbar components. The NavbarHome is for the public landing page, while the Navbar is for the internal application portal.

This diagram illustrates which pages render each navbar component.

Navbar Component (Navbar)

The Navbar component is the main navigation bar for logged-in users, appearing on pages like the user portal and individual stock quote pages. Its primary feature is a dynamic search bar for finding stock tickers.

Sources: client/src/components/Navbar/index.tsx

Structure

The Navbar is divided into three main sections:

Section	Contents	Functionality
Left	Greenline logo icon.	Navigates the user to the /portal page on click.
Center	Search input field with a search icon.	Allows users to search for stock tickers via the Polygon.io API.
Right	"Watchlist" button, "Account" link, and a user Avatar component.	Provides access to user-specific features. The Avatar is a placeholder.

Sources: client/src/components/Navbar/index.tsx:87-168

Ticker Search Functionality

The central feature of the Navbar is its ticker search functionality. It provides real-time search results as the user types.

State Management

The component manages the search process using several React state variables.

State Variable	Type	Description
searchQuery	string	Stores the current value of the search input.
searchResults	any[]	Stores the array of ticker results from the API.
isLoading	boolean	Indicates if an API request is in progress.
error	string	Stores any error message that occurs during the API fetch.

Sources: client/src/components/Navbar/index.tsx:13-16

Data Flow and API Interaction

When a user types into the search bar, a debounced request is sent to the Polygon.io API to fetch matching tickers.

1. A useEffect hook listens for changes to the searchQuery state.
2. To prevent API calls on every keystroke, it uses a setTimeout to create a 500ms delay (debouncing).
3. Once the delay is over, it sets isLoading to true and makes a fetch request.
4. The results are stored in searchResults, and isLoading is set to false.
5. If the user clicks a result, handleSelectResult is called, which navigates to the corresponding /quote/[ticker] page.
6. Another useEffect hook manages closing the search results dropdown when the user clicks outside of the search area, using a useRef attached to the search bar's container.

Sources: client/src/components/Navbar/index.tsx:24-78

The following sequence diagram illustrates the search process:

API Endpoint

The search functionality relies on the Polygon Ticker Search endpoint.

Parameter	Type	Description	Example Value
search	string	The search query for the ticker.	AAPL
limit	number	The maximum number of results to return.	20
apiKey	string	The API key for authenticating the request.	(from env)

Sources: client/src/components/Navbar/index.tsx:55-58

NavbarHome Component (NavbarHome)

The NavbarHome component is a simplified version of the navbar, intended for the public-facing homepage (/). It provides basic navigation and entry points for user authentication.

Sources: client/src/components/NavbarHome/index.tsx

Structure

It features a minimal layout:

Section	Contents	Functionality
Left	Greenline logo icon.	Navigates the user to the homepage (/) on click.
Right	"Log In" and "Sign Up" buttons.	Static buttons for user authentication flows.

Sources: client/src/components/NavbarHome/index.tsx:26-44

Comparison

This table highlights the key differences between the two navbar components.

Feature	Navbar	NavbarHome
Target Page	Portal (/portal, /quote/*)	Homepage (/)
Search	✅ Yes (Debounced Ticker Search)	❌ No
User-specific UI	✅ Yes (Watchlist, Account, Avatar)	❌ No
Auth Actions	❌ No (Assumes user is authenticated)	✅ Yes (Log In, Sign Up)
Dependencies	react-icons, Spinner, Avatar	Image, useRouter

Sources: client/src/components/Navbar/index.tsx, client/src/components/NavbarHome/index.tsx