Greetings and welcome to the Bike24 Frontend challenge

   

The rules

• The visualisation above is just a suggestion, it's up to you to implement it according to your imagination

• Most parts of our frontend are written in React, so using React for your task is an advantage

• Focus on code quality and best practices

• We expect some unit- and integration-tests. Use the testing frameworks you like

• Using Typescript is mandatory

• Provide your code in a github repository. We will execute it locally and may not know which node.js version you have used.

• Imagine how you would deploy such a app with a cloud provider, take some notes in the Readme

• You can use libraries, but maybe we ask why exactly this one

• Please avoid a single commit at the end, we are also interested in the commit history :)

Hint: You will find the products in the data folder

   

The task

*Try to imagine a wild 🙃 product owner approaching you and wanting to improve the shopping experience for our customers. The following requirements are specified

• As a customer I want to be able to select products from the drop down list.

• As a customer I would like to be able to determine the quantity of the product before I add it to the shopping cart.

• As a customer I would like to be informed when I exceed the maximum number of products and be prevented from entering more than this number

• As a customer I want to be able to see all my products in the shopping cart

• As a customer I want to be able to see the unit price in my shopping cart. Optional task: there is a value "taxRate" provided - use it to calculate the gross price for each product.

• As a customer I want to be able to see the total of the shopping cart at any time

• As a customer I want to be able to remove products from the shopping cart either one by one or by all at one by pressing the "clear Cart" button.

• It's not allowed to add more than 10 different product types in the shopping cart. As a customer I want to be able to see a visual representation of how many product types I can still add in a progress bar on the bottom.

• As a customer I want to see a graphical overlay when I confirm the purchase to know that my order was successful

• It is not allowed to add a quantity of items to the shopping cart that exceeds the "maxAmount" of the respective product. As a customer I want to be able to select the quantity of products with a slider

     

Good luck