Analysis Report

1. Introduction 

The client for this project is WestJet, a Canadian airline headquartered in Calgary, Alberta. WestJet has over 15,000 employees and in 2025 served more than 22.6 million guests.[1]  

Developing enterprise software within an established corporate environment like WestJet requires operating within strict architectural guidelines, pre-approved tech stacks, and existing platform conventions. The Digital Profile Apps Admin Panel is designed to replace manual developer requests with an extensible, self-serve interface. The application enables authorized administrators to execute Digital Platform Services (DPS) cache invalidations and safely modify feature flags stored in cloud infrastructure. 

Because the foundational ecosystem including the UI framework, design system, persistence layer, testing harness, HTTP client, and Agile framework is mandated by corporate engineering standards, this analysis focuses on aligning with those non-negotiable architectural constraints and analyzing the primary technical decision within the scope: adopting TanStack Query for asynchronous server-state management. 

2. Corporate Constraints & Fixed Architecture 

The technical baseline for the Admin Panel is dictated by WestJet’s platform standards and the Digital Profile Apps team infrastructure:  

• Core Frontend (Vue 3 + TypeScript): Standardized across the enterprise profile domain to ensure uniform code structure, strong typing, and direct compatibility with WestJet’s shared internal component library.  

• Persistence & Data Storage Layer (Azure Blob Storage): Feature flags are stored directly as JSON files in Azure Blob Storage rather than inside a traditional relational or document database. The storage account and container configuration are owned by Platform Engineering, requiring the admin panel to interact via protected REST calls or scoped storage operations.  

• HTTP Client (Axios): Standardized over the native Fetch API to maintain enterprise-wide interceptor patterns, unified timeout handling, and automatic JSON transformation. 

• Testing (Vitest & Vue Testing Library): Mandated for all unit and component testing to target >80% code coverage on mission-critical paths. 

• Isolated Component Prototyping (Storybook): Standardized for visual documentation and state-agnostic component verification. 

• Process Model (Scrumban): The team operates strictly under a Scrumban delivery framework, combining Scrum’s sprint planning, estimation, and backlog grooming with Kanban’s Work-In-Progress (WIP) limits and visual flow tracking.  

3. CI/CD & Multi-Environment DevOps Pipeline 

To ensure platform reliability and prevent unverified configuration updates, deployment is strictly governed by an automated enterprise CI/CD pipeline. Changes advance sequentially through four environments: 

• Development (Dev): Feature branches follow the Gitflow workflow and are merged into the main development line via Pull Requests. In this environment, developers test the live UI against mock auth endpoints and sandbox DPS cache instances.  

• Quality Assurance (QA): Merged features automatically build and deploy to the QA environment. The internal QA engineers conduct functional verification, UI component regression checks, and permission audits to ensure role-based visibility rules hide or disable sensitive actions appropriately.  

• Staging: Deployments to staging replicate the production architecture closely. Staging is integrated with ForgeRock via Azure AD and interacts with staging Azure Blob Storage containers. 

• Production (prod): Once staging validation and stakeholder sign-offs are complete, deployment artifacts are tagged, signed, and released into production. In production, the single-page application is hosted within WestJet’s secure internal network boundaries, pointing strictly to live, audited DPS endpoints and production blob storage containers. 

  4. Data Storage & Persistence Implementation: Azure Blob Storage 

Rather than provisioning a dedicated SQL (e.g., PostgreSQL) or NoSQL (e.g., MongoDB) database instance, the platform utilizes Azure Blob Storage as the single source of truth for runtime feature flag configurations. 

Feature flag schemas are housed as JSON objects. Updates to flags are handled through atomic JSON overwrites (PUT requests) to prevent partial writes, schema fragmentation, or corrupted application states. Modifying cloud-stored JSON configurations directly presents operational risks. The application incorporates a pre-commit JSON diff preview modal and mandatory confirmation dialogs to allow operators to visually inspect structural changes before changes are written to blob storage. Write operations are restricted to authenticated roles (feature-flag-manager or super-admin) using scoped OAuth tokens (blob-storage:read, blob-storage:write) or platform-managed credentials, ensuring that direct cloud portal access is eliminated.  

5. Key Decision Analysis: Server-State Management 

While UI component state is managed using Pinia, coordinating remote server state across the DPS cache endpoints and Azure Blob Storage JSON payloads required an implementation decision. 

Approach 1: Custom Composable Fetchers with Axios & Pinia 

Under this pattern, developers manually write Vue composables that execute Axios calls against Azure Blob Storage and DPS endpoints, assigning responses to Pinia stores or local reactive ref variables. 

Strengths: Requires no additional third-party runtime dependencies beyond the baseline package bundle. 

Drawbacks: Requires writing significant boilerplate code for tracking loading states, error catches, manual request cancellation, and retry loops. It introduces potential race conditions when users rapidly toggle feature flags or clear cache, and lacks an automated, stale-while-revalidate caching mechanism. 

Approach 2: TanStack Query (Vue Query) over Axios (Selected Implementation) 

Integrating TanStack Query acts as a dedicated asynchronous server-state layer that sits directly on top of Axios service calls.  

Strengths: Provides automated caching, background data refetching, query invalidation, and declarative status flags (isPending, isError, isFetching) which eliminates manually maintained state machines inside Pinia stores. 

Drawbacks: Increased bundle-size and additional dependency. 

6. Technical Specification & Architecture Summary 

7. Justification & System Alignment 

Operating within defined corporate constraints shifts engineering focus from lengthy greenfield evaluations to maximizing code reliability and operational safety:. Using Axios with TanStack Query ensures that mutations against Azure Blob Storage are atomic, predictable, and immediately verified through automated query cache invalidation. Enforcing pre-built UI components and Storybook visual testing guarantees critical safety mechanisms, such as the JSON diff preview modal and confirmation dialogs, function reliably before reaching advanced environments.  

The application coordinates with WestJet’s enterprise identity evaluation (Azure AD bridged via ForgeRock) through OAuth 2.0 / OIDC scoped Bearer tokens upholding strict Role-Based Access Control without hardcoding application permissions.