Assigment Requirements:

  • You are provided with an incomplete <Checkout /> component.

  • You are not allowed to add any additional HTML elements.

  • You are not allowed to use refs.

  • Once the <Checkout /> component is mounted, load the products using the getProducts function.

  • Once all the data is successfully loaded, hide the loading icon.

  • Render each product object as a <Product/> component, passing in the necessary props.

  • Implement the following functionality:

    • The add and remove buttons should adjust the ordered quantity of each product
    • The add and remove buttons should be enabled/disabled to ensure that the ordered quantity can’t be negative and can’t exceed the available count for that product.
    • The total shown for each product should be calculated based on the ordered quantity and the price
    • The total in the order summary should be calculated
    • For orders over $1000, apply a 10% discount to the order. Display the discount text only if a discount has been applied.
    • The total should reflect any discount that has been applied
    • All dollar amounts should be displayed to 2 decimal places

It should look like this:

Working Demo Video

Getting Started with the project:

Available Scripts

The project uses yarn. In the project directory, you can run:

yarn

Installs all the dependencies required for the project to run.

yarn start

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.


Evaluation Criteria:

  • Code quality
  • Code readability
  • Obviosuly it should work as expected
  • Don't need extra features, just the ones mentioned in the requirements

Submission:

  • Fork this repository and submit your solution as a pull request to a specific branch that is assigned to you. Don't submit PR to main branch ❌.

Make Pull Request to the branch that is assigned to you. For example, if your candidate ID is candidate-001, then make a pull request to branch candidate-001. I hope it is clear ✅


Time Limit:

  • 1 hour from the time you start the assignment.

Code of Conduct:

  • Don't share your solution with anyone else.
  • Don't share the source code of this assignment with anyone else.

Questions:

  • If you have any questions, please feel free to reach out to me from telegram.

Good Luck 👍