E-commerce-app NPM

Javascript Developer coding challenge

Using the assets provided, your task is to build a simple e-commerce application.

Please, read all sections within this document carefully.

Points marked as optional are entirely up to you. They are not required.

With the "Guidelines" section in mind, you should complete the following main goals.

Main Goals

Develop a simple build system for your application
Develop the “Add/Remove to Bag” and “Add/Remove to Wishlist” actions which work con client side only
Develop a product listing pagination with 6 products per page.
The bag in the header must be updated with the new quantities and the new total price
optional Build a mini-bag with convenient actions, coherent with design. Example of a mini-bag is included within the images folder but you must develop a mini-bag that’s coherent with the page’s design.

Guidelines

You can use Vuejs or React framework built with Webpack, you can start with the boilerplate you want

You must use the given API calls to retrieve activities(products) and you can choose any API client to work with

All code produced should have modularity, reusability and performance in mind, while being well documented

In the end, you should have a build task to output a production ready folder (e.g.: dist) with all your work as well as the source code that generated it. This folder must not be committed and instructions to produce it must be provided in order to let us run the application in production mode.

If not specified in the design, it’s up to you to decide what’s best

You can't link to external resources, if necessary include them in your solution package

API docs

This is the basic curl to retrieve a product listing. You'll have to implement client API calls to get paginated response

  curl -X GET \
    'https://api.musement.com/api/v3/venues/164/activities?limit=6&offset=0' \
    -H 'accept-language: it' \
    -H 'content-type: application/json' \
    -H 'x-musement-currency: EUR' \
    -H 'x-musement-version: 3.4.0'

From the call above, consider these response props:

  * cover_image_url => is a URL string where you have to append this query string to make a responsive image ?q=60&fit=crop&w=[image_width_in_px]&h=[image_height_in_px]
  * title => product title
  * description => product description
  * net_price or retail_price => if discount prop is greather than 0, full price is net_price.formatted_value (to be shown as striked) and final price will be retail_price.formatted_value