(2 hours) You must build the UI described below.
You may optionally use Google/Baidu.
Code will be written in coderpad using the link we sent you.
You may optionally use any JS framework or library. Coderpad can automatically set up React, Vue, or AngularJS by using the packages button in the editor toolbar.
Please write code without bugs and that is ready for other engineers to read and extend.
If you will not finish within 2 hours, do not go over 2 hours. Instead, please write comments to explain what is left to do and instructions that are clear enough for another engineer to finish.
You will be graded not just on completion but also on code quality.
The design team has given you mock designs: /mock-designs/*
The backend team has provided you with a mock API client: /MockProductApiClient.js
Notes:
- If there are no products to display for a category, do not show the category header.
- The search filter should be case-insensitive.
- Products that are not in stock should have their name displayed in red.
- If no products can be displayed, show the text "No products found."
- The image in the "view detail modal" must be vertically and horizontally centered, and must not require scrolling to view on mobile.