Exercise

You have been given a task to create a simple shopping cart application using React. The application should have the following features:

• A list of products with their names, prices, and an "Add to cart" button.

• A cart section that displays the selected items with their names, quantities, and total price.

• The ability to add and remove items from the cart.

• The ability to increase and decrease the quantity of items in the cart.

• The ability to clear the cart.

Requirements

• Use React and any additional libraries you feel are necessary.

• Use useContext and useReducer to manage the state of the shopping cart.

• Use hooks such as useState and useEffect as necessary.

• Use inline styles or a simple CSS file to style the application.

• The application should be completed within 1 hour.

Evaluation Criteria

Your code will be evaluated on the following criteria:

• Correctness of the implementation.

• Cleanliness and readability of the code.

• Proper use of React hooks

Instructions

• You will be provided with a starter codebase that contains a ProductList component and a Cart component. You will need to create the App component that combines the two and manages the shopping cart state using useContext and useReducer.

• You may use any additional components, functions, or files that you need to complete the task.

• You may ask the interviewer any questions you have about the requirements or starter code.

• The interviewer will be available to answer any questions you have during the call.

• You will have 1 hour to complete the exercise.

Getting Started

First install all of the packages

npm install

# or

yarn install

Then run the development server:

npm run dev

# or

yarn dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.