Tennis Serve Coach
Gemini-powered tennis analysis app that processes videos to analyze serves. Uses structured output to analyze serves and can extract multiple serves from longer videos.
Key Features
Video Processing
- • Video upload (MP4, WebM, MOV) support
- • Live webcam recording capabilities
- • Client-side video processing with FFmpeg
- • Automatic video segmentation with timestamped feedback
- • Local storage for analysis history
AI Analysis
- • AI-powered serve detection using Google Gemini 2.5 Flash
- • Computer vision for serve analysis
- • Personalized improvement recommendations
- • Detailed coaching feedback
- • Segmented video clips for specific moments
Technical Stack
Frontend
- • Next.js 15 with React 19
- • TypeScript for type safety
- • Tailwind CSS 4 with custom glassmorphism design
- • Responsive design with modern UX patterns
- • Lucide React icons for UI elements
Backend & Processing
- • Google Generative AI (Gemini 2.5 Flash)
- • FFmpeg for client-side video processing
- • Formidable for multipart uploads
- • API routes for video analysis
- • Automatic format conversion
Architecture
API Integration
- • API route for video analysis with automatic format conversion
- • Client-side FFmpeg integration for video segment clipping
- • Real-time webcam recording with MediaRecorder API
- • Error handling with user-friendly feedback
Data Management
- • Local storage persistence for analysis history
- • Client-side video processing for privacy
- • Efficient video handling and optimization
- • Responsive design with touch interactions
Technical Highlights
- • Advanced web technologies including client-side video processing
- • AI integration for sports coaching applications
- • Modern React patterns with hooks and context
- • Polished user experience for sports coaching
- • Real-time video analysis capabilities
- • Comprehensive error handling and user feedback