Welcome to this coding challenge, don't worry, there is no perfect solution. Take few minutes to read through this README to get you started and know the requirements.
You will find a ProductService
in /app/features/products/services
that you should be using for your implementation. Do not change its implementation.
The ProductService
exposes a single method get()
, which returns an
RxJS Observable holding a paginated list of product entities.
As of now, the App
only displays the one products
page containing a products-list
.
A "Load More" button is already in place though. Utilize RxJS to implement the functionality of this button by loading the next page of products and append it's contents to the current page products, whenever the user clicks it.
Give the user feedback while loading data and handle errors gracefully.
- [] Clicking "Load More" should append more products each time.
- [] Display a loading indicator, as needed.
- [] Handle
get()
errors - [] CSS: auto arrange the product cards horizondally on bigger screens and keep them vertical on small screens.
Ideally, the code should be:
- as reactive as possible.
- fully unit tested.
-
Via github: you can simply provide your solution by creating a pull request for this repository.
-
Via StackBlitz: save all the files and click the Share button on the left side of the top bar.