Case Study · Draft Analytics

QB
PROS
PECTS.

14
Metrics
6+
Classes
680K
Single File
0
Frameworks

QB draft intelligence platform. 14-metric composite scoring, historical comparables via cosine similarity, style drift analysis, and tier rankings — built solo with Claude Code.

qbprospects.ontheclock.live
screenshot · 1200×600
The Problem

QB evaluation is vibes.

Draft analysts evaluate QBs using different metrics, different scales, and different opinions. There's no unified system that normalizes production data across conferences, accounts for strength of schedule, or compares prospects to historical outcomes. Most "big boards" are just ranked lists with no methodology.
qbprospects.ontheclock.live
screenshot · draft board
What I Built

Four core systems.

01
14-Metric Composite Scoring
Each QB is scored across 14 weighted metrics: TPS, MOF grade, pressure xANY/A, BTT%, deep grade, intermediate grade, clean pocket xANY/A, rush YPG, and more. Percentile-normalized, conference-adjusted (P5 ×1.0, G5 ×0.93, FCS ×0.82), with red flag penalties.
14 MetricsPercentile NormConference Adj
composite scoring
screenshot · scoring
02
Historical Comparables
Find the closest historical matches for any prospect using cosine similarity across the full metric vector. Compare a 2026 prospect to every QB from 2020–2025 to see who they most resemble — and how those players performed in the NFL.
Cosine Similarity6+ Draft ClassesNFL Outcomes
historical comps
screenshot · comps
03
Style Drift Analysis
Track how a QB's offensive concept changes from college to the NFL. Did they go from a spread system to West Coast? From RPO-heavy to dropback? Style drift reveals scheme fit and adaptability — two of the hardest things to evaluate pre-draft.
College → ProScheme FitAdaptability
style drift
screenshot · drift
04
Interactive Draft Board
Sortable table with 20+ columns: tier, composite, xANY/A, TPS, ADOT, pressure stats, NFL outcomes. Column picker, frozen columns on mobile, position filters. Natural language search with autocomplete across names, years, and conferences.
20+ ColumnsMobile OptimizedNL Search
draft board
screenshot · board
Technical Decisions

Build vs. configure.

1
Single-file architecture — no framework
The entire app compiles to one 680KB index.html. No React, no Vue, no build step at runtime. A Python build script merges JS modules, HTML templates, CSS, and data into a single deployable file. Zero dependencies at runtime means zero breaking changes, instant load, and trivial hosting.
2
Cosine similarity over manual comps
Human comps are biased — analysts compare QBs to players they remember, not players who are statistically similar. Cosine similarity across the full 14-metric vector finds the mathematically closest matches regardless of narrative. The algorithm doesn't care about draft hype.
3
Python build pipeline for data processing
Raw QB data comes from multiple sources in different formats. Python scripts parse, normalize, calculate composites, and bake everything into a static JSON blob at build time. The frontend never fetches data — it's embedded. This eliminates API latency and makes the app work offline.
Stack
Vanilla JavaScript
Chart.js
Python
HTML / CSS
Netlify
Try it.
Open QB Prospects → ← Back to all projects