Application Architecture

A fully public, auth-free market dashboard. No login required — personalization is browser-local, market data is server-cached, and charts are TradingView embeds.

Stack at a Glance

Framework

Next.js 16 (App Router)

Server components, server actions, fetch caching

UI Library

React 19

Client + server components, useSyncExternalStore

Language

TypeScript 5

Strict mode, typed API responses

Styling

Tailwind CSS 4 + shadcn/ui

Utility-first, Radix UI primitives

Grid Layout

react-grid-layout

Drag, resize, responsive breakpoints

Market Data

Finnhub API

Search, news, company profiles — server-only key

Charts & Widgets

TradingView Embeds

Zero API cost — iframe widget scripts

Client State

localStorage

Watchlist (eq_watchlist), layout (eq_dashboard_layout)

Deployment

Vercel

Serverless, edge-ready, auto CDN

System Architecture

Equipulse is a fully public Next.js 16 application with no authentication. The server handles all paid API access using a server-only Finnhub key. Personalization (watchlist, layout) is stored entirely in the browser via localStorage — no account or database required. TradingView widgets load independently from their CDN, keeping server load minimal.

Request & Data Flow

On first paint, the server pre-fetches popular stock profiles (1-hour cache) and returns HTML. The browser reads saved layout and watchlist from localStorage, then loads four TradingView widgets asynchronously. Live stock search is debounced 300ms and served through Next.js server actions with a 30-minute response cache.

Component Architecture

The Header is a server component that pre-fetches initial stocks before render. PublicDashboard is a client component that owns the grid state via useSyncExternalStore — this keeps layout reactive across tabs. Each DashboardWidget injects a TradingView script tag into an isolated container.

Technology Stack

Built on Next.js 16 App Router with React 19 and TypeScript. Styling uses Tailwind CSS 4 with shadcn/ui component primitives. Drag-and-drop grid layout is powered by react-grid-layout. All client state is browser-local; server state is read-only cached market data from Finnhub.