Prompt: Build a search input that queries an API. Must handle: debouncing, caching, loading state, errors, and request cancellation.
// Requirements:
// 1. Debounce: don't hit API on
// every keystroke (300ms delay)
// 2. Cache: if user types "react",
// deletes "t", types "t" again,
// don't re-fetch "react"
// 3. Loading: show spinner while
// fetching
// 4. Errors: show error message,
// allow retry
// 5. Cancel: if user types "rea"
// then "reac" before "rea"
// resolves, cancel the "rea"
// request
// A strong solution:
function useSearch(apiUrl: string) {
const [query, setQuery] =
useState('');
const [results, setResults] =
useState<Result[]>([]);
const [loading, setLoading] =
useState(false);
const [error, setError] =
useState<string | null>(null);
const cache = useRef(
new Map<string, Result[]>());
const abortRef = useRef<
AbortController | null>(null);
useEffect(() => {
if (!query.trim()) {
setResults([]);
return;
}
// Check cache first
if (cache.current.has(query)) {
setResults(
cache.current.get(query)!);
return;
}
const timer = setTimeout(
async () => {
// Cancel previous request
abortRef.current?.abort();
abortRef.current =
new AbortController();
setLoading(true);
setError(null);
try {
const res = await fetch(
`${apiUrl}?q=${
encodeURIComponent(query)}`,
{ signal:
abortRef.current.signal }
);
if (!res.ok) throw new Error(
`HTTP ${res.status}`);
const data = await res.json();
cache.current.set(query, data);
setResults(data);
} catch (err) {
if (err.name !== 'AbortError') {
setError(
'Search failed. Try again.');
}
} finally {
setLoading(false);
}
}, 300); // debounce
return () => clearTimeout(timer);
}, [query, apiUrl]);
return { query, setQuery,
results, loading, error };
}
Prompt: Design an image processing pipeline that handles 10,000 images per hour. Users upload images, the system generates thumbnails, applies auto-enhance, and stores results.
// Framework: RESHADED
// Requirements → Estimation → Storage
// → High-level → API → Detailed →
// Edge cases → Deployment
## REQUIREMENTS (2 min)
- 10K images/hour = ~3 images/second
- Generate: thumbnail, medium, large
- Apply auto-enhance (optional)
- Store originals + processed versions
- Return result URL when done
## ESTIMATION (3 min)
- Avg image: 5MB
- 10K × 5MB = 50GB/hour input
- 3 output sizes × 10K = 30K files/hr
- Processing: ~2s per image
- Need: 6 workers minimum (3/s × 2s)
## HIGH-LEVEL ARCHITECTURE (10 min)
┌─────────┐ ┌───────────┐
│ API │──→│ Queue │
│ Server │ │ (BullMQ) │
└─────────┘ └─────┬─────┘
│
┌────────────┼────────────┐
↓ ↓ ↓
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Worker 1 │ │ Worker 2 │ │ Worker N │
└────┬─────┘ └────┬─────┘ └────┬─────┘
↓ ↓ ↓
┌──────────────────────────────────┐
│ S3 Storage │
└──────────────────────────────────┘
## DETAILED DESIGN (10 min)
- Upload API → validates → stores
original in S3 → enqueues job
- BullMQ job: { imageId, s3Key,
sizes: [thumb, medium, large],
enhance: true }
- Worker: download from S3 → sharp
library resize → upload results →
update DB status
- Auto-scaling: monitor queue depth,
add workers when depth > 100
## EDGE CASES (5 min)
- Corrupt image → skip, mark failed
- Worker crash → BullMQ retries (3x)
- S3 timeout → exponential backoff
- Duplicate uploads → hash-based dedup
- Very large image (100MB) → reject
or special queue with more memory
// Prepare STAR answers for each:
Q: "Tell me about the hardest bug
you've debugged."
→ The redo off-by-one from the exam?
→ The memory leak in canvas undo?
→ The MongoDB pool exhaustion incident?
Q: "Walk me through a technical
decision and its tradeoffs."
→ Zustand over Redux (performance
vs ecosystem)
→ Client-side enhance over server
ML (speed vs capability)
→ MongoDB over PostgreSQL (flexibility
vs relational integrity)
Q: "How do you approach code review?"
→ Correctness first, style second
→ Ask questions, don't dictate
→ Test the code mentally or locally
→ Focus on the 20% that matters most
Q: "What would you change about
PixelCraft's architecture?"
→ Start with TypeScript strict from
day 1 (migration was painful)
→ Use PostgreSQL for users + auth
(relational data = relational DB)
→ Add GraphQL for the gallery
(flexible queries from frontend)
→ Be honest about what's not ideal
Q: "Tell me about a time you
disagreed with a teammate."
→ Use a real or hypothetical example
→ Focus on the resolution
→ Show empathy and compromise
→ "We chose their approach because..."
// STAR Format:
// Situation: context
// Task: what needed to happen
// Action: what YOU did
// Result: outcome + learning
// Instructor provides detailed
// feedback on each round:
## Coding Round /10
- Problem decomposition: _/3
- Code quality: _/3
- Edge case handling: _/2
- Communication: _/2
## System Design /10
- Requirements gathering: _/2
- Architecture clarity: _/3
- Tradeoff discussion: _/3
- Scaling awareness: _/2
## Behavioral /10
- STAR structure: _/3
- Technical depth: _/3
- Self-awareness: _/2
- Communication clarity: _/2
## Overall Score /30
- 25+: Strong hire signal
- 20+: Hire signal
- 15+: Borderline — focus areas noted
- <15: Not yet ready — practice more
## Specific Feedback
- Strengths: [what went well]
- Growth areas: [what to practice]
- Resources: [what to study next]
Interviews test communication as much as competence.
The candidate who thinks aloud, asks clarifying questions, and admits uncertainty outscores the silent genius every time. Interviews are simulated collaboration, not exams.