Katkat
Back

Build a React dashboard with filters

VerkadaFrontend Engineer · Onsite
MediumFrontend EngineerOnsiteSoftware Engineering Fundamentals

Last updated

This problem tests your ability to build a modular React dashboard that handles state synchronization, efficient list filtering, and semantic UI structure.

Dashboard Development Task

Build a React component named DeviceDashboard that renders a list of security cameras and allows users to filter them by "Status" (Online/Offline) and "Location".

Requirements

  1. Data Source: Use an array of objects where each device has an id, name, status, and location.
  2. State Management: Implement controlled components for a dropdown menu (Status) and an input field (Location search).
  3. Filtering: The list should update in real-time as the user changes filter criteria.
  4. Empty State: Display a friendly message (e.g., "No devices found") if no items match the active filters.
  5. Structure: Break the UI into at least three components: FilterBar, DeviceList, and DeviceCard.
  6. Styling: Use Flexbox or Grid to ensure the layout is responsive.

API Interface

// Data structure example
const devices = [
  { id: 1, name: 'Lobby Cam', status: 'Online', location: 'Building A' },
  { id: 2, name: 'Entryway', status: 'Offline', location: 'Building B' }
];

Evaluation Criteria

  • Component Composition: Are responsibilities clearly separated?
  • State Management: Are filters held in the parent component and passed down correctly?
  • Performance: Is filtering logic efficient (avoiding unnecessary re-renders)?
  • Accessibility: Use appropriate ARIA labels and semantic HTML tags.

Example

  • Input: status = 'Online', location = 'Building'
  • Output: Filtered list showing only devices where status === 'Online' AND location includes 'Building'.

Hints

Hint 1

Lift the filter state (status and search term) to the parent component so that both the filter bar and the list can access it.

Hint 2

Use the `useMemo` hook to calculate the filtered list whenever the `devices` array or the filter state changes, ensuring efficiency.

Hint 3

Ensure that form inputs are 'controlled' by assigning their `value` props to your state variables and updating them via `onChange` handlers.

Follow-up questions

  • How would you optimize this if you had to fetch 10,000 devices from an API instead of using a local array?
  • How would you implement 'debouncing' on the location search input to prevent excessive re-renders?
  • What steps would you take to make this dashboard accessible for users relying on screen readers?