Real Microsoft Interview Experience

• ✓ Manage Friends: Add, view, and edit friends by name
• ✓ Record Expenses: Add splits with description, amount, who paid, and who it's split between
• ✓ View Data: Show all friends in a list and all expenses in a table
• ✓ Calculate Balances: Show how much each person has spent (optional but impressive)
• ✓ Edit Functionality: Edit existing friends and splits via modal popups
• ✓ User-Friendly UI: Clean layout with modal forms for data entry

1. Requirements Understanding: Did you ask clarifying questions?
2. Clean Code: Is the component structure clear and modular?
3. State Management: Do you handle state correctly with hooks?
4. Error Handling: What happens with invalid inputs?
5. UI/UX: Is the interface intuitive and bug-free?
6. Time Management: Did you finish and have time for bonus features?

function SplitManager() {
  const [friends, setFriends] = useState([]);
  const [splits, setSplits] = useState([]);

  useEffect(() => {
    setFriends([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]);
  }, []);

  const addFriend = (name) => {
    setFriends([...friends, { id: Date.now(), name }]);
  };

  const addSplit = (desc, amount, paidBy, splitBetween) => {
    setSplits([...splits, { 
      id: Date.now(), 
      desc, amount, paidBy, splitBetween 
    }]);
  };

  return (
    <div>
      <FriendsList friends={friends} onAdd={addFriend} />
      <SplitsList splits={splits} friends={friends} />
    </div>
  );
}

<header>
  <nav><a href="#">Home</a></nav>
</header>
<main>
  <article>
    <h1>Title</h1>
    <p>Content</p>
  </article>
  <aside>Related</aside>
</main>
<footer></footer>

<picture>
  <source media="(max-width: 480px)" srcset="square.jpg">
  <source media="(min-width: 481px)" srcset="wide.jpg">
  <img src="fallback.jpg" alt="Description">
</picture>

* { box-sizing: border-box; } /* Best practice */

// Lazy Load
<img src="image.jpg" loading="lazy" alt="Desc">

// Virtual Scroll
<FixedSizeList height={600} itemCount={1000}>

localStorage.setItem('theme', 'dark');
sessionStorage.setItem('draft', JSON.stringify(data));
document.cookie = "auth=token; max-age=3600";

<link rel="preload" as="image" href="hero.jpg">
<img src="hero.jpg" width="1200" height="600">

// Before/After comparison
console.time('operation');
// ... code ...
console.timeEnd('operation');

// Web Vitals
import { getCLS, getFCP, getLCP } from 'web-vitals';
getCLS(console.log);

console.log('1');
Promise.resolve().then(() => console.log('2'));
console.log('3');

console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');

// ❌ Bad: Causes layout
for (let i = 0; i < 100; i++) {
  el.style.width = (el.offsetWidth + 10) + 'px';
}

// ✅ Good: Use transform
el.style.transform = 'scale(1.1)';

1. User types "r" → App queries cache → Shows ["react", "redux", "ruby"]
2. User types "ea" (full: "rea") → Query "rea" not in cache → Fetch from API
3. API returns ["react", "read"] → Cache this query → Display to user
4. User types "ct" (full: "react") → Query "react" found in cache → Instant display

Dataset: 100,000 search suggestions (average 10 chars each)

Approach 1 (Simple Map):
  User types "je" → O(100K) filtering → 45-50ms delay ❌
  
Approach 2 (Trie):
  User types "je" → O(2) traversal → 2-3ms response ✅
  
Approach 3 (Trie + LRU Cache):
  First "je" query → 2-3ms (Trie)
  Second "je" query → 0.1ms (Cache hit) ⚡ 50x faster!

suggestions = ["javascript", "jest", "json", "python", "java", ...100K items]

Step 1: User types "j"
  Filter: suggestions.filter(s => s.startsWith("j"))
  Check 100,000 items → Find ["javascript", "jest", "json", "java"]
  Time: 5-10ms

Step 2: User types "e" (full: "je")  
  Filter: suggestions.filter(s => s.startsWith("je"))
  Check 100,000 items again → Find ["jest", "javascript"]
  Time: 5-10ms
  
Problem: Every keystroke requires O(n) filtering! ❌

// Approach 1: Map + Filter (Simple but slow)
class SimpleAutocomplete {
  constructor(suggestions) {
    this.suggestions = suggestions;
    this.cache = new Map();
  }

  search(query) {
    if (this.cache.has(query)) {
      return this.cache.get(query);
    }
    
    // O(n) filter - slow for large datasets
    const results = this.suggestions.filter(item =>
      item.toLowerCase().startsWith(query.toLowerCase())
    ).slice(0, 10);
    
    this.cache.set(query, results);
    return results;
  }
}

Build Trie from ["react", "redux", "ruby", "python"]

                Root
              / | | \\
             r  p  ...
            /     \\
           e       y
           |       |
           a       t
           |       |
           c       h
           |       |
           t       o
          (END)    |
           |       n
          ["react"]  (END)
                   ["python"]

User types "re" → Traverse: root → r → e
  Suggestions at node "e" = ["react", "redux"] ✅
  Time: O(2) instead of O(n)!

// Approach 3: Trie for fast prefix search
class TrieNode {
  constructor() {
    this.children = {};
    this.isEnd = false;
    this.suggestions = [];
  }
}

class AutocompleteWithTrie {
  constructor(suggestions) {
    this.trie = new TrieNode();
    this.queryCache = new Map(); // LRU cache
    this.maxCacheSize = 100;
    
    // Build Trie - O(n*m) where n=words, m=avg length
    suggestions.forEach(word => this.insertWord(word));
  }

  insertWord(word) {
    let node = this.trie;
    for (let char of word) {
      if (!node.children[char]) {
        node.children[char] = new TrieNode();
      }
      node = node.children[char];
      node.suggestions.push(word);
    }
    node.isEnd = true;
  }

  search(query) {
    // Check LRU cache first
    if (this.queryCache.has(query)) {
      return this.queryCache.get(query);
    }

    let node = this.trie;
    for (let char of query) {
      if (!node.children[char]) {
        return [];
      }
      node = node.children[char];
    }

    const results = node.suggestions.slice(0, 10);
    
    // Add to cache with LRU eviction
    this.queryCache.set(query, results);
    if (this.queryCache.size > this.maxCacheSize) {
      const firstKey = this.queryCache.keys().next().value;
      this.queryCache.delete(firstKey);
    }

    return results;
  }
}

// Map for session-specific queries
const queryCache = new Map();

// Store recent searches
queryCache.set('react hooks', [...results]);

// Check before API call
if (queryCache.has(query)) {
  return queryCache.get(query); // Instant!
}

// Persist across sessions
const cached = localStorage.getItem('autocomplete_cache');
let cache = cached ? JSON.parse(cached) : {};

// Save on new query
cache[query] = results;
localStorage.setItem('autocomplete_cache', 
                     JSON.stringify(cache));

// Check later
const results = cache[query];

// Async, can store 100s MB
const db = await openDB('autocomplete');

// Store suggestions
await db.put('suggestions', {
  query: 'react',
  results: [...],
  timestamp: Date.now()
});

// Retrieve
const cached = await db.get('suggestions', 'react');

async search(query) {
  // 1. Check in-memory cache (fastest)
  if (this.memoryCache.has(query)) {
    return this.memoryCache.get(query);
  }

  // 2. Check localStorage (medium)
  const storedResults = localStorage.getItem(`ac_${query}`);
  if (storedResults) {
    this.memoryCache.set(query, JSON.parse(storedResults));
    return JSON.parse(storedResults);
  }

  // 3. Check IndexedDB (slow but has more data)
  const dbResults = await db.get('queries', query);
  if (dbResults) {
    this.memoryCache.set(query, dbResults);
    return dbResults;
  }

  // 4. Fetch from API (slowest)
  const results = await fetch(`/api/search?q=${query}`);
  
  // Cache at all levels
  this.memoryCache.set(query, results);
  localStorage.setItem(`ac_${query}`, JSON.stringify(results));
  await db.put('queries', { id: query, results });
  
  return results;
}

0-5 min:   Clarify requirements5-10 min:  Draw architecture diagram10-35 min: Code up solution (simple → optimized)35-50 min: Discuss trade-offs and improvements50-60 min: Handle edge cases, answer questions