Real Tekion Corp Interview Experience

📝 Question

🔄 Follow-up Question

✅ Solution - Mixed Concurrent/Sequential with Retries

/**
 * Execute promises with mixed concurrent/sequential execution
 * @param {Array} promiseFuncs - Array of promise-returning functions
 * @param {Array<'concurrent'|'sequential'>} executionPattern - Execution type for each function
 * @param {number} maxRetries - Max retry attempts for failed promises (default: 3)
 * @returns {Promise} Results in the same order as input
 */
async function executeMixedPromises(promiseFuncs, executionPattern, maxRetries = 3) {
  const results = new Array(promiseFuncs.length);
  const errors = new Array(promiseFuncs.length);

  /**
   * Execute a single promise with retry logic
   */
  async function executeWithRetry(func, index) {
    let lastError;

    for (let attempt = 0; attempt <= maxRetries; attempt++) {
      try {
        const result = await func();
        results[index] = result;
        errors[index] = null;
        return result;
      } catch (error) {
        lastError = error;
        console.log(`Attempt ${attempt + 1} failed for index ${index}: ${error.message}`);
        
        if (attempt < maxRetries) {
          // Exponential backoff: wait before retrying
          const delay = 1000 * Math.pow(2, attempt);
          await new Promise(resolve => setTimeout(resolve, delay));
        }
      }
    }

    // All retries exhausted
    errors[index] = lastError;
    results[index] = null;
    return null;
  }

  /**
   * Process concurrent group - all execute at the same time
   */
  async function processConcurrentGroup(indices) {
    const promises = indices.map(i => executeWithRetry(promiseFuncs[i], i));
    await Promise.all(promises);
  }

  /**
   * Process sequential group - one after another
   */
  async function processSequentialGroup(indices) {
    for (const i of indices) {
      await executeWithRetry(promiseFuncs[i], i);
    }
  }

  // Group indices by execution type
  const concurrentIndices = [];
  const sequentialIndices = [];

  executionPattern.forEach((type, index) => {
    if (type === 'concurrent') {
      concurrentIndices.push(index);
    } else {
      sequentialIndices.push(index);
    }
  });

  // Execute both groups (they run in parallel with each other)
  await Promise.all([
    processConcurrentGroup(concurrentIndices),
    processSequentialGroup(sequentialIndices)
  ]);

  return {
    results,
    errors,
    allSuccessful: errors.every(e => e === null),
    summary: {
      total: promiseFuncs.length,
      successful: results.filter(r => r !== null).length,
      failed: errors.filter(e => e !== null).length
    }
  };
}

// Usage Example
const api1 = () => fetch('/api/users').then(r => r.json());
const api2 = () => fetch('/api/posts').then(r => r.json());
const api3 = () => fetch('/api/comments').then(r => r.json());
const api4 = () => fetch('/api/likes').then(r => r.json());

async function example() {
  const result = await executeMixedPromises(
    [api1, api2, api3, api4],
    ['concurrent', 'concurrent', 'sequential', 'sequential'],
    3 // max retries
  );

  console.log('Results:', result.results);
  console.log('Errors:', result.errors);
  console.log('Summary:', result.summary);
  /*
  Output structure:
  {
    results: [usersData, postsData, commentsData, likesData],
    errors: [null, null, null, someError],
    allSuccessful: false,
    summary: { total: 4, successful: 3, failed: 1 }
  }
  */
}

// Another example: Custom error handling
async function exampleWithErrorDetails() {
  const funcs = [
    () => Promise.resolve('Success 1'),
    () => Promise.reject(new Error('API Down')),
    () => Promise.resolve('Success 3'),
    () => Promise.reject(new Error('Timeout'))
  ];

  const pattern = ['concurrent', 'concurrent', 'sequential', 'sequential'];
  const result = await executeMixedPromises(funcs, pattern, 3);

  // Process results
  result.results.forEach((res, i) => {
    if (result.errors[i]) {
      console.error(`Index ${i} failed after 3 retries: ${result.errors[i].message}`);
    } else {
      console.log(`Index ${i} succeeded: ${res}`);
    }
  });
}

🎯 Key Points Evaluators Look For

📝 Questions

✅ System Architecture

/*
CHAT SYSTEM ARCHITECTURE

┌─────────────────────────────────────────┐
│         Client Applications             │
│   (Web, Mobile, Desktop)                │
└────────────┬────────────────────────────┘
             │
      WebSocket Connection
             │
┌────────────▼────────────────────────────┐
│   API Gateway / Load Balancer           │
│   (Distributes traffic)                 │
└────────────┬────────────────────────────┘
             │
        ┌────┴──────────────────┐
        │                       │
┌───────▼──────────┐  ┌────────▼───────────┐
│  WebSocket       │  │  WebSocket         │
│  Server 1        │  │  Server 2          │
│  (Connection     │  │  (Connection       │
│   Management)    │  │   Management)      │
└───────┬──────────┘  └────────┬───────────┘
        │                      │
        └──────────┬───────────┘
                   │
        ┌──────────▼──────────────┐
        │  Message Broker/Queue   │
        │  (Redis/RabbitMQ)       │
        │  - Real-time messages   │
        │  - Pub/Sub              │
        └──────────┬──────────────┘
                   │
        ┌──────────▼──────────────┐
        │  Databases              │
        │  - User data (SQL)      │
        │  - Messages (NoSQL)     │
        │  - Presence (Cache)     │
        └─────────────────────────┘
*/

✅ Implementation Code

// Server-side: Chat System with WebSocket
const express = require('express');
const http = require('http');
const WebSocket = require('ws');

class ChatSystem {
  constructor() {
    this.app = express();
    this.server = http.createServer(this.app);
    this.wss = new WebSocket.Server({ server: this.server });
    
    // Store connected users
    this.users = new Map(); // userId -> {ws, status, typingIn}
    
    // Store messages
    this.messages = new Map(); // roomId -> [messages]
    
    // Typing indicators
    this.typingUsers = new Map(); // roomId -> Set of userIds
    
    this.setupWebSocket();
  }

  setupWebSocket() {
    this.wss.on('connection', (ws) => {
      let userId = null;

      ws.on('message', (data) => {
        const message = JSON.parse(data);

        switch (message.type) {
          case 'JOIN':
            this.handleJoin(ws, message, (id) => userId = id);
            break;

          case 'SEND_MESSAGE':
            this.handleSendMessage(userId, message);
            break;

          case 'TYPING':
            this.handleTyping(userId, message);
            break;

          case 'DISCONNECT':
            this.handleDisconnect(userId);
            break;
        }
      });

      ws.on('close', () => {
        if (userId) this.handleDisconnect(userId);
      });
    });
  }

  handleJoin(ws, message, setUserId) {
    const { userId, roomId } = message;
    
    setUserId(userId);
    this.users.set(userId, {
      ws,
      status: 'online',
      roomId
    });

    // Send previous messages (message history)
    if (!this.messages.has(roomId)) {
      this.messages.set(roomId, []);
    }
    
    ws.send(JSON.stringify({
      type: 'HISTORY',
      messages: this.messages.get(roomId)
    }));

    // Broadcast user joined
    this.broadcastToRoom(roomId, {
      type: 'USER_JOINED',
      userId,
      onlineCount: this.getOnlineUsersInRoom(roomId)
    });
  }

  handleSendMessage(userId, message) {
    const { roomId, content } = message;
    const timestamp = Date.now();

    const chatMessage = {
      id: `msg_${timestamp}_${Math.random()}`,
      userId,
      content,
      timestamp,
      status: 'delivered'
    };

    // Store message
    this.messages.get(roomId).push(chatMessage);

    // Broadcast to room
    this.broadcastToRoom(roomId, {
      type: 'MESSAGE',
      message: chatMessage
    });

    // Clear typing indicator
    this.handleTypingStop(userId, roomId);
  }

  handleTyping(userId, message) {
    const { roomId } = message;
    
    if (!this.typingUsers.has(roomId)) {
      this.typingUsers.set(roomId, new Set());
    }

    this.typingUsers.get(roomId).add(userId);

    // Broadcast typing indicator
    this.broadcastToRoom(roomId, {
      type: 'USER_TYPING',
      userId,
      typingUsers: Array.from(this.typingUsers.get(roomId))
    });

    // Auto-clear after 3 seconds if no new message
    setTimeout(() => {
      this.handleTypingStop(userId, roomId);
    }, 3000);
  }

  handleTypingStop(userId, roomId) {
    if (this.typingUsers.has(roomId)) {
      this.typingUsers.get(roomId).delete(userId);
      
      this.broadcastToRoom(roomId, {
        type: 'USER_TYPING',
        typingUsers: Array.from(this.typingUsers.get(roomId))
      });
    }
  }

  handleDisconnect(userId) {
    const user = this.users.get(userId);
    if (user) {
      const { roomId } = user;
      this.users.delete(userId);

      this.broadcastToRoom(roomId, {
        type: 'USER_LEFT',
        userId,
        onlineCount: this.getOnlineUsersInRoom(roomId)
      });
    }
  }

  broadcastToRoom(roomId, message) {
    this.users.forEach((user) => {
      if (user.roomId === roomId && user.ws.readyState === WebSocket.OPEN) {
        user.ws.send(JSON.stringify(message));
      }
    });
  }

  getOnlineUsersInRoom(roomId) {
    let count = 0;
    this.users.forEach((user) => {
      if (user.roomId === roomId) count++;
    });
    return count;
  }

  start(port = 3000) {
    this.server.listen(port, () => {
      console.log(`Chat server running on port ${port}`);
    });
  }
}

// Client-side: Chat UI
class ChatClient {
  constructor(userId, roomId) {
    this.userId = userId;
    this.roomId = roomId;
    this.ws = new WebSocket('ws://localhost:3000');
    this.messageQueue = []; // For offline messages

    this.setupConnection();
    this.setupUI();
  }

  setupConnection() {
    this.ws.onopen = () => {
      console.log('Connected');
      
      // Send join message
      this.ws.send(JSON.stringify({
        type: 'JOIN',
        userId: this.userId,
        roomId: this.roomId
      }));

      // Send queued messages
      this.messageQueue.forEach(msg => this.ws.send(msg));
      this.messageQueue = [];
    };

    this.ws.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.handleMessage(message);
    };

    this.ws.onclose = () => {
      console.log('Disconnected - messages will be queued');
    };
  }

  sendMessage(content) {
    const message = JSON.stringify({
      type: 'SEND_MESSAGE',
      roomId: this.roomId,
      content
    });

    if (this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(message);
    } else {
      // Queue for offline
      this.messageQueue.push(message);
    }
  }

  sendTyping() {
    if (this.ws.readyState === WebSocket.OPEN) {
      this.ws.send(JSON.stringify({
        type: 'TYPING',
        roomId: this.roomId
      }));
    }
  }

  handleMessage(message) {
    switch (message.type) {
      case 'HISTORY':
        this.displayHistory(message.messages);
        break;

      case 'MESSAGE':
        this.displayMessage(message.message);
        break;

      case 'USER_TYPING':
        this.updateTypingIndicator(message.typingUsers);
        break;

      case 'USER_JOINED':
        console.log(`User joined. Online: ${message.onlineCount}`);
        break;

      case 'USER_LEFT':
        console.log(`User left. Online: ${message.onlineCount}`);
        break;
    }
  }

  displayHistory(messages) {
    messages.forEach(msg => this.displayMessage(msg));
  }

  displayMessage(message) {
    const messageEl = document.createElement('div');
    messageEl.className = `message ${message.userId === this.userId ? 'sent' : 'received'}`;
    messageEl.innerHTML = `
      ${message.userId}: ${message.content}
      ${new Date(message.timestamp).toLocaleTimeString()}
    `;
    document.getElementById('messages').appendChild(messageEl);
  }

  updateTypingIndicator(typingUsers) {
    const indicator = document.getElementById('typing-indicator');
    if (typingUsers.length > 0) {
      indicator.textContent = `${typingUsers.join(', ')} is typing...`;
    } else {
      indicator.textContent = '';
    }
  }

  setupUI() {
    const input = document.getElementById('message-input');
    const sendBtn = document.getElementById('send-btn');

    input.addEventListener('input', () => this.sendTyping());
    
    sendBtn.addEventListener('click', () => {
      if (input.value.trim()) {
        this.sendMessage(input.value);
        input.value = '';
      }
    });
  }
}

// Start server
const chat = new ChatSystem();
chat.start();

🎯 Key Points Evaluators Look For

❓ Question 1: Efficient Caching Strategy

💡 Key Answer Points

/*
CACHING STRATEGY:

1. Cache Layers (from fastest to slowest):
   - Browser/Client Cache (localStorage, sessionStorage)
   - CDN Cache (for static assets)
   - Server Memory Cache (Redis, Memcached)
   - Database Query Cache
   - Disk Cache

2. Cache Invalidation Strategies:
   - TTL (Time-To-Live): Automatic expiration
   - Event-based: Invalidate on data change
   - LRU (Least Recently Used): Remove old entries
   - Manual invalidation: Explicit cache clear

3. Implementation Example:
*/

class CacheManager {
  constructor(maxSize = 100, ttl = 5 * 60 * 1000) {
    this.cache = new Map();
    this.ttl = ttl;
    this.maxSize = maxSize;
    this.accessOrder = []; // LRU tracking
  }

  set(key, value) {
    if (this.cache.size >= this.maxSize && !this.cache.has(key)) {
      const oldestKey = this.accessOrder.shift();
      this.cache.delete(oldestKey);
    }
    this.cache.set(key, { value, timestamp: Date.now() });
    this.accessOrder.push(key);
  }

  get(key) {
    if (!this.cache.has(key)) return null;
    const entry = this.cache.get(key);
    if (Date.now() - entry.timestamp > this.ttl) {
      this.cache.delete(key);
      return null;
    }
    this.accessOrder = this.accessOrder.filter(k => k !== key);
    this.accessOrder.push(key);
    return entry.value;
  }

  invalidate(key) {
    this.cache.delete(key);
    this.accessOrder = this.accessOrder.filter(k => k !== key);
  }
}

❓ Question 2: Scaling Images & Videos

💡 Key Points

• Use CDN (CloudFront, Cloudflare) for geographic distribution
• Implement adaptive bitrate streaming for videos
• Use Service Workers for offline caching
• Progressive loading with thumbnails
• Image optimization (WebP, compression, lazy loading)

❓ Question 3: Micro Frontend Architecture

💡 Implementation Approaches

• Module Federation (Webpack 5) - shared dependencies at build time
• Web Components - encapsulated, framework-agnostic
• iFrame-based approach - complete isolation
• Custom loaders - load apps dynamically
• Shared context via custom events or message passing

📝 Challenge

❓ Question 1: Managing Junior Developers

💡 Sample Answer

Approach:
1. Structured Onboarding:
   - Pair programming for first week
   - Clear documentation and code walkthroughs
   - Small tasks to build confidence

2. Incremental Complexity:
   - Start with feature flags and isolated modules
   - Code reviews for every change
   - Design discussions before implementation

3. Continuous Learning:
   - Weekly 1-on-1 sync-ups
   - System design discussions
   - Mentoring on best practices
   - Encourage reading industry articles

4. Feedback Loop:
   - Real-time feedback on PRs
   - Celebrate wins and learnings
   - Help them understand failures

5. Growth Tracking:
   - Set clear goals (3, 6, 12 months)
   - Track skills improvement
   - Provide career guidance

❓ Question 2: Closure - Practical Example

💡 Production Example

// Real-world closure: API request debouncing
function createDebouncedSearch(apiCall) {
  let timeoutId = null;
  let lastQuery = '';

  return function debounce(query) {
    lastQuery = query; // Closure captures this

    if (timeoutId) {
      clearTimeout(timeoutId);
    }

    timeoutId = setTimeout(() => {
      apiCall(lastQuery); // Uses captured lastQuery
    }, 300);
  };
}

// Usage: Search input field
const debouncedSearch = createDebouncedSearch((query) => {
  fetch(`/api/search?q=${query}`)
    .then(r => r.json())
    .then(results => {
      displayResults(results);
    });
});

document.getElementById('search').addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

/*
Why closure works here:
- timeoutId and lastQuery are "remembered"
- Each debounce call accesses the same variables
- Without closure, we'd need global variables (bad!)
- Clean, encapsulated solution
*/

❓ Question 3: Platform-Specific Components (iOS vs Android)

💡 Code Solution

// Platform detection
const getPlatform = () => {
  const userAgent = navigator.userAgent;
  if (/iPad|iPhone|iPod/.test(userAgent)) return 'ios';
  if (/Android/.test(userAgent)) return 'android';
  return 'web';
};

// Platform-specific button component
const ButtonComponent = ({ label, onPress }) => {
  const platform = getPlatform();

  const styles = {
    ios: {
      padding: '12px 24px',
      borderRadius: '8px',
      backgroundColor: '#007AFF',
      color: 'white',
      fontSize: '16px',
      fontWeight: '600',
      border: 'none',
      cursor: 'pointer',
    },
    android: {
      padding: '8px 16px',
      borderRadius: '4px',
      backgroundColor: '#1976D2',
      color: 'white',
      fontSize: '14px',
      fontWeight: '500',
      border: 'none',
      cursor: 'pointer',
      textTransform: 'uppercase',
    },
    web: {
      padding: '10px 20px',
      borderRadius: '4px',
      backgroundColor: '#6200EE',
      color: 'white',
      fontSize: '14px',
      border: '1px solid #6200EE',
      cursor: 'pointer',
    },
  };

  return (
    
      {label}
    
  );
};

// Alternative: Using React Native for true native components
import React from 'react';
import { Button, Platform } from 'react-native';

const NativeButton = ({ label, onPress }) => {
  // React Native uses native components automatically
  return (
    
  );
};

// Even better: Factory function for component selection
const getButtonComponent = (platform) => {
  const components = {
    ios: IOSButton,
    android: AndroidButton,
    web: WebButton,
  };

  return components[platform];
};

const Button = getButtonComponent(getPlatform());

❓ Question 4: Behavioral - Conflict Resolution

💡 Sample Answer

Approach:
1. Listen First:
   - Understand their reasoning fully
   - Ask clarifying questions
   - Look for valid points I might have missed

2. Present Your Perspective:
   - Focus on tradeoffs, not "right vs wrong"
   - Use data/examples when possible
   - "Have you considered...?" instead of "You're wrong"

3. Collaborate:
   - Suggest alternatives together
   - Compromise if both approaches have merit
   - Document decision rationale

4. Escalate if Needed:
   - If it's critical (security, performance)
   - Involve team leads/architects
   - Keep discussion professional

5. Execute Well:
   - Once decided, commit fully
   - Learn from both approaches
   - Don't say "I told you so" if issues arise

Example: I disagreed with a caching strategy.
Instead of "That won't work," I said:
"I'm concerned about cache invalidation complexity.
Could we benchmark both approaches on a subset?"
Result: We tested both, combined best of both.