• 

  Home page

• 

  Demo section(Has mini games which shows reaction time and device fps/ping and gives analysis)

• 

  Demo Video section(Upload videos to get detailed analysis about device and player skill with model made anotated video back)

• 

  Highlight section(based on uploaded video it gives only the highlight moment video back where enemy is encountered)

• 

• 

  Leaderboard

• 

  Dashboard

• 

  Dashboard(Showing history of videos uploaded by user)

• 

  Dashboard

• 

  Dashboard View Analysis Report Section

• 

  Dashboard View Analysis Report Section(Showing detailed analysis as per user uploaded videos adn games played)

• 

  Dashboard View Analysis Report Section(Showing more details)

LagSkillArena

Inspiration

• As a competitive gamer, I often wondered: “Why did I lose that match?”
• Most existing gaming analytics tools are expensive or only provide surface-level stats.
• I wanted to democratize professional-level performance analysis using AI.
• The goal was to make serious performance analytics accessible to every gamer.

What it does

• LagSkillArena is an AI-powered gaming performance analyzer.
• Users upload gameplay videos for analysis.
• The system uses YOLOv8 to process videos frame by frame.
• Features:
  • Tracks player movement and generates heat maps.
  • Detects enemy encounters and analyzes reaction times.
  • Calculates performance metrics such as accuracy, positioning, and decision speed.
  • Automatically generates highlight reels.
  • Provides AI coaching insights with personalized improvement suggestions.
  • Ranks players on a global leaderboard.
• The platform supports Free and Pro tiers.
• Pro users get advanced analytics, unlimited video processing, and priority AI coaching.

How I built it

Tech Stack

• Frontend: React, TypeScript, TailwindCSS
• Backend: FastAPI (Python)
• AI/ML: YOLOv8
• Computer Vision: OpenCV
• Database: MongoDB
• Authentication: JWT with bcrypt password hashing
• Visualization: Custom React components for heat maps and timeline analysis

Architecture

• Full-stack application with REST API architecture.
• Backend processes videos frame by frame using YOLO.
• Detects players and enemies in each frame.
• Computes spatial and temporal performance metrics.
• Stores users, sessions, and results in MongoDB.
• Frontend dashboard allows users to:
  • View performance history.
  • Compare statistics.
  • Watch AI-generated highlights.

Challenges I ran into

• Real-time video processing was computationally expensive.
  • Optimized by sampling every 3rd frame and using batch processing.
  • Reduced analysis time by about 60%.
• Object detection accuracy issues.
  • YOLO confused UI elements with players.
  • Fixed by tuning confidence thresholds and adding spatial filtering.
• Deployment complexity due to large ML dependencies (PyTorch, CUDA).
  • Deploying ML models on free tiers was challenging because of heavy dependencies.
  • I solved this by deploying the frontend on Vercel and the backend on Render.
• Heat map generation.
  • Implemented Gaussian kernel density estimation.
  • Added custom color gradients for better visualization.
• Authentication flow complexity.
  • Implemented JWT with refresh tokens.
  • Took multiple iterations to balance security and UX.

Accomplishments I’m proud of

• Built a complete full-stack AI application solo.
• Integrated YOLOv8 for real-time object detection.
• Created heat maps and timeline-based visualizations.
• Implemented a freemium model with Pro features.
• Achieved 95%+ player detection accuracy across different games.
• Built automatic highlight generation using scoring logic.
• Implemented a global leaderboard system.
• Designed a clean and intuitive user interface.

What I learned

Technical

• How to optimize YOLO models for video processing.
• How to build high-performance APIs using FastAPI.
• How to handle large datasets efficiently in React.
• Computer vision techniques for spatial analysis and heat map generation.
• How to use MongoDB aggregation pipelines for analytics.

Product

• The importance of starting with a minimum viable product (MVP).
• How user feedback changes which metrics are actually useful.
• Why performance and speed are critical for user experience.

Deployment

• Deploying ML models is challenging due to heavy dependencies.
• Using Vercel for the frontend and Render for the backend simplified deployment.
• Handling environment variables, CORS, and build limits was a key learning.

What’s next for LagSkillArena

Short-term

• Add multi-game support (MOBAs, battle royale, racing games, etc.).
• Add team and squad analytics.
• Build a mobile app (iOS and Android).
• Add social features for sharing highlights.

Long-term vision

• Add live stream analysis for Twitch and YouTube.
• Build an AI coaching chatbot.
• Add tournament mode with automated brackets.
• Allow custom model training per game.
• Add VR and AR support.
• Explore partnerships with esports organizations.

Technical improvements

• Migrate to GPU-accelerated cloud infrastructure.
• Add WebSocket support for real-time progress updates.
• Add video compression to reduce upload times.
• Build a recommendation system for personalized training exercises.

Yotube video has pinned timlines in description and comments👍 Also the website might take a bit of time to load things up but it will eventually get loaded👍

Built With

• ai
• api
• atlas
• computer
• fastapi
• jwt
• learning
• machine
• mongodb
• opencv
• python
• pytorch
• react
• rest
• tailwindcss
• typescript
• vercel
• vision
• vite
• yolov8