To write the application you should use JS and any frontend framework that may help you to achieve the display. It should work in the web browser. There should be no/ minimal server side rendering here.
You can post it as a gist, upload to github or send us via email, anything works as long as the code is correct and you send us instructions how to use it.
Whenever you make a search in any hotel site, you get some information about the hotels given your search parameters for display purposes. Typical details included in the hotel are:
- Name
- Price
- Address
- Thumbnail
- Star & Review rating
- Reviews
The task is to write a simplified version of a hotel result display upon getting the data after a RESTful API call to the backend. You are free to display in the information as you deem fit (most hotel booking sites you give you a good idea of how to display; we don't wish you to spend too much time here for something fanciful as an additional challenge is listed below).
On top of doing up the display of the search results, this task entails a building out a series of filtering features to the display which customers would typically use:
- Filter hotels by Star Rating
- Filter hotels by Price
- Filter hotels by Name (given a free-form text input)
- Filter hotels by Review Rating
- Sort hotels by Price
- Low to High
- High to Low
- Reviews for each hotel
- Display
- Search reviews by their content
It needs to work in a following way:
Filtering Hotels
- Provide a filtering and sorting panel where all these features co-exist together
- Upon using any of the filter features, your results are displayed accordingly
- Provide a reset filters mechanism to re-render all results when the filters are cleared
Searching Reviews for a Hotel
- Provide a simple control to search reviews
- Reset/ Cancel function to revert to showing all reviews
Here're the major items to consider when designing your solution:
Filter Controls
- Filter controls should be customised to the results where relevant.
- Price filter should have their minimum and maximum values based off the lowest & highest priced hotels
- When no results exist for the filter combination, show a message that encourages the user to reset the filters
Implementation Style
- These features should be on the client-side, we do not expect a server side re-rendering based off the filters & sorting
- A frontend framework of your choice should help you with this
Testing
We value testing as a first class expectation in our company. Testing is what drives confidence in our solutions and gives us agility in turning around updates quickly.
We're interested to look at the tests you can write for the feature in your solution
- Functionality tests
- (Bonus) GUI tests
The hotel results endpoint returns data in the following format.
[
{
"id": 1,
"name": "Shinagawa Prince Hotel",
"rating": 7.7,
"stars": 4,
"address": "108-8611 Tokyo Prefecture, Minato-ku, Takanawa 4-10-30, Japan",
"photo": "https://d2ey9sqrvkqdfs.cloudfront.net/ZqSQ/i1_t.jpg",
"price": 120,
"description": "<p>Boasting 15 food and beverage options, 2 swimming pools, and its own aquarium, Prince Hotel is right next to JR Shinagawa Train Station, from where Haneda Airport is only a 25-minute train ride away. This 39-storey hotel offers beautiful Tokyo views and free WiFi throughout the entire hotel.</p> <br> <p>The air-conditioned rooms at Shinagawa Prince Hotel have a fridge and an en suite bathroom with a bathtub and shower booth. Free toiletries and a hairdryer are provided. Guests will also find a personal locker in the room.</p> <br> <p>By train, Shibuya is 5 stops away and Shinjuku is a 16-minute ride. Tokyo Station is an 11-minute train ride away. Direct buses to and from Narita Airport stop at the hotel.</p> <br> <p>A city within a city, the hotel has its own movie theatre, bowling alley and tennis courts. Guests can enjoy a visit to the karaoke bar. The hotel also features a 24-hour front desk, indoor and outdoor pools, a sauna facility and massage services. Currency exchange service is available. Guests will find drink vending machines and a cash machine on site.</p> <br> <p>The 39th-floor Dining & Bar Table 9 Tokyo offers one of Tokyo’s best views. Restaurants serves unique Western cuisine, grill and steaks, while the bar lounge offers fusion tapas and drinks including whiskey, cocktails, sake and champagne. </p> <br> <p>Minato is a great choice for travellers interested in clean streets, friendly locals and culture.</p>",
"reviews": [
{
"user": {
"name": "Sue",
"location": "Perth, WA"
},
"rating": 4.0,
"title": "Fabulous Location",
"description": "The location is fabulous. Two stations very close. Close to connections to evetywhere. Staff is wonderful. The cleaning staff is thorough and fast. Breakfast is tasty. Fitness room is great. Having a laundry accessible onsite was a lifesaver."
}
]
},
...
]
Making the same call to the endpoint with a different locale will yield data structured in the same format.
- The endpoint to use is: https://61c3e5d2f1af4a0017d99115.mockapi.io/hotels/en
- Please note that for the simplification and easiness of testing this is a static urls, they always return the same values, but you cannot treat them as static content (i.e. I may elect to test by modifying the hotel data)
What matters:
- Correctness - From the outside, the function should work in exactly the same way as before; this is ensured by writing & running the tests
- Readability - The code should be easy to read, the flow of the filtering, sorting & searching in your logic should be easy to understand and test
- Consistency - Your code should be consistent, meaning if in 2 similar use cases/ displays, you should have a centralised handling of it.
- Testing - We emphasise on having tests to ensure our code is reliable. You should write specs for essential logic in your features.