As a potential new crew member, we have some tests for you to show us what a pirate you can become. Like a real pirate, you must find your way by yourself sometimes. We give you only some little hints to get the 🔑 to our pirate ship.
You need some basic knowledge about
- HTML
- CSS
- JavaScript
You have exactly one week after you received this test. Don't worry if you have not finished with all tasks.
We need for our next trip with the whole ☠️-crew a hotel and what we get from our backend-🐵 was only this.
Your task is now to present us the hotels that we can choose the right one for our next trip. To make it easier for us to find the right hotel, we want to have a filter for hotel ⭐ (stars) and hotel 💰 (price).
Acceptance Criteria:
- We are modern pirates and love to navigate with our mobile devices too. Please optimize your presentation on all modern devices.
- On our trips we want to have it more comfortable and the default hotel list should have minimum 3 ⭐.
- You will find a lot of data and information for one hotel. Show us you what you think is really important to present.
- Pirates love to share their knowledge! Please find a way to show for every hotel also the reviews that we know what other pirates thing about the hotel.
Bonus (extra chance for our pirate ship 🔑): Write some tests (integration, unit or e2e) which you find useful for your code. Use every test framework which you want.
Optional: Did you miss something in our hotel API? Something that is really needed or you think is important to have before starting with the design or frontend? Please write down your thoughts in a simple list with short statements that we can discuss these point together later.
Please install Node.js globally.
Please use our starter kit what we prepared for you. Use plain JavaScript and no CSS framework! But you are free to install npm packages which you think is needed to solve the test in the best way.
To start, you must only install the dependencies.
npm installNow you can start developing with
npm startTo build your final project call
npm run buildWe have no requirements for design. No colours, no mockups, nothing. Please feel free to inspire us with everything you think this list of hotels needs to be perfect in case of UX and UI.
Please create a ZIP file and include every asset (images, data files,... [no node_modules folder please]) which we need to run the presentation on local. Your final code should run without any error in following desktop browser:
- Chrome(version >=76)
- Safari (version >= 12)
- Firefox (version >= 69)
And on the following mobile browser (only when you have real test devices):
- iOS Safari (version >= 12)
- Samsung Internet (version >= 9)
- Chrome for Android (version >= 76)
For the first mobile tests without real devices, you can run your code in chrome devtools device-mode. Here, please run it at minimum for the following devices:
- Galaxy S5
- iPhone 6/7/8
- Pixel 2
- iPhone X
- IPad
To get to our hotel, we also need a flight. But here our backend-🐵 has no idea how he can start with the development.
Your second task is to explain our backend-🐵 what you need from him as a data structure for an API endpoint.
Here you are entirely free how the data structure should look like and which format it should have. Think about what you need to show us also a flight list where we can search flight to our hotel.
Please describe with your own words in a text what you need and give us a short example with dummy data how your data structure will look like. See this text as a briefing for a KickOff meeting that all departments can sit together and talk about the next steps.