Marketing Intelligence Dashboard

Overview

A Next.js 16 platform that ingests marketing data, exposes filterable real-time dashboards, surfaces anomalies and action items via an LLM, and ships stakeholder-ready PPTX reports in one click. Built so the marketing team can replace the weekly slide-building tax with a button.

Problem

Marketing teams at Mike Sport needed real-time visibility across campaigns spanning four storefronts (Mike Sport Lebanon, Mike Sport Iraq, Crocs Lebanon, Service Park) and a way to ship stakeholder-ready decks without the weekly slide-building tax. Existing dashboards showed numbers; nobody synthesized them. By the time a human had written the narrative, the next week's data was already in.

Approach

Make the dashboard narrate itself. Each widget pulls its own data, then streams an LLM-generated summary inside the same card. A "Generate Report" button walks the structured insights through a slide template and produces a PPTX file the team can hand to leadership unchanged.

Architecture

• App: Next.js 16 (App Router, Turbopack dev), React 19, TypeScript.
• Data layer: Prisma 7 over PostgreSQL with TanStack Query for server state.
• Client state: Zustand for filter and selection state across the dashboard.
• AI: Vercel AI SDK + @ai-sdk/openai for streaming inference, with prompts grounded in the actual filtered data slice the user is viewing.
• Reporting: pptxgenjs for PPTX generation directly in Node, no external service.
• Forms: react-hook-form + zod for validation across filter and admin surfaces.

Tech stack

• Frontend: Next.js 16, React 19, TypeScript, Tailwind CSS 4, shadcn/ui
• State: Zustand, TanStack Query, TanStack Table
• AI: Vercel AI SDK (ai), @ai-sdk/openai
• Charts and reports: Recharts, pptxgenjs
• Validation: react-hook-form, zod

AI work

• Streaming LLM responses embedded inside individual dashboard widgets, not a separate "AI panel."
• Prompt design that always grounds in the currently filtered data, never the global average.
• Automated narrative writing for slide reports: section openers, anomaly callouts, recommendations.
• Cost-aware prompting: short, structured outputs with strict token budgets.

Engineering highlights

• One-click PPTX export reuses the same structured insights the dashboard renders, so the deck and the screen never disagree.
• Anomaly heuristics run client-side before the LLM is invoked, so the model only narrates what's already statistically interesting.
• TanStack Query cache keys include the filter set, so widgets share data fetches and the LLM context stays consistent.
• Real-time-ish: streamed updates without WebSockets, using SSE-style streaming through the Vercel AI SDK.

Outcome

Live, used internally for executive marketing reporting. The weekly deck-building tax is gone. The team now spends that time interpreting the narrative instead of writing it.

Lessons

• Putting the LLM inside the widget instead of in a separate panel changes how the team uses the dashboard. Insight feels native, not bolted on.
• Streaming UX matters: 3-second waits with progress feel slower than 5-second waits with streaming text.
• "Grounded in the filtered slice" is a simple rule that prevents 90% of LLM dashboard failure modes.