30% offEnding soon
FSD-049Frontend system design Premium

Design a Code Search Interface

Design fast code search with a query language, streamed matches, safe highlighting, stable navigation, and bounded huge-file rendering.

Advanced 65 min read

A code-search page is a snapshot reader. It commits one query generation against one permission scope and index snapshot, accepts verified match batches in order, and carries stable source coordinates into a bounded code viewer. Speed matters, but stale or unauthorized code is never a valid partial result.

Code search looks like a text box over a list. The difficult part begins when the query has operators, results arrive from many shards, repositories change during a search, and one selected match lives near line 740,210 of a file the browser cannot safely mount in full.

The frontend needs a durable identity model before it needs polished syntax colors.

Clarify what can be searched and what must stay consistent

Ask whether the product searches one repository, an organization, or every repository a viewer can access. Define exact text, regular expressions, paths, languages, symbols, generated files, forks, branches, and commit selection. Clarify whether results can stream, whether rank may change after the first paint, and how quickly permission or index changes must appear.

Set product goals for first useful matches, completion time, cancellation, stale-batch rejection, snippet bytes, mounted result lines, selected-file memory, keyboard travel, history restoration, and permission revocation. “Search feels instant” is not a measurable contract.

The public interview prompt

Design a browser-based code-search interface that supports a structured query language, streamed and paginated results, syntax and term highlighting, stable selection, and navigation through very large files.

Explain:

  • draft query parsing, committed URL state, generations, snapshots, and cancellation;
  • the boundary between the browser, query service, permission service, search shards, source service, and highlighting workers;
  • stable match identity across repository, commit, path, byte range, line range, and symbol;
  • partial batches, deduplication, ranking, pagination, gaps, retries, and stale responses;
  • result snippets, safe rendering, huge-file windows, minimaps, anchors, and history restoration;
  • keyboard and screen-reader behavior, focus, status announcements, browser find, zoom, and touch;
  • caching, authorization, privacy, telemetry, performance, degraded states, testing, and rollout.

What the premium solution covers

The full solution follows a query through a flight recorder, lays qualifiers onto a parser keybed, descends a million-line code canyon, and separates raw source from syntax, match, selection, and accessibility paint. A deterministic lab connects result batching, snippet size, highlight cost, query races, and bounded file rendering.

Premium solution

Continue with the complete system design

Unlock the architecture, state machine, API contracts, original diagrams, positioning model, accessibility decisions, performance budgets, testing plan, rollout strategy, scoring rubric, and interview walkthrough.

  • Detailed, beginner-friendly explanation
  • Production failure modes and trade-offs
  • Mobile-friendly architecture diagrams
  • Senior and staff-level interview signals
Unlock Premium

Frequently asked questions

What is the main frontend invariant for code search?
Only batches carrying the current query generation, permission-scope fingerprint, and index snapshot may change visible results. Every match keeps stable repository, commit, path, and source-range identity.
Should code-search results stream into the page?
Streaming can improve time to first useful match, but each batch needs generation, snapshot, sequence, and cursor metadata. The client must reject stale, duplicate, or out-of-order batches.
How should a browser render a million-line file?
Fetch and mount a bounded line window around the selected match, keep a stable line and byte anchor, and provide an alternate raw-text reading path when policy permits. Do not put the entire highlighted file in the DOM.
Where should syntax and match highlighting happen?
The service should return source coordinates and may return compact token spans. The browser can complete highlighting in a worker, then render source as text with explicit spans rather than trusting executable HTML.
How should query state interact with browser history?
Keep draft text local. Commit a normalized query and stable selection coordinates to the URL, use pushState for meaningful searches, and replaceState for view details such as a temporary panel or scroll checkpoint.
How should code search handle permission changes?
Authorization is enforced by the search service and checked again before results are returned. The browser scopes caches by viewer and permission fingerprint, removes revoked results, and never treats hidden UI as access control.