How to Build a NBA Game Odds Monitor with Sportmicro

Description and use

A small React + TypeScript app that cleanly separates Sportmicro API integration: the client handles URLs, keys, and errors, while the UI simply renders normalized odds.

Problem

Sports data demos often break when API responses miss fields or data is absent; developers need a robust, production‑style example that handles real‑world API quirks.

Outcome

A small, production‑style NBA odds monitor that demonstrates clean separation of concerns, robust error handling, and easy extensibility.

Workflow

• 1. Create a Sportmicro client module that sets base URL, reads SPORTMICRO_API_KEY, and wraps fetch calls with error handling.
• 2. In the React app, use useEffect to fetch bookmaker metadata on mount via fetchBookmakers().
• 3. Provide a match ID input and a refresh button; validate input before calling fetchOddsForMatch().
• 4. Normalize each odds row into a UI‑friendly shape using a helper (normalizeMarket).
• 5. Render the normalized data, showing clear loading, empty, and error states.
• 6. Keep the UI free of URL assembly and auth logic, delegating all API concerns to the client module.

Evidence

The client module does three important things: 1) It chooses a base URL, 2) It reads SPORTMICRO_API_KEY, 3) It wraps fetch calls into typed helpers.

Source

The main application logic lives in src/App.tsx, and the flow is deliberately simple.

Source