Frontend technical task

For this task we're going to help our friend Somchai who owns a cafe. He wants us to build an ecommerce enabled website for his business so his customers can quickly and easily order coffee online from a range of different devices (mobile phones, tablets and desktop/laptop computers).

So that we can provide a responsive and performant user experience, we decide to build it as a single page web app using our favourite frontend framework (Angular, React or VueJS).

One of the first things we need to do is build a page so that customers can view the information about different menu items. For this technical task, we will be building the product detail modal. This is a modal window that will appear when the customer clicks on a product they're interested in purchasing. After a couple of hours in Sketch, we come up with the following mockup for the page:

We notice that the mockup has the following parts:

• A nice big image.
• A floating "back" button at the top-left of the mockup.
• Product information, including a "title" and "description".
• The price of the product.
• A quantity selector which defaults to "1" when the window is opened, with plus and minus icons next to it to increment and decrement the quantity value.
• Section for selecting different product "options" (more on this below).
• A "Add to cart button" at the very bottom of the mockup.

We also know that we'll need to build a backend API to support this functionality but haven't decided on the technology stack yet. Instead of waiting for the API to be built, we design the payload format and just mock out the API request so we can start work on the frontend.

The task

To complete this task, you will use either Angular (preferred), React or Vue.js to build a component that implements the product modal. The component will accept a single "product" as a property, which (for now) will simply be the sample JSON payload provided earlier in this document. E.g:

  <product-component [product]="product" />

Some important points to note:

• The modal will be displayed across a range of platforms, so it should be responsive.
• Basic validation should be implemented (e.g: quantity cannot go below "1").
• The price in the "Add to cart" button should reflect the subtotal, based on the product price, quantity and any selected options.

In addition, the options should be implemented according to the following logic:

• If the "extra" has a "min" value ≥ 0, it is required and must be selected before the customer can add the product to the cart.
• If the "extra" has a "max" value ≥ 1, the customer must be prevented from adding more than than number to the cart.
• If the "extra" has "max" = "max" = 1, the customer must select ONE and ONLY ONE option, so it should be rendered as a radio button.