← Back to The Lab
Enterprise Frontend Lead Ongoing dentsu Benelux

Dentsu Quality View (DQV)

Enterprise media intelligence platform for planning, validating, and optimizing digital campaigns across YouTube, Meta, DV360, Twitch, and more.
Role: Senior Frontend Developer (with a mid-level dev) — architecture, feature delivery, modernization, and developer experience.

Note: DQV is a proprietary internal product. No confidential business logic, client data, or implementation details are shown. This case study focuses on engineering, architecture, and impact.

Overview

Dentsu Quality View is a large-scale enterprise web application used internally at Dentsu to plan, validate, and optimize digital advertising campaigns across multiple platforms (YouTube Video, YouTube Audio, Display/DV360, Meta, Twitch, and more). It connects diverse data sources to surface the most relevant and brand-safe advertising environments, with a strong focus on brand safety, suitability, and media performance.

As the senior frontend engineer, I own the architecture, feature delivery, modernization, and developer experience, collaborating with a mid-level dev and cross-functional teams.

My Role & Responsibilities

  • Senior FE ownership of a production application serving internal media specialists across multiple markets.
  • Feature design & delivery: Translating product requirements into shippable, well-architected React features end-to-end.
  • Architecture & technical direction: Defining patterns, conventions, and reusable abstractions for a codebase spanning 25+ business domains.
  • Maintenance & modernization: Upgrading dependencies (React 18→19, MUI X v8, Vite 7), removing tech debt, and keeping the build healthy.
  • Cross-functional collaboration: Working directly with backend, product, QA, and design to align contracts, UX, and delivery.
  • Quality & observability: Datadog RUM/Logs integration, error tracking, and code quality tooling (ESLint, Prettier, Husky, lint-staged, commitlint).

The Product (in broad strokes)

  • Advertiser & Campaign management — Hierarchical configuration of advertisers, campaigns, and partners.
  • Campaign Activation — Multi-step wizards to activate campaigns on YouTube, DV360, Meta, Twitch.
  • Channel curation & validation — Composing and curating YouTube channel lists, with advertiser-specific validation logic.
  • DV360 Keywords & Sitelists / Meta Lists — Targeting list authoring tools.
  • Brand Guidelines & Controls — Codifying client brand-safety rules.
  • Asset Library & Creative tools — ABCD Checker, banner generator, creative QA wizards.
  • Reporting & Optimization Plans — Campaign performance and optimization recommendations.
  • Admin — User, role, and permission management.

Architecture & Stack

  • React 19 + TypeScript with strict typing across interfaces, schemas, and store contracts.
  • Vite 7 for dev server and production builds, with route-level code splitting via React.lazy.
  • Redux Toolkit + RTK Query as the single source of truth for server state, with per-domain endpoint injection and tag-based cache invalidation.
  • MUI v5 + MUI X (DataGrid, Charts, DatePickers, TreeView) for UI primitives, extended with a custom theme (light/dark).
  • React Hook Form + Yup for performant, schema-validated forms across complex multi-step flows.
  • React Router v7 with a centralized route registry and a CustomSecureRoute wrapper for Okta-protected pages.
  • Storybook 10 for component documentation and isolated UI development.
  • Okta (OAuth2 / OIDC) integration for secure authentication and role-based access.
  • Datadog RUM + Logs + Session Replay for observability and error tracking.

Wizard Framework

A custom wizard framework powers every multi-step authoring flow (campaign activation, banner generation, ABCD Checker, etc.):

  • Context-driven state (WizardContext) with draft management.
  • Declarative StepConfig graph supporting conditional branching and step tracing utilities.
  • Per-step validation hooks for granular control and error handling.
  • One Wizard component renders any flow defined as a step graph — keeping all wizards consistent in UX, navigation, and error handling.

This abstraction is a productivity multiplier: new multi-step flows are composed from existing primitives, not rebuilt from scratch.

Engineering Challenges

  • Owning a large product with only two FE devs: prioritizing, investing in abstractions, and enforcing consistent structure.
  • Domain complexity: campaign flows involve many interdependent fields, conditional steps, and platform-specific rules. The wizard + schema-driven validation pattern encodes this complexity declaratively.
  • Keeping bleeding-edge dependencies stable: React 19, MUI X v8, Vite 7, Storybook 10 — careful upgrade work and dependency overrides keep the build green.
  • Performance at scale: lazy-loaded routes, RTK Query caching, MUI DataGrid virtualization, and split bundles keep the app responsive.
  • Production observability: Datadog RUM + Session Replay for real user metrics and error diagnosis.

Impact

  • Maintained and grown a mission-critical internal product as the senior FE, shipping features continuously since Jan 2025.
  • Established architectural patterns (wizard framework, RTK Query conventions, RBAC, theming, schema-driven forms) that make new feature delivery faster and more predictable.
  • Kept the codebase on modern, supported versions of the React ecosystem, avoiding upgrade debt.
  • Delivered production observability that lets a small FE team operate a real enterprise app safely.

Tech Highlights

React 19 · TypeScript · Vite 7 · Redux Toolkit · RTK Query · MUI v5 · MUI X v8 (DataGrid, Charts, DatePickers, TreeView) · React Hook Form · Yup · React Router v7 · Okta OIDC · Datadog RUM/Logs/Session Replay · Storybook 10 · Three.js / model-viewer · @react-pdf/renderer · PapaParse · JSZip · Framer Motion · Sass/Emotion · ESLint · Prettier · Husky · commitlint

Learn More