# Meta Aggregator Quote Streaming

[Github](https://github.com/0xoogabooga/meta-agg-fe-tutorial) 

[Live demo](https://meta-agg-fe-tutorial.vercel.app/?tab=quotes)

<figure><img src="https://3123339049-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrN7qpP33OgkfjSCciTy3%2Fuploads%2FEVOT9UAE7x9fBgAdZXaA%2Fimage.png?alt=media&#x26;token=a44ea7d4-9b54-4082-a74e-a978bed66a4a" alt=""><figcaption></figcaption></figure>

This example shows how to stream real-time swap quotes from multiple aggregators simultaneously.

**Architecture Overview**

**🏗️ Backend Infrastructure**

* **Ooga Booga Meta Dex Aggregator**: Service providing real-time swap quotes
* **Server-Sent Events**: Streaming infrastructure for live updates

**📁 Frontend Components**

1. **API Layer** (`src/api/meta-stream-api.ts`)
   * Manages SSE connections to the aggregator API
   * Handles quote stream parameters and events
2. **Connection Management** (`src/hooks/use-quote-stream.ts`)
   * React hook for managing quote streams
   * Event subscription and cleanup lifecycle
3. **Business Logic** (`src/hooks/use-aggregators-quote.ts`)
   * Preconfigured hook for USDT/HYPE quotes
   * Built on top of `useQuoteStream`
4. **UI Components** (`src/components/`)
   * React components for displaying quote data

> **✅ That's everything you need to get started with streaming quotes!**