mlb-highlights

Inspiration

Baseball is full of unforgettable moments, but watching full games or long highlight reels isn't always convenient. We wanted to create an AI-powered platform that automatically extracts key moments from MLB games—so fans, analysts, and coaches can relive the best plays instantly.

What It Does

Fetches MLB game data and highlights using the MLB API. Uses Google AI Video Intelligence to detect key plays (e.g., home runs, strikeouts, amazing catches). Processes and stores video highlights in Google Cloud Storage. Displays automatically clipped highlights in a fast, easy-to-use Next.js web app.

How We Built It

Frontend: Next.js (App Router, Tailwind CSS) Backend: Next.js API Routes, Node.js MLB API: Fetching game data and highlights Google Cloud Video Intelligence API: AI-powered video scene detection Google Cloud Storage: Storing and retrieving highlight videos Firebase: Managing user preferences and saving processed highlights

Challenges We Ran Into

MLB API Limitations: Some games didn’t provide video highlights, requiring workarounds. Google Cloud Authentication: Ensuring proper API permissions for secure processing. Processing Delays: Optimizing Google AI's video analysis for faster, near-real-time highlight generation.

Accomplishments That We're Proud Of

Successfully integrated Google AI Video Processing to analyze baseball highlights. Built a modern, interactive UI using Next.js and Tailwind. Overcame API data limitations to make the app work seamlessly.

📚 What We Learned Advanced video processing techniques with Google AI. Next.js App Router and its performance advantages. Best practices for cloud storage and API integration. 🚀 What's Next for MLB Highlights? Personalized Highlights: Allow users to filter clips (e.g., only home runs, big plays). Live Game Highlights: Real-time highlight extraction while a game is in progress. Player-Specific Clips: Search highlights by player name or team. Mobile App: A dedicated iOS/Android app for on-the-go highlight access.

Built With

• next.js
• node.js
• tailwind-css)-backend-apis:-next.js-api-routes