The Mission
We wanted a tool that allows a major media company to audit a competitor's YouTube channel and extract strategic insights. For an enterprise client, it's not enough to just show views; the tool needs to provide a deep-dive analysis and actionable insights so they can deduce a competitive advantage. This was the core mission behind VidMetrics.
Build Breakdown: The 48-Hour Sprint
The product evolved from a "napkin sketch" to an initial completion phase in approximately 10 - 14 hours of focused engineering over two days. I divide my product process into three distinct phases:
Research
Finding patterns in how enterprise audit tools are built and understanding the mathematical expressions needed for deep analysis.
Build
Taking those findings and designs and bringing them to life through code. Rapid iteration with immediate feedback loops.
Ship
Deploying a functional MVP that is ready for the intended users. Production-ready with proper error handling.
The Engine: Tools & Tech Stack
I selected a modern stack designed for high performance and clean aesthetics:
Next.js 16.2.1
App Router for high-performance rendering with server components
Tailwind CSS 4.2.2
Utility-first styling for rapid, consistent design implementation
shadcn/ui
Accessible, customizable components for that "Enterprise" feel
Recharts
Complex trend analysis: Performance Velocity, Engagement Distribution
AI as a Force Multiplier
Building VidMetrics was an end-to-end AI-backed process. Writing code is a "back and forth" process for me—I review, refine, and send it back for review. I leveraged a wide range of specialized tools to move fast:
Research: Gemini
My primary research tool. Being a Google product, its access to a massive data lake makes it a "no brainer" for technical findings.
Mathematics & Statistics: Claude
Used to intuitively understand the statistics. Claude works best for complex calculations and coding logic.
Coding & Architecture: Windsurf & Trae
My primary coding agents, with Antigravity (Sonnet) supporting the codebase understanding.
UI/UX Design: Stitch + Google
Handled the interface design and ensured it felt like a real SaaS product.
Parts Automated by AI
The most critical part automated by AI was Code Review. This is vital for security, as constant reviews help catch lapses that might arise during rapid building. Additionally, my coding agents helped implement the complex, custom UI components that give VidMetrics its premium feel.
System Architecture
The architecture follows a clean, modular approach with clear separation of concerns:
┌─────────────────────────────────────────────────────────────┐
│ CLIENT LAYER │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ LandingHero │ │ Sidebar │ │ Intelligence │ │
│ │ (Search) │ │ (Navigation) │ │ Hub │ │
│ └──────┬───────┘ └──────┬───────┘ └──────┬───────┘ │
└─────────┼──────────────────┼──────────────────┼───────────────┘
│ │ │
└──────────────────┼──────────────────┘
▼
┌─────────────────────────────────────────────────────────────┐
│ API ROUTE LAYER │
│ /api/audit (POST) │
└────────────┬───────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ YouTube Data API Integration │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Search │ │ Channel │ │ Video │ │
│ │ (Resolve) │ │ (Info) │ │ (Stats) │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
└────────────┬───────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Data Processing Engine │
│ • Calculate performanceRatio │
│ • Calculate engagementRate │
│ • Detect outliers (statistical) │
│ • Segment Shorts vs Long-form │
│ • Calculate format averages │
└────────────┬───────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ In-Memory Cache (24h TTL) │
│ Map<string, { data, timestamp }> │
└────────────┬───────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ JSON Response → UI Render │
└─────────────────────────────────────────────────────────────┘Core Metrics
- • Performance Ratio: (Views / Subscribers) × 100
- • Engagement Rate: ((Likes + Comments) / Views) × 100
- • Outlier Detection: Z-Score with 2σ threshold
- • Short Detection: ISO 8601 duration parsing
API Calls per Audit
- 1. search?part=snippet&type=channel
- 2. channels?part=snippet,statistics
- 3. search?part=snippet&order=date
- 4. playlistItems?part=contentDetails
- 5. videos?part=snippet,statistics,contentDetails
Product Thinking: The Version 2.0 Roadmap
While the MVP is strong, there is a lot of room to go beyond. Here is what I would implement in the next phase:
AI Agentic & ML Approaches
I want to move from standard math to ML-driven decisions. For the Thumbnail Analysis, instead of just using the Canvas API for pixel data, I'd use an AI model to correlate visual elements directly to video performance. I'd also add Predictive Analysis and a RAG-based AI chat feature to let users "talk" to their data.
Multi-Channel Correlation
The insights would be more holistic if users could audit multiple channels concurrently to see how they stack up against their own performance in real-time. This would enable true competitive benchmarking.
Team Collaboration
Implementing "Team Audits" would allow creators and agencies to work together, share updates, and set implementation goals live on the platform. Think Notion-style collaboration for competitive intelligence.
Conclusion
Overall, building VidMetrics was a challenging but rewarding experience. Balancing multiple projects while engineering this platform from scratch gave me a new perspective on rapid product development. It was fun, I enjoyed the process, and I'm proud of the result.
Thanks, AgencyHires.