About This Project

Discover the architecture and technologies powering this modern web application

Hybrid Architecture: SSG + SPA

Combining the best of both worlds for optimal performance

📄 Static Site Generation (SSG)

The Home and About pages are statically generated at build time. This provides lightning-fast page loads, excellent SEO, and optimal performance for content that doesn't change frequently.

🚀 Single Page Application (SPA)

The Dashboard is a client-rendered SPA that fetches real-time data from external APIs. It demonstrates dynamic data fetching, automatic refetching, and interactive state management.

Key Features

📊

Real-Time Stock Data

Live stock prices from Twelve Data API with automatic updates every 5 seconds

👥

User Data Fetching

Random user profiles from Random User API with manual refetch capability

🎨

Global Theme Management

Light/dark mode that persists across all pages using TanStack Store and localStorage

🚀

Virtual Scrolling

TanStack Virtual enables rendering thousands of users with blazing-fast performance by virtualizing the list

📡

WebSocket Live Streaming

Bidirectional real-time communication via Socket.IO with live price charts and instant updates

📻

Server-Sent Events (SSE)

Efficient one-way server push for multiple stock streams with automatic reconnection and dynamic stock selection

🔒

Type-Safe Development

Full TypeScript implementation with strict type checking for robust and maintainable code

âš¡

Optimized Performance

Smart caching, automatic background refetching, and efficient state management

Real-Time Streaming Comparison

📡

WebSocket

  • ✓Bidirectional communication
  • ✓Full-duplex persistent connection
  • ✓Used for live price charts
  • ✓Socket.IO for reliability
📻

Server-Sent Events

  • ✓One-way server push
  • ✓Native browser EventSource API
  • ✓Used for multiple stock streams
  • ✓Automatic reconnection built-in

Technology Stack

Next.js 15.5.4

React framework with SSG, SPA, and hybrid rendering capabilities

TanStack Query

Powerful data fetching and caching library with real-time updates

TanStack Store

Lightweight global state management for client-side state

TanStack Virtual

High-performance virtual scrolling for rendering thousands of items

Tailwind CSS 4.1

Utility-first CSS framework for rapid UI development

Server-Sent Events

Native browser API for efficient server push with automatic reconnection

Socket.IO & Recharts

Real-time WebSocket communication and interactive data visualization

TypeScript

Type-safe development with full IntelliSense and compile-time error checking

Ready to Explore?

Check out the dashboard to see WebSocket and SSE streaming, virtual scrolling with thousands of users, and interactive real-time features in action

Explore Dashboard →