DoorDash·Frontend Engineer·Online Assessment (OA)·Intermediate

Intermediate

May 2026Remote

Summary

DoorDash frontend coding round on HackerRank. You get a mock API with product data and have to render it in a flexbox grid that matches a mockup exactly. Most of the CSS is handed to you, so the real work is in the details.

Questions Asked (1)

Fetch product data from a mock API and render it in a flexbox grid layout that matches a provided mockup, including correct price formatting with currency symbol, decimal places, and thousands separators.

API & IntegrationsTechnical Trade-offs

Author's notes

The CSS being mostly provided felt like a gift until I realized the actual gotcha was the JSON shape.

Create a free account to read the full note

AI HintsAI Generated

Suggested Approach

Start by outlining the data fetching strategy, including error handling and loading states, then describe how to structure the flexbox grid to match the mockup. Finally, explain the price formatting approach using Intl.NumberFormat with appropriate locale and currency options.

Pro tip: Mention that you would use Intl.NumberFormat for price formatting to ensure correct localization and thousands separators, and discuss how to handle edge cases like missing data or API failures gracefully.

1. Fetch and Manage Data

Use fetch or axios to retrieve product data from the mock API, and manage loading and error states with React state or a data fetching library like React Query.

2. Design the Flexbox Grid

Analyze the mockup to determine the grid structure, then implement a responsive flexbox layout using CSS Flexbox properties like flex-wrap, justify-content, and align-items.

3. Format Prices Correctly

Use the Intl.NumberFormat API with the appropriate locale and currency options to format prices with currency symbol, decimal places, and thousands separators.

4. Render and Handle Edge Cases

Map over the product data to render each item in the grid, and handle edge cases such as missing prices, empty data, or API errors with fallback UI.

Key Points to Mention

Use of Intl.NumberFormat for localized price formatting
Responsive flexbox layout with flex-wrap and gap for spacing
Error handling and loading states for API calls
Accessibility considerations (e.g., alt text for images, semantic HTML)
Performance optimization (e.g., memoization, lazy loading images)
Testing the formatting with different locales and currencies

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