Guests using the site are able to:
- filter based on the star rating of the hotel and the capacity of the room,
- view images of the displayed hotel, hotel room details
⭐
npm i
shall be enough to build the project,
🟠 you can see it here
by
===========================================
Your goal is to create a page showing a list of hotels and their rooms.
Please use React and (preferably) Typescript to implement this challenge as these are our technologies of choice for front end work. There are no other restrictions on technology use.
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 the 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. Therefore, I will not be shown any rooms which do not accept children.
🟢 View all images of the displayed hotel See hotel details (including hotel name, address and star rating) and room details (including room type, max adults, max children and long description)
For other requirements, please see the attached mockup sketch. Note that the crossed boxes on mockup is the location for images. The URLs can be found in the response to the initial request.
Please approach this challenge like you would any work task, and importantly keep things simple.