Built with FlutterFlow
Volkano AI | Enterprise Ad Intelligence Platform
Gokul Shivappa
Like this project
Posted Jun 3, 2025
Developed a competitor research and ad analytics SaaS platform for Volkano.ai using FlutterFlow.
Likes
9
Views
107
Timeline
Mar 12, 2025 - May 28, 2025
Volkano.ai | Enterprise Ad Intelligence Platform
Client testimonial highlighting the seamless user experience
Enterprise Ad Intelligence Platform | Meta Ad Library Analysis
An AI-powered competitor research platform that transforms hours of manual ad analysis into automated insights across 50+ dimensions. Built for marketing teams and agencies to make data-driven creative decisions at scale.
The Challenge
Marketing teams were drowning in competitor research. Analyzing ads manually meant:
Hours spent reviewing competitor ads across multiple platforms
Missed patterns in winning creative elements and audience targeting
Scattered insights with no centralized system for tracking performance
Guesswork decisions without granular data on what actually works
No scalability when monitoring dozens of competitors simultaneously
Teams needed a way to transform Meta's vast Ad Library into actionable intelligence—automatically.
The Solution
Core Functionality
Competitor Research Dashboard (7 Analytical Modules)
Ad angle analysis in card view mode showing different advertising angles like "Boosts Immunity", "On-the-Go Snacking", "Shape & Color Fun" with categories and average days active metrics
User research dashboard showing personality assessment, ethnicity distribution, age range demographics, gender breakdown (60k total audience - 30% male, 70% female), profession categories, and emotion analysis
Overview Section
Real-time summary dashboard with trend analysis
Audience insights: personality types, demographics, ethnicity, age, and gender
Ad angle categorization with combination analysis
Market sophistication tracking
Campaign theme identification
Ads Database
Infinite scroll through thousands of competitor ads
Advanced filtering: sophistication level, theme, media type, status, audio, speech, production style
Natural language search: "show me all ads using green screen"
Period-over-period comparison metrics
Viewport-optimized loading for smooth performance
Video Analysis
Engagement duration metrics with peak period identification
Production style breakdown (graphics, selfie, professional, etc.)
Audio and script pattern analysis
Brand vs. competitor performance benchmarking
Hooks Analysis
Script template extraction for copy hooks
Visual hook identification (what drives retention)
Performance metrics by hook type
Engagement view counts
Image Intelligence
Text extraction and analysis from creative
Color gradient and palette identification
Visual category classification
Color performance correlation
Ad Copy Breakdown
Primary text template patterns
Headline structure analysis
Call-to-action categorization
Template taxonomy (features, benefits, testimonials, social proof)
Creative Audit
90-day head-to-head brand comparison
Actionable recommendations: what to model vs. avoid
Performance insights: winning strategies vs. failing tactics
Competitive benchmarking
Team Collaboration
Multi-workspace support for agencies managing multiple clients
Role-based access: Owner, Super Admin, Admin, Guest
Email invitations and onboarding flows
Subscription management via Charge Bee integration
Technical Architecture
Stack
Frontend: FlutterFlow (Flutter Web)
Database: Supabase
AI Engine: Gemini AI
Local Storage: Hive (IndexedDB-based NoSQL)
Payments: Charge Bee
Cloud Functions: Google Cloud Functions
AI-Powered Processing Pipeline
Data Collection → Fetch ads from Meta Ad Library for selected brands and competitors
AI Analysis → Gemini analyzes each creative across 50+ dimensions:
Visual elements, color schemes, text extraction
Video production styles, audio patterns, speech types
Hooks, engagement triggers, audience signals
Demographics and psychographic indicators
Structured Storage → Comprehensive metrics stored in Supabase
Local Caching → Partitioned data cached in Hive for instant browsing
Performance Optimizations
Memory-Efficient Infinite Scroll
The platform handles thousands of high-resolution ad creatives without browser crashes through:
Hive partitioned storage with indexed NoSQL structure
LRU caching (Least Recently Used) prevents memory overflow
Dynamic capacity detection adjusts loading based on browser memory
Viewport-only rendering loads only visible ads
Incremental partition loading for multi-competitor datasets
Intelligent Processing Prioritization
Custom action detects which section the user is viewing and prioritizes that data first, then processes remaining sections in parallel. Creates perception of instant loading while comprehensive analysis runs in background.
Atomic Design Architecture
68 custom data types for strongly-typed hierarchy (no JSON string parsing)
68 custom actions for data processing, filtering, state management
48 custom functions for backend logic and API integrations
20 custom widgets including custom bar graph (built to overcome Syncfusion limitations)
Modular component structure (atoms, molecules, organisms) reduces re-renders and improves load times
**Architecture Diagram:** Visual representation of the tech stack or data flow (FlutterFlow → Supabase → Gemini AI → Hive caching)
Production-Ready Payment Integration
Forked and modified Charge Bee package from pub.dev to handle web payment edge cases:
State management for success, failure, browser refresh, and popup cancellation
"Pay Now" recovery flow for failed payments
Zero transaction loss architecture
Key Automations
Real-time dashboard updates without refresh
Email notifications when brand analysis completes
Frontend snackbar system for processing status updates
Custom preloader for Flutter web initialization
Technical Highlights
Why These Challenges Mattered
AI Analysis at Scale
Gemini AI automates what would require hours of manual frame-by-frame video review, text extraction, and categorization. The platform processes hundreds of ads from multiple competitors simultaneously—delivering comprehensive insights in minutes instead of days.
Browser Memory Constraints
Displaying thousands of high-resolution video and image ads would crash traditional web applications. The custom infinite scroll with Hive partitioning and LRU caching makes it possible to browse 5,000+ ads seamlessly.
Perception vs. Reality
Users don't want to wait for complete data processing. Intelligent prioritization processes visible data first, updates the UI immediately, then handles background processing—making a 5-minute process feel instant.
Flutter Web Performance
Flutter web apps notoriously suffer from slow initial loads. Atomic design principles, custom preloader, and optimized component trees deliver enterprise-grade performance that rivals React applications.
Payment Edge Cases
Third-party payment packages don't account for real-world scenarios like browser refreshes during checkout or popup closures. Custom modifications ensure every transaction is tracked and no revenue is lost.
Results & Impact
Platform Capabilities
Analyzes 50+ dimensions per ad automatically
Processes thousands of ads from multiple competitors
Delivers insights in minutes vs. hours of manual analysis
Supports multi-workspace collaboration for agencies
Handles enterprise-scale datasets without browser crashes
Technical Achievement
68 custom actions powering sophisticated data operations
48 custom functions for backend logic and integrations
20 custom widgets for specialized UI components
Responsive design optimized for desktop and tablet
Real-time synchronization across all dashboard modules
User Experience
Natural language search makes ad discovery intuitive
Infinite scroll loads thousands of ads without lag
Multi-dimensional filtering with instant results
Period comparison reveals performance trends
Granular insights from demographics to color psychology
Business Model
Subscription-based (Pro, Partner, Executive, Enterprise tiers)
Multi-workspace support for agency clients
Role-based access control
Automated billing via Charge Bee
Key Takeaways
For Marketing Teams:
AI automation delivers deeper insights than manual research while reducing time investment from hours to minutes
Granular data across 50+ dimensions enables precise creative optimization
Centralized competitor intelligence drives strategic advertising decisions
For Engineers:
Memory optimization is critical for web apps handling large media datasets—custom solutions beat generic approaches
Intelligent prioritization creates perceived performance improvements even with massive backend processing
Atomic design principles in FlutterFlow enable maintainable, enterprise-grade applications
Third-party packages may need custom modifications for production edge cases
Hive local storage with IndexedDB partitioning solves browser memory limitations at scale
For Product Teams:
Real-time feedback systems (snackbars, notifications, status updates) maintain user confidence during complex operations
Natural language interfaces lower barriers to advanced filtering and search
Multi-workspace architecture is essential for B2B SaaS serving agencies
Live Application
Project Scope
Timeline: 2 months
Team: Built with FlutterFlow by Alfadesmeta
Client: Volkano AI
This case study demonstrates enterprise-grade development capabilities: AI integration, performance optimization for web constraints, atomic design architecture, and production-ready payment systems.