How to Build a Competitive Intelligence Dashboard with StackPeek API

Your competitors change their technology stacks more often than you think. A company migrating from React to Vue signals a major replatform. A startup adding Stripe reveals monetization plans. A competitor dropping Google Analytics for Segment suggests a data maturity leap. These signals are invisible unless you are actively tracking them.

Enterprise competitive intelligence tools like BuiltWith ($295/mo) and Wappalyzer ($250/mo) charge thousands per year for this data. But the core capability — detecting technologies on a website — is available through the StackPeek API starting at $9/month. In this guide, you will build a fully functional competitive intelligence dashboard using HTML, JavaScript, and the StackPeek API that displays competitor tech stacks side-by-side and tracks changes over time.

Why Tech Stack Intelligence Matters

Technology choices are one of the strongest signals in business intelligence. Unlike revenue estimates or headcount data that get stale fast, a company's tech stack is a real-time reflection of their priorities, budget, and technical direction.

Here is what different technology signals tell you:

• Framework migration (e.g., jQuery to React): The company is investing in modernization and likely hiring frontend engineers.
• Payment processor added (e.g., Stripe appears): They are building or launching a paid product.
• Analytics upgrade (e.g., GA to Segment + Amplitude): They are getting serious about data-driven decisions and likely scaling their growth team.
• CDN change (e.g., no CDN to Cloudflare): Performance is becoming a priority, possibly due to scaling traffic.
• CMS migration (e.g., WordPress to Webflow): The marketing team is gaining more autonomy from engineering.

For sales teams, this data is gold. If you sell a monitoring tool and a prospect just adopted React but has no error tracking, that is a warm lead. If you sell a Shopify app and a competitor just switched to Shopify, that is an expansion opportunity. According to Forrester, companies using technographic data in their sales process see 36% higher win rates compared to those relying on firmographic data alone.

For growth hackers and business analysts, tech stack tracking reveals market trends before they show up in analyst reports. When three of your five competitors add the same A/B testing tool in the same quarter, that is a signal about the market's maturity and priorities.

Architecture Overview

The dashboard you will build has three core capabilities:

1. Scan — Detect technologies on any competitor's website via the StackPeek API
2. Compare — Display multiple competitors' stacks side-by-side in a visual grid
3. Track — Store snapshots over time and surface diffs when technologies change

The stack is intentionally simple: a single HTML file with vanilla JavaScript, localStorage for persistence, and the StackPeek REST API. No build tools, no framework, no backend. You can deploy it to Firebase Hosting, Cloudflare Pages, or even open it as a local file.

Step 1: Scanning a Competitor with the API

The StackPeek API accepts a URL and returns a JSON object with every detected technology, its category, and a confidence score. Here is the simplest possible call:

curl "https://us-central1-todd-agent-prod.cloudfunctions.net/stackpeekApi/api/v1/detect?url=https://linear.app"

Response:

{
  "url": "https://linear.app",
  "technologies": [
    { "name": "React", "category": "framework", "confidence": 0.96 },
    { "name": "Next.js", "category": "framework", "confidence": 0.91 },
    { "name": "Vercel", "category": "hosting", "confidence": 0.94 },
    { "name": "Cloudflare", "category": "cdn", "confidence": 0.99 },
    { "name": "Segment", "category": "analytics", "confidence": 0.88 },
    { "name": "Stripe", "category": "payments", "confidence": 0.92 }
  ],
  "scanTime": 312
}

In JavaScript, the same call looks like this:

const API_BASE = "https://us-central1-todd-agent-prod.cloudfunctions.net/stackpeekApi/api/v1/detect";

async function scanCompetitor(url) {
  const response = await fetch(`${API_BASE}?url=${encodeURIComponent(url)}`);
  const data = await response.json();
  return data;
}

// Scan three competitors in parallel
const competitors = [
  "https://linear.app",
  "https://shortcut.com",
  "https://asana.com"
];

const results = await Promise.all(competitors.map(scanCompetitor));
console.log(results);

Each scan costs one API credit. On the free tier you get 100 scans per day. The Starter plan at $9/month gives you 5,000 scans — enough to track 50 competitors daily with room to spare. Compare that to BuiltWith's $295/month for similar programmatic access.

Step 2: Building the Side-by-Side Dashboard

The core of the dashboard is a comparison grid that shows each competitor's technologies organized by category. Here is the complete HTML and JavaScript for a working dashboard:

<!DOCTYPE html>
<html>
<head>
  <title>Competitive Intelligence Dashboard</title>
  <style>
    body { font-family: system-ui; background: #0a0a0f; color: #eee; padding: 2rem; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
    .card { background: #12121a; border: 1px solid #222; border-radius: 12px; padding: 1.5rem; }
    .card h3 { color: #22d3ee; margin-bottom: 1rem; font-size: 14px; }
    .tech-tag { display: inline-block; background: rgba(34,211,238,0.1); color: #22d3ee;
      padding: 4px 10px; border-radius: 6px; font-size: 12px; margin: 3px; }
    .category { color: #666; font-size: 11px; text-transform: uppercase;
      margin-top: 12px; letter-spacing: 0.05em; }
    input { background: #12121a; border: 1px solid #333; color: #eee;
      padding: 10px 16px; border-radius: 8px; width: 300px; font-size: 14px; }
    button { background: #22d3ee; color: #0a0a0f; border: none;
      padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; }
  </style>
</head>
<body>
  <h1>CI Dashboard</h1>
  <div style="margin: 1.5rem 0">
    <input id="urlInput" placeholder="https://competitor.com" />
    <button onclick="addCompetitor()">Scan</button>
  </div>
  <div id="grid" class="grid"></div>

  <script>
  const API = "https://us-central1-todd-agent-prod.cloudfunctions.net/stackpeekApi/api/v1/detect";
  const competitors = JSON.parse(localStorage.getItem("ci-competitors") || "[]");

  async function addCompetitor() {
    const url = document.getElementById("urlInput").value.trim();
    if (!url) return;
    const res = await fetch(`${API}?url=${encodeURIComponent(url)}`);
    const data = await res.json();
    data.scannedAt = new Date().toISOString();
    competitors.push(data);
    localStorage.setItem("ci-competitors", JSON.stringify(competitors));
    render();
  }

  function render() {
    const grid = document.getElementById("grid");
    grid.replaceChildren();  // Clear existing content safely
    competitors.forEach(c => {
      const card = document.createElement("div");
      card.className = "card";
      const h3 = document.createElement("h3");
      h3.textContent = c.url;
      card.appendChild(h3);
      const grouped = {};
      (c.technologies || []).forEach(t => {
        (grouped[t.category] = grouped[t.category] || []).push(t);
      });
      Object.entries(grouped).forEach(([cat, techs]) => {
        const label = document.createElement("div");
        label.className = "category";
        label.textContent = cat;
        card.appendChild(label);
        techs.forEach(t => {
          const tag = document.createElement("span");
          tag.className = "tech-tag";
          tag.textContent = t.name;
          card.appendChild(tag);
        });
      });
      grid.appendChild(card);
    });
  }

  render();
  </script>
</body>
</html>

This gives you a functional dashboard in under 60 lines of JavaScript. Enter a competitor URL, click Scan, and the StackPeek API returns their full technology profile. Each competitor gets a card showing technologies grouped by category. Data persists across sessions using localStorage.

Step 3: Tracking Changes Over Time

Static snapshots are useful. Change detection is powerful. The real value of a competitive intelligence dashboard is knowing when a competitor changes their stack, not just what it looks like today.

Here is a function that compares two scan snapshots and returns the differences:

function diffSnapshots(previous, current) {
  const prevTech = new Set(previous.technologies.map(t => t.name));
  const currTech = new Set(current.technologies.map(t => t.name));

  const added = [...currTech].filter(t => !prevTech.has(t));
  const removed = [...prevTech].filter(t => !currTech.has(t));

  return { added, removed, changed: added.length > 0 || removed.length > 0 };
}

// Example usage
const march = { technologies: [
  { name: "React" }, { name: "Google Analytics" }, { name: "AWS" }
]};
const april = { technologies: [
  { name: "Vue" }, { name: "Segment" }, { name: "AWS" }, { name: "Stripe" }
]};

const diff = diffSnapshots(march, april);
// diff.added   → ["Vue", "Segment", "Stripe"]
// diff.removed → ["React", "Google Analytics"]

To automate this, run a scan on a schedule using a cron job or a serverless function. Here is a Node.js script that scans a list of competitors, compares to the previous snapshot, and logs any changes:

const fs = require("fs");
const API = "https://us-central1-todd-agent-prod.cloudfunctions.net/stackpeekApi/api/v1/detect";

const COMPETITORS = ["https://linear.app", "https://notion.so", "https://clickup.com"];
const HISTORY_FILE = "./scan-history.json";

async function runDailyScan() {
  const history = fs.existsSync(HISTORY_FILE)
    ? JSON.parse(fs.readFileSync(HISTORY_FILE))
    : {};

  for (const url of COMPETITORS) {
    const res = await fetch(`${API}?url=${encodeURIComponent(url)}`);
    const scan = await res.json();
    const prev = history[url]?.latest;

    if (prev) {
      const diff = diffSnapshots(prev, scan);
      if (diff.changed) {
        console.log(`[CHANGE] ${url}`);
        console.log(`  Added: ${diff.added.join(", ") || "none"}`);
        console.log(`  Removed: ${diff.removed.join(", ") || "none"}`);
        // Send alert via Slack, email, or webhook
      }
    }

    history[url] = {
      latest: scan,
      snapshots: [...(history[url]?.snapshots || []), {
        date: new Date().toISOString(),
        technologies: scan.technologies
      }]
    };
  }

  fs.writeFileSync(HISTORY_FILE, JSON.stringify(history, null, 2));
}

runDailyScan();

Run this script daily with cron or a service like CronPeek to ensure it executes reliably:

# Run daily at 6 AM
0 6 * * * node /path/to/daily-scan.js

Over time, your scan-history.json file builds a timeline of every competitor's technology evolution. You can visualize this in the dashboard by adding a timeline view that shows when technologies were added or removed.

Step 4: Visualizing the Data

Raw JSON is useful for scripts but not for stakeholders. Here is how to add a visual comparison to your dashboard that creates a matrix table showing which competitors use which technologies:

function renderComparisonTable(scans, container) {
  // Collect all unique technologies across competitors
  const allTech = new Set();
  scans.forEach(s => s.technologies.forEach(t => allTech.add(t.name)));

  const table = document.createElement("table");
  const headerRow = document.createElement("tr");
  const thTech = document.createElement("th");
  thTech.textContent = "Technology";
  headerRow.appendChild(thTech);

  scans.forEach(s => {
    const th = document.createElement("th");
    th.textContent = new URL(s.url).hostname;
    headerRow.appendChild(th);
  });
  table.appendChild(headerRow);

  allTech.forEach(tech => {
    const row = document.createElement("tr");
    const nameCell = document.createElement("td");
    nameCell.textContent = tech;
    row.appendChild(nameCell);

    scans.forEach(s => {
      const cell = document.createElement("td");
      const found = s.technologies.find(t => t.name === tech);
      cell.textContent = found
        ? `✓ ${(found.confidence * 100).toFixed(0)}%`
        : "—";
      cell.style.color = found ? "#22d3ee" : "#444";
      row.appendChild(cell);
    });
    table.appendChild(row);
  });

  container.replaceChildren(table);
}

This produces a matrix view where each row is a technology and each column is a competitor. A checkmark with confidence percentage means the technology was detected. A dash means it was not. At a glance, you can see who uses Stripe, who has a CDN, and who is still running jQuery.

Use Cases for Competitive Intelligence Dashboards

1. Sales Lead Qualification

Sales teams spend hours researching prospects before outreach. A CI dashboard automates the technographic research. If you sell a React performance monitoring tool, scan your prospect list and instantly filter for companies running React. The API response tells you not just that they use React but also what else is in their stack, revealing cross-sell and upsell opportunities.

A typical workflow: import 500 prospect URLs from your CRM, scan them all with the StackPeek API (costs $9/month on the Starter plan), filter for your target technology, and push qualified leads back to your CRM with technographic tags.

2. M&A Due Diligence

When evaluating an acquisition target, their public-facing technology stack reveals a surprising amount about their engineering maturity and technical debt. A company still running jQuery and PHP might have significant modernization costs. A company on Next.js, Vercel, and Stripe is likely running a more modern and maintainable codebase.

Investment analysts use tech stack data to assess technical risk and estimate integration costs. A CI dashboard lets you scan the target and all their competitors in minutes, producing a landscape view of the market's technical sophistication.

3. Market Research and Trend Analysis

Track the same 100 companies in a vertical over six months and you will see technology adoption trends before they appear in industry reports. If 30% of fintech startups adopted a specific authentication provider in Q1, that is a signal for the entire market. You can generate reports like:

• Framework adoption: 62% of scanned SaaS companies use React, 18% use Vue, 12% use Angular
• Payment trends: Stripe adoption grew from 45% to 71% in the tracked cohort over 6 months
• CDN usage: 84% of companies now use a CDN, up from 67% in the previous scan

4. Partner and Integration Research

If you are building a product that integrates with other tools, a CI dashboard tells you which integrations matter most. Scan your customers' and prospects' websites to find the most commonly used technologies in your market. Build integrations for the technologies that appear most frequently.

5. Competitive Product Strategy

Product managers use tech stack data to inform strategy. If your main competitor just added Segment and Amplitude, they are investing in product-led growth. If they switched from a custom CMS to Webflow, marketing now owns the website. These signals inform your own product roadmap and go-to-market strategy.

StackPeek vs. Enterprise CI Tools

There are established players in the competitive intelligence space. Here is how they compare for tech stack tracking:

BuiltWith and Wappalyzer detect more technologies and offer built-in change tracking dashboards. If you need to track niche technologies or want a polished enterprise UI, they are the right choice. But if you need core technology detection via API at a fraction of the cost, StackPeek delivers. The 120+ technologies cover the frameworks, CMS platforms, analytics tools, CDNs, payment processors, and hosting providers that matter most for competitive intelligence.

At $9/month versus $295/month, you save $3,432 per year. For a startup or small team, that difference funds your entire CI initiative.

Advanced: Batch Scanning with a Shell Script

For larger competitive intelligence projects, you might want to scan hundreds of URLs at once. Here is a shell script that reads URLs from a file, scans each one, and saves the results:

#!/bin/bash
# batch-scan.sh — Scan a list of competitor URLs and save results

API="https://us-central1-todd-agent-prod.cloudfunctions.net/stackpeekApi/api/v1/detect"
OUTPUT="scan-results-$(date +%Y-%m-%d).json"
echo "[" > "$OUTPUT"
first=true

while IFS= read -r url; do
  [ -z "$url" ] && continue
  if [ "$first" = true ]; then
    first=false
  else
    echo "," >> "$OUTPUT"
  fi
  encoded=$(python3 -c "import urllib.parse; print(urllib.parse.quote('$url', safe=''))")
  curl -s "${API}?url=${encoded}" >> "$OUTPUT"
  sleep 0.5  # Rate limiting
done < competitors.txt

echo "]" >> "$OUTPUT"
echo "Saved to $OUTPUT"

Create a competitors.txt file with one URL per line and run the script. The output is a JSON array of scan results that you can import into your dashboard, a spreadsheet, or a data warehouse.

Putting It All Together

A competitive intelligence dashboard built on the StackPeek API gives you four things that enterprise CI tools charge thousands for:

1. Real-time technology detection via a simple REST API call
2. Side-by-side competitor comparison in a dashboard you own and control
3. Change tracking over time by diffing periodic scan snapshots
4. Actionable signals for sales, product, and strategy teams

The total cost: $9/month for the Starter plan, or $0 if your needs fit within 100 scans per day. No contracts, no enterprise sales process, no onboarding calls. Just an API endpoint and the code in this article.

Whether you are a sales team qualifying leads, an analyst researching an acquisition, or a growth hacker tracking market trends, the data is the same. The only difference is how much you pay for it.

curl "https://us-central1-todd-agent-prod.cloudfunctions.net/stackpeekApi/api/v1/detect?url=https://stripe.com"