Prompt 1
Review a small Vue merge request, then improve it live
You receive a merge request on a small Vue app that fetches a list, transforms it and renders it conditionally. Review it in about an hour, leave prioritized comments a day before the call, then walk through them and implement the most important fixes in a 90-minute session.
Practice version modelled on a reported round: Public report: Taro front end engineer loop with a 90-minute live session, 2024
What this measures
Asynchronous communication in review comments, knowledge of Vue, HTML and CSS, and how you collaborate while changing code someone else wrote.
Clarify first
- Read the linked issue or requirements first, and note what the change is supposed to do before judging how it does it.
- Run the app and its tests locally, and confirm in the call which of your comments the interviewer wants implemented first.
Strong answer should cover
- Order comments by impact: bugs and broken requirements, then performance such as repeated API calls, then accessibility and layout, then style.
- Write each comment as a suggestion with a reason and, where it helps, a short code sample, as you would on a real merge request.
- In the call, implement the top two or three fixes in small commits, run the tests after each one, and say what you would leave for a follow-up.
- Note what the merge request does well, and ask where the intent is unclear instead of assuming.
Common miss: Leaving a handful of vague comments, or spending the session on cosmetic changes while a repeated API call or a failing test stays in place.
Practise a Vue component with an API call (Premium) Prompt 2
Stop a component from refetching on every click
The merge request calls the same endpoint every time a button is clicked. Explain the cost in a review comment, then change it so the data loads once and is reused, with loading and error states still correct.
Practice version modelled on a reported round: Public report: Taro front end engineer merge request round, 2024
What this measures
Spotting redundant network work in review, choosing where data should load, and keeping UI states honest after the change.
Clarify first
- Ask whether the data can change while the page is open, which decides between loading once on mount and refreshing on demand.
- Confirm what the user should see while loading and after a failure.
Strong answer should cover
- Load once in the right lifecycle hook or behind a cached promise, and keep the result in component state.
- Guard against overlapping requests so a second click while loading does not start another one.
- Keep explicit loading, error and loaded states, and allow a retry after an error.
- Add or update a test that fails if the endpoint is called more than once.
Common miss: Caching the data but losing the error state, or fixing the click handler while leaving the same call in a watcher.
Fix an async race in a fetch helper (free) Prompt 3
Fix broken markup and match the mobile mock
The merge request has invalid HTML and a view that breaks on narrow screens. Correct the markup, use Flexbox and media queries so the layout matches a mobile mock, and justify each change in a comment.
Practice version modelled on a reported round: Public report: Taro frontend developer merge request round, 2020
What this measures
Semantic HTML, CSS layout skill, and whether your review explains why each change matters to users.
Clarify first
- Ask for the breakpoints and the mock, and whether the layout must hold under browser zoom.
- Confirm which browsers matter before reaching for newer CSS features.
Strong answer should cover
- Fix the structure first: valid nesting, landmarks, labels, and button elements for actions.
- Build the layout mobile first with Flexbox, then add media queries for wider screens instead of overriding desktop rules.
- Check text overflow, tap target size and focus order at the narrowest width.
- Explain each change briefly in the review so the author learns the reason, not only the fix.
Common miss: Patching the mobile view with fixed widths and absolute positioning, which breaks at the next screen size.
Practise a responsive Flexbox navbar (free) Prompt 4
Make the unit tests catch the bug
The merge request changes how a component loads its data, and its unit test still passes. Write a test with a spy on the API call that fails on the bug and passes on the fix, then say what the test protects.
Practice version modelled on a reported round: Public report: Taro front end engineer loop with a 90-minute live session, 2024
What this measures
Testing behaviour rather than implementation, using mocks and spies precisely, and explaining the value of a test in review.
Clarify first
- Ask which test runner and helpers the project uses, and whether the API layer is already mocked.
- Confirm the behaviour the test should pin: how many calls, with which arguments, and what renders afterwards.
Strong answer should cover
- Mock the API module, mount the component, trigger the interaction, and assert the number of calls and the rendered result.
- Make the test fail first on the current code so it proves the bug exists.
- Avoid asserting on internal method names that a refactor could rename.
- Reset mocks between tests so one test cannot leak into the next.
Common miss: A test that only checks the component renders, which passes with or without the bug.
Build a spy function like Jest mocks (free) Prompt 5
Answer the written question on how a browser loads a page
In writing, describe what happens in the browser from typing a URL to a painted, interactive page, in as much detail as you think is useful, and name one performance risk at each step.
Practice version modelled on a reported round: Public report: Taro frontend engineer written questions, August 2019
What this measures
Depth of browser knowledge and clear technical writing, which the asynchronous review round also depends on.
Clarify first
- Decide the depth up front: network, parsing, rendering and interactivity, each with one concrete detail.
- Structure it with short paragraphs or a numbered list, since the reader reviews it asynchronously.
Strong answer should cover
- Cover DNS, the connection and TLS, the request and caching headers, then HTML parsing into the DOM and CSS into the CSSOM.
- Explain render-blocking CSS and parser-blocking scripts, and how defer, async and preload change the order.
- Describe layout, paint and compositing, then script execution or hydration for interactivity.
- Name one risk per step, such as an uncached request, a blocking script, a layout shift or a long task.
Common miss: A list of terms without the order of events, or an answer that stops at the DOM without reaching rendering.
Review how browsers parse and render HTML (free)