Rather than manually editing score overlays onto my match recordings, I built a React app that uses Tesseract OCR to read scores from official footage and automatically generate overlays via Remotion.

Features:

• - Built-in youtube video downloader for convenience
• - Saveable configurations for a given event's overlay - once set up, multiple matches from that event can be processed without reconfiguring
• - Robust data filtering and validation to ensure accurate score extraction
• - Customizable video overlay design with animated transitions

Frontend:

• - React 19 + TypeScript
• - Vite
• - Tailwind CSS v4
• - shadcn/ui (component primitives)

Backend:

• - FastAPI (Python)
• - uvicorn
• - OpenCV (image processing)
• - Tesseract OCR (text recognition)
• - yt-dlp

Overlay Generation:

• - Remotion (React based video rendering)

My short form videos needed a clean way to display the info of the team in the video, so I set up a simple Remotion project that generates an animated overlay.

Features:

• - Customizable appearance based on team colors
• - Toggles for additional team info and additional banners for social media
• - Animated transitions