Admoon Dashboard
Overview
Operating high-density advertising portals creates intense front-end bottlenecks: streaming real-time telemetry alongside dense financial records leads to frame drops, complex multi-step checkout funnels risk state loss on page reloads, and uncoordinated API schema changes trigger runtime null pointer exceptions.
Engineered a scalable multi-tenant architecture with Next.js App Router and Feature-Sliced Design. Decoupled compute-heavy analytical charts via React concurrent transitions, virtualized dense transaction grids to render only visible DOM nodes, built a persistent multi-wallet state machine, and automated end-to-end API type generation.
Technical Bottlenecks & Architectural Constraints
Operating high-density advertising portals creates intense front-end bottlenecks: streaming real-time telemetry alongside dense financial records leads to frame drops, complex multi-step checkout funnels risk state loss on page reloads, and uncoordinated API schema changes trigger runtime null pointer exceptions.
Core Implementation Hurdles & Engineering Solutions:
Sub-180ms INP Tuning across Analytical Dashboards
Concurrent ECharts re-rendering alongside live AG-Grid data updates blocked the browser main thread, driving Interaction to Next Paint (INP) above 320ms during rapid user filtering.
↳ Decoupled UI state from chart rendering by wrapping analytical mutations in React startTransition and debouncing filter change dispatches by 150ms.
Real-Time Split-Currency Balance Validation & Input Masking
Splitting ad recharge payments across multiple currency balances (USD, AED, TRY, IRR) required dynamic cross-rate conversion, wallet ceiling checks, and formatted numeric inputs without cursor jumping during rapid typing.
↳ Developed custom currency input masking hooks with debounced exchange rate conversions and client-side Zod validation rules that verify the aggregate split sums match the required total before enabling checkout submission.
Optimistic State Updates for 25-Permission Matrix
Toggling complex agency permissions panel-by-panel suffered from network roundtrip lag, leading to checkbox state flicker and race conditions during rapid bulk edits.
↳ Implemented optimistic Redux state mutations with automatic rollback caches, queuing batched PATCH requests with exponential retry backoff.
Front-End Performance Budgets & Quality Gates
Interaction to Next Paint (INP)
Target Budget: < 200ms
Measured via Chrome DevTools Performance panel under 4x CPU throttling during continuous table filtering. Offloaded chart re-renders and table filtering to React startTransition, keeping UI interactions instant.
Data Table Virtualization
Target Budget: 60 FPS Sustained
Measured via Chrome DevTools Rendering HUD (Frame Rendering Stats) while rapidly scrolling 2,000+ financial records. Recycled off-screen DOM nodes via AG-Grid row virtualization, rendering only 18 active DOM rows regardless of dataset size.
API Contract Synchronization
Target Budget: 100% Type-Safe
Validated via automated Orval OpenAPI client generation and strict TypeScript `tsc --noEmit` build verification. Payload boundaries are strictly validated at runtime with Zod schemas.
Interface & Architecture Showcase
Admin Command Center & High-Density Analytics
High-density executive dashboard rendering real-time campaign health, revenue velocity, and active account distribution. Built with reactive ECharts wrapped in memoized sub-trees, consuming server state via TanStack Query with automated cache invalidation.
Operational Order Queue & Status Triage
Real-time order triage interface designed for rapid operator dispatch. Built with AG-Grid Enterprise utilizing custom cell status renderers, debounced server-side query filters, and modal triggers without triggering layout shifts.
Google Ads Telemetry & Campaign Health Cockpit
Client-facing monitoring dashboard transforming raw Google Ads API streams into legible metric cards. Engineered with CSS Grid auto-fill layouts, SVG progress rings, and custom data-normalization hooks.
Service Package Selection & Dynamic Fee Engine
Interactive pricing engine with real-time fee breakdown. Constructed using stateful React cards computing live sum totals with zero layout shift before dispatching to the checkout slice.
Multi-Currency Wallet & Multi-Step Checkout Funnel
5-step checkout state machine supporting multi-currency wallet payments across USD, AED, TRY, and IRR balances. Engineered with React Hook Form, Zod discriminated union validation, and Redux Persist session storage.
Multi-Currency Combination Checkout
Full multi-currency combination payment deducting from USD, AED, and TRY wallets simultaneously.
Granular Role-Based Access Control (RBAC) Matrix
Security governance interface regulating view and edit permissions across 25 features for agency roles. Implemented as a controlled matrix table with optimistic updates, batch mutation hooks, and Next.js route-guard middleware.
Role Definition Panel (Account, Campaign, Finance, CEO)
Establishes agency roles across the multi-team organization with segregated access boundaries.
Front-End Implementations & Core Highlights
High-Density Virtualized Data Tables (AG-Grid Enterprise)
Recycled off-screen DOM nodes to render 2,000+ real-time financial transaction records at 60 FPS without layout shift or memory leaks.
- ▸Maintained steady 60 FPS frame rates by rendering only 18 active DOM rows regardless of dataset scale
- ▸Server-driven multi-column sorting and debounced status filtering with zero main-thread blocking
- ▸Custom cell renderers for payment badges and operational triage action triggers
Audited Multi-Currency Checkout State Machine
A finite state machine coordinating multi-step checkout with split-currency balances (USD, AED, TRY, IRR) and persistent session recovery.
- ▸Redux Persist integration preserving checkout step progression across unexpected page refreshes
- ▸Zod discriminated union schemas validating multi-wallet split calculations against live exchange rates
- ▸Eliminated 85% of redundant re-renders by migrating from Formik to uncontrolled React Hook Form inputs
Optimistic RBAC Security Matrix & Route Guards
Interactive security administration interface governing 25 granular feature permissions across administrative agency roles.
- ▸Instant UI feedback via optimistic Redux store updates backed by automatic rollback caches
- ▸Batched PATCH request queueing with exponential retry backoff to eliminate race conditions
- ▸Next.js middleware route-guard enforcement preventing unauthorized route access before hydration
Automated Type-Safe API Contract Pipeline
Automated end-to-end type generation synchronizing backend OpenAPI schemas directly into strongly typed React Query hooks.
- ▸Orval client generation eliminating contract drift between microservices and frontend code
- ▸Zero runtime null pointer exceptions across all campaign telemetry payloads
- ▸Strict TypeScript compile-time verification enforced across all API endpoints
Technical Trade-offs & Engineering Decisions
Every architectural choice balances runtime performance, team velocity, and production scale. Here is how core frontend decisions were evaluated against realistic alternatives.
State Architecture: Redux Toolkit + Persist vs Zustand
Redux Toolkit with Custom Serialization Middleware & Redux Persist
Zustand with manual LocalStorage sync hooks
The multi-currency checkout engine operates as an audited finite state machine with strict multi-step rollback and cross-tab session recovery. RTK slices enforced strict action serialization (rejecting non-serializable BigInt/Date instances) and integrated cleanly into NX monorepo feature boundaries. Zustand was retained for lightweight, transient drawer and modal states.
Data Grid: AG-Grid Enterprise vs TanStack Table
AG-Grid Enterprise with DOM Row Virtualization & Server Pagination
Headless TanStack Table (React Table v8)
While TanStack Table offers complete CSS control, managing DOM node recycling, pinned summary columns, server-driven multi-column sorting, and real-time cell flash updates across 2,000+ financial records caused severe DOM bloat with custom virtualizers. AG-Grid provided native compositor-thread row virtualization out of the box with zero memory leaks during rapid pagination.
Form Architecture: React Hook Form + Zod vs Formik + Yup
React Hook Form with Zod Discriminated Union Schemas
Formik with Yup schema validation
The 5-step checkout funnel contains conditional sub-forms depending on whether the user pays via a single wallet or splits between multiple currencies. Formik re-rendered the entire component tree on every keystroke, causing noticeable typing latency. RHF's uncontrolled input architecture reduced component re-renders by 85%, while Zod enabled strict TypeScript type inference matching backend API contracts.
The Engineering Solution
Engineered a scalable multi-tenant architecture with Next.js App Router and Feature-Sliced Design. Decoupled compute-heavy analytical charts via React concurrent transitions, virtualized dense transaction grids to render only visible DOM nodes, built a persistent multi-wallet state machine, and automated end-to-end API type generation.
Axios Instance with JWT Auth Interceptors, Silent Refresh Queuing & Orval OpenAPI Codegen
Redux Toolkit (Audited Checkout State Machine), Redux Persist (Session Recovery), React Query (Server State Cache)
AG-Grid Enterprise (DOM Row Virtualization, Server-Side Pagination, Column Pinning)
ECharts & Chart.js (React Transitions, Responsive Canvas Viewports, Sub-Tree Memoization)
React Hook Form (Uncontrolled Subscriptions), Zod Runtime Schema Validation
Results & Takeaways
Separating transient UI state (Zustand/local state) from transactional checkout state (Redux Toolkit) prevents cross-module state pollution in monorepos.
Applying React startTransition to heavy visualization repaints is essential for keeping Interaction to Next Paint (INP) under 180ms on data-dense dashboards.
Automating API clients from OpenAPI specs with Orval completely eliminates contract drift between backend microservices and frontend React components.