# Odds Comparison Dashboard Example - React/Next.js URL: https://sockodds.com/docs/examples/odds-comparison-dashboard/ # Odds Comparison Dashboard Example - React/Next.js [#odds-comparison-dashboard-example---reactnextjs] Create a Next.js dashboard that compares odds across every Australian bookmaker and highlights the best line. ## What you'll build [#what-youll-build] A script that: - Displays odds from all bookmakers side by side - Highlights the best price for each market - Auto-refreshes every 2.5 minutes - Links each best price to the bookmaker - Keeps the key on the server **Perfect for:** Odds comparison sites, betting platforms, research tools ## Prerequisites [#prerequisites] - Node.js 18+ - Basic React/Next.js - SockOdds API key ([free](https://sockodds.com/signup/)) ## Complete code [#complete-code] ### Step 1: Create a Next.js project [#step-1-create-a-nextjs-project] ```bash npx create-next-app@latest odds-dashboard --ts --app --tailwind --eslint cd odds-dashboard ``` ### Step 2: Create the API route (app/api/odds/route.ts) [#step-2-create-the-api-route-appapioddsroutets] ```typescript // app/api/odds/route.ts — proxies the feed so the key never reaches the browser import { NextResponse } from "next/server"; export async function GET(req: Request) { const league = new URL(req.url).searchParams.get("league") ?? "AFL"; const url = new URL("https://api.sockodds.com/v2/events"); url.search = new URLSearchParams({ leagueID: league, oddsAvailable: "true", oddID: "points-home-game-ml-home", includeOpposingOdds: "true", limit: "50" }).toString(); const r = await fetch(url, { headers: { "x-api-key": process.env.SOCKODDS_KEY! }, next: { revalidate: 120 } }); if (!r.ok) return NextResponse.json({ error: await r.text() }, { status: r.status }); return NextResponse.json(await r.json()); } ``` ### Step 3: Create the dashboard component (app/Dashboard.tsx) [#step-3-create-the-dashboard-component-appdashboardtsx] ```typescript "use client"; import { useEffect, useState } from "react"; type Book = { odds: string; decimal: number; available: boolean }; type Odd = { oddID: string; marketName: string; bookOdds: string; fairOdds: string | null; byBookmaker: Record }; type Event = { eventID: string; teams: { home: { names: { medium: string } }; away: { names: { medium: string } } }; odds: Record; links: { bookmakers?: Record }; info: { stale: boolean } }; export default function Dashboard({ league }: { league: string }) { const [events, setEvents] = useState([]); const [updated, setUpdated] = useState(""); async function load() { const b = await (await fetch(`/api/odds?league=${league}`)).json(); setEvents(b.data ?? []); setUpdated(new Date().toLocaleTimeString()); } useEffect(() => { load(); const t = setInterval(load, 150_000); return () => clearInterval(t); }, [league]); const books = Array.from(new Set(events.flatMap((e) => Object.values(e.odds).flatMap((o) => Object.keys(o.byBookmaker))))).sort(); return (

{league} head to head · updated {updated}

{books.map((b) => )}{events.flatMap((e) => Object.values(e.odds).map((o) => { const best = Math.max(...Object.values(o.byBookmaker).filter((q) => q.available).map((q) => q.decimal)); return {books.map((b) => { const q = o.byBookmaker[b]; const isBest = q?.available && q.decimal === best; return ; })} ; }))}
MarketFair{b}
{e.teams.away.names.medium} @ {e.teams.home.names.medium} — {o.marketName} {o.fairOdds ?? "—"} {q ? (isBest && e.links.bookmakers?.[b] ? {q.decimal.toFixed(2)} : q.decimal.toFixed(2)) : ""}
); } ``` ### Step 4: Update the page (app/page.tsx) [#step-4-update-the-page-apppagetsx] ```typescript import Dashboard from "./Dashboard"; export default function Page() { return ; } ``` ### Step 5: Add the environment variable [#step-5-add-the-environment-variable] ```bash echo 'SOCKODDS_KEY=so_live_…' > .env.local ``` ### Step 6: Run it [#step-6-run-it] ```bash npm run dev # open http://localhost:3000 ``` ## Expected output [#expected-output] ``` A table: one row per market, one column per bookmaker, the best available decimal highlighted and linked to the book; stale events dimmed; the fair price in grey. ``` ## How it works [#how-it-works] ### 1. Proxy API calls through the backend [#1-proxy-api-calls-through-the-backend] The route handler holds the key; the browser only ever talks to `/api/odds`. ### 2. Process the nested bookmaker structure [#2-process-the-nested-bookmaker-structure] `Object.values(o.byBookmaker)`, skipping `available: false`. ### 3. Find the best odds [#3-find-the-best-odds] `Math.max` over `decimal`. ### 4. Highlight and link [#4-highlight-and-link] The best cell links to `links.bookmakers[book]`. ### 5. Auto-refresh [#5-auto-refresh] `setInterval` at 2.5 minutes, matching the source. ## Enhancements [#enhancements] ### Add totals and lines [#add-totals-and-lines] ```typescript oddID: "points-home-game-ml-home,points-all-game-ou-over,points-home-game-sp-home" ``` ### Show line movement [#show-line-movement] ```typescript // keep the previous body in a ref and compare decimal per book per oddID; render ▲/▼ ``` ### Add filters [#add-filters] ```typescript const [league, setLeague] = useState("AFL"); //