We have a shopping cart that the customer can use to add products: bras and underwear that she will later purchase. To incentivize the user to buy more products, we will offer discounts based on the amount of USD she spends. We want to add a progress bar that visually shows the amount that is being discounted to the customer.
As part of the cart update, we will be adding a progress bar that will allow the customer to see how far they are from the next tier of savings. Progress bar will have 4 spend tiers:
- $15 off
- $20 off
- $30 off
- $50 off
Figma: https://www.figma.com/file/kACmnEK2TJl6V9lTfwH80S/Mini-Cart-Rebrand?node-id=672%3A0
- A production-ready code, which has all the elements that you would include in a piece of code you’d deliver at your current job. For example unit tests, linting, code minification, etc
- Code that follows the best practices and performance, avoiding compromising the usability of the site from the customer’s perspective.
- Each time the customer adds a product using the "Add Bra" and "Add Underwear button" add the actual item section, including an image, product name, and quantity selectors as shown in the image https://ibb.co/Kyh8twH or Figma
- Good balance between "not assuming things" and "common sense".
- Any kind of improvement you may consider useful but between the boundaries of the provided scope.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.