Stage 3#312Coding · Senior~10 min read

Merge local pending records with backend transfers

Operation State Architecture · Pending Continuity

Implement deterministic merge rules that avoid duplicates and preserve user-visible progress after refresh.

Prompt

This is a hands-on rep. Attempt the drill before reading the model answer, then narrate the tradeoffs as if an interviewer is watching.

💡

Tip

Be explicit about matching keys: client operation ID, backend ID, tx hash, and timestamps.

Foundation

What to ground before answering

Implement deterministic merge rules that avoid duplicates and preserve user-visible progress after refresh.

Focus vocabulary: merge logic, reconciliation, client state.

The useful mental model is not to memorize a perfect answer. It is to explain what owns the data, what can fail, what the user sees, and what test would prove the behavior.

Coding drill

Merge local pending and backend transfers

Target: 20mNot run

Make the behavior executable before comparing against the model answer.

type LocalPending = { clientOperationId: string; txHash?: string; createdAt: number };
type BackendTransfer = { id: string; clientOperationId?: string; txHash?: string; status: string };
type MergedTransfer = { key: string; source: 'local' | 'backend' | 'matched'; status: string };

function mergeTransfers(local: LocalPending[], backend: BackendTransfer[]): MergedTransfer[] {
  // TODO: match by clientOperationId first, then txHash. Avoid duplicates.
  return [];
}

TypeScript · runnable

System design

Interview explanation prompt

What problem is this practice item really testing?
What state or contract boundary must be explicit?
What edge case would cause a production regression?
What would you test first?
How would you explain the tradeoff in two minutes?

Self-grade

Strong answer handles the edge cases before polishing syntax.
Strong answer explains why the chosen type or function boundary prevents bugs.
Weak answer passes only the happy path or hides uncertainty in booleans and nullable fields.

Model Answer

function mergeTransfers(local: LocalPending[], backend: BackendTransfer[]): MergedTransfer[] {
  const usedLocal = new Set<number>();
  const out: MergedTransfer[] = [];
  for (const b of backend) {
    const localIndex = local.findIndex((l) =>
      (b.clientOperationId && l.clientOperationId === b.clientOperationId) ||
      (b.txHash && l.txHash === b.txHash)
    );
    if (localIndex >= 0) usedLocal.add(localIndex);
    out.push({ key: b.id, source: localIndex >= 0 ? 'matched' : 'backend', status: b.status });
  }
  local.forEach((l, i) => {
    if (!usedLocal.has(i)) out.push({ key: l.clientOperationId, source: 'local', status: 'pending' });
  });
  return out;
}

Review

Recall before moving on

What is the one-sentence answer for "Merge local pending records with backend transfers"?
Which real experience from PR TIMES, React/TypeScript migration, or systems work supports it?
What edge case would you volunteer before the interviewer asks?
What is the smallest test or artifact that proves the design works?