Oho! - APAC Strategy Dashboard

A minimalist, high-end creative agency dashboard that delivers real-time market intelligence for APAC regions using Google Gemini with Search Grounding.

Overview

Oho! transforms market research into actionable creative briefs by synthesizing live search data, competitor analysis, and cultural insights. Enter a product and category to receive comprehensive strategic intelligence including market metrics, competitor claims, creator recommendations, and ready-to-use agency briefs.

Features

Market Intelligence

• Key Metrics - ROAS, engagement rates, ad fatigue indicators, and share of voice with trend analysis
• Cultural Velocity - Platform-by-platform trend momentum across APAC regions
• Share of Search - Competitor visibility and search dominance visualization
• Claim Density - Interactive word cloud showing competitor messaging patterns with hover insights

Strategic Analysis

• Efficacy Benchmark - Content quality scoring against category benchmarks
• Top Creators - Influential voices in your category with impact ratings
• Cultural Nuances - Region-specific insights with verified sources and strategic tips

Executive Output

• Strategic Overview - AI-synthesized market summary
• Agency Brief - Complete creative brief with objectives, target audience, key messages, and creative hooks
• Tactical Content Options - Channel-specific content execution ideas based on trending APAC formats
• Audited Sources - Full source attribution for all insights

Export

• HTML Export - Download complete report as standalone HTML file
• PDF Export - Print-optimized export via browser print dialog

Tech Stack

• Framework: React 19 with TypeScript 5.8
• Build Tool: Vite 6
• Styling: Tailwind CSS (CDN)
• Icons: Lucide React
• AI: Google Generative AI (Gemini-3-Flash-Preview with Search Grounding)

Prerequisites

• Node.js (v18 or higher recommended)
• Google Gemini API key with Search Grounding enabled

Installation

1. Clone the repository:

   git clone <repository-url>
   cd apac-strategy-dashboard
   

2. Install dependencies:

   npm install
   

3. Configure your API key in .env.local:

   GEMINI_API_KEY=your_api_key_here
   

4. Start the development server:

   npm run dev
   

5. Open http://localhost:3000 in your browser.

Usage

1. Enter a product name (e.g., "Samsung Galaxy S24")
2. Enter a category (e.g., "Smartphones")
3. Optionally specify a country for region-specific insights
4. Click Analyse to generate the dashboard

The dashboard will populate with real-time market data sourced from Google Search. Hover over claim density keywords for detailed explanations. Use the floating buttons to export reports.

Project Structure

├── App.tsx              # Main dashboard component with all UI sections
├── geminiService.ts     # Google Generative AI integration
├── types.ts             # TypeScript interfaces for all data structures
├── components/
│   ├── InsightCard.tsx      # Social insight display card
│   └── StrategicSummary.tsx # Executive summary sidebar
├── index.tsx            # React entry point
├── index.html           # HTML template with Tailwind CDN
├── vite.config.ts       # Vite configuration
└── tsconfig.json        # TypeScript configuration

API Integration

The dashboard uses Google's Generative AI SDK with the gemini-3-flash-preview model. Key features:

• Google Search Tool: Enables real-time search grounding for current market data
• Structured JSON Output: Responses are formatted as typed DashboardData objects
• APAC Focus: Prompts are optimized for Asia-Pacific market intelligence

The API call includes specific rules for data quality:

• 8-12 competitor claim keywords
• Exactly 4 top creators
• 3-4 tactical content recommendations
• 3 cultural nuances with verified sources

Scripts

Command	Description
npm run dev	Start development server on port 3000
npm run build	Build for production (outputs to dist/)
npm run preview	Preview production build locally

Design

The dashboard follows a minimalist black, white, and gold (#FFD700) color scheme designed for creative agency environments. Key design elements:

• Clean typography with Inter font family
• Card-based layout with hover interactions
• Responsive grid system (mobile to desktop)
• Print-optimized styles for PDF export
• Animated loading states with rotating status messages

Environment Variables

Variable	Description	Required
GEMINI_API_KEY	Google Generative AI API key	Yes
AZURE_TENANT_ID	Azure tenant id for sso login	Yes
AZURE_CLIENT_ID	Azure client id for sso login	Yes
AZURE_REDIRECT_URI	Azure redirect url after login	Yes

License

Private project - All rights reserved.