Real Intuit Interview Experience

┌─────────────────────────────────────────────────────┐
│ HIGH-LEVEL DESIGN (Slide 1)                         │
├─────────────────────────────────────────────────────┤
│                                                     │
│  ┌─────────────┐    ┌──────────────┐               │
│  │ Search Bar  │───▸│ Autocomplete │               │
│  │ (debounced) │    │ Dropdown     │               │
│  └─────────────┘    └──────────────┘               │
│         │                                           │
│         ▼                                           │
│  ┌─────────────────────────────────────────┐       │
│  │ Stock Dashboard Grid                     │       │
│  │  ┌─────────┐ ┌─────────┐ ┌─────────┐  │       │
│  │  │ Widget  │ │ Widget  │ │ Widget  │  │       │
│  │  │ INTU    │ │ AAPL    │ │ GOOGL   │  │       │
│  │  └─────────┘ └─────────┘ └─────────┘  │       │
│  └─────────────────────────────────────────┘       │
│         │                                           │
│         ▼                                           │
│  ┌──────────────┐                                  │
│  │ Watchlist    │ (persisted in localStorage)      │
│  │ Sidebar      │                                  │
│  └──────────────┘                                  │
│                                                     │
│  State: Context + useReducer (justification below) │
│  API: Alpha Vantage / Finnhub (free tier)          │
│  Testing: Vitest + React Testing Library           │
│  Deploy: Vercel (auto-deploy from main branch)     │
└─────────────────────────────────────────────────────┘

// hooks/useStockSearch.js
import { useState, useEffect, useRef } from 'react';

function useStockSearch(query, delay = 300) {
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const abortRef = useRef(null);
  
  useEffect(() => {
    if (!query || query.length < 2) {
      setResults([]);
      return;
    }
    
    const timer = setTimeout(async () => {
      // Cancel previous in-flight request
      if (abortRef.current) abortRef.current.abort();
      abortRef.current = new AbortController();
      
      setLoading(true);
      setError(null);
      
      try {
        const response = await fetch(
          `https://finnhub.io/api/v1/search?q=${encodeURIComponent(query)}`,
          { 
            signal: abortRef.current.signal,
            headers: { 'X-Finnhub-Token': process.env.REACT_APP_API_KEY }
          }
        );
        
        if (!response.ok) throw new Error('API request failed');
        
        const data = await response.json();
        setResults(data.result?.slice(0, 8) || []);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    }, delay);
    
    return () => {
      clearTimeout(timer);
      if (abortRef.current) abortRef.current.abort();
    };
  }, [query, delay]);
  
  return { results, loading, error };
}

export default useStockSearch;

// components/SearchBar.jsx
import { useState } from 'react';
import useStockSearch from '../hooks/useStockSearch';

function SearchBar({ onSelectStock }) {
  const [query, setQuery] = useState('');
  const [isOpen, setIsOpen] = useState(false);
  const { results, loading, error } = useStockSearch(query);
  
  const handleSelect = (stock) => {
    onSelectStock(stock);
    setQuery('');
    setIsOpen(false);
  };
  
  return (
    <div className="search-container" role="combobox" aria-expanded={isOpen}>
      <input
        type="text"
        value={query}
        onChange={(e) => { setQuery(e.target.value); setIsOpen(true); }}
        onFocus={() => setIsOpen(true)}
        placeholder="Search stocks (e.g., AAPL, GOOGL)..."
        aria-label="Search stocks"
        aria-autocomplete="list"
      />
      
      {isOpen && (results.length > 0 || loading) && (
        <ul className="autocomplete-dropdown" role="listbox">
          {loading && <li className="loading">Searching...</li>}
          {error && <li className="error">{error}</li>}
          {results.map((stock) => (
            <li
              key={stock.symbol}
              onClick={() => handleSelect(stock)}
              role="option"
              aria-selected={false}
            >
              <span className="symbol">{stock.symbol}</span>
              <span className="name">{stock.description}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default SearchBar;

// context/WatchlistContext.jsx
import { createContext, useContext, useReducer, useEffect } from 'react';

const WatchlistContext = createContext();

const initialState = {
  stocks: JSON.parse(localStorage.getItem('watchlist') || '[]'),
};

function watchlistReducer(state, action) {
  switch (action.type) {
    case 'ADD_STOCK':
      if (state.stocks.find(s => s.symbol === action.payload.symbol)) {
        return state; // Prevent duplicates
      }
      return { ...state, stocks: [...state.stocks, action.payload] };
      
    case 'REMOVE_STOCK':
      return {
        ...state,
        stocks: state.stocks.filter(s => s.symbol !== action.payload)
      };
      
    case 'REORDER':
      return { ...state, stocks: action.payload };
      
    default:
      return state;
  }
}

export function WatchlistProvider({ children }) {
  const [state, dispatch] = useReducer(watchlistReducer, initialState);
  
  // Persist to localStorage on change
  useEffect(() => {
    localStorage.setItem('watchlist', JSON.stringify(state.stocks));
  }, [state.stocks]);
  
  return (
    <WatchlistContext.Provider value={{ state, dispatch }}>
      {children}
    </WatchlistContext.Provider>
  );
}

export function useWatchlist() {
  const context = useContext(WatchlistContext);
  if (!context) {
    throw new Error('useWatchlist must be used within WatchlistProvider');
  }
  return context;
}

// === WHY Context + useReducer over Redux? ===
// 1. Single domain (watchlist) — no cross-cutting concerns
// 2. No middleware needed (no sagas, thunks for async)
// 3. 0 KB added to bundle (built into React)
// 4. useReducer gives predictable state transitions (like Redux)
//
// WHEN TO SWITCH TO REDUX/ZUSTAND:
// - If we add real-time WebSocket price updates (50+ stocks)
// - If we need time-travel debugging for complex state
// - If multiple unrelated domains share state

// __tests__/SearchBar.test.jsx
import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { vi, describe, it, expect, beforeEach } from 'vitest';
import SearchBar from '../components/SearchBar';

// Mock fetch globally
const mockFetch = vi.fn();
global.fetch = mockFetch;

describe('SearchBar', () => {
  beforeEach(() => {
    vi.clearAllMocks();
    vi.useFakeTimers();
  });

  it('debounces API calls (waits 300ms)', async () => {
    mockFetch.mockResolvedValue({
      ok: true,
      json: () => Promise.resolve({ result: [
        { symbol: 'AAPL', description: 'Apple Inc' }
      ]})
    });

    const onSelect = vi.fn();
    render(<SearchBar onSelectStock={onSelect} />);
    
    const input = screen.getByPlaceholderText(/search stocks/i);
    await userEvent.type(input, 'AA');
    
    // Should NOT have called fetch yet (debounce delay)
    expect(mockFetch).not.toHaveBeenCalled();
    
    // Advance timer past debounce delay
    vi.advanceTimersByTime(300);
    
    await waitFor(() => {
      expect(mockFetch).toHaveBeenCalledTimes(1);
      expect(mockFetch).toHaveBeenCalledWith(
        expect.stringContaining('q=AA'),
        expect.any(Object)
      );
    });
  });

  it('shows results and calls onSelect when clicked', async () => {
    mockFetch.mockResolvedValue({
      ok: true,
      json: () => Promise.resolve({ result: [
        { symbol: 'INTU', description: 'Intuit Inc' }
      ]})
    });

    const onSelect = vi.fn();
    render(<SearchBar onSelectStock={onSelect} />);
    
    const input = screen.getByPlaceholderText(/search stocks/i);
    await userEvent.type(input, 'INTU');
    vi.advanceTimersByTime(300);
    
    await waitFor(() => {
      expect(screen.getByText('INTU')).toBeInTheDocument();
    });
    
    await userEvent.click(screen.getByText('INTU'));
    expect(onSelect).toHaveBeenCalledWith(
      expect.objectContaining({ symbol: 'INTU' })
    );
  });
});

// === DECISION MATRIX (present this in the meeting) ===

// Criteria         | Context+useReducer | Redux        | Zustand
// ────────────────────────────────────────────────────────────────
// Bundle size      | 0 KB (built-in)    | 7.6 KB       | 1.1 KB
// Boilerplate      | Low                | High         | Very Low
// DevTools         | React DevTools     | Redux DevTool| Zustand DT
// Middleware       | None (manual)      | Thunk/Saga   | Built-in
// Re-render scope  | All consumers      | Selectors    | Selectors
// Learning curve   | Low                | Medium       | Low

// MY CHOICE: Context + useReducer
// REASON: 
// 1. Single domain (watchlist) — no complex state interactions
// 2. Max ~10 stocks in watchlist — re-render cost is negligible
// 3. No async side effects needed in state layer (API calls are in hooks)
// 4. Team familiarity — no additional library to learn/maintain

// SCALING BOUNDARY (when I would switch):
// → If live WebSocket price updates for 50+ stocks: switch to Zustand
//   (Context re-renders all consumers; Zustand has selectors)
// → If complex async flows (order placement, payment): add middleware
// → If debugging complex state bugs: Redux DevTools time-travel helps

// They asked: "What if you need to share state with a micro-frontend?"
// Answer: Extract to a shared event bus or use module federation
// Context is app-scoped — cannot cross iframe/module boundaries

// Add to existing Dashboard component
function StockDashboard() {
  const { state } = useWatchlist();
  const [category, setCategory] = useState('all');
  const [searchFilter, setSearchFilter] = useState('');
  
  // Derived state: filter stocks based on category + search
  const filteredStocks = useMemo(() => {
    return state.stocks.filter(stock => {
      const matchesCategory = category === 'all' || 
        stock.sector === category;
      const matchesSearch = stock.symbol
        .toLowerCase()
        .includes(searchFilter.toLowerCase()) ||
        stock.name?.toLowerCase().includes(searchFilter.toLowerCase());
      
      return matchesCategory && matchesSearch;
    });
  }, [state.stocks, category, searchFilter]);
  
  const categories = useMemo(() => {
    const sectors = [...new Set(state.stocks.map(s => s.sector).filter(Boolean))];
    return ['all', ...sectors];
  }, [state.stocks]);
  
  return (
    <div className="dashboard">
      <div className="filters-bar">
        <input
          type="text"
          value={searchFilter}
          onChange={(e) => setSearchFilter(e.target.value)}
          placeholder="Filter by name or symbol..."
          className="filter-input"
        />
        
        <select
          value={category}
          onChange={(e) => setCategory(e.target.value)}
          className="category-dropdown"
          aria-label="Filter by category"
        >
          {categories.map(cat => (
            <option key={cat} value={cat}>
              {cat === 'all' ? 'All Categories' : cat}
            </option>
          ))}
        </select>
      </div>
      
      <div className="stock-grid">
        {filteredStocks.length > 0 ? (
          filteredStocks.map(stock => (
            <StockWidget key={stock.symbol} stock={stock} />
          ))
        ) : (
          <p className="empty">No stocks match your filters</p>
        )}
      </div>
    </div>
  );
}

• Speed of implementation: Can you extend your own code quickly?
• State placement: Filters are local (not in context) — correct separation
• useMemo for derived data:Don't recompute on every keystroke unnecessarily
• Empty state handling: Always show feedback when no results match
• Accessibility: aria-label on select, semantic HTML

function promiseRace(promises) {
  return new Promise((resolve, reject) => {
    const iterable = Array.from(promises);
    
    // Edge: empty iterable → forever pending (native behavior)
    if (iterable.length === 0) return;
    
    iterable.forEach((promise) => {
      // Wrap non-promise values with Promise.resolve
      Promise.resolve(promise)
        .then(resolve)   // First to resolve → wins
        .catch(reject);  // First to reject → wins
    });
  });
}

// Test:
const fast = new Promise(res => setTimeout(() => res('fast'), 100));
const slow = new Promise(res => setTimeout(() => res('slow'), 500));
promiseRace([slow, fast]).then(console.log); // 'fast'

function promiseAny(promises) {
  return new Promise((resolve, reject) => {
    const iterable = Array.from(promises);
    
    if (iterable.length === 0) {
      reject(new AggregateError([], 'All promises were rejected'));
      return;
    }
    
    const errors = [];
    let rejectedCount = 0;
    
    iterable.forEach((promise, index) => {
      Promise.resolve(promise)
        .then(resolve) // First to RESOLVE wins
        .catch((err) => {
          errors[index] = err;
          rejectedCount++;
          
          // Only reject if ALL promises rejected
          if (rejectedCount === iterable.length) {
            reject(new AggregateError(
              errors,
              'All promises were rejected'
            ));
          }
        });
    });
  });
}

// Test:
const fail1 = Promise.reject('error1');
const fail2 = Promise.reject('error2');
const success = new Promise(res => setTimeout(() => res('success'), 100));

promiseAny([fail1, fail2, success]).then(console.log); // 'success'
promiseAny([fail1, fail2]).catch(e => console.log(e.errors)); // ['error1', 'error2']

                 | Promise.race        | Promise.any
─────────────────┼─────────────────────┼───────────────────────
Settles when     | First to SETTLE     | First to RESOLVE
                 | (resolve OR reject) | (ignores rejections)
─────────────────┼─────────────────────┼───────────────────────
Rejects when     | First rejection     | ALL reject
                 | wins                | (AggregateError)
─────────────────┼─────────────────────┼───────────────────────
Use case         | Timeout pattern     | Fastest CDN/mirror
                 | (race vs timer)     | (try multiple sources)
─────────────────┼─────────────────────┼───────────────────────
Empty iterable   | Forever pending     | Rejects immediately
─────────────────┼─────────────────────┼───────────────────────
ES version       | ES2015 (ES6)        | ES2021

function identicalDOMTrees(nodeA, nodeB) {
  // Base case: both null
  if (nodeA === null && nodeB === null) return true;
  
  // One is null, other is not
  if (nodeA === null || nodeB === null) return false;
  
  // Check node type (Element, Text, Comment, etc.)
  if (nodeA.nodeType !== nodeB.nodeType) return false;
  
  // Text nodes: compare text content directly
  if (nodeA.nodeType === Node.TEXT_NODE) {
    return nodeA.textContent === nodeB.textContent;
  }
  
  // Element nodes: compare tag name
  if (nodeA.nodeType === Node.ELEMENT_NODE) {
    // Different tag names
    if (nodeA.tagName !== nodeB.tagName) return false;
    
    // Compare attributes
    const attrsA = nodeA.attributes;
    const attrsB = nodeB.attributes;
    
    if (attrsA.length !== attrsB.length) return false;
    
    for (let i = 0; i < attrsA.length; i++) {
      const attrA = attrsA[i];
      const attrBValue = nodeB.getAttribute(attrA.name);
      
      if (attrBValue !== attrA.value) return false;
    }
    
    // Compare children count
    const childrenA = nodeA.childNodes;
    const childrenB = nodeB.childNodes;
    
    if (childrenA.length !== childrenB.length) return false;
    
    // Recursively compare each child
    for (let i = 0; i < childrenA.length; i++) {
      if (!identicalDOMTrees(childrenA[i], childrenB[i])) {
        return false;
      }
    }
  }
  
  return true;
}

// Test cases:
// <div id="a"><span>Hello</span></div>
// <div id="a"><span>Hello</span></div>
// → true (same structure, same attributes, same text)

// <div id="a"><span>Hello</span></div>
// <div id="b"><span>Hello</span></div>
// → false (different attribute value)

// <div><span>Hello</span></div>
// <div><p>Hello</p></div>
// → false (different child tag)

• Text nodes vs Element nodes: Check nodeType first — text nodes have no children or attributes
• Whitespace text nodes: Browser inserts text nodes for whitespace between elements
• Attribute order:HTML attribute order doesn't matter — compare by name, not position
• childNodes vs children: childNodes includes text nodes; children only includes elements
• Performance: O(n) where n is total nodes — must visit every node in worst case

// Q1: "Your search bar takes user input and renders it. 
//      What's the XSS risk?"
// 
// Answer: If rendering user input via innerHTML or dangerouslySetInnerHTML,
// attacker can inject: <script>stealCookies()</script>
// 
// Fix: React auto-escapes JSX expressions. 
// Never use dangerouslySetInnerHTML with user input.
// Sanitize with DOMPurify if HTML rendering is needed.

// Q2: "How do you protect your API key in the frontend?"
//
// Answer: You CANNOT fully hide it in a client-side app.
// Options:
// 1. Proxy through your own backend (best)
// 2. Environment variables (.env) — hidden from source but exposed in network tab
// 3. Restrict API key to specific domains (API provider setting)
// 4. Rate limiting on your proxy to prevent abuse

// Q3: "What's CSRF and does your app need protection?"
//
// Answer: CSRF exploits authenticated sessions (cookies).
// My app uses localStorage for watchlist → no cookies → no CSRF risk.
// If we added auth with cookies: use SameSite=Strict + CSRF tokens.

// Q4: "Content Security Policy — what would you set?"
//
// Answer for this app:
// Content-Security-Policy: 
//   default-src 'self';
//   script-src 'self';
//   style-src 'self' 'unsafe-inline';
//   img-src 'self' https://finnhub.io;
//   connect-src 'self' https://finnhub.io;
//   font-src 'self';

// Q5: "How do you prevent prototype pollution in your app?"
//
// Answer: Never merge user input directly into objects.
// Use Object.create(null) for dictionaries (no __proto__).
// Validate keys: reject __proto__, constructor, prototype.

Situation: "At [Company], our dashboard loaded in 8 seconds on 3G..."
Task:      "I was tasked with reducing it to under 3 seconds..."
Action:    "I profiled with Lighthouse, identified 3 bottlenecks:
            1. 400KB unminified bundle → code splitting saved 200KB
            2. Render-blocking CSS → critical CSS extraction
            3. 12 API calls waterfall → parallel + prefetching"
Result:    "LCP dropped from 8s to 2.1s. Bounce rate decreased 34%."
+Learning: "If I did it again, I'd start with a performance budget 
            from day 1 instead of retrofitting optimizations."

• Use specific numbers (not "improved performance" → "reduced LCP by 74%")
• Own your failures: "The first approach didn't work because..."
• Show collaboration: "I paired with the backend team to redesign the API contract"

// === WHEN TO USE MICRO FRONTENDS ===
//
// ✅ USE WHEN:
// • Multiple teams own different features (team autonomy)
// • Teams want independent deploy cycles (no coordination)
// • Different tech stacks per feature (legacy + modern)
// • Large app where monolith build times exceed 10+ minutes
// • Feature teams need to release independently (3+ teams)
//
// ❌ DON'T USE WHEN:
// • Single team owns the entire frontend
// • App is small/medium (< 100K LOC)
// • Shared state is heavily coupled between features
// • Performance budget is very tight (micro FEs add overhead)
// • Team doesn't have strong DevOps/infra support

// === TRADE-OFFS ===
const tradeoffs = {
  pros: [
    'Independent deployments (team A deploys without team B)',
    'Technology freedom (React shell + Vue widget is possible)',
    'Smaller, focused codebases per team',
    'Fault isolation (one micro FE crashes, others survive)',
    'Parallel development velocity at scale'
  ],
  cons: [
    'Shared dependency duplication (React loaded twice?)',
    'Cross-micro-FE communication is complex (event bus, custom events)',
    'Consistent UX is harder (shared design system needed)',
    'Performance overhead (multiple bundles, runtime loading)',
    'Debugging spans multiple repos/deployments',
    'Infrastructure complexity (module federation, routing)'
  ]
};

// === IMPLEMENTATION OPTIONS ===
// 1. Webpack Module Federation (runtime sharing, Intuit uses this)
// 2. Single-SPA (framework-agnostic orchestrator)
// 3. iframes (strong isolation but poor UX/communication)
// 4. Web Components (native, good encapsulation)
// 5. Server-side composition (Nginx/Edge-side includes)

// === INTUIT CONTEXT ===
// QuickBooks has: Invoicing, Expenses, Banking, Payroll, Reports
// Each feature is a team → Module Federation makes sense
// Shared: Design system (Intuit Design System), Auth, Navigation shell

// === WEB WORKERS ===
// Purpose: Run CPU-intensive JS OFF the main thread
// Lifecycle: Created/destroyed by your code
// Access: No DOM access. Can use fetch, IndexedDB, WebSockets
// Communication: postMessage (structured clone algorithm)
// Use cases:
//   • Heavy data processing (sorting 100K rows)
//   • Image/video processing (canvas operations)
//   • CSV/Excel parsing
//   • Cryptographic operations
//   • Complex calculations (financial models at Intuit!)

// Example: Parse large CSV in background
const worker = new Worker('csv-parser.worker.js');

worker.postMessage({ file: largeCSVBlob });

worker.onmessage = (event) => {
  const { rows, headers } = event.data;
  renderTable(rows, headers); // Main thread stays responsive
};

// csv-parser.worker.js
self.onmessage = (event) => {
  const { file } = event.data;
  const text = /* parse blob */;
  const rows = text.split('\n').map(row => row.split(','));
  const headers = rows.shift();
  
  self.postMessage({ rows, headers });
};


// === SERVICE WORKERS ===
// Purpose: Proxy between browser and network (offline, caching, push)
// Lifecycle: Install → Activate → Fetch (browser-managed, persists)
// Access: No DOM access. Intercepts ALL network requests.
// Communication: postMessage + FetchEvent
// Use cases:
//   • Offline-first apps (cache critical assets)
//   • Background sync (queue actions while offline)
//   • Push notifications
//   • Cache strategies (stale-while-revalidate, cache-first)
//   • Precaching static assets (PWA)

// Example: Cache-first strategy for API responses
// sw.js
self.addEventListener('fetch', (event) => {
  if (event.request.url.includes('/api/stocks')) {
    event.respondWith(
      caches.match(event.request).then((cached) => {
        // Return cache immediately, update in background
        const fetchPromise = fetch(event.request).then(async (response) => {
          const cache = await caches.open('stock-data-v1');
          cache.put(event.request, response.clone());
          return response;
        });
        
        return cached || fetchPromise; // Stale-while-revalidate
      })
    );
  }
});


// === COMPARISON TABLE ===
// Feature          | Web Worker          | Service Worker
// ─────────────────┼─────────────────────┼────────────────────
// Purpose          | Off-main-thread     | Network proxy
//                  | computation         | + caching
// ─────────────────┼─────────────────────┼────────────────────
// Lifecycle        | You control         | Browser-managed
// ─────────────────┼─────────────────────┼────────────────────
// Persists         | No (tab-scoped)     | Yes (origin-scoped)
// ─────────────────┼─────────────────────┼────────────────────
// Network access   | Yes (fetch)         | Yes (intercepts ALL)
// ─────────────────┼─────────────────────┼────────────────────
// DOM access       | No                  | No
// ─────────────────┼─────────────────────┼────────────────────
// Multiple per page| Yes (many workers)  | One per scope
// ─────────────────┼─────────────────────┼────────────────────
// HTTPS required   | No                  | Yes (except localhost)
// ─────────────────┼─────────────────────┼────────────────────
// Intuit use case  | Tax calculation     | Offline access to
//                  | engine (TurboTax)   | saved QuickBooks data

• Web Workers:"I need to do heavy computation without blocking the UI"
• Service Workers:"I need to control network behavior (offline, caching, push)"
• Both: Run on separate threads, no DOM access, communicate via messages
• At Intuit: TurboTax uses Web Workers for tax calculations; QuickBooks uses Service Workers for offline invoice viewing

QuickBooks Frontend Challenges:
─────────────────────────────────
• Complex forms with real-time validation (tax compliance rules)
• Data-heavy tables (1000s of transactions) — virtualization needed
• Multi-currency support — locale-aware number formatting
• Offline-capable (Service Worker for data sync)
• Accessibility (WCAG 2.1 AA) — financial tools are legally required
• Performance: Dashboard with 10+ widgets, each with own data source
• Security: PCI compliance for payment data rendering

TurboTax Frontend Challenges:
─────────────────────────────────
• Wizard-like multi-step form (200+ screens, conditional paths)
• Tax calculation engine in Web Workers (heavy computation)
• State machine for navigation (can't jump ahead, validate before next)
• Auto-save with conflict resolution (multiple tabs)
• Progressive disclosure (show complexity only when needed)

What Makes Intuit's Frontend Unique:
─────────────────────────────────
• Design System: Shared across all products (consistency)
• Micro Frontend Architecture: Each feature team deploys independently
• Customer Obsession: A/B testing on every major flow change
• Data-Driven: Every interaction is tracked for UX improvement