Senior Architect Interview Scenarios

Enterprise Real-Life Problem Solving & System Design Standards

Scenario 1: Diagnosing & Fixing Application Memory Leaks

Enterprise Memory Management

🚨 Interview Question:
"Users report that after navigating back and forth between feature pages 10 times, the browser becomes laggy and RAM usage climbs to 1.5 GB. How do you systematically diagnose and fix this memory leak?"

💡 Industry Best Practice Solution:
Diagnosis: Open Chrome DevTools ➡️ Memory Tab ➡️ Record Allocation Timeline & Take Heap Snapshots before/after navigation. Search for detached DOM elements retained by subscriptions.

Fix Patterns:
• Use `takeUntilDestroyed(this.destroyRef)` (Angular 16+ standard).
• Use declarative template `async` pipe.
• Remove custom DOM event listeners inside `ngOnDestroy()`.

private destroyRef = inject(DestroyRef);

this.dataService.stream$.pipe(
  takeUntilDestroyed(this.destroyRef) // 👈 Clean automated unsubscription!
).subscribe();

Scenario 2: State Caching vs Cache Invalidation Strategies

Universal Caching Architecture

🚨 Interview Question:
"In an enterprise app, lookup data is cached in memory. When a user updates a category name in a modal, other UI components still display stale cached data. How do you design a robust Caching & Cache Invalidation Strategy?"

💡 Industry Best Practice Solution:
1. Reactive Store Pattern (`BehaviorSubject` / `Signal`): Store cached data in a private stream. Expose a `refreshData()` method that fetches fresh API data and calls `.next()`. All UI components automatically receive the update!
2. Time-To-Live (TTL) Caching: Store `lastFetchedTime`. If `Date.now() - lastFetchedTime > TTL` (e.g. 5 mins), re-fetch from API.
3. Event Invalidation: Trigger cache refresh when receiving WebSocket / SignalR mutation events (`CATEGORY_MUTATED`).

private cache$ = new BehaviorSubject<Category[] | null>(null);

getCategories(forceRefresh: boolean = false): Observable<Category[]> {
  if (!this.cache$.value || forceRefresh) {
    this.http.get<Category[]>('/api/categories').pipe(
      tap(data => this.cache$.next(data)) // 👈 Updates all subscribers automatically
    ).subscribe();
  }
  return this.cache$.asObservable().pipe(filter(d => d !== null));
}

Scenario 3: Race Conditions in Typeahead Search

Async Stream Coordination

🚨 Interview Question:
"Searching for 'Ang' takes 3 seconds (slow API), while 'Angular' takes 500ms (fast API). The UI displays search results for 'Ang' instead of 'Angular'. How do you eliminate this race condition?"

💡 Industry Best Practice Solution:
Use standard RxJS pipeline: `debounceTime(300)` ➡️ `distinctUntilChanged()` ➡️ `switchMap()`. `switchMap` automatically unsubscribes from stale pending inner HTTP requests when a new keystroke arrives!

this.searchControl.valueChanges.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(query => this.api.search(query)) // 👈 Cancels previous slow API call!
).subscribe(results => this.results.set(results));

Scenario 4: Preventing Duplicate Form Submissions

User Interaction Safety

🚨 Interview Question:
"An eager customer clicks 'Submit Order' 5 times rapidly. Backend receives 5 duplicate charges. How do you prevent this on the frontend?"

💡 Industry Best Practice Solution:
Combine `exhaustMap()` (which ignores incoming clicks while an active request is in flight) with UI button locking (`[disabled]="isSubmitting()"`) and backend `Idempotency-Key` headers.

this.submitClick$.pipe(
  tap(() => this.isSubmitting.set(true)),
  exhaustMap(() => this.orderService.submit(this.form.value)), // 👈 Ignores duplicate clicks
  finalize(() => this.isSubmitting.set(false))
).subscribe();

Scenario 5: Rendering Large Datasets (10,000+ Items)

Performance Engineering

🚨 Interview Question:
"Rendering a table with 10,000 real-time items causes 100% CPU usage and DOM stuttering. How do you optimize?"

💡 Industry Best Practice Solution:
1. CDK Virtual Scroll (``): Renders only 20 visible viewport rows.
2. `OnPush` Change Detection + Signals: Updates cell values without dirty-checking full app.
3. DOM Node Tracking: Use `@for (item of items; track item.id)`.

Scenario 6: Synchronizing Parallel Requests with Resilient Error Handling

Parallel Stream Coordination

🚨 Interview Question:
"Dashboard page load requires 3 parallel REST calls. If 1 non-critical call fails, how do you prevent the page from crashing?"

💡 Industry Best Practice Solution:
Use `forkJoin()` for parallel execution and wrap individual non-critical requests with `catchError(err => of(fallback))` so single API failures fail gracefully. Use `finalize()` for loading spinners.

Scenario 7: Code Reuse Between Page Routes & Modal Dialogs

Component Architecture Patterns

🚨 Interview Question:
"An Entity Detail View needs to render both as a route (`/orders/101`) AND inside a Modal Dialog popup. How do you structure components?"

💡 Industry Best Practice Solution:
Use Container/Presentational Pattern: Build 1 Presentational Child Component (`OrderDetailViewComponent` with `@Input() orderId`) reused inside both `OrderRouteComponent` (reads route params) and `OrderDialogComponent` (reads dialog data).

Scenario 8: Background JWT Refresh via HTTP Interceptors

Security Architecture

🚨 Interview Question:
"User's access token expires while editing a form (401 Unauthorized). How do you refresh tokens silently without losing unsaved form data?"

💡 Industry Best Practice Solution:
In HTTP Interceptor, catch 401 errors, use a `isRefreshing` boolean flag, queue concurrent requests in a `BehaviorSubject(refreshTokenSubject)`, request new JWT token, and retry queued requests via `switchMap`.

Scenario 9: Micro-Frontend Architecture & Cross-App Communication

Micro-Frontend Architecture

🚨 Interview Question:
"Your enterprise application is split into 4 independent Micro-Frontends using Module Federation. How do you pass state & events between micro-apps without tightly coupling them?"

💡 Industry Best Practice Solution:
1. Decoupled Event Bus: Use native browser `window.dispatchEvent(new CustomEvent('AUTH_STATE_CHANGED', { detail }))` or RxJS singleton subject in Shell.
2. Shared Singleton Dependencies: Configure `module-federation.config.js` with `singleton: true, strictVersion: true` to prevent loading duplicate copies of Angular/RxJS in memory.
3. Domain Boundaries: Micro-apps must NEVER directly import components from another micro-app; communicate strictly via Contracts/Events.

Scenario 10: Preventing Accidental Data Loss with Navigation Guards

Form State Security

🚨 Interview Question:
"A user fills out a 15-minute form and accidentally clicks a sidebar link or closes the tab. How do you prevent data loss?"

💡 Industry Best Practice Solution:
1. Route Navigation Guard (`CanDeactivateFn`): Check `form.dirty`. If dirty, open a modal confirmation dialog ("You have unsaved changes. Leave anyway?").
2. Browser Tab Closing Listener: Bind `@HostListener('window:beforeunload', ['$event'])` to trigger native browser warning on tab close or refresh.

export const pendingChangesGuard: CanDeactivateFn<HasUnsavedChanges> = (component) => {
  return component.hasUnsavedChanges() 
    ? confirm('You have unsaved changes. Do you want to leave?') 
    : true;
};

Scenario 11: Real-Time WebSocket Reconnection & Sync Strategy

Real-Time Engineering

🚨 Interview Question:
"A user enters an elevator, loses WiFi for 30 seconds, and reconnects. How do you handle automatic WebSockets / SignalR reconnection and sync missed data?"

💡 Industry Best Practice Solution:
1. Exponential Backoff Reconnect: Configure reconnect delays (e.g. `[0, 2000, 5000, 10000, 30000]`).
2. Delta Sync Request: On reconnect event, call REST endpoint `/api/sync?sinceTimestamp=lastSeenTimestamp` to fetch events missed while offline.
3. Connection State Banner: Expose a `connectionState` Signal (`Connected`, `Reconnecting`, `Offline`) to inform user.

Scenario 12: Production Bundle Size Optimization (12 MB ➡️ <1 MB)

Build & Performance Optimization

🚨 Interview Question:
"Your production build `main.js` bundle size is 12 MB and takes 14 seconds to load on mobile. How do you audit and optimize it?"

💡 Industry Best Practice Solution:
1. Audit: Run `source-map-explorer` to pinpoint bloated dependencies.
2. Tree-Shaking: Replace `import * as _ from 'lodash'` with `import debounce from 'lodash-es/debounce'`. Replace `moment.js` with `date-fns` or `Intl`.
3. Route Lazy Loading: Use `loadChildren: () => import('./feature/routes')`.
4. Angular `@defer` Views: Defer heavy chart/PDF modules until visible (`@defer (on viewport)`).

Scenario 13: XSS & CSRF Security Hardening

Web Security Architecture

🚨 Interview Question:
"An attacker injects `` into a comment. How do you protect against XSS and CSRF?"

💡 Industry Best Practice Solution:
1. XSS Protection: Angular automatically sanitizes values bound via `{{ }}` and `[innerHTML]`. Never use `bypassSecurityTrustHtml` without strict sanitization. Enforce strict HTTP header `Content-Security-Policy: default-src 'self'`.
2. CSRF Protection: Store JWTs in `HttpOnly`, `Secure`, `SameSite=Strict` cookies. Use Angular `withXsrfConfiguration()` to auto-send `X-XSRF-TOKEN` headers.

Scenario 14: Enterprise Global Error Handling & Telemetry

Observability & Resilience

🚨 Interview Question:
"Unhandled JS exceptions occur silently in production for 5% of users. How do you capture errors globally without breaking the app UI?"

💡 Industry Best Practice Solution:
Implement a Custom Angular `ErrorHandler` (`{ provide: ErrorHandler, useClass: GlobalErrorHandler }`). Extract stack trace, user ID, route URL, and post telemetry payload to remote logging services (Sentry, Application Insights) while displaying a friendly user toast.

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    const chunkFailed = /Loading chunk [\d]+ failed/;
    if (chunkFailed.test(error.message)) {
      window.location.reload(); // Auto-reload on deployed chunk update
    }
    this.telemetry.logError({ error, url: window.location.href });
  }
}

Scenario 15: Optimistic UI Updates vs Rollback Handling

UI State Engineering

🚨 Interview Question:
"Waiting 800ms for API response when toggling a status switch makes the app feel sluggish. How do you implement Optimistic UI updates with rollback handling?"

💡 Industry Best Practice Solution:
1. Optimistic State Mutation: Instantly update local Signal state (`status.set(newStatus)`) and render UI immediately.
2. Rollback Backup: Store `previousStatus`. Send API request in background.
3. Error Recovery: If API fails, catch error, revert Signal back to `previousStatus`, and trigger an error toast.

Scenario 16: Internationalization (i18n) & RTL Layout Flipping

Global Architecture

🚨 Interview Question:
"Your application must support English (LTR) and Arabic (RTL). Switching language should flip the entire UI layout dynamically. How do you architect CSS & Angular?"

💡 Industry Best Practice Solution:
1. CSS Logical Properties: Use `margin-inline-start`, `padding-inline-end`, `inset-inline-start` instead of static `margin-left` or `left: 0`.
2. HTML `dir` Binding: Toggle ``.
3. Angular Bidi Module: Use `@angular/cdk/bidi` service to detect layout direction programmatically.