Canonical Solutions for Real Interview Questions

Swim in Rising Water

JavaDijkstra's AlgorithmPriority QueueDisjoint Set Union

You are given an $n \times n$ integer matrix `grid` where each value `grid[i][j]` represents the elevation at that point $(i, j)$. It starts raining, and water gradually rises over time. At time $t$, the water level is $t$, meaning any cell with elevation less than or equal to $t$ is submerged and can be swam through. You can swim from a square to another 4-directionally adjacent square if and only if the elevation of both squares individually are at most $t$. You can swim infinite distances in zero time. You must stay within the boundaries of the grid. Return the minimum time $t$ required to reach the bottom-right square $(n - 1, n - 1)$ starting from the top-left square $(0, 0)$. ### Constraints - $n == \text{grid.length} == \text{grid[i].length}$ - $1 \le n \le 50$ - $0 \le \text{grid}[i][j] < n^2$ - Each value in `grid` is unique.

Design a Client-Side PDF Viewer and Annotation Tool

ReactTailwind CSSpdf.jsWeb WorkersIndexedDBDexie.jsOffscreenCanvasSVG

Design a highly responsive, memory-efficient client-side PDF viewer and annotation workspace. The application must render massive PDF files (up to 500 pages) smoothly, support real-time user-drawn annotations (freehand, highlight, shape, and text), and scale without performance issues on mobile devices. Detail your approach to multi-layer viewport rendering, high-DPI scaling, virtualized rendering lists, memory management, coordinate scaling across zoom actions, and offline-first storage architecture.

Design a High-Concurrency Online Examination Frontend Platform

ReactTailwind CSSZustandIndexedDBWeb Cryptography APIBeacon APIWeb WorkersREST

Design the frontend architecture for an enterprise-grade Online Examination Platform supporting up to 10,000 concurrent students. The system must operate under unstable network conditions with absolute zero data loss, feature aggressive client-side anti-cheating mechanism (proctoring, tab tracking, and keyboard lockout), load complex multi-media exams instantly, and support deep offline-first capability. Explain how you would structure component hierarchies, implement secure client-side storage, guarantee synchronized updates under heavy load, and optimize rendering interfaces to achieve continuous responsiveness and high accessibility.

Design the Frontend for a Spreadsheet Application

ReactTailwind CSSIndexedDBTypeScriptDOM Virtualization

Design the client-side architecture for a scalable spreadsheet application like Google Sheets. Focus on structural component hierarchy, DOM performance under virtualization for high-density matrices, real-time formula computation using dependency graphs, clean state synchronization across components (toolbar, formulas, and cells), and accessibility behaviors within interactive elements.

Designing a High-Performance Feature Flag and A/B Testing Frontend System

ReactTypeScriptEdge MiddlewareMurmurHash3LocalStorageBeacon APISSR

Design a frontend architecture and client SDK for a resilient, high-performance Feature Flag and A/B Testing system. Your solution must support both boolean and multivariate flags, dynamic targeting rules, and A/B test bucketing. Address critical frontend challenges such as preventing Flash of Control Content (FOCC)/visual layout shifts, keeping evaluation latency under 2ms, minimizing client-side bundle size, handling offline scenarios, and designing an efficient, deduplicated telemetry buffering system that tracks user exposure events without impacting core thread performance.

Design a High-Performance Live Sports Scoreboard Dashboard

ReactTailwind CSSRadix UISSETypeScriptIndexedDBWeb Workers

Design a scalable, real-time live sports scoreboard dashboard web application that displays dozens of concurrent matches with dynamic score changes, timing updates, and detailed play-by-play timelines. Focus on your architectural design for handling high-frequency live push updates (e.g., via SSE/WebSockets) without compromising 60 FPS UI rendering performance. Discuss component state management, decoupling network inputs from UI rendering, state synchronization, client-side caching, virtualized lists for concurrent matches, connection reconnection resilience, accessibility guidelines (aria-live), and structural decoupling of business domain rules from UI libraries.

Design a Scalable Polling and Survey Platform Frontend

ReactTailwind CSSZustandIndexedDBServer-Sent EventsTypeScript

Design the frontend architecture of a highly scalable, offline-resilient survey and polling platform similar to Typeform or Slido. The system must support two key user experiences: a highly interactive Survey Runner engine that dynamically executes complex skip logic (branching) on the client, and a Live Poll Presentation view that visualizes real-time voting trends under extreme concurrency. Detail your component design, dynamic loading strategy for field inputs, offline queue persistence mechanism, rendering performance optimizations for complex inputs, and accessibility standards to support high-traffic events under weak network conditions.

Real-Time Notifications and Activity Feed System

ReactTailwind CSSTypeScriptIndexedDBSSEBroadcastChannelWeb Workers

Design a high-performance, real-time notification engine and activity feed for a modern collaborative web application. The design must address real-time ingestion patterns (such as SSE or WebSockets), client-side cache normalization, layout rendering optimizations (like windowing and layout thrashing prevention under peak loads), cross-tab synchronization of unread states, and comprehensive accessibility (WCAG) guidelines for dynamic alerts.

Design

Real-time Chat Platform Design

WebSocketsRedisScyllaDBPostgreSQLgRPCJWTAPNsFCMNoSQL

Design a globally scalable real-time chat system similar to WhatsApp or Slack. The system must support 100 million daily active users, 1:1 and group messaging, and real-time presence indicators. Focus on handling persistent connections at scale, ensuring high-write throughput for message history, and providing low-latency delivery across diverse geographic regions while maintaining message ordering and reliability.

Coding

Optimize Water Distribution in a Village

C++Kruskal's AlgorithmMSTDSU

There are $n$ houses in a village. You want to supply water to all the houses by building wells and laying pipes. For each house $i$, you can either build a well inside it directly with cost `wells[i-1]`, or pipe water from another house to it. The cost to lay a pipe between house $u$ and house $v$ is given by the array `pipes` where each `pipes[j] = [house1, house2, cost]` represents a bidirectional connection. Return the minimum total cost to supply water to all houses. **Constraints:** - $1 \le n \le 10^4$ - `wells.length == n` - $0 \le wells[i] \le 10^5$ - $1 \le pipes.length \le 10^4$ - $1 \le house1, house2 \le n$ - $0 \le cost \le 10^5$ - $house1 \neq house2$

Design

Hotel Reservation System

PostgreSQLOpenSearchRedisKafkaCDCSaga PatternKubernetesCDNStripe

Design a global hotel reservation system similar to Booking.com or Expedia. The system must support hotel discovery via search (location, dates, room types) and a high-integrity booking flow. A critical requirement is to ensure no two customers can book the same room for overlapping dates (zero overbooking). Consider how the system handles 10 million daily active users, global distribution, and high-concurrency scenarios during peak holiday seasons. Discuss your choice of consistency models, database selection, and how you maintain search performance while ensuring booking accuracy.

Design

Hotel Reservation System Design

PostgreSQLPostGISRedisKafkaCDNJWTStripeCDCMicroservices

Design a global hotel reservation system like Booking.com or Expedia. The system should support hotel discovery (search by location/date), real-time availability management, and a secure booking process. Key challenges include handling high-concurrency bookings for limited inventory without double-booking, ensuring low-latency search across millions of records, and maintaining data consistency across the reservation and payment lifecycles. Discuss how you would handle 10 million daily users and the trade-offs between consistency and availability in a distributed environment.