Shot-IQ
Link to open source: https://github.com/nippunrana/shotiq
Link to Live Project: https://nippunrana.github.io/shotiq/
ShotIQ (Cricket Shot Analyzer) is an AI-powered web application designed to provide deep technical analysis of cricket batting shots. Users can upload video clips of their batting, and the system uses advanced AI to evaluate their biomechanics, the bowler's delivery, and the overall execution of the shot.
Technology Stack
Frontend: Built with React (v19) and Vite. It utilizes standard React hooks (useState, useRef, useEffect) and custom CSS for a modern, glass-card UI design.
Backend & Infrastructure: Firebase handles the core backend infrastructure:
Firebase Storage: Stores the uploaded user video clips.
Firebase Cloud Functions (v2): Acts as a secure, serverless backend to process the videos and communicate with the AI model.
Firebase Hosting: Configured for deploying the frontend.
AI Engine: Google GenAI, specifically using the Gemini 1.5 Flash model via the @google/generative-ai Node SDK.
Core Workflow & Architecture
Video Upload & Playback (App.jsx & VideoUploader.jsx)
The user uploads a cricket video clip.
The app instantly plays back the video in a looping, muted player using a local blob URL and securely uploads the file to Firebase Storage.
Secure AI Processing (functions/index.js & utils/gemini.js)
Instead of exposing API keys on the frontend, the app calls a Firebase Cloud Function (analyzeVideoProxy).
This function securely retrieves the video from Firebase Storage, converts it to a base64 buffer, and sends it to the Gemini API alongside a highly specialized prompt.
The Prompt,
The system uses a strictly engineered prompt that instructs Gemini to act as an expert Cricket Analyst.
It forces the AI to output a structured JSON response evaluating four layers:
Categorization: Formal and colloquial shot names (e.g., "Cover Drive").
Execution & Biomechanics: Trigger movement, head alignment, launch angle, and contact quality.
Delivery Data: Pitching length, line, and deviation.
Evaluation & Feedback: Specific quality ratings, reasoning, and "Pro Tips" for both the batter and the bowler based entirely on visual kinematic evidence.
Results Dashboard,
Once the Cloud Function returns the JSON data, the frontend parses it and renders a beautiful, stylized dashboard next to the looping video.
It displays stats with confidence progress bars, dynamic color-coded evaluation cards (Green for Good, Red for Poor), and a list of specific technical observations regarding the player's technique.
Summary: ShotIQ is a well-structured, serverless application that securely bridges modern frontend React patterns with Gemini's multi-modal AI capabilities to act as a virtual cricket coach.
Please use this video link : https://firebasestorage.googleapis.com/v0/b/shotiq-eb03a.firebasestorage.app/o/videos%2F1777807311264_WhatsApp%20Video%202026-05-03%20at%2016.22.51.mp4?alt=media&token=809168e9-8b88-4630-bbae-a10e297964c5
