Project Updates & Bug Fixes

BUGS

HOME PAGE:

• Broken page down into smaller functional components: HeaderContent, LoadingContentMessage, EmptySearchMessage, ProductResults, and ResultsContentWrapper.
  • This makes the code much easier to read and maintain since it has been broken down into it's smallest functional elements.
  • Moreover, in a larger codebase, we can consider moving these helper components over into a shared folder, which can help to reduce merge conflits making maintainability across a large team even easier.
• Added a useDebounce() function in order to prevent multiple API calls being fired off during a single product search. In this case, I set the debouce timer to 300ms (UX/UI studies show any time less that 350ms is "unnoticable" to the average software user), so now an API call won't be made during every keystoke / input.
  • This greatly reduces the strain put on our backend services and prevents things like traffic spikes and 429 Too Many Requests errors from being returned to users.
• Looking at the GET /products endpoint, I see it also supports limit and offset filters. I didn't have quite enough time to implement it in the 2 hours, but given more time, I would also suggest updating the Home page to support paginated filter options to be able to view all of their search results if there are more than 20 results.

PRODUCT PAGE:

• Broke the page down into smaller functional components: ProductContainer, ProductImages, ProductDetails, EmptyStateMessage, and `LoadingProductMessage.
• Updated the product search URL so that product data will not be exposed via network traffic.
  • This could pose a security risk or even overflow the URL if large enough.
  • Instead the internal stacklineSku is now used in the URL to reach each individual product page.

PRODUCT ROUTER:

• Added a new sku search param to be used by the Product page.
  • This supports the update preventing product data from being exposed on the network
• Utilized the existing getById() function from productService to fetch product data

MISC:

• Added 'images-na.ssl-images-amazon.com' host to the Next.js configurations in order to fix a bug where images from this host could not be properly downloaded from the remote server

METHODOLOGY

When debugging code, I typically prefer to follow the data flow of the application (especially if it is an end-to-end feature we are looking at). Taking a look at the backend APIs for this project, it seems that there aren't too many major issues other than the data exposure in the URL. After fixing that, it looked like the data coming from the backend was in a pretty good place. When moving on to the frontend, I definitely try to maintain a microfrontend architecture to better maintainability and readability. Therefore, I broke down the major pages (Home and Product) into their smallest logical components. Doing these helps to clearly see the control flow of the different UI elements and makes debugging even easier. After doing this, I then went on to make the functional changes and updates I made to improve the frontend UX. This includes things more intuitive responsivess in the Product search bar, removed verbose URL, and planning to add paginated search results.