# PRD: Social Media Performance Dashboard (Live, Professional UI) ## 1. Build Objective Build a **professional, interactive social media performance dashboard** that gives brands a unified view of cross-platform performance (YouTube, Substack, X, LinkedIn) with live data, polished visualizations, and real-time filtering. **Key distinction:** This is a **production-grade intelligence tool**, not a prototype. It should feel like industry-standard analytics software (e.g., Buzzed, Buffer, Hootsuite analytics). The application serves two primary audiences: 1. **Leadership:** Quick executive overview of how the brand is performing across platforms vs. historical baseline 2. **Social media team:** Deep dive into individual content performance, trends, and platform-specific insights --- ## 2. Core User Flow ```text Enter brand information ↓ Enter/connect social media URLs ↓ Run analysis ↓ Agent retrieves platform data (or await manual input for LinkedIn/Substack) ↓ Agent calculates historical baselines ↓ Agent analyzes latest 3 posts per platform ↓ Agent compares recent posts against historical baseline ↓ Agent generates platform summaries ↓ Dashboard renders with professional visualizations ↓ User filters by date range, platform, metric type ↓ User drills into platform details or individual posts ``` No unnecessary onboarding. Data input should be minimal. --- ## 3. Runtime Inputs ### Brand Setup * Brand/company name * Website URL ### Social Accounts * YouTube channel URL * Substack publication URL (optional—can be manually added later) * X profile URL * LinkedIn company/profile URL (optional—can be manually added later) **Note:** LinkedIn and Substack data can be added manually (not via API/MCP). The dashboard UI should be fully functional before those connectors are available. Mock data or manual input forms should be available. All four platform sections should be present in the dashboard, but only connected platforms display live data. Unconnected platforms show: > **[Platform name] isn't connected** > > Add your [Platform name] profile or add data manually to see performance. --- ## 4. Dashboard Layout & Navigation ### Left Sidebar (Fixed) **Logo & Brand:** ``` ◯ [Brand Name] ``` **Main Navigation:** - 📊 Overview (default view) - 📈 Content Performance - 👥 Audience Insights - 💬 Engagement Tracker - 📋 Reports (future) - ⤓ Export Center (future) **Platforms Section:** ``` CONNECTED PLATFORMS ━━━━━━━━━━━━━━━━━ 🎬 YouTube 📄 Substack (Manual) 𝕏 X 💼 LinkedIn (Manual) ``` Icon + platform name, sorted by connection status. Show "Manual" badge for platforms with manually entered data. **Settings** (bottom) - ⚙️ Settings - ? Help --- ### Main Content Area **Top Bar:** 1. **Platform Tabs** (horizontal, filterable): ``` [All] [YouTube] [Substack] [X] [LinkedIn] [+] ``` Clicking a tab filters all content/charts to that platform. "All" shows aggregated cross-platform view. 2. **Time Period Selector** (right side): ``` 📅 Last 30 days ▼ ``` Dropdown with presets: - Last 7 days - Last 14 days - Last 30 days (default) - Last 90 days - Custom range (date picker) 3. **Search Bar** (center): ``` 🔍 Search (can search content, platforms, campaigns) ``` --- ## 5. Overview Page (Default Dashboard) ### Header ``` Overview Cross-platform performance compared with historical baseline. ``` --- ### KPI Cards (4-Column Grid) Display one card per connected platform: ``` ┌───────────────────────────────────────────┐ │ 🎬 [Trend indicator]│ │ │ │ Primary Metric: 142K views │ │ +31% increased │ │ │ │ Historical avg: 108K │ │ Posts analyzed: 47 │ │ │ │ Subscribers: 45.2K (+1.2K this period) │ │ │ │ [View YouTube Dashboard →] │ └───────────────────────────────────────────┘ ``` **Design Details:** - Large platform icon (color-coded) - Primary metric as hero number (large, bold) - Percentage change with color: 🟢 green (+), 🟡 yellow (~), 🔴 red (−) - Secondary info (historical avg, sample size) - Subscriber/follower count if available - Click through to platform detail page - Responsive: 2 cards on mobile, 4 on desktop **Metric per Platform:** - YouTube: Views (primary), Likes, Comments, Subscribers (secondary) - Substack: Reads/Opens (primary), Open Rate, CTR, Subscribers (secondary) - X: Impressions (primary), Likes, Replies, Reposts (secondary) - LinkedIn: Impressions (primary), Reactions, Comments, Reposts (secondary) --- ### Cross-Platform Performance Table ``` ┌──────────────────────────────────────────────────────────────┐ │ Platform Performance Summary │ ├──────────┬──────────────────┬─────────────┬────────┬─────────┤ │ Platform │ Current │ Historical │ Change │ Trend │ ├──────────┼──────────────────┼─────────────┼────────┼─────────┤ │ 🎬 YouTube │ 142K views │ 108K │ +31% │ ↑ 📈 │ │ 📄 Substack │ 8.2K reads │ 7.4K │ +11% │ ↑ 📈 │ │ 𝕏 X │ 1.2M impressions│ 970K │ +24% │ ↑ 📈 │ │ 💼 LinkedIn │ 284K impressions│ 216K │ +31% │ ↑ 📈 │ └──────────────────────────────────────────────────────────────┘ ``` **Interactivity:** - Sortable by any column - Color-coded change column (green/amber/red) - Clickable rows to open platform detail page - Responsive table design --- ### Performance Over Time Chart **Interactive Line Chart:** ``` Engagement Trends Over Last 30 Days ┌─ Export As... [Time period: 7 Days ▼] │ 6000 │ ╱╲ ╱╲ │ ╱ ╲ ╱ ╲ 4500 │ ╱ ╲ ╱ ╲ │ ╱ ╲╱ ╲ 3000 │╱ ╲ ╱╲ │ ╲╱ ╲╱ 1500 │ │ 0 ├──────────────────────────────── Mon Tue Wed Thu Fri Sat Sun ``` **Features:** - One line per platform (color-coded: YouTube blue, Substack purple, X black, LinkedIn navy) - X-axis: dates (auto-scale based on date range filter) - Y-axis: primary metric value (auto-scale) - **Interactive tabs below chart:** ``` [Likes] [Comments] [Shares] [Saves] ``` Clicking a tab changes what metric is displayed on the chart - **Hover tooltip:** ``` UX Design Total Likes: 30.25K ``` Shows exact value + date when hovering - Responsive to date range filter (top bar) - Ability to toggle platforms on/off (click legend) - "Export As..." button for chart data --- ### Latest Content Section **Organized by connected platform.** Example for YouTube: ``` ┌───────────────────────────────────────────────────────────────┐ │ 🎬 YOUTUBE — Latest Videos │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ 🖼️ [Thumbnail] │ │ │ │ │ │ │ │ AI Agents Are Changing Sales │ │ │ │ Published: 2 days ago │ │ │ │ │ │ │ │ 42K views | 2.3× avg | 🟢 OUTPERFORMING │ │ │ │ │ │ │ │ VPH: 1.75K | Likes: 2.3K | Comments: 89 │ │ │ │ │ │ │ │ [View Video →] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ [Video 2 - Similar layout] │ │ │ └─────────────────────────────────────────────────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────┐ │ │ │ [Video 3 - Similar layout] │ │ │ └─────────────────────────────────────────────────────────┘ │ └───────────────────────────────────────────────────────────────┘ ``` **Design Details per Card:** - Platform icon + content type (Video/Article/Post) - Thumbnail (if available) - Title (clickable → original content) - Published date - Primary metric (large, bold): "42K views" - Performance ratio: "2.3× average" (muted color) - Performance classification badge: 🟢 🟡 🔴 - Secondary metrics in smaller text - External link button [View on Platform →] **Repeat for each connected platform:** - YouTube (3 latest videos) - Substack (3 latest articles) - X (3 latest posts) - LinkedIn (3 latest posts) --- ## 6. Platform Detail Pages Clicking a platform tab or KPI card opens that platform's dedicated dashboard. ### YouTube Detail Page **Header:** ``` 🎬 YouTube Performance @channel-name | 45.2K subscribers | +1.2K this period [Last 30 days ▼] [Refresh] [Export] ``` --- **Performance Summary Cards (2-column):** ``` ┌────────────────┐ ┌────────────────────┐ │ Current Perf │ │ Historical Average │ │ │ │ │ │ 142K views │ │ 108K views │ │ +31% increase │ │ 47 posts analyzed │ └────────────────┘ └────────────────────┘ ``` --- **Channel Performance Metrics (4-column, smaller cards):** ``` ┌─────────┬──────────┬──────────┬──────────────┐ │ VPH Avg │ Likes │ Comments │ Subscriber │ │ 3.2K │ 2.3K avg │ 89 avg │ Growth: +1.2K│ └─────────┴──────────┴──────────┴──────────────┘ ``` --- **Performance Trend (Line Chart):** ``` YouTube Views Over Time [Last 7 days ▼] [Likes] [Comments] [Subscribers] [Chart showing historical performance] ``` --- **Latest Videos (Detailed List):** ``` Title Published Views Ratio Status ───────────────────────────────────────────────────────────────────── AI Agents Are Changing Sales 2 days ago 42K 2.3× 🟢 How to Build AI Workflows 5 days ago 12K 0.7× 🔴 Introduction to Prompting 8 days ago 19K 1.1× 🟡 ``` Clickable rows expand to full card view. --- **AI Platform Summary:** ``` ┌────────────────────────────────────────────────────────────┐ │ 📊 Platform Summary │ │ │ │ YouTube is currently outperforming its historical │ │ baseline. Your last 3 videos averaged 1.8× your │ │ historical average, with 2 of 3 above baseline. │ │ Posting frequency is consistent (3.2 videos/week). │ │ Subscriber growth is strong (+1.2K this period). │ │ │ │ Recommendation: Continue current content strategy. │ └────────────────────────────────────────────────────────────┘ ``` --- ## 7. Content Performance Page Dedicated view for analyzing individual content pieces. **Filters:** ``` [Platform: All ▼] [Status: All ▼] [Date Range: Last 30 days ▼] ``` **Content Table:** ``` ┌─────────────────────────────────────────────────────────────────┐ │ Title Platform Published Metric Ratio Status │ ├─────────────────────────────────────────────────────────────────┤ │ AI Agents YouTube 2d ago 42K 2.3× 🟢 │ │ How to Build AI YouTube 5d ago 12K 0.7× 🔴 │ │ Intro to Prompts YouTube 8d ago 19K 1.1× 🟡 │ │ Platform Shifts Substack 1d ago 3.2K 1.5× 🟢 │ │ AI News Weekly X 2d ago 45K 0.9× 🟡 │ └─────────────────────────────────────────────────────────────────┘ ``` Sortable, filterable, searchable. --- ## 8. Audience Insights Page **Audience Growth Chart:** ``` Followers/Subscribers Over Time ┌─────────────────────────────────┐ │ 50K │ ╱╲ │ │ 45K │ ╱╲╱ ╲ │ │ 40K │ ╱╲ ╱ │ │ 35K │ ╱╲ ╱ ╲╱ │ │ 30K │ ╱╲╱ ╱ │ │ 25K │ ╱╲╱ │ │ ├───────────────────────────┤ │ Mon Tue Wed Thu Fri Sat Sun │ └─────────────────────────────────┘ ``` **Audience Breakdown (if available):** - Platform growth rates - Engagement rate trends - Top performing content themes --- ## 9. Engagement Tracker Page **Multi-Platform Engagement Comparison:** ``` Engagement Metrics Across Platforms ┌─────────────┬─────────┬────────┬─────────┐ │ Platform │ Likes │Comments│ Reposts │ ├─────────────┼─────────┼────────┼─────────┤ │ YouTube │ 2.3K │ 89 │ N/A │ │ Substack │ N/A │ 42 │ N/A │ │ X │ 45K │ 2.1K │ 8.5K │ │ LinkedIn │ 1.2K │ 234 │ 456 │ └─────────────┴─────────┴────────┴─────────┘ ``` --- ## 10. Data Architecture & Input Methods ### Automatic Data Retrieval (Live Connectors) **YouTube & X:** Fetch via MCP connectors - Account stats - Historical content (30-90 recent posts) - Latest 3 posts - Engagement metrics **Substack & LinkedIn:** Manual data entry (initially) + MCP connectors (when available) ### Manual Data Input (Fallback / Temporary) If MCP connectors unavailable, provide manual input forms: **Manual Entry Form for LinkedIn:** ``` LinkedIn Performance Update Period: [Last 30 days ▼] Profile: [Dropdown of connected profiles] Current Metrics: ├─ Total Impressions: [Input] ├─ Followers: [Input] ├─ Follower Growth: [Input] Latest Posts (Paste from CSV or enter manually): ├─ Post 1 │ ├─ Title: [Input] │ ├─ Published: [Date picker] │ ├─ Impressions: [Input] │ └─ Interactions: [Input] │ ├─ Post 2 └─ Post 3 [Add More] [Cancel] [Save] ``` Similar for Substack. --- ### Data Models **Brand** ``` id name website created_at last_updated ``` **SocialAccount** ``` id brand_id platform profile_url profile_name followers primary_metric_value data_source (live | manual) last_fetched ``` **Content** ``` id social_account_id platform external_id url title content_type (video | article | post) published_at primary_metric secondary_metrics thumbnail_url ``` **PerformanceBaseline** ``` id social_account_id metric mean median sample_size calculation_period calculated_at date_range ``` **ContentPerformance** ``` id content_id primary_metric_value historical_mean performance_ratio performance_status (outperforming | average | underperforming) calculated_at ``` --- ## 11. Calculations & Metrics ### Historical Baseline ``` For each platform, calculate mean of primary metric: Historical Mean = Σ (metric values) / count Sample Size = count of posts analyzed Default range: Last 30–90 posts (configurable by date range filter) If < 10 posts available: use all available, display sample size prominently ``` ### Performance Ratio ``` Performance Ratio = Content Metric / Historical Mean Display as: - Decimal: 2.3× - Percentage: +130% ``` ### Classification ``` 🟢 Outperforming: >= 1.20× historical mean 🟡 Around Average: 0.80× – 1.20× historical mean 🔴 Underperforming: <= 0.80× historical mean ``` ### YouTube VPH (Views Per Hour) ``` VPH = Views / Hours Since Publication Example: 42,000 views / 14 hours = 3,000 VPH ``` Display only when timestamp data is reliable. ### Engagement Rate (X, LinkedIn) ``` Engagement Rate = (Likes + Comments + Reposts) / Impressions × 100 ``` --- ## 12. Date Range Filter Behavior **Global filter affects:** - KPI card comparisons (current vs. historical) - All charts (time-series updates) - Performance table - Historical baseline calculation - Content lists (filtered to selected range) **Presets & Custom:** ``` 📅 [Last 7 days ▼] Quick Options: ├─ Last 7 days ├─ Last 14 days ├─ Last 30 days (default) ├─ Last 90 days └─ Custom Range ├─ From: [MM/DD/YYYY] └─ To: [MM/DD/YYYY] ``` --- ## 13. Real-Time Refresh **"Refresh Data" Button** (top right, all pages) - Fetches latest account data (live connectors) - Updates charts and metrics - Shows spinner during refresh - Displays: "Last updated: 2 minutes ago" - Only available for live connectors (not manual data) --- ## 14. Visual Design & Color Palette ### Color System **Status Indicators:** - 🟢 Outperforming: #10B981 (Emerald Green) - 🟡 Average: #F59E0B (Amber) - 🔴 Underperforming: #EF4444 (Red) **Platform Colors:** - YouTube: #FF0000 (Red) - Substack: #7C3AED (Purple) - X (Twitter): #000000 (Black) - LinkedIn: #0A66C2 (Navy Blue) **Neutral Palette:** - Background: #FFFFFF - Secondary BG: #F9FAFB (Light Gray) - Text Primary: #111827 (Dark Gray) - Text Secondary: #6B7280 (Medium Gray) - Borders: #E5E7EB (Light Border) - Accents: #3B82F6 (Blue) ### Typography - **Headlines (KPI numbers):** Bold, 32px–48px - **Subheadings:** 18px–24px, medium weight - **Body text:** 14px–16px, regular weight - **Labels/secondary:** 12px–14px, muted color ### Components **Cards:** - White background - Subtle shadow (0 1px 3px rgba(0,0,0,0.1)) - Rounded corners (8px) - Padding: 16px–24px - Hover state: slight elevation **Buttons:** - Primary: Blue (#3B82F6), white text - Secondary: Gray border, dark text - Hover: slight darkening + pointer - Disabled: grayed out **Charts:** - Clean lines, no excessive gradients - Smooth curves (bezier interpolation) - Subtle grid lines - Hover tooltips with exact values - Responsive to viewport **Tables:** - Zebra striping (alternating row colors) - Sortable headers (↑ ↓ indicator) - Hover row highlight - Right-aligned numbers ### Design Philosophy ✅ Modern, minimal, professional ✅ Data-forward (numbers before graphics) ✅ Executive-friendly (30-second comprehension) ✅ Fast loading (no unnecessary animations) ✅ Accessible (high contrast, readable text) ❌ Avoid: Gradients, skeuomorphism, excessive iconography ❌ Avoid: Busy layouts, dense tables, flashy animations ❌ Avoid: Generic AI aesthetics --- ## 15. Navigation & Information Architecture **Left Sidebar (Sticky):** - Logo - Main navigation (5–7 items) - Platform list (updated dynamically) - Settings/Help **Top Bar:** - Platform tabs (filterable) - Time range selector - Search bar - Notifications (future) - User menu **Breadcrumb (if needed):** ``` Overview > YouTube Performance ``` **Mobile:** - Hamburger menu (sidebar collapses) - Bottom tab bar for main navigation - Full-width cards and charts --- ## 16. Error Handling & Empty States ### Error Messages | Scenario | Message | |----------|---------| | Invalid URL | "We couldn't recognize this social profile. Check the URL and try again." | | Connection failed | "We couldn't retrieve data from this platform. Check your connection and refresh." | | Private account | "This account is private. We can't access public data." | | Rate limited | "Platform rate limit reached. Please try again in 5 minutes." | | No posts yet | "No posts found for this platform." | | Insufficient history | "Only 7 posts available. Performance comparisons based on limited sample." | ### Empty States **No platforms connected:** ``` ┌──────────────────────────────────────────┐ │ No Social Accounts Connected │ │ │ │ Add your social media profiles to get │ │ started with performance tracking. │ │ │ │ [+ Add YouTube] [+ Add X] [+ Add LinkedIn] │ [+ Add Substack] │ └──────────────────────────────────────────┘ ``` **Platform not connected:** ``` ┌──────────────────────────────────────────┐ │ YouTube isn't Connected │ │ │ │ Add your YouTube channel to see │ │ video performance and analytics. │ │ │ │ [Connect YouTube] │ │ [Add Data Manually] │ └──────────────────────────────────────────┘ ``` **No data for date range:** ``` ┌──────────────────────────────────────────┐ │ No Data Available │ │ │ │ No posts found for this date range. │ │ Try adjusting your filters. │ │ │ │ [Adjust Date Range] │ └──────────────────────────────────────────┘ ``` --- ## 17. AI Agent Responsibilities **Single Background Agent: Social Media Analyst** The agent operates invisibly in the background. No chatbot interface. ### Responsibilities 1. ✅ Connect to social platforms via MCP (YouTube, X, and later Substack/LinkedIn) 2. ✅ Retrieve account-level data (followers, primary metrics) 3. ✅ Fetch historical content (30–90 recent posts per platform) 4. ✅ Fetch latest 3 posts per platform 5. ✅ Normalize data across platforms 6. ✅ Calculate historical baselines (by date range) 7. ✅ Calculate performance ratios for recent content 8. ✅ Classify performance (outperforming/average/underperforming) 9. ✅ Generate concise platform summaries (2–3 sentences, data-backed) 10. ✅ Identify content themes/topics (if reliably detectable from titles/captions) 11. ✅ Populate dashboard with all calculated metrics ### Agent Activity Display During analysis, show progress: ``` Analyzing your social presence... ✓ Connected to YouTube ✓ Retrieved channel stats (45.2K subscribers) ✓ Retrieved 89 recent videos ✓ Retrieved latest 3 videos ✓ Calculated YouTube baseline (108K avg views) ✓ Connected to X ✓ Retrieved account stats (12.3K followers) ✓ Retrieved 157 recent posts ✓ Retrieved latest 3 posts ✓ Calculated X baseline (18.4K avg impressions) [Substack] Retrieving manual data... [LinkedIn] Retrieving manual data... ✓ Comparing recent content with baselines ✓ Generating platform summaries ✓ Analyzing content trends Analysis complete. Dashboard ready. Last updated: Just now ``` --- ## 18. API & Data Retrieval ### MCP Connectors **YouTube:** - Retrieve channel stats (name, subscribers, total views) - Retrieve video list (external_id, title, published_at, views, likes, comments) - Retrieve detailed video stats **X:** - Retrieve account stats (name, followers, total impressions) - Retrieve tweet list (external_id, text, published_at, impressions, likes, reposts) - Retrieve detailed tweet engagement **Substack (when available):** - Retrieve publication stats (name, subscribers, total reads) - Retrieve article list (external_id, title, published_at, reads, open_rate, ctr) - Retrieve detailed article metrics **LinkedIn (when available):** - Retrieve profile/company stats (name, followers, total impressions) - Retrieve post list (external_id, text/title, published_at, impressions, reactions, comments) - Retrieve detailed post engagement ### Manual Data Entry (Fallback) For LinkedIn and Substack, provide fallback forms allowing users to manually: - Enter account stats - Add recent posts (title, date, metrics) - Update performance data **Never fabricate data.** If data unavailable, display: > Data unavailable --- ## 19. Must Build (V1 Scope) ✅ Brand setup (name, website) ✅ Social platform URL inputs + connectors ✅ YouTube live integration (MCP) ✅ X live integration (MCP) ✅ Substack manual + future MCP integration ✅ LinkedIn manual + future MCP integration ✅ Left sidebar navigation (5 main sections) ✅ Platform tabs (All, YouTube, Substack, X, LinkedIn) ✅ Time period selector (7/14/30/90 days, custom) ✅ KPI cards (4-up grid, platform overview) ✅ Cross-platform comparison table (sortable) ✅ Performance over time chart (interactive, multi-metric) ✅ Latest content cards (3 per platform, detailed) ✅ Platform detail pages (dedicated dashboard per platform) ✅ Audience insights page ✅ Engagement tracker page ✅ Content performance page (detailed listing) ✅ Historical baseline calculation (transparent, configurable) ✅ Performance ratio calculation (absolute + relative) ✅ Performance classification (🟢 🟡 🔴) ✅ YouTube VPH calculation ✅ AI platform summaries (2–3 sentences, data-backed) ✅ Basic content theme detection (if reliably possible) ✅ Manual data entry forms (LinkedIn, Substack) ✅ Agent activity/progress display ✅ Search functionality ✅ Export data button ✅ Refresh data button (live connectors only) ✅ Error handling (invalid URL, connection failed, private account, etc.) ✅ Empty states (no platforms, insufficient data, etc.) ✅ Responsive design (desktop + mobile) ✅ Professional visual design (modern, minimal, data-forward) --- ## 20. Must NOT Build (V1 Scope) ❌ Competitor tracking ❌ External trend monitoring ❌ Content recommendations ❌ Content generation ❌ Content calendar/scheduling ❌ Social publishing ❌ Team collaboration ❌ Multiple brands per account ❌ Notifications/alerts ❌ Complex scoring systems ❌ Chatbot interface ❌ Automated social posting ❌ Ad performance tracking ❌ ROI attribution --- ## 21. Success Criteria ### Leadership (30-second understanding) 1. How are our social channels performing today? 2. Which channels are improving/declining? 3. How does current performance compare with historical? 4. What are our top-performing recent posts? ### Social Team (Deep Analysis) 1. How did each of my latest posts perform? 2. vs. our normal performance? 3. Which content is outperforming/underperforming? 4. What content themes/topics work best? ### Technical 1. Dashboard loads in <2 seconds 2. Charts render smoothly 3. Data refreshes without page reload 4. Date filters update all metrics instantly 5. Manual data entry works seamlessly 6. No data is fabricated or estimated --- ## 22. UI/UX Principles 1. **Information hierarchy:** Numbers → comparison → interpretation → detail 2. **Color coding:** Immediate visual scanning (green/amber/red) 3. **Minimal onboarding:** 2–3 steps to first dashboard 4. **No chatbot:** Background agent, not conversational 5. **Professional tone:** Executive-ready, not playful 6. **Fast interactivity:** Instant filter updates, no loading spinners 7. **Accessible:** High contrast, readable font sizes, keyboard navigation 8. **Mobile-first responsive:** Works on phone, tablet, desktop --- ## 23. The Product in One Sentence > **A professional, real-time social media intelligence dashboard showing leadership cross-platform performance vs. historical baselines, while giving social teams detailed insights into individual content performance—with a polished, modern UI, live data integration, manual data entry, and zero fabricated metrics.** --- ## 24. Reference Design Style This dashboard should match the aesthetic and interactivity of industry-standard tools like: - **Buzzed** (modern, clean, data-focused) - **Buffer Analytics** (professional, accessible) - **Sprout Social** (detailed but uncluttered) - **Hootsuite** (robust without being overwhelming) **Key visual parallels:** - Left sidebar navigation - Top horizontal platform tabs - KPI cards with icons and trends - Interactive line charts with hover tooltips - Multi-metric selector tabs within charts - Clean typography and whitespace - Color-coded status indicators --- ## 25. Builder Instructions Build this as a **fully functional, production-ready application**, not a prototype. ### Prioritize (in order) 1. **Working data retrieval** (YouTube, X via MCP; manual forms for Substack/LinkedIn) 2. **Accurate calculations** (baselines, ratios, classifications) 3. **Correct historical comparisons** (date-range filtering) 4. **Clean information architecture** (sidebar nav, platform tabs, detail pages) 5. **Fast dashboard rendering** (<2s load, smooth interactions) 6. **Reliable missing data handling** (show "Data unavailable" never guess) 7. **Professional visual presentation** (modern, minimal, executive-ready) ### When in doubt - Choose **reliability & polish** over additional features - Choose **accuracy** over speed - Choose **clarity** over comprehensiveness - Choose **simplicity** over complexity ### Final Feeling User should feel: > *"I can finally see everything my social team is doing in one place, on a professional tool that doesn't look like an AI demo, and immediately understand whether we're performing better or worse than normal."* --- ## 26. Appendix: Platform-Specific Metrics Reference ### YouTube | Level | Metric | Source | |-------|--------|--------| | Account | Subscribers, Total Views | API | | Account | Posting Frequency | Calculated | | Content | Views, Likes, Comments | API | | Content | VPH (Views Per Hour) | Calculated | ### Substack | Level | Metric | Source | |-------|--------|--------| | Account | Subscribers, Total Reads | Manual/API | | Account | Posting Frequency | Calculated | | Content | Reads, Open Rate, CTR | Manual/API | | Content | Subscriber Growth | Manual/API | ### X | Level | Metric | Source | |-------|--------|--------| | Account | Followers, Total Impressions | API | | Account | Posting Frequency | Calculated | | Content | Impressions, Likes, Reposts, Replies | API | | Content | Engagement Rate | Calculated | ### LinkedIn | Level | Metric | Source | |-------|--------|--------| | Account | Followers, Total Impressions | Manual/API | | Account | Posting Frequency | Calculated | | Content | Impressions, Reactions, Comments, Reposts | Manual/API | | Content | Engagement Rate | Calculated | --- **Document Version:** 2.0 **Last Updated:** August 2026 **Status:** Ready for Development