🛒 System Design: Dynamic eCommerce UIs with BFF Pattern (Senior Frontend Interview Guide)

Target Level: Senior Frontend Engineer / Staff Engineer Duration: 45-60 minutes Interview Focus: Backend for Frontend (BFF), Config-Driven UI, Feature Flags, Dynamic Forms, A/B Testing

Interview Importance: 🔴 Critical — eCommerce companies heavily test on this topic because dynamic UIs drive conversion rates, enable rapid experimentation, and power festival/event-based campaigns that generate massive revenue spikes.

Interview Approach & What Interviewers Look For

When asked to design a dynamic eCommerce UI system that adapts based on festivals, user segments, or A/B tests, interviewers are evaluating:

1. BFF Pattern Understanding: Do you know when and why to use Backend for Frontend as an orchestration layer?
2. Config-Driven Architecture: Can you design UIs that change without code deployments?
3. Dynamic Forms: Can you build form systems that adapt based on user context, product types, or business rules?
4. Feature Flags & A/B Testing: How do you enable rapid experimentation without breaking production?
5. Performance: Can you keep the UI fast despite fetching configurations, user data, and personalization?
6. Scalability: Can your system handle Black Friday/Diwali traffic spikes (10-100x normal load)?

Pro Tip: Real eCommerce sites (Amazon, Flipkart, Shopify) switch themes, layouts, and forms instantly during festivals. Your design must support zero-downtime updates and instant rollbacks.

🧭 Clarifying Questions First

Before jumping into architecture, align on scope:

• Are we changing homepage layouts only, or checkout, search, and account flows too?
• Which experiences must be configurable by non-engineers versus gated behind deployments?
• How much personalization is required: segment-level, user-level, or experiment-level?
• What is the rollback expectation during peak events like Diwali or Black Friday?
• Do configs need offline defaults, edge caching, or country-specific compliance rules?

1️⃣ What are Dynamic eCommerce UIs?

Dynamic eCommerce UIs are interfaces that automatically adapt their appearance, layout, content, and behavior based on:

• Temporal Events: Festivals (Diwali, Christmas, Black Friday), flash sales, seasonal campaigns
• User Context: Location, language, purchase history, device type, loyalty tier
• Business Rules: Inventory levels, regional regulations, payment methods, shipping options
• Experimentation: A/B tests, feature rollouts, personalization algorithms

Visual Example

Loading diagram…

Real-World Analogy: Think of your favorite streaming app's homepage. Netflix shows different content based on your viewing history. Similarly, eCommerce sites show different products, themes, and layouts based on who you are and when you visit.

2️⃣ Why Dynamic UIs Matter — Business Impact

Performance Benefits:

• Faster Experimentation: Launch A/B test in 5 minutes vs 2 days
• Revenue Impact: Festival themes increase conversion by 20-40% during peak periods
• Reduced Deployment Risk: Config changes rollback instantly vs code rollbacks (20+ minutes)
• Developer Productivity: Marketing team updates themes without engineering involvement

3️⃣ Architecture — BFF Pattern for Dynamic UIs

High-Level System Design

Loading diagram…

Why Use BFF for Dynamic UIs?

Traditional Approach (Without BFF):

// Client makes 5+ sequential API calls
const theme = await fetch('/api/theme');
const user = await fetch('/api/user');
const products = await fetch('/api/products');
const banners = await fetch('/api/banners');
const forms = await fetch('/api/forms');

// Problem: Waterfall requests (5 x 200ms = 1 second!)
// Problem: Client must know all APIs and orchestration logic
// Problem: Over-fetching (getting 100 fields when UI needs 10)

With BFF Pattern:

// Client makes 1 optimized API call
const pageConfig = await fetch('/api/bff/page-config?page=home');

// BFF returns EXACTLY what this page needs:
{
  theme: { primary: "#FF5733", font: "Inter" },
  layout: "festival-grid",
  components: [
    { type: "Banner", data: { image, headline, cta } },
    { type: "ProductGrid", data: { products: [...] } }
  ],
  forms: {
    checkout: { fields: [...], validation: {...} }
  }
}

// Benefit: 1 round trip (200ms total)
// Benefit: BFF handles complexity, client stays simple
// Benefit: Easy to cache entire response at CDN

4️⃣ Core Technical Decisions

Decision 1: Config-Driven UI Components

The Problem: How do we change UI without deploying code?

The Solution: Component registry + JSON configuration

// ✅ GOOD: Component Registry Pattern
const COMPONENT_REGISTRY = {
  Banner: ({ data }) => (
    <div style={{ background: data.bgColor }}>
      <h1>{data.headline}</h1>
      <button>{data.ctaText}</button>
    </div>
  ),

  ProductGrid: ({ data }) => (
    <div className="grid">
      {data.products.map(p => <ProductCard key={p.id} {...p} />)}
    </div>
  ),

  CountdownTimer: ({ data }) => {
    const [time, setTime] = useState(data.endTime);
    // ... countdown logic
    return <div>{formatTime(time)}</div>;
  }
};

// Dynamic Page Renderer
const DynamicPage = ({ config }) => {
  return (
    <div>
      {config.components.map((comp, idx) => {
        const Component = COMPONENT_REGISTRY[comp.type];
        if (!Component) return null;
        return <Component key={idx} data={comp.data} />;
      })}
    </div>
  );
};

Configuration Example (from BFF):

{
  "page": "home",
  "theme": {
    "primary": "#FF6600",
    "secondary": "#FFD700",
    "font": "Poppins"
  },
  "components": [
    {
      "type": "Banner",
      "data": {
        "headline": "Diwali Dhamaka Sale! 🪔",
        "bgColor": "#FF6600",
        "ctaText": "Shop Now",
        "ctaLink": "/diwali-sale"
      }
    },
    {
      "type": "CountdownTimer",
      "data": {
        "endTime": "2024-11-12T23:59:59Z",
        "label": "Sale Ends In:"
      }
    },
    {
      "type": "ProductGrid",
      "data": {
        "products": [...]
      }
    }
  ]
}

Why This Works:

• Marketing team updates JSON in CMS -> Changes live instantly
• Zero code deployment for theme changes
• Easy to A/B test (serve different configs to different users)
• Rollback = revert to previous config (instant)

Decision 2: BFF Implementation (Node.js + Express)

// BFF Server: Orchestrates multiple microservices
import express from 'express';
import axios from 'axios';

const app = express();

app.get('/api/bff/page-config', async (req, res) => {
  const { page, userId } = req.query;

  try {
    // 1. Fetch data from multiple services IN PARALLEL
    const [themeData, userData, productData, bannerData] = await Promise.all([
      axios.get(`${CONFIG_SERVICE}/theme?event=current`),
      axios.get(`${USER_SERVICE}/profile/${userId}`),
      axios.get(`${PRODUCT_SERVICE}/featured?category=${page}`),
      axios.get(`${CMS_SERVICE}/banners?page=${page}`)
    ]);

    // 2. Apply personalization logic
    const theme = getThemeForUser(themeData.data, userData.data);
    const products = personalizeProducts(productData.data, userData.data);

    // 3. Construct config-driven response
    const config = {
      theme: {
        primary: theme.colors.primary,
        secondary: theme.colors.secondary,
        font: theme.typography.fontFamily
      },
      components: [
        {
          type: 'Banner',
          data: bannerData.data.hero
        },
        {
          type: 'ProductGrid',
          data: { products }
        }
      ],
      forms: getFormsForPage(page, userData.data)
    };

    // 4. Cache response at CDN (5 minutes)
    res.set('Cache-Control', 'public, max-age=300');
    res.json(config);

  } catch (error) {
    console.error('BFF Error:', error);
    // Fallback to default config
    res.json(getDefaultConfig(page));
  }
});

// Helper: Personalization Logic
const getThemeForUser = (themeData, userData) => {
  const currentEvent = themeData.currentEvent; // "diwali", "christmas", etc.
  const userLocale = userData.country;

  // Regional variations
  if (currentEvent === 'diwali' && userLocale === 'IN') {
    return themeData.themes.diwaliIndia;
  }
  if (currentEvent === 'blackfriday' && userLocale === 'US') {
    return themeData.themes.blackFridayUS;
  }

  return themeData.themes.default;
};

app.listen(3000, () => {
  console.log('BFF running on port 3000');
});

Decision 3: Feature Flags for Festival Activations

The Problem: How do we activate Diwali theme at exactly midnight without manual deployment?

The Solution: Feature flags + scheduled evaluations

// Feature Flag Configuration (LaunchDarkly / Unleash)
const featureFlags = {
  "diwali-theme-2024": {
    enabled: true,
    rules: [
      {
        // Activate between Oct 20 - Nov 5
        condition: "date >= 2024-10-20 AND date <= 2024-11-05",
        variation: "diwali"
      },
      {
        // Show to India users only
        condition: "user.country == 'IN'",
        variation: "diwali"
      }
    ],
    defaultVariation: "standard"
  }
};

// BFF checks feature flag
const getActiveTheme = async (userId) => {
  const user = await getUserContext(userId);

  const themeVariation = await ldClient.variation(
    'diwali-theme-2024',
    user,
    'standard' // default
  );

  if (themeVariation === 'diwali') {
    return {
      name: 'Diwali Dhamaka',
      colors: { primary: '#FF6600', secondary: '#FFD700' },
      layout: 'festival-grid',
      assets: {
        logo: '/assets/diwali-logo.svg',
        banner: '/assets/diwali-banner.jpg'
      }
    };
  }

  return standardTheme;
};

Benefits:

• Theme activates automatically at midnight (no human intervention)
• Gradual rollout: 10% users -> 50% -> 100%
• Instant rollback if issues detected
• A/B test: 50% see Diwali theme, 50% see standard (measure conversion)

5️⃣ Dynamic Forms Implementation

The Challenge

eCommerce forms must adapt based on:

• Product type: Electronics need warranty info, clothing needs size charts
• User location: Indian users need GST number, EU users need VAT
• Payment method: Credit card vs UPI vs Cash on Delivery
• Shipping method: Express delivery requires phone number

Solution: Schema-Driven Forms

// Form Schema from BFF
const checkoutFormSchema = {
  formId: 'checkout-form',
  fields: [
    {
      name: 'email',
      type: 'email',
      label: 'Email Address',
      required: true,
      validation: {
        pattern: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$',
        message: 'Invalid email format'
      }
    },
    {
      name: 'phone',
      type: 'tel',
      label: 'Phone Number',
      required: true,
      conditional: {
        // Only show if express shipping selected
        dependsOn: 'shippingMethod',
        showWhen: ['express', 'same-day']
      },
      validation: {
        pattern: '^[0-9]{10}$',
        message: 'Phone must be 10 digits'
      }
    },
    {
      name: 'gstNumber',
      type: 'text',
      label: 'GST Number (Optional)',
      required: false,
      conditional: {
        // Only show for Indian users
        dependsOn: 'country',
        showWhen: ['IN']
      },
      validation: {
        pattern: '^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}[1-9A-Z]{1}Z[0-9A-Z]{1}$',
        message: 'Invalid GST format'
      }
    },
    {
      name: 'paymentMethod',
      type: 'select',
      label: 'Payment Method',
      required: true,
      options: [
        { value: 'card', label: 'Credit/Debit Card' },
        { value: 'upi', label: 'UPI', availableFor: ['IN'] },
        { value: 'cod', label: 'Cash on Delivery' }
      ]
    },
    {
      name: 'cardNumber',
      type: 'text',
      label: 'Card Number',
      required: true,
      conditional: {
        dependsOn: 'paymentMethod',
        showWhen: ['card']
      },
      validation: {
        custom: 'luhnCheck', // Custom validator
        message: 'Invalid card number'
      }
    }
  ],
  submit: {
    url: '/api/checkout',
    method: 'POST',
    successRedirect: '/order-confirmation'
  }
};

Dynamic Form Renderer Component

import { useState, useEffect } from 'react';

const DynamicForm = ({ schema }) => {
  const [formData, setFormData] = useState({});
  const [errors, setErrors] = useState({});

  // Determine which fields to show based on conditionals
  const getVisibleFields = () => {
    return schema.fields.filter(field => {
      if (!field.conditional) return true;

      const dependentValue = formData[field.conditional.dependsOn];
      return field.conditional.showWhen.includes(dependentValue);
    });
  };

  // Custom validators
  const validators = {
    luhnCheck: (value) => {
      // Luhn algorithm for credit card validation
      let sum = 0;
      let isEven = false;

      for (let i = value.length - 1; i >= 0; i--) {
        let digit = parseInt(value[i]);

        if (isEven) {
          digit *= 2;
          if (digit > 9) digit -= 9;
        }

        sum += digit;
        isEven = !isEven;
      }

      return sum % 10 === 0;
    }
  };

  // Validate single field
  const validateField = (field, value) => {
    if (field.required && !value) {
      return 'This field is required';
    }

    if (field.validation?.pattern) {
      const regex = new RegExp(field.validation.pattern);
      if (!regex.test(value)) {
        return field.validation.message;
      }
    }

    if (field.validation?.custom) {
      const validatorFn = validators[field.validation.custom];
      if (validatorFn && !validatorFn(value)) {
        return field.validation.message;
      }
    }

    return null;
  };

  // Handle input change
  const handleChange = (fieldName, value) => {
    setFormData(prev => ({ ...prev, [fieldName]: value }));

    // Clear error on change
    setErrors(prev => ({ ...prev, [fieldName]: null }));
  };

  // Handle form submission
  const handleSubmit = async (e) => {
    e.preventDefault();

    // Validate all visible fields
    const newErrors = {};
    const visibleFields = getVisibleFields();

    visibleFields.forEach(field => {
      const error = validateField(field, formData[field.name]);
      if (error) newErrors[field.name] = error;
    });

    if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

    // Submit form
    try {
      const response = await fetch(schema.submit.url, {
        method: schema.submit.method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData)
      });

      if (response.ok) {
        window.location.href = schema.submit.successRedirect;
      }
    } catch (error) {
      console.error('Form submission error:', error);
    }
  };

  // Render form
  const visibleFields = getVisibleFields();

  return (
    <form onSubmit={handleSubmit} className="dynamic-form">
      {visibleFields.map(field => (
        <div key={field.name} className="form-field">
          <label>
            {field.label}
            {field.required && <span className="required">*</span>}
          </label>

          {field.type === 'select' ? (
            <select
              value={formData[field.name] || ''}
              onChange={(e) => handleChange(field.name, e.target.value)}
            >
              <option value="">Select...</option>
              {field.options.map(opt => (
                <option key={opt.value} value={opt.value}>
                  {opt.label}
                </option>
              ))}
            </select>
          ) : (
            <input
              type={field.type}
              value={formData[field.name] || ''}
              onChange={(e) => handleChange(field.name, e.target.value)}
            />
          )}

          {errors[field.name] && (
            <span className="error">{errors[field.name]}</span>
          )}
        </div>
      ))}

      <button type="submit">Submit</button>
    </form>
  );
};

export default DynamicForm;

🔍 Dry Run: Dynamic Form Example

Scenario: User in India selects express shipping and card payment

Initial State:
---------------------------------------------------------
  formData = {}
  visibleFields = [email, country, shippingMethod, paymentMethod]

Step 1: User enters country = "IN"
---------------------------------------------------------
  formData = { country: "IN" }
  getVisibleFields() checks conditionals
  -> gstNumber field has: dependsOn: 'country', showWhen: ['IN']
  -> Condition matches! Show gstNumber field
  visibleFields = [email, country, gstNumber, shippingMethod, paymentMethod]

Step 2: User selects shippingMethod = "express"
---------------------------------------------------------
  formData = { country: "IN", shippingMethod: "express" }
  getVisibleFields() checks conditionals
  -> phone field has: dependsOn: 'shippingMethod', showWhen: ['express']
  -> Condition matches! Show phone field
  visibleFields = [email, country, gstNumber, phone, shippingMethod, paymentMethod]

Step 3: User selects paymentMethod = "card"
---------------------------------------------------------
  formData = { country: "IN", shippingMethod: "express", paymentMethod: "card" }
  getVisibleFields() checks conditionals
  -> cardNumber field has: dependsOn: 'paymentMethod', showWhen: ['card']
  -> Condition matches! Show cardNumber field
  visibleFields = [email, country, gstNumber, phone, shippingMethod, paymentMethod, cardNumber]

Step 4: User submits form
---------------------------------------------------------
  Validation runs on all visible fields
  -> email: required ✓, pattern check ✓
  -> phone: required ✓, 10 digits ✓
  -> cardNumber: required ✓, luhnCheck() ✓
  -> All valid!
  POST /api/checkout with formData
  -> Success! Redirect to /order-confirmation

6️⃣ Real-World Examples

Example 1: Amazon's Festival Sale (Great Indian Festival)

What Changes:

• Homepage: Banner switches to festival theme with countdown timer
• Product Cards: Show "Festival Special" badges, strike-through pricing
• Checkout: Additional field for gift wrapping, festival greeting card
• Navigation: New category "Festival Deals" appears temporarily

Implementation Strategy:

// BFF checks current date and returns festival config
const getAmazonPageConfig = async (userId) => {
  const now = new Date();
  const festivalStart = new Date('2024-10-08');
  const festivalEnd = new Date('2024-10-15');

  if (now >= festivalStart && now <= festivalEnd) {
    return {
      theme: 'great-indian-festival',
      components: [
        {
          type: 'FestivalBanner',
          data: {
            title: 'Great Indian Festival',
            countdown: festivalEnd.toISOString(),
            bgImage: '/assets/festival-banner.jpg'
          }
        },
        {
          type: 'ProductGrid',
          data: {
            badgeText: 'Festival Special',
            showSavings: true,
            products: await getFestivalDeals(userId)
          }
        }
      ],
      navigation: {
        extraItems: [
          { label: 'Festival Deals', link: '/festival', badge: 'NEW' }
        ]
      }
    };
  }

  return getStandardConfig();
};

Example 2: Flipkart's Big Billion Days

Key Features:

• Timer-based Flash Sales: Products unlock every 4 hours
• Dynamic Pricing: Prices drop as more users view (social proof)
• Personalized Deals: "Handpicked for You" section based on browsing history
• Regional Themes: Bengali users see Durga Puja theme, North India sees Diwali

Technical Implementation:

// Real-time price updates via WebSocket
const FlashSaleProduct = ({ productId }) => {
  const [product, setProduct] = useState(null);
  const [timeLeft, setTimeLeft] = useState(null);

  useEffect(() => {
    // Connect to WebSocket for real-time updates
    const ws = new WebSocket(`wss://api.flipkart.com/flash-sale/${productId}`);

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);

      if (data.type === 'PRICE_UPDATE') {
        setProduct(prev => ({ ...prev, price: data.newPrice }));
      }

      if (data.type === 'STOCK_UPDATE') {
        setProduct(prev => ({ ...prev, stock: data.remaining }));
      }

      if (data.type === 'SALE_END') {
        setTimeLeft(null);
      }
    };

    return () => ws.close();
  }, [productId]);

  return (
    <div className="flash-sale-card">
      {timeLeft && <CountdownTimer endTime={timeLeft} />}
      <h3>{product.name}</h3>
      <p className="price">
        <span className="old-price">₹{product.mrp}</span>
        <span className="new-price">₹{product.price}</span>
        <span className="discount">{product.discount}% OFF</span>
      </p>
      <p className="stock-alert">
        ⚡ Only {product.stock} left in stock!
      </p>
    </div>
  );
};

7️⃣ Data Flow & API Structure

Complete Request-Response Flow

Loading diagram…

API Contract Example

// BFF API Response Type
interface PageConfig {
  page: string;
  version: string;
  timestamp: string;

  theme: {
    name: string;
    colors: {
      primary: string;
      secondary: string;
      accent: string;
      background: string;
      text: string;
    };
    typography: {
      fontFamily: string;
      fontSize: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
      };
    };
    spacing: {
      xs: number;
      sm: number;
      md: number;
      lg: number;
      xl: number;
    };
  };

  components: Array<{
    type: string;
    data: Record<string, any>;
    props?: Record<string, any>;
  }>;

  forms: Record<string, FormSchema>;

  metadata: {
    experiment?: {
      id: string;
      variant: string;
    };
    personalization?: {
      segment: string;
      score: number;
    };
  };
}

interface FormSchema {
  formId: string;
  fields: Array<{
    name: string;
    type: 'text' | 'email' | 'tel' | 'select' | 'checkbox' | 'radio';
    label: string;
    required: boolean;
    conditional?: {
      dependsOn: string;
      showWhen: string[];
    };
    validation?: {
      pattern?: string;
      custom?: string;
      message: string;
    };
    options?: Array<{
      value: string;
      label: string;
      availableFor?: string[];
    }>;
  }>;
  submit: {
    url: string;
    method: 'POST' | 'PUT';
    successRedirect: string;
  };
}

8️⃣ Common Interview Questions

Q1: Why use BFF instead of calling microservices directly from the client?

Answer:

Loading diagram…

Q2: How do you handle cache invalidation for dynamic configs?

Answer:

// Multi-level cache invalidation strategy

// Level 1: CDN Cache (CloudFlare)
// Cache-Control: public, max-age=300 (5 minutes)
// When config changes, purge CDN cache by tag

const updateThemeConfig = async (newTheme) => {
  // 1. Update config in database
  await db.themes.update(newTheme);

  // 2. Purge CDN cache by tag
  await cloudflare.purgeByTag('theme-config');

  // 3. Invalidate Redis cache
  await redis.del('theme:current');

  // 4. Broadcast to all BFF instances
  await pubsub.publish('config-update', { type: 'theme' });
};

// Level 2: Redis Cache (Application Level)
const getThemeConfig = async () => {
  // Try Redis first (hot cache)
  const cached = await redis.get('theme:current');
  if (cached) return JSON.parse(cached);

  // Cache miss -> fetch from database
  const theme = await db.themes.findActive();

  // Store in Redis for 5 minutes
  await redis.setex('theme:current', 300, JSON.stringify(theme));

  return theme;
};

// Level 3: In-Memory Cache (BFF Instance)
let memoryCache = new Map();

pubsub.subscribe('config-update', (message) => {
  // When config updates, clear memory cache
  if (message.type === 'theme') {
    memoryCache.delete('theme:current');
  }
});

// Cache Strategy Summary:
// - CDN: 5 minutes (public cache)
// - Redis: 5 minutes (shared cache)
// - Memory: 1 minute (instance cache)
// - On update: Invalidate all levels immediately

Q3: How do you ensure zero-downtime during festival theme deployments?

Answer:

// Strategy: Feature flags + gradual rollout + instant rollback

// 1. Deploy new config with feature flag (disabled)
const diwaliConfig = {
  id: 'diwali-2024',
  enabled: false, // Start disabled
  theme: { /* Diwali theme */ },
  components: [ /* Festival components */ ]
};

// 2. Enable for internal users first (testing)
featureFlags.enable('diwali-2024', {
  users: ['internal@company.com']
});

// 3. Gradual rollout to real users
// 1% -> 10% -> 50% -> 100% over 1 hour
const rolloutSchedule = [
  { time: '00:00', percentage: 1 },
  { time: '00:15', percentage: 10 },
  { time: '00:30', percentage: 50 },
  { time: '01:00', percentage: 100 }
];

// 4. Monitor error rates
const monitorRollout = async () => {
  const errorRate = await metrics.getErrorRate('diwali-2024');

  if (errorRate > 0.5) {
    // Errors > 0.5%? Rollback immediately!
    await featureFlags.disable('diwali-2024');
    await sendAlert('Diwali theme rolled back due to errors');
  }
};

// 5. Instant rollback capability
// Rollback = flip feature flag (takes 1 second)
// No code deployment needed!

// This approach ensures:
// ✅ Test with internal users first
// ✅ Gradual exposure to real users
// ✅ Automatic rollback on errors
// ✅ Zero downtime (users never see errors)

Q4: How do you handle dynamic forms for different countries/regions?

Answer:

// BFF determines form fields based on user context

const getCheckoutForm = (userContext) => {
  const { country, product, shippingMethod } = userContext;

  // Base fields (same for everyone)
  const baseFields = [
    { name: 'email', type: 'email', required: true },
    { name: 'name', type: 'text', required: true }
  ];

  // Country-specific fields
  const countryFields = {
    'IN': [
      {
        name: 'gstNumber',
        type: 'text',
        label: 'GST Number (Optional)',
        validation: {
          pattern: '^[0-9]{2}[A-Z]{5}[0-9]{4}[A-Z]{1}.*',
          message: 'Invalid GST format'
        }
      },
      {
        name: 'pincode',
        type: 'text',
        label: 'PIN Code',
        required: true,
        validation: {
          pattern: '^[0-9]{6}$',
          message: 'PIN must be 6 digits'
        }
      }
    ],
    'US': [
      {
        name: 'zipCode',
        type: 'text',
        label: 'ZIP Code',
        required: true,
        validation: {
          pattern: '^[0-9]{5}(-[0-9]{4})?$',
          message: 'Invalid ZIP format'
        }
      },
      {
        name: 'ssn',
        type: 'text',
        label: 'SSN (for high-value orders)',
        required: product.price > 1000,
        validation: {
          pattern: '^[0-9]{3}-[0-9]{2}-[0-9]{4}$'
        }
      }
    ],
    'EU': [
      {
        name: 'vatNumber',
        type: 'text',
        label: 'VAT Number',
        required: false
      }
    ]
  };

  // Product-specific fields
  const productFields = product.category === 'electronics' ? [
    {
      name: 'warranty',
      type: 'checkbox',
      label: 'Add 2-year extended warranty (+$99)'
    }
  ] : [];

  // Shipping-specific fields
  const shippingFields = shippingMethod === 'express' ? [
    {
      name: 'phone',
      type: 'tel',
      label: 'Phone Number (for delivery)',
      required: true
    }
  ] : [];

  // Combine all fields
  return {
    formId: 'checkout',
    fields: [
      ...baseFields,
      ...(countryFields[country] || []),
      ...productFields,
      ...shippingFields
    ]
  };
};

// Client receives custom form for their context:
// Indian user buying phone with express delivery:
// -> email, name, gstNumber, pincode, warranty, phone

// US user buying book with standard delivery:
// -> email, name, zipCode

Q5: How do you test dynamic UI configurations before going live?

Answer:

// Multi-stage testing strategy

// 1. Unit Tests: Validate form schemas
describe('Dynamic Form Schema', () => {
  test('shows GST field for Indian users', () => {
    const form = getCheckoutForm({ country: 'IN' });
    const gstField = form.fields.find(f => f.name === 'gstNumber');
    expect(gstField).toBeDefined();
  });

  test('hides phone field for standard shipping', () => {
    const form = getCheckoutForm({ shippingMethod: 'standard' });
    const phoneField = form.fields.find(f => f.name === 'phone');
    expect(phoneField).toBeUndefined();
  });
});

// 2. Integration Tests: Test BFF responses
describe('BFF Page Config API', () => {
  test('returns Diwali theme for Indian users in October', async () => {
    const config = await fetch('/api/bff/page-config', {
      headers: {
        'X-User-Country': 'IN',
        'X-Test-Date': '2024-10-20' // Simulate date
      }
    });

    expect(config.theme.name).toBe('diwali');
  });
});

// 3. Visual Regression Tests: Screenshot comparisons
// Use Playwright or Cypress
test('Festival banner displays correctly', async () => {
  await page.goto('/home?theme=diwali');
  await page.screenshot({ path: 'diwali-banner.png' });

  // Compare with baseline
  expect(await page.screenshot()).toMatchSnapshot();
});

// 4. Feature Flag Testing: Preview unreleased configs
// Add ?preview=diwali-2024 to URL
const getConfig = async (req) => {
  const previewFlag = req.query.preview;

  if (previewFlag && isInternalUser(req)) {
    return getPreviewConfig(previewFlag);
  }

  return getProductionConfig();
};

// 5. A/B Test Validation: Split traffic before full rollout
// 10% of users see new config, compare metrics
const abTest = {
  name: 'diwali-theme-2024',
  variants: {
    control: { theme: 'standard', users: 90 },
    treatment: { theme: 'diwali', users: 10 }
  },
  successMetric: 'conversionRate',
  duration: '24 hours'
};

// If treatment performs 5% better -> roll out to 100%
// If treatment performs worse -> rollback immediately

Q6: What's your caching strategy for BFF responses?

Answer:

// Multi-layer caching with different TTLs

// Layer 1: CDN Cache (CloudFlare/Fastly)
// - TTL: 5 minutes for static pages
// - TTL: 1 minute for personalized pages
// - Cache-Key: Include user segment (not individual user ID)

app.get('/api/bff/page-config', async (req, res) => {
  const { page, userId } = req.query;

  // Get user segment (not personal data)
  const userSegment = await getUserSegment(userId); // "premium", "regular", "new"

  // Cache-Key: page + segment (not userId)
  // This allows sharing cache across similar users
  const cacheKey = `${page}:${userSegment}`;

  // Set cache headers
  if (userSegment === 'new') {
    // New users: more personalization, shorter cache
    res.set('Cache-Control', 'public, max-age=60, s-maxage=60');
  } else {
    // Regular users: less personalization, longer cache
    res.set('Cache-Control', 'public, max-age=300, s-maxage=300');
  }

  res.set('Vary', 'X-User-Segment'); // Vary cache by segment
  res.json(config);
});

// Layer 2: Redis Cache (Application Level)
const getPageConfig = async (page, userId) => {
  const userSegment = await getUserSegment(userId);
  const cacheKey = `config:${page}:${userSegment}`;

  // Try Redis
  const cached = await redis.get(cacheKey);
  if (cached) return JSON.parse(cached);

  // Cache miss -> generate config
  const config = await generatePageConfig(page, userSegment);

  // Store in Redis (TTL based on segment)
  const ttl = userSegment === 'new' ? 60 : 300;
  await redis.setex(cacheKey, ttl, JSON.stringify(config));

  return config;
};

// Layer 3: In-Memory Cache (Per BFF Instance)
import NodeCache from 'node-cache';
const memCache = new NodeCache({ stdTTL: 60 });

const getCachedConfig = async (page, segment) => {
  const key = `${page}:${segment}`;

  // Check memory cache first (fastest)
  let config = memCache.get(key);
  if (config) return config;

  // Check Redis (medium speed)
  config = await redis.get(key);
  if (config) {
    const parsedConfig = JSON.parse(config);
    memCache.set(key, parsedConfig);
    return parsedConfig;
  }

  // Generate fresh (slowest)
  config = await generateConfig(page, segment);
  memCache.set(key, config);
  redis.setex(key, 300, JSON.stringify(config));
  return config;
};

// Cache Invalidation Strategy:
// - Theme updates: Purge all caches immediately
// - Product updates: Invalidate specific product caches
// - User updates: Only invalidate user-specific caches (not segment caches)

// Cache Hit Rate Target:
// - CDN: 80%+ (most traffic served from edge)
// - Redis: 90%+ (shared cache across BFF instances)
// - Memory: 95%+ (hot data stays in memory)

9️⃣ Common Pitfalls

Pitfall 1: Hardcoding UI Logic in Components

❌ BAD: Component knows about business logic

// DON'T do this
const CheckoutForm = () => {
  const [country, setCountry] = useState('');

  return (
    <form>
      <input name="email" required />

      {/* ❌ Business logic hardcoded in component */}
      {country === 'IN' && (
        <input name="gstNumber" pattern="^[0-9]{2}[A-Z]{5}..." />
      )}

      {country === 'US' && (
        <input name="zipCode" pattern="^[0-9]{5}..." />
      )}

      {/* ❌ If requirements change, must update component code */}
    </form>
  );
};

✅ GOOD: Schema-driven form from BFF

// Component is dumb, schema is smart
const CheckoutForm = ({ schema }) => {
  return (
    <DynamicForm schema={schema} />
  );
};

// Business logic in BFF (easy to update without deployment)
const getFormSchema = (country) => {
  return {
    fields: countryRules[country].fields
  };
};

Why This Matters: Hardcoded logic requires code deployment to change. Schema-driven approach allows instant updates via BFF config.

Pitfall 2: Not Handling BFF Failures Gracefully

❌ BAD: Client breaks if BFF is down

const HomePage = () => {
  const [config, setConfig] = useState(null);

  useEffect(() => {
    fetch('/api/bff/page-config')
      .then(res => res.json())
      .then(setConfig);
    // ❌ No error handling
    // ❌ No fallback
    // ❌ User sees blank page if BFF fails
  }, []);

  if (!config) return <div>Loading...</div>;

  return <DynamicPage config={config} />;
};

✅ GOOD: Fallback to default config

const DEFAULT_CONFIG = {
  theme: { /* standard theme */ },
  components: [ /* basic components */ ]
};

const HomePage = () => {
  const [config, setConfig] = useState(DEFAULT_CONFIG);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetch('/api/bff/page-config')
      .then(res => {
        if (!res.ok) throw new Error('BFF failed');
        return res.json();
      })
      .then(setConfig)
      .catch(error => {
        console.error('Using fallback config:', error);
        // ✅ User sees default theme (degraded but functional)
        trackError('bff-fallback', error);
      })
      .finally(() => setIsLoading(false));
  }, []);

  return <DynamicPage config={config} loading={isLoading} />;
};

Why This Matters: BFF downtime shouldn't break your site. Always have a fallback to keep the user experience functional.

Pitfall 3: Fetching Config on Every Page Load

❌ BAD: No caching, slow page loads

const App = () => {
  const [config, setConfig] = useState(null);

  // ❌ Fetches config on every page navigation
  // ❌ User waits 200ms+ per page
  useEffect(() => {
    fetch('/api/bff/page-config?page=' + currentPage)
      .then(res => res.json())
      .then(setConfig);
  }, [currentPage]);

  return <DynamicPage config={config} />;
};

✅ GOOD: Cache config, prefetch next pages

const usePageConfig = (page) => {
  const queryClient = useQueryClient();

  // ✅ Cache config for 5 minutes
  const { data: config } = useQuery(
    ['page-config', page],
    () => fetch(`/api/bff/page-config?page=${page}`).then(r => r.json()),
    {
      staleTime: 5 * 60 * 1000, // 5 minutes
      cacheTime: 10 * 60 * 1000 // 10 minutes
    }
  );

  // ✅ Prefetch next likely page
  useEffect(() => {
    const nextPages = { 'home': 'products', 'products': 'cart' };
    const nextPage = nextPages[page];

    if (nextPage) {
      queryClient.prefetchQuery(['page-config', nextPage], () =>
        fetch(`/api/bff/page-config?page=${nextPage}`).then(r => r.json())
      );
    }
  }, [page]);

  return config;
};

Why This Matters: Caching + prefetching makes navigation instant. Users don't wait for config on every page.

Pitfall 4: Over-Personalizing (Killing Cache Hit Rate)

❌ BAD: Cache key includes user ID

// ❌ Every user gets unique config = 0% cache hit rate
const getCacheKey = (page, userId) => {
  return `config:${page}:${userId}`; // BAD!
};

// With 1M users:
// - 1M unique cache keys
// - CDN can't cache (each response unique)
// - BFF generates 1M configs per hour

✅ GOOD: Cache by user segment, not user ID

// ✅ Group users into segments = 90%+ cache hit rate
const getUserSegment = (userId) => {
  const user = await getUser(userId);

  // Segment users by key attributes
  if (user.isPremium) return 'premium';
  if (user.isNew) return 'new';
  if (user.purchases > 10) return 'loyal';
  return 'regular';
};

const getCacheKey = (page, userId) => {
  const segment = await getUserSegment(userId);
  return `config:${page}:${segment}`; // GOOD!
};

// With 1M users in 4 segments:
// - Only 4 unique configs per page
// - CDN cache hit rate: 90%+
// - BFF generates 4 configs, serves 1M users

Why This Matters: Over-personalization kills performance. Segment users into groups to maintain high cache hit rates.

🔟 Performance & Complexity Analysis

Time Complexity

Space Complexity

Scalability Metrics