Baseball Picks-To-Click

Use this app to help pick your Beat the Streak batter most likely to get a hit!

TODAY TOMORROW

Overview

This project heavily queries the MLB StatsAPI to get the daily schedule, top batters, and historical data between a batter and pitcher.

We have a CSS Grid with four items:

  • day toggle between current day and tomorrow
  • top matchup of the day (today/tomorrow)
  • top batters this year by current batting average
  • detail section to display the selected hitter's matchup vs the projected pitcher

Use the dropdowns below to learn even more!

Matchup Score

This is probably my favorite part! I wanted to have some sort of an algorithm for this application that takes in multiple factors. At the time of writing this, the algorithm is this:

Scorematchup = (0.2 × S) + Imatchup · [ (Ah2h × min(Nh2h, 15)) + (0.25 × Hh2h) ]
Symbol Legend
  • Scorematchup: Final calculated value
  • S: Hitters active hit streak length
  • Imatchup: Binary switch based on matchup favorability (if our API returns good_matchup based on historical splits)
  • Ah2h: Batter's career average against the current pitcher
  • Nh2h: Batter's career at-bats against the pitcher (capped at 15)
  • Hh2h: Batter's career home runs against the pitcher

This algorithm heavily favors good career historical splits between the hitter and the pitcher. Then gives bonuses for an active hit streak and for career home runs vs the pitcher. We also cap the historical at bats at 15 to limit outliers for matchups with an absurd amount of historical at bats. You can view the actual code here

API Endpoints

We have three main api endpoints that our javascript frontend calls to build the elements on the page.

  • /api/baseball/top-batters: top batters this year by average
  • /api/baseball/top-matchup: top matchup from the top batters by average
  • /api/baseball/get-matchup: matchup for the provided batter_id

All endpoints accept an iso formatted date string as a parameter. Allowing requests to be for a specific date. The date paramater is optional, and defaults to the server's current date.

You can view the spec for our api endpoints and query yourself using our scalar docs here

Redis

This projected heavily uses redis for caching the responses from the MLB StatsAPI, as well as caching responses from our own API endpoints. Allowing our application to only query for today's schedule once, and any response from one of our API endpoints is also cached. Creating speedy responses from our API and not hammering the MLB StatsAPI for data we have already requested recently.

All cached items are kept for multiple hours, and data relevent to a date is cached with a key that includes the date. Allowing us to break our cache immediately if the date changes to one that hasn't been queried before.

Day toggle

I constructed a day-toggle on the top of the page to allow a user to choose between viewing matchups for the current day, or matchups tomorrow. This actually is just a checkbox that I play with a before element and move it depending on the state of the checkbox. Allowing our javascript to easily view the checkbox state before querying our API for data.

Badges

I have our javascript frontend inject what I call "badges" into matchup cards depending on our API response. These go onto the top of each matchup and can be hovered over to get a description of the badge. At the time of writing this, possible badges include...

  • matchup score
  • good/top matchup for the day
  • active hit streak for the batter

If you're interested, you can view the code below.