Marketing Intelligence Dashboard

Overview

A Next.js 16 marketing operations platform spanning 16 modules: dashboards, campaigns, tasks, creative intake, multi-stage approvals, analytics, compliance, legal review, brand governance, budgets, vendors, content calendar, a digital asset manager, an AI assistant, settings, and integrations. It exposes filterable real-time dashboards, surfaces anomalies and action items via an LLM, and ships stakeholder-ready PPTX reports. Built so marketing 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

• A dedicated AI assistant page with 28+ templated prompts across 8 categories (analysis, copy, budget, competitor research, content planning, reports, campaigns, general), plus streaming responses embedded inside individual dashboard widgets.
• Graceful fallback to a local marketing engine when no OpenAI key is configured, so the assistant degrades instead of breaking.
• 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

The MVP is built out across the 16 modules, with the AI assistant, dashboards, campaign management, and multi-stage approval workflows (marketing, brand, legal, compliance, finance) in place. The weekly deck-building tax is the headline win: the team interprets 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.