How to Build a NBA Game Odds Monitor with Sportmicro

Описание и применение

Небольшое приложение на React + TypeScript, которое демонстрирует чистую архитектуру интеграции с Sportmicro: клиент обрабатывает URL, ключи и ошибки, а UI просто отображает нормализованные коэффициенты.

Задача

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.

Результат

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

Рабочий процесс

• 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.

Доказательства

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.

Источник

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

Источник