Krevyra - Creative Performance & Ad Analytics Next.js SaaS Template
1 of 13
Loading screenshot

Krevyra is a commercial Next.js 16 (App Router), React 19, TypeScript, and Tailwind CSS 4 SaaS application template purpose-built for creative performance analytics, paid-social agencies, growth marketing teams, and ad intelligence platforms.

Instead of treating paid media as isolated spreadsheet rows, Krevyra connects ad performance across Meta, TikTok, and Google directly to the visual creative assets behind every impression, hook, and conversion. Designed with a distinctive "Proof Room" Editorial & CMYK Press-Plate aesthetic (Instrument Serif, Schibsted Grotesk, and IBM Plex Mono on warm archival paper), it ships 7 connected product chapters plus a dedicated print/PDF report route powered by a deterministic 180-day local demo engine.


What Makes Krevyra Different

  • Creative-First Attribution: Drill from macro ROAS and CPA shifts directly into Creative DNA attribute lift (Hook Type, Visual Style, Talent Format, Audio Pacing, CTA Framing), a Hook × Talent Performance Matrix, and an interactive Scale / Iterate / Watch / Pause Decision Quadrant.
  • Stateful Campaign & Approval Workflows: Pause or resume campaigns with instant undo, adjust validated campaign budgets (React Hook Form + Zod), drop numbered spatial comment pins directly on creative proofs, and run a checklist-gated multi-round approval state machine.
  • Custom Report Builder & Print-Ready Briefs: Assemble custom executive reports with live document preview, one-click CSV export, and a dedicated @media print route (/print/reports/[id]) formatted for PDF export.
  • Global Workspace Lens: Switch Brand Account, Date Range (7D, 30D, 90D, or custom), Compare Period, Attribution Model (7d click, 1d view, Data-driven), and Platform (All, Meta, TikTok, Google) from the top bar or ⌘K / Ctrl+K command palette — every KPI, chart, and table reconciles deterministically.

Included Screens (7 Product Chapters + Print Route)

  1. 01 · Overview (/overview) — Data-generated editorial headline, 6-KPI telemetry strip with sparklines, period-over-period revenue & spend trajectory chart, platform split ledger, top creative movers, and quick-action briefing notes.
  2. 02 · Campaigns (/campaigns) — Searchable, filterable, sortable campaign ledger, side-by-side comparison drawer (up to 3 campaigns), slide-over campaign detail sheet, pause/resume toggle, and validated budget editor.
  3. 03 · Creative Library (/creatives) — True-aspect-ratio (9:16, 4:5, 1:1, 16:9) masonry gallery, custom collections/boards (create, rename, delete), favorites filter, 4-frame video storyboard player, and one-click send-to-approval action.
  4. 04 · Creative Intelligence (/intelligence) — Synthesized Winning Formula banner, Creative DNA lift workbench, Hook × Talent heatmap matrix, Decision Quadrant scatter explorer, Fatigue Monitor (wear-out decay curves & frequency saturation), and side-by-side Creative Compare view.
  5. 05 · Audiences (/audiences) — High-affinity audience personas matched with top-performing creatives, Age × Gender ROAS matrix, Platform × Age composition bars, 7×6 daypart conversion heatmap, regional breakdown, and placement/device split.
  6. 06 · Reports (/reports) — Curated report shelf, interactive Report Builder with live section toggles and Zod validation, executive document preview, instant CSV download, and print/PDF layout.
  7. 07 · Approvals (/approvals) — Creative review queue, interactive proof stage with clickable numbered coordinate pins, 5-point pre-flight QA checklist, required-reason revision/rejection guardrails, and round-by-round audit history.
  8. Print Route (/print/reports/[id]) — Clean, chrome-free print sheet optimized for browser PDF export and physical executive handouts.

Tech Stack & Engineering Baseline

  • Framework: Next.js 16.4.2 (App Router, TypeScript 5.9 strict mode)
  • UI & Styling: React 19.3.1, Tailwind CSS 4, Radix UI primitives in the shadcn/ui pattern, lucide-react & react-icons
  • Charts & Motion: Recharts (components/charts/ with accessible ChartFrame summaries) & motion/react with full prefers-reduced-motion support
  • State & Forms: Zustand (localStorage persistence with one-click demo reset in the account menu) + React Hook Form & Zod validation
  • Verification: Vitest unit test suites + Playwright E2E and @axe-core/playwright accessibility checks (Desktop 1440×900 and Mobile Pixel 7)
  • Documentation: Complete README.md, CHANGELOG.md, and docs/ (customization.md, architecture.md, data-and-api.md, limitations.md, third-party-notices.md)

Requirements & Scope Notes

  • Runtime: Node.js 24.18+ and pnpm 12.7+ (or npm).
  • Frontend Template Only: All metrics, campaigns, and creative previews are generated deterministically in the browser from fictional brand datasets (Vespera Skin, Kinetix Run, Solace Home) and persisted to localStorage. No backend server, database, authentication, or live Meta/TikTok/Google Ads API integration is included.
  • Assets: Uses 100% original procedural SVG creative artwork and self-hosted Google Fonts (Instrument Serif, Schibsted Grotesk, IBM Plex Mono via next/font) — zero external stock photo dependencies.