PropSage

Inspiration

We love the rush of calling a prop before the line moves—but most tools only show numbers without context. We wanted the why behind each line: clips that reveal tendencies, injuries, and scheme shifts. PropSage was born to stitch real game video to prop markets so you can see the evidence and act fast.

What it does

PropSage is a video-backed prop insights app:

Shows current market lines alongside our fair line estimate.

Opens an Evidence Drawer with ranked clips (via TwelveLabs) that explain the line: injuries, formations, matchups, pace, etc.

Normalizes player/team search, supports featured games (e.g., UGA vs Alabama), and stays demo-reliable with curated fallbacks.

Tracks user interactions and failures with Sentry so we can iterate confidently.

How we built it

Frontend: Next.js (App Router), TypeScript, Tailwind, Framer Motion (Apple-inspired motion & glass). Key components: GameDashboard, TopEdgesList, EdgeEvidenceDrawer, ClipsGrid, ClipPlayer.

Video Intelligence: TwelveLabs index for semantic/metadata clip search, plus ID-based fallbacks for deterministic demos.

Data Pipelines:

Games: ESPN mapping → normalized internal Game type.

Props: placeholder now; adapters planned for Odds APIs/scrapes.

Players/Teams: fuzzy resolvers and canonicalization.

Reliability & DX: Sentry (breadcrumbs + error capture), Playwright E2E, GitHub Actions CI, Railway deploys, PWA manifest + icons.

Caching: Prefetch fallback clips when a game/player is focused; thin API proxy to keep TwelveLabs secrets server-side.

Challenges we ran into

Videos not showing: Missing/incorrect TwelveLabs index env, thin content for some players, and a TS import hiccup in ClipPlayer. We added explicit clip-ID fallbacks and a resilient resolver (IDs → query → friendly empty state).

Name normalization: ESPN short vs display names caused “Opponent” placeholders. We added post-map enrichment and fuzzy matching.

Demo reliability: Live markets are volatile. We introduced a Featured Game mode with guaranteed clips so judges always see evidence.

Polish without regressions: Motion/glass can hurt perf. We animate only transform/opacity, honor prefers-reduced-motion, and use skeletons for perceived speed.

Accomplishments that we're proud of

A cohesive, premium UI (springy drawers, staggered clip grids, glass surfaces) that still feels fast.

Evidence-first workflow: prop → clips → decision, all in one place.

Robust observability (Sentry) and E2E tests catching regressions early.

A clean theming system + icon pack that scales to PWA and mobile wrappers.

What we learned

Explainability matters: users trust lines more when they can watch the evidence.

Defense vs offense: invest early in normalization and fallbacks; they save demos.

Motion = meaning when it reinforces state changes and respects accessibility.

What’s next for PropSage

Fair-line modeling with multi-source features and uncertainty.

Clip-aware features: use TL labels (routes, defensive shells, injury mentions) as inputs; weight by recency and opponent similarity. News fusion: optional API to summarize injuries and coach quotes directly in the Evidence Drawer. Shareable insight cards: one-tap exports (prop + EV + clip stills). Multi-league support: unify CFB/NBA/NFL pipelines behind a consistent interface with league-specific heuristics.

North star: “The why behind every line.” Video + data, explained clearly, fast enough to act.

Built With

• api
• app)
• app/services
• build
• built-with-languages-&-runtime-typescript
• caching
• client-side
• deployment)
• error
• eslint
• hosting
• icons
• javascript
• lightweight)
• manifest
• memoization
• node.js-frameworks-&-ui-next.js-(app-router)
• prefers-reduced-motion
• prefetch
• prettier-testing-&-ci-playwright-(e2e-tests)-github-actions-(ci-workflow)-observability-sentry-(breadcrumbs
• proxy
• pwa
• railway
• react-tailwind-css-framer-motion-(meaningful-motion-&-transitions)-video-intelligence-&-data-twelvelabs-api-(semantic-video-search/index)-espn-event-mapping-?-normalized-game-model-tooling-&-package-manager-pnpm
• skeleton
• state
• support
• uis
• web