Dentsu Quality View (DQV)

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

• DQV video overview (YouTube)
• Q&A with Paid Media Director Nils Kroon