Prompt 1
Design a hotel search page frontend from scratch for a million users and several teams
Given a wireframe with date, city and guest inputs on top, filters on the left and result cards on the right, design the frontend: scalable, maintainable and observable, with a real-time chat integration, able to support a million users, multiple teams and fast, independent deploys of features. No diagram is expected; talk through the decisions and the follow-ups: micro-frontends, monorepo versus multi-repo, framework and bundler choice, where the filter and input state lives and in which components, component breakdown, testing architecture and monitoring.
Practice version modelled on a reported round: Public report: LeetCode senior frontend engineer loop, Bangkok, July 2026
What this measures
Decomposition of a product page into ownable units, state placement for inputs and filters, deploy boundaries between teams, and whether you can name what you would measure once it is in production.
Clarify first
- Confirm what independent deploys must mean: separate bundles composed on one page, separate routes, or separate repositories with their own release cadence.
- Confirm what the result cards need from the inputs: does a filter change refetch, re-rank a loaded set, or both, and must a shared link reproduce the same results?
Strong answer should cover
- Split the page by ownership rather than by visual block: search inputs, filters and results as separately deployable units behind a thin shell, and say what the shell owns (routing, auth, layout, the design system) and what it does not.
- Keep the search inputs and selected filters in the URL as the source of truth so a link reproduces a result set, derive component state from it, and name the single writer for each piece.
- Name the build: one framework version shared through the shell, a bundler that supports runtime composition of the units, and a contract test per unit so a team can release without a page-wide deploy.
- Make it observable before it ships: Core Web Vitals per route, error rates per unit, and a search-to-view-to-book funnel carrying a search id, so a regression points to one deploy.
Common miss: Drawing the three visual areas as components and stopping there, with no answer for who deploys what, where the filter state lives, or how a regression would be noticed.
Work through the real-time search with debounce and caching case (Premium) Prompt 2
Design a scalable frontend architecture for a travel booking website
Design the frontend architecture for a travel booking website similar to Agoda: it must handle high traffic, support micro-frontends, render SEO-friendly pages with SSR or SSG, and include performance optimisations. Say which pages are server-rendered, how the micro-frontends share a shell, and what you cache where.
Practice version modelled on a reported round: Public report: Code360 frontend engineer loop, Gurgaon, May 2025
What this measures
Rendering-strategy judgment per page type, the real cost of micro-frontends, caching layers from the CDN to the browser, and performance reasoning tied to measurable metrics rather than to a list of features.
Clarify first
- Confirm which pages matter for SEO (landing and property pages) and which sit behind a login (booking and account), since they want different rendering.
- Confirm the team shape: how many teams ship to the same page and whether they need separate release cadences, which is the reason to pay for micro-frontends.
Strong answer should cover
- Pick rendering per page: SSG or ISR for stable landing content, SSR for search results that depend on dates and availability, client-side rendering inside the authenticated booking flow; say why each choice is cheap or costly.
- Make micro-frontends a team boundary: a shell that owns routing, auth and the design system, shared dependencies pinned once, and a contract per unit so one team's deploy cannot break another's.
- Layer the caches: CDN for HTML and assets with explicit invalidation when prices or availability change, HTTP caching with ETags for API reads, and a client cache keyed by the search parameters.
- Tie performance to numbers: a Core Web Vitals budget per route, code-splitting by route and by unit, an image policy for property photos, and field measurement so the budget is checked in production.
Common miss: Listing SSR, micro-frontends and a CDN as features without saying which page gets which, so the interviewer cannot tell whether you understand the cost of each.
Work through the car rental booking frontend case (Premium) Prompt 3
Build the React and TypeScript stock dashboard take-home, then explain it in the follow-up hour
Build a React and TypeScript single-page application that fetches stock data from a given API and shows it in paginated tables with summary statistics (the lowest value, the average open price for one year, the longest streak where close is above open), with attention to performance, modular architecture and clean code. In the 60-minute follow-up the same account was asked for Longest Substring Without Repeating Characters and to 'Create a debounced utility function in JavaScript.'
Practice version modelled on a reported round: Public report: Code360 frontend engineer loop, Gurgaon, May 2025
What this measures
Request-state handling, typed data at the API boundary, derived statistics computed once from the full dataset, pagination that stays correct when the data changes, and whether you can explain each module's job when asked.
Clarify first
- Confirm the API shape, the page size, whether pagination is server-side or client-side, and what an empty or failed fetch must show.
- Confirm the definition of each statistic: which field is the lowest value, which year the average covers, and how a streak is counted across gaps in the data.
Strong answer should cover
- Hold the request in one discriminated union with loading, success, empty and error states, and type the response once at the fetch boundary.
- Compute the statistics in a pure, tested module from the full dataset rather than from the visible page, and memoise them on the data reference.
- Drive the table from a page index and page size held in state or the URL, derive the visible slice from the sorted data, and reset the page when the dataset changes; the React paginated data table drill at /react/coding/react-pagination-table (Premium) covers this slice.
- Separate the data layer, the statistics and the table components so each has one job; in the follow-up, write the debounce with one timer per instance, a cancel method, and the preserved this and arguments.
Common miss: Computing the statistics inside the table's render from the current page, so the lowest value changes when the user pages, and a debounce that clears no timer and so still fires the stale call.
Practice the fetch-and-render exercise (free) Prompt 5
Implement a pipeline function, extend it to an async limit, and clear the HackerRank coding hour
Two rounds reported from Bangkok loops. First, a JavaScript implementation round grown from the resume: a 2025 Staff candidate was asked to implement a pipeline function and then extend it so asynchronous steps run under a concurrency limit, in 40 to 50 minutes, followed by 10 to 15 minutes of behavioural questions. Second, the coding hour on HackerRank: two easy-to-medium problems (a 2026 account names Rank Transform of an Array and Climbing Stairs with 1, 2 or 3 steps) with complexity analysis, then verbal questions on which test cases you would write and what to check before raising a pull request.
Practice version modelled on a reported round: Public report: LeetCode staff frontend engineer loop, Bangkok, February 2025
What this measures
Function composition and closures, promise sequencing with a concurrency cap, clean JavaScript under pair programming, complexity analysis, and whether you can talk about testing and code review as everyday work.
Clarify first
- For the pipeline: confirm whether synchronous and asynchronous steps can be mixed, whether result order must be preserved, and what should happen when one step rejects.
- For the coding hour: read the constraints and samples before writing; confirm whether the interviewer wants the brute-force version first and whether tests should be written in the editor.
Strong answer should cover
- Write the synchronous pipeline as a reduce over the functions, then an async version that awaits each step in sequence; for the limit, keep at most N promises in flight, start the next task when one settles, and store results in input order.
- Decide whether the first rejection fails the whole run or is collected, say which, and state the time complexity and the memory cost of the results array.
- For the two problems, write the simplest correct version first, state the time and space complexity, then handle empty input, a single element and ties out loud.
- When asked about tests, list boundary cases first (empty, one item, maximum size, invalid input), then name unit, integration and end-to-end tests with an example of each; for the pull-request question, mention a self-review, passing tests, a scoped diff and a description that states the reason for the change.
Common miss: An async limit built from a counter and polling with setTimeout instead of promise settlement, and a resume that lists a utility you cannot write on request; the 2025 account's own advice was not to mention anything that can be turned into a JavaScript function you have not already prepared.
Practice the debounce utility (free)