Dashboard

Real-time stock data and user information powered by TanStack Query

📡

WebSocket Live Stream

Real-time stock data with timestamp

📡

Waiting for Socket Data

Listening for real-time stock updates...

📊

Live Price Chart

Real-time price visualization

N

N/A

Real-time Chart

$0.00

↑+0.00 (+0.00%)
📊

Waiting for data to build chart...

Chart will populate as socket data arrives (max 50 points)

Data Points

0 / 50

Min Price

$0.00

Max Price

$0.00

📡

Server-Sent Events Stream

Real-time stock data via SSE

Live Stock Prices

Real-time updates via Server-Sent Events

SSE LIVE

Connecting to stock stream...

📈

API Stock Prices

Fetched from Twelve Data API

A

AAPL

Stock Price

Loading...

🚀

Virtualized User List

Thousands of users with high-performance virtual scrolling

Virtual User List

Loading thousands of users...

👥

Loading 5,000 users...

This may take a moment

💡

SPA Mode

This dashboard is rendered entirely on the client side, demonstrating Next.js's SPA capabilities. Stock data is updated in real-time via WebSocket connections and Server-Sent Events (SSE), while TanStack Query provides intelligent caching, background refetching, and automatic error handling. The user list uses TanStack Virtual to efficiently render thousands of items with smooth scrolling performance.