Back to Frontend Engineer Job Simulation

Prerequisites & resources - Frontend Engineer simulation

You need no setup to complete this simulation. Both tickets are answered in the browser: five questions and a written note each. There is nothing to upload, no repository to clone, and no code that we execute.

Running the code locally is optional and takes about five minutes. It makes the FE-101 answers obvious rather than deduced, and most candidates who do it finish faster.

What you should already know

You do not need production experience. You need to be able to read React and CSS carefully and explain what you read.

  • React with hooks - useState, useEffect, useMemo, and what React.memo compares
  • JSX lists - what the key prop is actually for
  • CSS layout - flexbox and grid, and what "overflow" means in a nested container
  • Basic accessibility - what an accessible name is, and why an icon alone does not have one
  • Browser devtools - the elements panel and, ideally, the React DevTools profiler

Optional local setup (5 minutes)

bash
1npm create vite@latest hiregrid-board -- --template react-ts
2cd hiregrid-board && npm install && npm run dev

Copy the three files from the FE-101 brief into src/components/board/, import board.css, and render <CandidateBoard candidates={fake} /> with a dozen made-up candidates. Then:

  • Resize the window to 390px wide → the page scrolls sideways.
  • Expand a card, then click Sort by score → the wrong card stays open.
  • Turn on Highlight updates in React DevTools and type in the search box → every card flashes.

Reference material

These are the concepts the tickets test. Reading them is allowed and encouraged - this is a simulation of the job, and looking things up is part of the job.

  • Keys and reconciliation - React docs, "Rendering Lists" → Why does React need keys?
  • React.memo and referential equality - React docs, memo → Minimizing props changes
  • Automatic minimum size of grid/flex items - MDN, min-width, the auto keyword
  • Cumulative Layout Shift - web.dev, Optimize CLS → the section on image dimensions
  • Accessible names - MDN, ARIA: aria-label, and the WAI-ARIA aria-sort property
  • List virtualisation - React docs, Rendering large lists

Ground rules

  • Answer from the code in front of you. Generic React advice scores badly; the questions are about the specific listing.
  • Using AI assistance is allowed, exactly as it is on the job. It will not answer these for you well - the questions turn on details of this file, and the notes are graded on reasoning you have to own in a review.
  • Two free submissions per ticket. Read your feedback before resubmitting.
  • Write the notes for a human. Alex is a real reviewer persona; the rubric rewards a note another engineer could act on.