chargome/bike24-frontend-challenge

Tech assessment challenge: build a shopping cart

setup

install

npm i

run app

• npm run dev
• app is visible on http://localhost/5173

run unit tests

npm run test

run e2e tests

npm run test:e2e

 

 

 

Greetings and welcome to the Bike24 Frontend challenge

   

The rules

• You have one week to complete the task at your own pace

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

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

• Try to work through the tasks in their order and refine the final result with each new requirement

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

• Provide your code as a runnable application in the repository

• Typescript is mandatory

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 see the prices in 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 would like to see the total for the selected product before I add it to the shopping cart

• 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 total of the shopping cart at any time

• As a customer I want to be able to remove products from the shopping cart

• As a customer I would like to be able to delete the entire shopping cart at once

• As a customer I want to be able to see how many shopping cart items I can add (max 10 items, not product amount combined)

• As a customer I would like to be informed when I have reached the limit

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

   

Extended scope

• As a customer I want to be able to select the quantity of products with a slider

• As a customer I want to be able to see the quantity selected with the slider also in the input field

• As a customer I want to see the new total for the selected quantity only after a few milliseconds

     

Good luck

bike24-frontend-challenge's Issues

Set quantity before adding products to cart

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

Display alert when order was successful

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

Display prices in drop down list

As a customer I would like to be able to see the prices in the drop down list.

Allow removing of products from cart

As a customer I want to be able to remove products from the shopping cart

Display total amount before adding product to cart

As a customer I would like to see the total for the selected product before I add it to the shopping cart

Allow deletion of entire cart

As a customer I would like to be able to delete the entire shopping cart at once

Use slider for selecting quantity of products

As a customer I want to be able to select the quantity of products with a slider

Related to: #3

Display amount of products that can be added

As a customer I want to be able to see how many shopping cart items I can add (max 10 items, not product amount combined)

Clarify price situation

I have two questions regarding the price:

1. I haven't found the currency in which the price is defined
2. I am not sure if there should be a price calculation with the provided tax rate – for now I'll handle the calculation in a util function which can be updated later on

Display debounced value of total in quantity selection

As a customer I want to see the new total for the selected quantity only after a few milliseconds

Related to: #3

Display all products in shopping cart

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

Display alert when product limit is reached

As a customer I would like to be informed when I have reached the limit

Display product quantity in input field

As a customer I want to be able to see the quantity selected with the slider also in the input field

Related to: #3

Prevent exceeding max amount of product

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

Create Product dropdown list

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

Display total of shopping cart

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