College head-to-head records

Look up the all-time record between any two college teams in football or men's basketball, with every game in the series.

Site: https://mattrudy13.github.io/h2h/

At a glance

• What it does: shows the series record, streaks, last meeting, biggest wins and a record-by-decade chart, or one team's record against every member of a conference. Team names accept nicknames and typos, and every comparison has a shareable link.
• How it works: a static site with no build step. The data APIs need a key, so the pages call a small Cloudflare Worker that adds the key, only answers the site itself, only forwards the endpoints the site uses, and caches responses to stay inside the free API quota.
• Built with: JavaScript, Cloudflare Workers, GitHub Pages, and the CollegeFootballData and CollegeBasketballData APIs.

Details

• Football (cfb-h2h.html): series record, ties and every game, from CollegeFootballData.com
• Basketball (cbb-h2h.html): series record and every game, from CollegeBasketballData.com. Scheduled games are listed as upcoming and don't count toward the record.

Each matchup shows the series record, highlights (current and longest streaks, last meeting, biggest wins) and a record-by-decade chart. Team vs Conference mode shows a team's all-time record against every current member of a conference.

The home page searches either sport and lists your recent lookups (saved in that browser only), each with its current record.

Matchups can be linked: cfb-h2h.html?t1=Michigan&t2=Ohio+State (or ?t1=Michigan&conf=Big+Ten) runs that comparison on load, and the URL updates after each compare. Team names accept common abbreviations and nicknames (e.g. UNC, OSU, "Ohio St"), and the page suggests close matches for typos.

How it works

Both APIs need a key, and anything a static page loads is public, so the pages never see the key. They call a Cloudflare Worker (worker/), which adds the key and forwards the request:

browser ──> h2h-proxy.mattrudy13.workers.dev/cfb/... ──> api.collegefootballdata.com
                                             /cbb/... ──> api.collegebasketballdata.com

The Worker:

• holds the key as the secret CFBD_API_KEY, set in Cloudflare and never in git (one key works for both APIs)
• only answers requests from https://mattrudy13.github.io and localhost
• only forwards the endpoints the site uses (/cfb/teams/fbs, /cfb/teams/matchup, /cbb/teams, /cbb/games), so it can't be used as an open proxy for the key
• answers /cfb/record and /cbb/record?team1=&team2= itself with just the series totals, so the recent-lookup records don't download whole basketball histories
• caches successful responses to save API quota: team lists for 7 days; matchups and game lists for 12 hours in season (football Aug–Jan, basketball Nov–Apr) and 7 days off-season. Browsers keep their copy for at most 1 hour. To clear Cloudflare's cache early, bump CACHE_VERSION in worker/src/index.js and redeploy.

Football's Team vs Conference makes one matchup request per member (about 17 for the Big Ten), 4 at a time, because the API has no per-team history endpoint. Basketball's needs only one request.

The Worker's URL lives in proxy-config.js. It isn't a secret.

Files

Path	What it is
index.html	Home page: search either sport, recent lookups
cfb-h2h.html	Football page
cbb-h2h.html	Basketball page
style.css	Shared styles for all three pages (light and dark)
common.js	Shared page code: team matching, logos and colors, scoreboard, links
proxy-config.js	Worker URL the pages call
worker/src/index.js	The Cloudflare Worker
worker/wrangler.toml	Worker config
worker/.dev.vars	API key for local Worker runs (gitignored, not in the repo)

Running locally

The pages are plain HTML with no build step. Serve the folder over HTTP rather than opening the files directly, because the Worker rejects requests whose origin is file://:

python3 -m http.server 8000     # open http://localhost:8000

This uses the deployed Worker. To change the Worker itself, run it locally too:

cd worker
echo "CFBD_API_KEY=<your key>" > .dev.vars   # once; gitignored
npx wrangler dev                            # serves on http://localhost:8787

Then point proxy-config.js at http://localhost:8787, and switch it back before committing.

Deploying

• Pages: pushing to main publishes the site (Settings → Pages → deploy from main, root). No build step.
• Worker: deploys separately, and pushing doesn't deploy it. After changing worker/:

  cd worker
  npx wrangler deploy
  

  The key stays in Cloudflare across deploys. To change it: npx wrangler secret put CFBD_API_KEY.

To allow another origin or endpoint, edit ALLOWED_ORIGINS / ALLOWED_PATHS in worker/src/index.js and redeploy.

API key

A free key is available at https://collegefootballdata.com/key. If it leaks, get a new one and update it with npx wrangler secret put CFBD_API_KEY and in worker/.dev.vars.