Build an Ecommerce Product Listing Page using React.js | Frontend Coding Challenge | Advanced JavaScript
@Yomesh Gupta

ReactIntermediate
1666
Do you see value in our efforts?

Devtools Tech is a free platform for Frontend Engineers. It takes a lot of time, effort, and finanical resources to keep the platform running. If you see any value in our work and would like to support us then you can do using the following options.

InternationalDomestic

In this coding challenge, the candidate needs to build the Product Listing Page of an e-commerce store based on the wireframe shared below. This is a good challenge because here you would be able to use real-world APIs with support for pagination, filtering, search, sorting and much more.

Wireframe

Ecommerce Product Listing Page Wirefrane

Functional Spec

The user should be able to search and list the products.

  • User can select different categories to see products within them.
  • User must be able to apply different filters like price range, colour, average rating, and so on.
  • User must be able to combine two or more filters.
  • User must be able to see more products using pagination.

Products API: http://api.devtoolstech.in/ecommerce/products

Categories API: http://api.devtoolstech.in/ecommerce/categories

The API server is based on json-server. So, feel free to check out its documentation on how to make use of features like SEARCH, SORTING, FILTERING etc.

The wireframe is for reference. Feel free to design it the way you like and add more filters and valuable features you feel a user might need.