Skip to content
algo150Open the app
Take-home ยท 180 minutes

Product list from a REST API

Build a product list page in React with TypeScript in three hours. The data comes from a mock REST API with about 100 products. You set it up yourself, for example with a small JSON server or a library that mocks requests. The page has a search box, filters by category and price range, sorting and pagination. The search, the filters, the sort and the page are kept in the URL, so a reload or a shared link shows the same view. The page shows loading, error and empty states. Write tests for the main behavior, and a README that explains your decisions.

Start the clock in the app

Requirements

  • The list shows name, price, category and image for each product, loaded with GET requests from the mock API
  • Search by name with a debounced input, filters by category and price range, and sorting by price and by name
  • Pagination with a fixed page size, and the total number of results on screen
  • Search, filters, sort and page are in the URL and are restored on load; Back and Forward work
  • The list has a loading state, an error state with Retry, and an empty state
  • A new search or filter returns to page 1, and a late response never replaces a newer one
  • Tests cover the main behavior, with the network mocked
  • A README with the run steps and your decisions

What reviewers look for

  • Data loading done well: stale responses handled or requests cancelled, no request per key press, a cache if a library is used
  • The URL is the source of truth for the view; there is no second copy of the filters that can drift
  • All states are handled, and the layout does not jump between them
  • Clear layers: API functions, hooks or state, and components that only render
  • Types for the API response and for the query parameters
  • Tests that act as a user does: type, click, wait for the result
  • Accessible form controls and pagination: labels, real buttons or links, the current page marked

Check before you hand it in

  • The list loads from the mock API, and search, each filter, each sort and the pagination give correct results, alone and combined
  • I pasted the URL into a new tab and saw the same search, filters, sort and page; Back and Forward also work
  • I forced the loading, empty and error states and looked at each one, and Retry works after a failed request
  • With a slow network and fast typing, the results always match the text in the search box, and a new search starts at page 1
  • The README says how to run the app and the tests, and explains my decisions and trade-offs
  • Tests cover the main behavior: a search, a filter change, an empty result and a failed request
  • The history has small commits, and each message says what changed and why
  • I stopped when the three hours ended, and the app was in a state I could send

If there is time

  • Load the next page in advance when the pointer is over the Next button
  • Keep the previous results on screen while the next page loads
  • A switch between list and grid view, kept in the URL
  • One end-to-end test for the main flow