Katkat
Back

Implement a Camera List UI from a Defined Visual Contract

VerkadaFrontend Engineer · Technical Screen
MediumFrontend EngineerTechnical ScreenSoftware Engineering Fundamentals

Last updated

Implement a responsive React camera-card list with fixed preview ratios, status and missing-image states, semantic selection, and a clear visual-verification method.

Implement a camera-list UI in React with careful layout, spacing, and state presentation.

Constraints & Assumptions

The original visual reference is unavailable, so this practice exercise uses an explicit replacement layout and does not claim pixel equivalence to the interview. Receive cameras, an array of {id,name,location,status,previewUrl} with unique IDs and status online or offline. Render a responsive card grid, preserve input order, show name/location/status, use a 16:9 preview, and expose a selection callback. Include empty and loading states. No network fetch is required inside the component.

Clarifying Questions

What are the target viewport sizes? How should offline or missing previews look? Is the whole card interactive? Which spacing and typography values come from the supplied design reference?

Follow-up questions

  • How would you diagnose a layout mismatch instead of changing CSS values randomly? How should long camera names and unavailable images behave? What would you virtualize for a very large list?