Skill: marlowne12/pinterest-trends-dashboard (version 1.0.0)

--- name: pinterest-trends-dashboard description: > Real-time visualization dashboard showing trending ClickBank niches, Pinterest search volume estimates, and affiliate payout potential. Helps users identify high-opportunity affiliate niches for Pinterest-based marketing. Part of Max's ClickBank + Pinterest automation suite for passive income generation. --- # Pinterest Trends Dashboard An interactive dashboard visualizing ClickBank niche profitability, trending search terms on Pinterest, and opportunity scoring. Purpose: help affiliates make data-driven niche decisions for Pinterest-based affiliate marketing. ## Status **MVP Specification Complete** — Ready for Phase 1 build. See `BRIEF_PRD_ARCH.md` for full specification. ## Core Features (MVP) ### 1. Niche Rankings Dashboard - Top 10 ClickBank niches ranked by 2025 revenue data - Metrics per niche: - Est. annual revenue - Avg. affiliate payout - Competition score (1–10) - Year-over-year trend (↑ ↓ →) ### 2. Sub-Niche Drilldown - Click any niche → expand to top 3–5 sub-niches - Example: "Dietary Supplements" → "Fat Burning," "Muscle Growth," "Blood Sugar" - Show top product examples + avg payouts per sub-niche ### 3. Pinterest Search Trends - Monthly search volume estimates for niche keywords - 5 trending search terms per niche - Seasonal demand indicators ### 4. Opportunity Scoring Algorithm ``` Score = (Avg Payout × Search Volume) / (Competition Level) ``` - Higher score = better opportunity - Highlights "hidden gems" (low competition, good payout) ### 5. Action Buttons - **View Products on ClickBank** — Direct link to niche products - **Research on Pinterest** — Pre-filled Pinterest search - **Create Board** — Board strategy guide (future feature) ## Tech Stack - **Frontend:** Next.js (React 19) + Tailwind CSS - **Data:** Static JSON (niches-2025.json) + optional API routes - **Deployment:** Vercel (free tier) - **Build Time:** 3–4 hours (MVP) ## Data Structure ```json { "niches": [ { "id": "dietary-supplements", "name": "Dietary Supplements", "rank": 1, "annualRevenue": 450000000, "avgPayout": 150, "competitionScore": 9, "trendYoY": "stable", "pinterestSearchVolume": 250000, "subNiches": [ { "name": "Fat Burning", "topProducts": ["Mitolyn", "Leanbiome"], "avgPayout": 160 } ] } ], "lastUpdated": "2026-03-08" } ``` ## Component Architecture ``` App Layout ├── Header (Title + Last Updated) ├── Left Sidebar │ └── NicheSelector ├── Center │ └── NicheChart (Rankings + Metrics) ├── Right Sidebar │ ├── SubNicheDetails │ └── SearchTrends └── Footer (Data Sources) ``` ### Key Components | Component | Purpose | |-----------|---------| | `NicheChart` | Bar/card ranking of niches, click to select | | `SubNicheDetails` | Shows sub-niches + top products for selection | | `SearchTrends` | Pinterest search volume + trending terms | | `OpportunityScore` | Score calculation + "hidden gems" highlight | ## Integration with Affiliate Automation Suite ### 1. ClickBank Scraper → Dashboard ``` clickbank-scraper (daily job) ↓ latest.json (product data) ↓ pinterest-trends-dashboard (niche opportunity view) ↓ [User selects niche] ↓ Auto-generate Pinterest pins (n8n workflow) ``` ### 2. User Workflow 1. Open dashboard 2. View top niches + scores 3. Click "Research on Pinterest" → see trending keywords 4. Click "View Products" → ClickBank affiliate links 5. (Future) Auto-generate pins based on selection ### 3. n8n Workflow Integration ```javascript // n8n "Read From Dashboard API" node const selectedNiche = {{ $json.selectedNiche }}; const topProducts = {{ $json.products }}; // Generate Pinterest pins automatically return { niche: selectedNiche, productCount: topProducts.length, action: "generate_pins" }; ``` ## Development Roadmap ### MVP (Phase 1) — 4 hours - [x] Specification complete - [ ] Next.js project scaffold - [ ] Data file (niches-2025.json) - [ ] NicheChart component - [ ] SubNicheDetails component - [ ] Styling (Tailwind) - [ ] Deploy to Vercel ### Phase 2 — Pinterest API Integration - [ ] Real-time Pinterest search volume API - [ ] Trending term discovery - [ ] Seasonal demand tracking ### Phase 3 — ClickBank API Integration - [ ] Live gravity scores - [ ] Real-time payout data - [ ] Product-level filtering ### Phase 4 — User Features - [ ] User accounts (saved niches) - [ ] Email alerts (trending shifts) - [ ] Export niche analysis as PDF ### Phase 5 — Content Generation - [ ] Auto-generate Pinterest pin templates - [ ] Blog post outlines per niche - [ ] Email swipe copy ## Deployment ### Build ```bash npm run build npm run start # local testing ``` ### Deploy to Vercel ```bash git push origin main # Vercel auto-deploys on push ``` ### Data Updates Update `data/niches-2025.json` monthly with latest ClickBank + Pinterest trends: ```bash node scripts/update-niche-data.js # future: automated script ``` ## Data Sources - **ClickBank Niches:** Official ClickBank 2025 niche rankings (blog post) - **Affiliate Payouts:** ClickBank published averages by category - **Pinterest Search Volume:** Pinterest Trends API (or manual estimates) - **Competition Data:** Derived from gravity scores + search volume ## Success Metrics 1. **Usability:** Identify niche + view products in <2 minutes 2. **Accuracy:** Data matches ClickBank official rankings (high confidence) 3. **Engagement:** Track click-through rates to ClickBank affiliate links 4. **Time to Value:** Dashboard fully functional within 4 hours of starting build ## Integration with OpenClaw Use as a sub-agent view or scheduled report generator: ```bash # Run dashboard builder as cron job openclaw cron add pinterest-dashboard-updater \ --schedule "0 9 * * 0" \ --command "cd max-co/products/pinterest-trends-dashboard && npm run build" # Or spawn as interactive session claude-code "Build and deploy Pinterest Trends Dashboard" ``` ## File Structure ``` pinterest-trends-dashboard/ ├── BRIEF_PRD_ARCH.md # Full specification (this doc) ├── SKILL.md # This skill definition ├── app/ │ ├── page.tsx # Main dashboard │ ├── layout.tsx # Root layout │ └── api/ │ └── niche-data.ts # Data endpoint (optional) ├── components/ │ ├── NicheChart.tsx # Rankings chart │ ├── SubNicheDetails.tsx # Drilldown view │ ├── SearchTrends.tsx # Pinterest trends │ └── OpportunityScore.tsx # Opportunity ranking ├── data/ │ └── niches-2025.json # Static niche data ├── styles/ │ └── globals.css # Tailwind config ├── package.json └── next.config.js ``` ## Author Max @ max-co.digital — Autonomous affiliate marketing automation for passive income. ## License Proprietary — Part of Digital Helper Agency / max-co product suite. ## Questions? See `BRIEF_PRD_ARCH.md` for implementation details or integration examples.

path: BRIEF_PRD_ARCH.md
content: # Pinterest Trends Dashboard — Brief + PRD + Architecture

**Created:** 2026-03-08 22:14 PT  
**Status:** Ready for Review  
**Author:** Max (Autonomous Build)

---

## Executive Summary

A real-time visualization tool showing trending ClickBank niches, recommended product categories, and estimated affiliate payout potential. Purpose: help users identify high-opportunity niches for Pinterest-based affiliate marketing.

**Goal:** Convert research into a decision-making dashboard. Target user: affiliates deciding what niche to enter.

---

## Product Brief

### What We're Building
An interactive dashboard that aggregates ClickBank niche data, trending search terms on Pinterest, and affiliate payout data—then surfaces the top opportunities ranked by revenue potential and competition level.

### Why
Users need to make niche decisions quickly. Raw data exists (ClickBank published their 2025/2026 niche rankings). We package it visually with:
- Trending search volume estimates
- Average payout ranges by niche
- Competition heat map
- Recommended sub-niches
- Affiliate link generator shortcut

### Who
Beginners to intermediate affiliates exploring their first niche or pivoting.

### Key Differentiator
Most tools show "top niches" as a static list. We show *dynamic trends* + *payout potential* + *real search volume* on Pinterest specifically.

---

## Product Requirements Document (PRD)

### Core Features (MVP)

#### 1. Niche Rankings Dashboard
- **Display:** Top 10 ClickBank niches ranked by 2025 revenue data
- **Data shown per niche:**
  - Niche name (e.g., "Dietary Supplements")
  - Est. annual revenue (from ClickBank 2025 data)
  - Avg. affiliate payout ($120–$200+)
  - Competition score (1–10, based on gravity/search volume)
  - Growth trend (↑ ↓ → year-over-year)

#### 2. Sub-Niche Drilldown
- Click any niche → expand to show top 3–5 sub-niches
- Example: Dietary Supplements → "Fat Burning," "Muscle Growth," "Blood Sugar," etc.
- Show top product examples for each sub-niche

#### 3. Pinterest Search Trends
- Estimate monthly search volume for niche keywords on Pinterest
- Show 5 trending search terms related to selected niche
- Indicate seasonal demand (if applicable)

#### 4. Opportunity Scoring
- Simple algorithm: (Avg Payout × Search Volume) / (Competition Level)
- Higher score = better opportunity
- Highlight "hidden gems" (lower competition, decent payout)

#### 5. Action Buttons
- "View Products on ClickBank" → external link to niche category
- "Research on Pinterest" → prefilled Pinterest search
- "Create Board" → guide to Pinterest board strategy (future)

### Design

**Layout:**
- Header: "Pinterest Affiliate Trends Dashboard"
- Left sidebar: Niche selector (clickable list)
- Center: Main chart (horizontal bar chart or cards showing rankings)
- Right sidebar: Detailed view for selected niche
- Footer: Data sources + last update timestamp

**Visual Style:**
- Clean, minimal (Tailwind CSS)
- Color coding: Green (hot opportunity), Yellow (moderate), Red (high competition)
- Interactive: Hover for details, click to expand

**Responsive:**
- Works on desktop, tablet (portfolio use case)

---

## Architecture

### Tech Stack
- **Frontend:** Next.js (React) + Tailwind CSS
- **Data:** Static JSON (embedded) + optional API route for future real-time updates
- **Deployment:** Vercel (zero-config, integrates with Next.js)

### File Structure
```
pinterest-trends-dashboard/
├── app/
│   ├── page.tsx          # Main dashboard component
│   ├── layout.tsx        # Root layout
│   └── api/
│       └── niche-data.ts # JSON endpoint (optional for future)
├── components/
│   ├── NicheChart.tsx    # Main ranking chart
│   ├── SubNicheDetails.tsx # Drilldown view
│   ├── SearchTrends.tsx  # Pinterest search trends
│   └── OpportunityScore.tsx # Scoring display
├── data/
│   └── niches-2025.json  # ClickBank niche data + Pinterest estimates
├── styles/
│   └── globals.css       # Tailwind config
└── public/
    └── favicon.ico
```

### Data Structure (niches-2025.json)

```json
{
  "niches": [
    {
      "id": "dietary-supplements",
      "name": "Dietary Supplements",
      "rank": 1,
      "annualRevenue": 450000000,
      "avgPayout": 150,
      "competitionScore": 9,
      "trendYoY": "stable",
      "pinterestSearchVolume": 250000,
      "subNiches": [
        {
          "name": "Fat Burning",
          "topProducts": ["Mitolyn", "Leanbiome"],
          "avgPayout": 160
        },
        {
          "name": "Muscle Growth",
          "topProducts": ["Alpha Tonic"],
          "avgPayout": 140
        }
      ]
    },
    // ... 9 more niches
  ],
  "lastUpdated": "2026-03-08"
}
```

### Component Breakdown

**NicheChart.tsx**
- Displays ranked list of niches
- Bar chart or card grid showing ranking + key metrics
- Click handler to select niche → triggers drilldown

**SubNicheDetails.tsx**
- Shows sub-niches for selected parent niche
- Displays top products + avg payouts
- "View on ClickBank" button per sub-niche

**SearchTrends.tsx**
- Pinterest search volume estimate for niche keywords
- Trending terms (e.g., "weight loss supplements," "best fat burner")
- Seasonal spikes (if applicable)

**OpportunityScore.tsx**
- Calculate and display score formula
- Identify "hidden gems" (high score, low competition)
- Rank niches by score

### Pages

**`page.tsx` (Main Dashboard)**
```
Header
├── Title + description
├── Last updated (data source)
└── Quick stats (total niches, avg payout, etc.)

Main Layout
├── Left Sidebar (Niche Selector)
├── Center (NicheChart)
├── Right Sidebar (SubNicheDetails + SearchTrends)
└── Bottom (Action Buttons)
```

---

## Implementation Notes

### Data Sources
- ClickBank niche rankings: 2025 official blog post (fetched & cached)
- Pinterest search volume: Estimated from Pinterest Trends API (or manual estimates)
- Payout data: ClickBank published averages by niche

### Future Enhancements (Post-MVP)
1. Real-time Pinterest search API integration
2. ClickBank API for live payout/gravity data
3. User accounts → save favorite niches
4. Email alerts for trending shifts
5. Affiliate link prefilling

### Deployment
- Build: `npm run build` (Next.js static export)
- Deploy: Push to GitHub → Vercel auto-deploys on `main`
- Cost: Free tier (Vercel)

---

## Success Metrics
1. **Usability:** User can identify a niche + view top products in <2 minutes
2. **Accuracy:** Data matches ClickBank official niches (confidence: high)
3. **Engagement:** Click-through to ClickBank affiliate links (future analytics)

---

## Timeline
- **Design mockup:** 2 hours (this doc + Figma sketch)
- **Build (MVP):** 3–4 hours (Next.js + data embedding)
- **Deploy:** 30 minutes (Vercel)
- **Review:** Marlon feedback + iteration

**Ready to build?** Waiting for approval to start coding.


path: DESIGN_MOCKUPS/DESIGN_RATIONALE.md
content: # Design Rationale — Pinterest Trends Dashboard

**Created:** 2026-03-10  
**Author:** Max (Design Subagent)

---

## Design Philosophy

**"Data-rich, decision-simple."** Affiliate marketers need to scan opportunities fast and act. Every pixel earns its place by either informing a decision or enabling an action.

---

## Layout Decisions

### 1. Dashboard (Main View)
- **Three-column layout** (sidebar + main + detail panel): Matches the PRD spec and follows the "master-detail" pattern familiar from tools like Ahrefs, SEMrush, and analytics dashboards.
- **Left sidebar as niche navigator:** Persistent, scannable list. Users can jump between niches without losing context. Badge-style competition indicators give at-a-glance filtering.
- **Center area as card grid (not a table):** Cards are more scannable than rows for non-technical users. Each card is a self-contained decision unit with ranking, revenue, payout, and opportunity score.
- **KPI strip at top:** Four summary cards (Total Niches, Avg Payout, Top Opportunity, Hidden Gems) orient the user immediately. This is standard SaaS dashboard pattern.

### 2. Trend Detail View
- **Full-width takeover with back navigation:** When drilling into a niche, the user needs focus. Side panels would be too cramped for sub-niche data + trends + products.
- **Two-column split:** Left for sub-niche breakdown (what to promote), right for Pinterest search trends (where the demand is). Maps directly to the affiliate's mental model: "What product?" → "Where's the traffic?"
- **Inline product cards:** Show top ClickBank products with payout prominently displayed. The payout is the #1 decision driver.

### 3. Filter Panel
- **Slide-over from left:** Doesn't navigate away from dashboard context. Users can adjust filters and see results update behind the panel.
- **Range sliders for quantitative filters:** More intuitive than number inputs for competition score, payout ranges, search volume.
- **Preset buttons:** "Hidden Gems," "High Volume," "Top Earners" — one-tap filter combos for common affiliate strategies.

### 4. Export Modal
- **Centered modal with format selection:** Simple, focused task. CSV for spreadsheet users, PDF for sharing, PNG for social proof.
- **Preview of what's being exported:** Reduces "did I export the right thing?" anxiety.

### 5. Mobile View
- **Single-column stack:** Sidebar becomes a collapsible hamburger menu. Cards stack vertically. Detail view is full-screen.
- **Bottom action bar:** Thumb-friendly zone for primary actions (filter, export, search).

---

## Color System

| Token | Hex | Usage |
|-------|-----|-------|
| `primary` | `#E60023` | Pinterest red — brand alignment, CTAs |
| `primary-dark` | `#AD081B` | Hover states, active indicators |
| `accent` | `#0076D3` | Links, secondary actions, info states |
| `success` | `#10B981` | Hot opportunities, growth indicators, low competition |
| `warning` | `#F59E0B` | Moderate signals, caution states |
| `danger` | `#EF4444` | High competition, declining trends |
| `bg-primary` | `#FAFAFA` | Page background |
| `bg-card` | `#FFFFFF` | Card surfaces |
| `bg-sidebar` | `#1A1A2E` | Dark sidebar for contrast and focus |
| `text-primary` | `#111827` | Headings, primary text |
| `text-secondary` | `#6B7280` | Descriptions, metadata |
| `border` | `#E5E7EB` | Card borders, dividers |

**Why Pinterest Red?** The entire product is about Pinterest affiliate marketing. Using Pinterest's brand color as the primary creates instant mental association. It also provides strong contrast against the dark sidebar and white cards.

**Why dark sidebar?** Separates navigation from content. Creates visual hierarchy. The dark sidebar is a SaaS convention (Notion, Linear, Vercel) that signals "this is a professional tool."

---

## Typography

- **Font:** Inter (system fallback: -apple-system, sans-serif) — the SaaS standard. Clean, readable at all sizes, excellent number rendering.
- **Scale:** 
  - Hero/KPI numbers: 2rem bold
  - Section headers: 1.25rem semibold  
  - Body: 0.875rem regular
  - Labels/metadata: 0.75rem medium, uppercase tracking

---

## Interaction Patterns

1. **Hover → reveal details:** Cards show expanded info on hover (desktop). Reduces initial visual noise.
2. **Click sidebar → filter center:** Selecting a niche in sidebar highlights it and scrolls the center to that card.
3. **Click card → drill down:** Opens trend detail view with transition.
4. **Keyboard navigable:** Arrow keys in sidebar, Enter to select, Esc to close modals.

---

## Accessibility Considerations

- Color is never the only indicator (icons + labels accompany green/yellow/red)
- Contrast ratios meet WCAG AA (4.5:1 for text, 3:1 for large text)
- Focus rings on all interactive elements
- Semantic HTML (nav, main, aside, section)
- ARIA labels on icon-only buttons

---

## Responsive Strategy

| Breakpoint | Layout |
|------------|--------|
| ≥1280px | Full three-column (sidebar + main + detail) |
| 1024-1279px | Two-column (collapsible sidebar + main) |
| 768-1023px | Single column, sidebar as overlay |
| <768px | Full mobile, bottom nav bar |

---

## Why These Screens?

1. **Dashboard** — The home base. 80% of time spent here.
2. **Trend Detail** — The deep-dive. Where decisions get made.
3. **Filter Panel** — Power user feature. Differentiates from static lists.
4. **Export Modal** — Conversion/retention feature. Makes data portable.
5. **Mobile Preview** — Proves portfolio-readiness on any device.

These five screens cover the complete user journey: Browse → Filter → Analyze → Decide → Export.


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)