Frontend Architecture

Next.js + React + WebGL Stack

The CogniTerminal is a high-performance Single Page Application (SPA) built for speed and responsiveness.

• Framework: Next.js 14 (App Router). We utilize Server-Side Rendering (SSR) for the initial load of static assets and Client-Side Rendering (CSR) for dynamic market data.

• UI Library: Shadcn UI combined with Tailwind CSS. This ensures a lightweight, customizable, and accessible component library.

• Visuals: WebGL (via Three.js or React-Three-Fiber) is used for the animated background elements and the 3D visualization of the "Snowball" effect, providing a premium, immersive feel without sacrificing performance.

State Management (Zustand/Redux for Real-Time Data)

Handling high-frequency updates from Solana requires robust state management.

• Zustand: We use Zustand for global client state (User Wallet, Theme, Active Layout). It is lightweight and minimizes re-renders.

• React Query (TanStack Query): Used for fetching and caching non-real-time data (e.g., User Profile, Historical Chart Data).

• WebSocket Middleware: A custom middleware layer ingests the raw WebSocket stream from Helius/Bitquery and dispatches updates directly to the Zustand store, bypassing React's standard render cycle for ultra-low latency updates (similar to how gaming engines handle frame updates).