Assignment for a front-end developer position at deskbookers
In this assignment you need to make an Ajax request and show the results on a web page. What you will be showing are search results of our search page. Because of limited time you will only show the results. You don't have to make the search form or filters.
The data for the search results can be found as JSON from the URL: https://www.deskbookers.com/nl-nl/explore/ajax.json?q=<text>&bounds=<north>|<east>|<south>|<west>. Both text and bounds are optional arguments.
For this assignment you need to make a page containing the following elements:
- A map (Google Maps for example) showing the items from the result
- A list showing the items from the result with at least the following data visible:
- The name of the space
- The name of the venue (location)
- The city where the space is located
- Extra data you think is usefull to show aswell
It is up to you to decide which frameworks you want to use (or not). You could think of frameworks like ReactJS, Angular, etc. It is up to you.
As inspiration you can use this page: https://www.deskbookers.com/nl-nl/explore?q=amsterdam Your version doesn't need to be as extensive as this example.
Make sure the code is clean and robust. This is more important than the amount of features!
These are the steps I plan to work on this app:
- Set up React app and define containers and components
- Use Superagent to fetch data from the given URL in JSON format
- Render list of venues with selected data
- Set up Google Map
- Create markers to locate restaurants based on fetched latitudes and longitudes
- Styling with CSS Variables, CSS Grid and material-ui@next
- Add responsive design for mobile devices (smaller than 400px), ipad (max-width 700px) and large screen (beyong 700px)
git clone [email protected]:fandytcc/db-frontend-expert-test.git
cd db-frontend-expert-test
yarn install
yarn startFor more information, see these links: