Back Donovan Crader Let's talk
Showcase project 2026

OddsRoom

Live sportsbook odds comparison — the best line on every market, in one tap.

  • Astro 6
  • Tailwind CSS 4
  • TypeScript
  • Inline SVG charts
  • Vercel
OddsRoom homepage on deep-navy with neon-teal hero copy "The best line, in one tap" and a live NFL odds quote card showing five sportsbooks with the best price highlighted in amber.

Case study

  • Sports betting
  • Data viz
  • Real-time markets

When a recreational bettor wants to place a wager, they almost never check more than one book. That single habit costs them hundreds of dollars a year. OddsRoom's job is to make checking every book frictionless — one screen, every game, every line, with the best price already highlighted.

The odds comparison view is a wide table with eight games stacked vertically and five sportsbooks (DraftKings, FanDuel, BetMGM, Caesars, ESPN BET) running across the columns. Moneyline, spread, and total are stacked into each cell. The best price in every row is highlighted with an amber "BEST" pill — so the scan is constant-time visually. On mobile the table collapses into stacked book cards per game.

The line movement view is where the sharp money tail lives. A featured game opens with three side-by-side SVG line charts showing 24 hours of movement on moneyline, spread, and total. Below the charts, a feed lists the last ten line moves across the board with timestamp, book, before-and-after, and a tiny up/down indicator. The page reads like a trading desk for sports.

The "Find best odds" walkthrough explains the four-step user journey: pick a game, see all books, tap BEST, place the bet on your own book of record. The pitch is that OddsRoom never wants to be your sportsbook — it just wants to make sure you get the best number every time you place a wager somewhere else.

Built as a static Astro 6 site with IBM Plex Sans + IBM Plex Mono, tabular-num odds everywhere, tight 1px navy grid borders, and pure inline SVG charts. Deep navy (#0b1226) with neon-teal (#2dd4bf) accents and amber for "BEST" highlights.

Like what you see?

Let's build something together.

Have a project in mind? I'd love to hear about it.