Admoon International Dashboard
Overview
Building a high-density dual-portal platform (Client Portal & Admin ERP) from the ground up presented steep front-end engineering hurdles: concurrent API calls during JWT expiration triggered duplicate refresh queries that invalidated user sessions, monolithic form schemas in multi-step onboarding caused input lag, and heavy administrative workflows required rapid audit actions without repetitive full-page reloads.
Architected and implemented the entire dual-portal frontend from scratch as the sole developer using Vite, React, and TypeScript. Implemented an in-memory Axios interceptor subscriber queue serializing concurrent 401 requests during silent token renewal, isolated multi-step onboarding forms into step-validated Zod sub-trees with reactive pricing sidebars, and engineered contextual Material-UI drawer portals with optimistic TanStack Query cache synchronization.
Technical Bottlenecks & Architectural Constraints
Building a high-density dual-portal platform (Client Portal & Admin ERP) from the ground up presented steep front-end engineering hurdles: concurrent API calls during JWT expiration triggered duplicate refresh queries that invalidated user sessions, monolithic form schemas in multi-step onboarding caused input lag, and heavy administrative workflows required rapid audit actions without repetitive full-page reloads.
Core Implementation Hurdles & Engineering Solutions:
Race Conditions During Concurrent 401 JWT Expiration
When multiple parallel background queries fail with 401 Unauthorized simultaneously, firing duplicate refresh requests invalidates refresh tokens and abruptly logs users out.
↳ Engineered an in-memory Axios interceptor subscriber queue (refreshSubscribers). The first 401 locks the queue and fires a single refresh request, while subsequent requests are buffered as callbacks and automatically replayed once the new bearer token resolves.
State Bloat & Input Latency in Multi-Step Financial Wizards
Hosting multi-currency selectors, dynamic fee tiers, and complex validation schemas in a single monolithic form context caused the entire component tree to re-render on every keystroke.
↳ Separated multi-step onboarding into step-isolated component subtrees, validating each step independently against dedicated Zod schemas while maintaining persisted draft state via lightweight Zustand slices.
Contextual Drawer State & Non-Blocking Cache Reconciliation
Rapidly auditing top-up receipts, rental requests, and consultation notes through sliding drawers caused UI layout shifts and visual lag if data had to be refetched on every drawer open.
↳ Decoupled drawer UI states into lightweight Zustand stores while mutating server cache optimistically via TanStack Query, rendering portal overlays instantly without layout shifts.
Front-End Performance Budgets & Quality Gates
Interaction to Next Paint (INP)
Target Budget: < 100ms
Measured via Chrome DevTools Performance panel during nested administrative drawer transitions. Kept main-thread blocking low using uncontrolled React Hook Form inputs and isolated drawer portals.
Silent Token Refresh Latency
Target Budget: < 300ms
Measured via Chrome DevTools Network timing from initial 401 challenge to automated replay completion. Handled via in-memory callback queueing without browser reload or user session drops.
Data Grid Filter Commit Time
Target Budget: < 16ms
Measured via React DevTools Profiler flamegraph commit duration when filtering 1,000+ lead rows. Headless TanStack Table column memoization and client-side index lookup.
Interface & Architecture Showcase
Multi-Step Service Selection Wizard
Modular multi-step onboarding wizard where clients select from tailored agency services (Ad Account Setup, Campaign Audits, Suspension Recovery), triggering dynamic sub-flow dispatchers.
Intelligent Wizard Form & Real-Time Fee Summary
Step 3 of the order wizard incorporating conditional fields for account goals, marketing challenges, fee tier selections, and multi-currency options with a real-time reactive price summary sidebar.
Client Ad Account Telemetry & Spending Controls
Dedicated ad account monitoring interface providing clients with real-time balance tracking, daily budget ceilings, transaction logs, and top-up allocation requests.
Context-Aware Administrative Action Drawers
High-efficiency contextual side-drawers for rapid agency management: auditing payment receipts and executing balance top-ups, triaging high-risk account rental applications with standardized rejection codes, and recording sales consultation outcomes within the CRM lead pipeline. Integrated directly with TanStack Query for instant optimistic UI updates without full-page reloads.
Front-End Implementations & Core Highlights
Solo Architecture Engineered 100% From Scratch
Architected and implemented the entire dual-portal frontend codebase independently from the ground up without templates.
- ▸Structured modular feature-sliced architecture (user-panel and admin-panel) in Vite, React, and TypeScript
- ▸Designed customized Material-UI theme tokens, responsive layouts, and atomic primitives
- ▸Maintained full engineering ownership from initial project scaffolding to production delivery
Robust Token Setup & Silent JWT Refresh Queue
Engineered an enterprise authentication renewal lifecycle via Axios interceptors.
- ▸In-memory subscriber queue (refreshSubscribers) buffering concurrent API calls during token refresh
- ▸Automatic header authorization updates and synchronized Zustand store rehydration
- ▸Seamless session recovery without interrupting active user workflows
Dynamic Multi-Step Wizard Engine
Developed modular multi-step form flows using React Hook Form and Zod validation.
- ▸Step-isolated schema validation keeping form state intact during navigation
- ▸Conditional field logic based on selected service options and tier selections
- ▸Real-time cost calculator sidebar updating pricing dynamically as options change
Context-Aware Administrative Dynamic Drawers
Constructed reusable side-drawer overlay systems for complex admin workflows.
- ▸Contextual action triggers for top-up approvals, compliance audits, and CRM lead consultations
- ▸Isolated drawer portals maintaining sub-46ms INP during rapid toggling
- ▸Integrated with TanStack Query for optimistic updates and automated cache invalidation
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.
Authentication Architecture: In-Memory Subscriber Queue vs Interval Timers
Axios Interceptor In-Memory Subscriber Queue
Proactive JWT setTimeout refresh or Web Workers
Proactive interval timers can drift, fire while the user is inactive, or waste network bandwidth. Catching 401s reactively and queueing concurrent inflight requests guarantees that token renewal only happens when strictly necessary, with zero dropped requests.
Data Grid Component: Headless TanStack Table vs Pre-built MUI DataGrid
Headless TanStack Table
MUI DataGrid Pro / AG-Grid Enterprise
MUI DataGrid Pro imposes high runtime bundle weight (~180KB) and rigid styling constraints. Headless TanStack Table gave full control over DOM markup, custom virtualization, and theme styling while keeping bundle overhead under 15KB.
Form Validation: Step-Isolated Zod Schemas vs Monolithic Formik
React Hook Form + Step-Isolated Zod Schemas
Formik with Single Yup Object Schema
Monolithic Formik forms trigger tree-wide re-renders on every keystroke and require giant unified schemas. Step-isolated Zod schemas with React Hook Form's uncontrolled ref architecture kept input lag below 5ms.
State Management: Zustand Slice Pattern vs Redux Toolkit
Zustand with Selective Persistence & Slice Pattern
Redux Toolkit (RTK) + Redux-Persist
Redux Toolkit introduces excessive action dispatch boilerplate for UI-only states (drawer toggles, active tabs). Zustand allowed lightweight, atomic store subscriptions with zero boilerplate.
The Engineering Solution
Architected and implemented the entire dual-portal frontend from scratch as the sole developer using Vite, React, and TypeScript. Implemented an in-memory Axios interceptor subscriber queue serializing concurrent 401 requests during silent token renewal, isolated multi-step onboarding forms into step-validated Zod sub-trees with reactive pricing sidebars, and engineered contextual Material-UI drawer portals with optimistic TanStack Query cache synchronization.
Vite + React + TypeScript (Solo Architecture)
React Router (Clean domain separation between User and Admin portals)
Axios + Silent JWT refresh handler with in-memory subscriber queuing
React Hook Form + Zod (step-isolated schema validation & conditional fields)
Material-UI (MUI) custom drawer overlays with contextual action handlers
Zustand (slice pattern, devtools, selective persistence middleware)
TanStack Query (React Query) wrapping Orval OpenAPI client functions
TanStack Table (headless, virtualized pagination, sorting & column visibility)
ApexCharts (interactive reporting dashboards & lead funnels)
Results & Takeaways
Architecting and building a dual-portal enterprise dashboard completely from scratch as the sole developer requires strict modular feature boundaries to maintain velocity and code quality.
Implementing silent JWT refresh with an in-memory subscriber queue prevents session drops during concurrent API requests, ensuring zero user disruption during token renewal.
Decoupling complex multi-step form wizards into step-isolated components with dedicated Zod schemas ensures predictable state management, step validation integrity, and high code maintainability.