chijosh / fe-challenge

Frontend Tech challenge - Shopping Cart

• View Finished Challenge live site: [https://taupe-quokka-464ad0.netlify.app/]
• Description: This tech challenge requires building a shopping cart application Read below for app specification.
• Technologies Used:
  • React Js,
  • TypeScript
  • Redux

Bootstrapped application with Docker.

Desc: Please install Docker to run locally. Alternatively, simply run yarn to install dependencies then yarn start.

git clone

git clone https://github.com/chijosh/fe-challenge.git

change directory into project directory

cd fe-challenge

docker compose

docker-compose up

   

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