Frontend Task

Outline

Build a single React page that will provide information and prices of the different room types of properties

Technology requested

• The page should be functional and presentable in modern browsers and devices
• Please build the site according to design provided, meanwhile we encourage you to make design changes that improve the user experience.
• Please make your test available as a git repo we can clone it locally to look at the code and run it.
• Please include an explanation that talks about your technology decisions and anything else you want us to know about your task.
• Please use React and ES6 syntax to build this project, you could add other additional tools or teches if needed.
• Please use Webpack to compile the project to be a functional site
• Please satisfy the following "Acceptance Criteria" user story:

Acceptance Criteria

• The test contain two pages, Property Listing page and Property Edit page
• You can switch page by click on the navigation on the left
• The current page will highlight on navigation
• Navigation bar can be collpase and expaned by click arrow on the bottom of navigation

Property Listing Page

• It will list all properties with room prices setted up

Propety Edit page

• All setted up properties will shown on the left panel
• Click on one of the properties, price info will shown on right side
• You could add a new property by clicking on Add new property button
• You could add price to a property or edit/delete a price from a property
• When setting up a new property, you'll see a list of properties which haven't setted up before, and you'll need to select one of the the properties to config
• all available properties are configed on properties.json
• Room name and price are all required fields, you'll need to validate them when click add/save button
• When clicking on the question mark on the right of the price, a tooltip will displayed with text Price are based with currency { currenty }
• Click on any other places will close the tooltip

Bonus points

• Responsive with tablet and mobile
• Unit/Functional Tests included
• Supporting multiple languages

Design

• Refer to: https://zpl.io/2Gm56yj
• Username: student_test
• password: studentTest
• Assets: https://github.com/Overseas-Student-Living/Frontend-Task/tree/master/images

Screenshots

List Page

Edit pages