Amazon·Frontend Engineer·Technical Phone Screen·Intermediate

Intermediate

Apr 2026

Summary

Amazon frontend screen, one coding question, pretty short session. They wanted you to actually write React code live which I wasn't fully expecting.

Questions Asked (1)

Using React, render 10 boxes on the page (each 100x100px) and lay them out with flexbox so they wrap to new rows when the container is too narrow.

Technical Trade-offsAPI & Integrations

Author's notes

Seemed simple but I second-guessed myself on whether to use inline styles or a stylesheet.

Create a free account to read the full note

AI HintsAI Generated

Suggested Approach

Start by clarifying the requirements and constraints, then outline a React component that renders 10 boxes using Array.map. Explain the flexbox CSS properties needed for wrapping, and discuss how to make the layout responsive and performant.

Pro tip: Mention that you would use CSS Grid or flexbox with gap for spacing, and highlight the importance of testing on different screen sizes to ensure the wrap behavior works as expected.

1. Clarify Requirements

Ask about browser support, responsiveness, and whether the boxes need to be interactive. Confirm that each box should be exactly 100x100px and that flexbox is required.

2. Component Structure

Create a functional component that generates an array of 10 items and maps over it to render divs. Use a key prop for each box to help React's reconciliation.

3. Flexbox Layout

Apply display: flex, flex-wrap: wrap, and gap to the container. Set each box to flex: 0 0 100px and height: 100px to enforce fixed size.

4. Responsive Considerations

Discuss how the layout behaves on narrow screens and whether to add media queries or use min-width. Mention that flex-wrap handles the wrapping automatically.

5. Testing and Edge Cases

Explain how you would test the wrapping behavior by resizing the container. Consider accessibility and performance implications, such as avoiding inline styles for repeated elements.

Key Points to Mention

Use Array.from({ length: 10 }) or a simple array to generate boxes.
Apply display: flex and flex-wrap: wrap on the container.
Set each box to width: 100px, height: 100px, and flex-shrink: 0 to prevent shrinking.
Use gap for spacing instead of margins for cleaner code.
Ensure the container has a defined width or max-width to trigger wrapping.
Mention that flexbox wrapping is automatic and no JavaScript is needed for layout.

AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.