DemonBets

DemonBets is a single-page web frontend for horse-racing race cards and form. It is built as a Vite + React + TypeScript app and deployed to IIS as the site WSB-Web. It renders meeting race cards, runner detail, statistics, speed maps and search by consuming the TD Data Stream backend API.

Purpose and scope

• Present race cards for a meeting: races, runners, form, and runner statistics.
• Show runner detail across Profile, Results, and Statistics tabs.
• Render speed maps (Barrier, Closing, Settling) for disciplines/countries that support them.
• Provide race search and a per-country configuration/routing admin page.
• Adapt displayed stats and features per country via a country configuration file.

DemonBets is presentation only. It holds no database and performs no scraping or enrichment; all racing data comes from the TD Data Stream API.

Architecture

• Stack: Vite 5, React 18, TypeScript, React Router v6, TanStack Query, Tailwind CSS, shadcn-ui (Radix primitives), Recharts, next-themes.
• Entry: src/main.tsx → src/App.tsx mounts providers (Theme, TanStack Query, Tooltip) and the router.
• Routes (src/App.tsx):
  • / — pages/Index (dashboard / meeting landing)
  • /search — pages/Search/SearchPage
  • /config — pages/ConfigPage (API routing + per-country overrides)
  • /race-card/:meetingId — components/Dashboard (race card)
  • /race-card-panel — components/RaceCardPanel
  • * — pages/NotFound
• Backend API config: src/config.jsx — base URL resolves to https://localhost:44362/api on localhost, otherwise https://api2.tddatastream.com/api. Endpoints include race list, race card, race details, and runners. The race-card endpoint is requested with ignoreCache=true.
• Country configuration: public/countryConfig.json, loaded at runtime by services/countryConfig.service.ts and exposed through context/CountryConfigContext.tsx. It controls, per country (SAF, GB, IRE, AUS, NZ, FR, HKG, JPN, USA, CAN, UAE), whether speed maps and form lines are enabled and which stat blocks are shown. Speed maps are enabled for AUS, NZ, and HKG.

Key directories

• src/pages/ — top-level routes: Index, ConfigPage, MeetingPage, NotFound, and the Search, SpeedMap, and RunnerDetails subfolders.
• src/components/ — race-card UI: Dashboard, RaceCardPanel, RunnersTable, RunnerCard, RunnerDetails, SpeedMap, Spotlight, TimeSlots, RaceFilters, WinPlaceBar, Header, plus components/ui/ (shadcn-ui primitives).
• src/pages/SpeedMap/ — BarrierSpeedMap, ClosingSpeedMap, SettlingSpeedMap.
• src/pages/RunnerDetails/ — ProfileTab, ResultsTab, StatisticsTab.
• src/services/ — API/data-loading services (e.g. countryConfig.service.ts).
• src/context/ — CountryConfigContext, ThemeContext.
• src/lib/ — helpers: discipline, flags, formatBoldText, horseUtils, utils.
• public/ — countryConfig.json, flags/, discipline/ assets.

Dependencies

• Upstream: the TD Data Stream API (api2.tddatastream.com) for all racing data, including the config page's endpoint routing and per-country source overrides.
• Build/deploy: Node 20, npm, IIS on a self-hosted Windows runner.

Getting started

npm install
npm run dev

The dev server (Vite) proxies API calls to the local backend at https://localhost:44362/api; run the TD Data Stream backend locally, or point at production, to see live data. See the Changelog for recent work and the Deployment workflow for how the site ships to IIS.