Your challenge is to product a page showing a list of hotels and their rooms.
Please use React and (preferably) Typescript to implement this challenge as this is our platform of choice. There are no other restrictions on technology choices.
To get the information to present, you will need to query the following API:
https://obmng.dbm.guestline.net/api/hotels?collection-id=OBMNG
This returns a list of hotels, with an Id. The Id can be used to query this query for the room types:
https://obmng.dbm.guestline.net/api/roomRates/OBMNG/[hotelId] for example, https://obmng.dbm.guestline.net/api/roomRates/OBMNG/OBMNG1
Guests using site should be able to:
-
Filter based on the star rating of the hotel, that is, given I have selected 3 stars, then I am able to see all hotels with a 3 and above rating.
-
Filter based on the capacity of the room. That is, when I have selected 1 adult and 1 child then I am able to see all rooms with at least that capacity.
For other requirements, please see the attached mockup sketch. Note that the mockup attempts to show hotel images. The the URLs can be found in the response to the initial request.
- Make sure you installed the dependencies with
npm ci - Run the dev environment with
npm start
- Make sure you installed the dependencies with
npm ci - Run the test suite with
npm t
- Make sure you installed the dependencies with
npm ci - build the project with
npm run build
- Make sure you installed the dependencies with
npm ci - build the project with
npm run lint
- Create the filtering mechanism
- Rework the design