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

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

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.