Keyword Viewer

Search keyword analytics viewer (Vite + React)

Keyword Viewer

Web app for viewing search keyword analytics collected by the Search API.

Architecture

sub-packages/keyword-viewer/          # Vite + React web app

Features

Dashboard (/)

• Total searches, unique keywords, today’s count, weekly count
• Top 10 keywords table
• Daily volume chart with 7/30 day toggle

Keywords List (/keywords)

• Full keyword list with count and last-searched date
• Sortable by keyword name, count, or last searched

Data Fallback

When the API is unreachable (e.g., local development without Netlify Functions), the app falls back to deterministic mock data with a “demo data” banner.

Data Flow

User searches on site
  -> search.ts logs to Netlify Blobs ('keyword-logs' store)
  -> keyword-logs.ts reads from same store
  -> keyword-viewer fetches /api/keyword-logs
  -> Displays analytics

Environment Variables

Configure in sub-packages/keyword-viewer/.env.

Key Files

• src/App.jsx — Route configuration (Dashboard, Keywords)
• src/components/dashboard.jsx — Dashboard with stats and tables
• src/components/keyword-list.jsx — Sortable keyword table
• src/components/layout.jsx — App shell with navigation
• src/utils/api.js — API client with mock data fallback
• src/utils/stats.js — Keyword statistics aggregation
• src/utils/mock-data.js — Deterministic mock data generator