PracHub
QuestionsPremiumCoachesLearningGuidesInterview Prep
|Home/Software Engineering Fundamentals/Verkada

Build a React dashboard with filters

Last updated: Jun 5, 2026

Quick Overview

This question evaluates frontend engineering skills in React, including component decomposition, controlled inputs and state management, semantic HTML, responsive CSS (flexbox/grid), list rendering, interactive filtering, accessibility considerations, and empty-state handling.

  • medium
  • Verkada
  • Software Engineering Fundamentals
  • Frontend Engineer

Build a React dashboard with filters

Company: Verkada

Role: Frontend Engineer

Category: Software Engineering Fundamentals

Difficulty: medium

Interview Round: Onsite

The frontend coding rounds focused on building and extending a production-style React interface. Implement a React page from a provided mockup for an admin dashboard: - Recreate the layout using semantic HTML and modern CSS. - Prefer flexbox and CSS grid over absolute positioning. - Break the UI into reusable components such as a page shell, toolbar, filter panel, and results section. - Render a list of records, for example fields like `name`, `location`, `status`, and `model`. - Add interactive filtering features on top of the original layout: - text search by name - filter by status - filter by location - Keep all inputs controlled in React and update the displayed records immediately as filters change. - Handle empty results and reasonable responsive behavior on smaller screens. Explain your component structure, state management choices, and how you would keep the implementation maintainable and accessible.

Quick Answer: This question evaluates frontend engineering skills in React, including component decomposition, controlled inputs and state management, semantic HTML, responsive CSS (flexbox/grid), list rendering, interactive filtering, accessibility considerations, and empty-state handling.

Verkada logo
Verkada
Jan 10, 2026, 12:00 AM
Frontend Engineer
Onsite
Software Engineering Fundamentals
1
0
Loading...

The frontend coding rounds focused on building and extending a production-style React interface.

Implement a React page from a provided mockup for an admin dashboard:

  • Recreate the layout using semantic HTML and modern CSS.
  • Prefer flexbox and CSS grid over absolute positioning.
  • Break the UI into reusable components such as a page shell, toolbar, filter panel, and results section.
  • Render a list of records, for example fields like name , location , status , and model .
  • Add interactive filtering features on top of the original layout:
    • text search by name
    • filter by status
    • filter by location
  • Keep all inputs controlled in React and update the displayed records immediately as filters change.
  • Handle empty results and reasonable responsive behavior on smaller screens.

Explain your component structure, state management choices, and how you would keep the implementation maintainable and accessible.

Solution

Show

Submit Your Answer to Earn 20XP

Sign in to leave a comment

Loading comments...

Browse More Questions

More Software Engineering Fundamentals•More Verkada•More Frontend Engineer•Verkada Frontend Engineer•Verkada Software Engineering Fundamentals•Frontend Engineer Software Engineering Fundamentals
PracHub

Master your tech interviews with 8,000+ real questions from top companies.

Product

  • Questions
  • Learning Tracks
  • Interview Guides
  • Resources
  • Premium
  • For Universities
  • Student Access

Browse

  • By Company
  • By Role
  • By Category
  • Topic Hubs
  • SQL Questions
  • Compare Platforms
  • Discord Community

Support

  • support@prachub.com
  • (916) 541-4762

Legal

  • Privacy Policy
  • Terms of Service
  • About Us

© 2026 PracHub. All rights reserved.