How do I approach Software Engineering Fundamentals interview questions?

Software Engineering Fundamentals questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master software engineering fundamentals interviews.

What difficulty level is this interview question?

This is a medium difficulty Software Engineering Fundamentals question, commonly asked during Onsite rounds at Amazon.

What role is this question designed for?

This question is commonly asked for Software Engineer candidates at Amazon during technical interviews.

Design a reusable web dialog component | Amazon Interview Question

Q: Design a reusable web dialog component

This question evaluates a candidate's ability to design reusable web UI components, covering component API design, state and event management, accessibility considerations, theming, and responsive behavior, and it falls under the Software Engineering Fundamentals domain within front-end engineering.

You are building a UI component library for a web application and are asked to design and implement a reusable dialog (modal) component.

Requirements

The dialog component should:

Render on top of the page with a semi-transparent background overlay whose color can be configured.
Display a title/header text.
Include a close ("X") button in the header to dismiss the dialog.
Display arbitrary body content provided by the parent (e.g., form fields, text, custom elements).
Support one or more configurable action buttons (e.g., OK , Cancel , Delete ), where the parent can specify:
- Button label
- Visual style (primary/secondary, etc.)
- Click handler
Allow the parent component to control whether the dialog is open or closed (i.e., controllable visibility).
Be reusable across different parts of the app and easy to style/extend.
Behave well on different screen sizes (desktop and mobile).
Handle basic accessibility concerns (e.g., keyboard navigation, screen readers).

Task

Describe how you would design this component, including:

Public API
- What inputs/props it exposes (e.g., isOpen , onClose , title , actions , backdropColor , etc.).
- What events/callbacks it emits to the parent.
Internal behavior and state management
- Which aspects of state are controlled by the parent vs. internal to the dialog (e.g., visibility, focus management).
- How clicks on the overlay, close button, or action buttons are handled.
Implementation outline in a modern front-end stack (e.g., React, Vue, or vanilla JS):
- How the DOM structure is organized (overlay, dialog container, header, body, footer).
- How you handle keyboard interaction (e.g., Esc to close, Tab focus trapping).
- How you handle accessibility (ARIA roles/attributes such as role="dialog" , aria-modal , labeling, initial focus).
- How you support configurable background overlay color and theming.

You do not need to write full production-ready code, but your answer should be concrete enough that another engineer could implement the component from your design.