In this project, let's build a Nxt Trendz - Cart Features by applying the concepts we have learned till now.

Refer to the image below:

Design Files

Click to view

• Extra Small (Size < 576px) and Small (Size >= 576px)
• Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px)

Set Up Instructions

Click to view

• Download dependencies by running npm install
• Start up the app using npm start

Completion Instructions

Functionality to be added

The app must have the following functionalities

• When an unauthenticated user tries to access the Cart route, the page should be navigated to Login Route

• Following are the features need to implemented

• Feature 1

  • When an authenticated user tries to add the same product multiple times
    • The quantity of the product should be updated accordingly, and the count of the cart items in the header should be remained same

• Feature 2

  • The total amount and number of items in the cart should be displayed in the Cart Route

• Feature 3

  • In each cart item in the cart
    • The quantity of the product should be incremented by one when the plus icon is clicked
    • The quantity of the product should be decremented by one when the minus icon is clicked
    • When the quantity of the product is one and the minus icon is clicked, then the respective product should be removed from the cart
    • Based on the quantity of the product, the product price and the Cart Summary, i.e the total cost should be updated accordingly

• Feature 4

  • When an authenticated user clicked on the remove button, Cart Item should be removed from the CartList

• Feature 5

  • When an authenticated user clicked on the Remove all button, all the Cart Items should be removed from the cart and EmptyCartView should be displayed

• The following are the keys used in the context object

  • cartList - this variable stores the cart items
  • removeAllCartItems - this function is used to remove all the cart items in the cart List
  • addCartItem - this function adds the cart item to the cart list
  • removeCartItem - this function removes the cart item from the cart list
  • incrementCartItemQuantity - this function increases the quantity of the product in the cart list
  • decrementCartItemQuantity - this function decreases the quantity of the product in the cart list

Components Structure

Implementation Files

Use these files to complete the implementation:

• src/App.js
• src/components/Cart/index.js
• src/components/Cart/index.css
• src/components/CartItem/index.js
• src/components/CartItem/index.css
• src/components/CartSummary/index.js
• src/components/CartSummary/index.css

Quick Tips

Click to view Quick Tips

• The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text.

  line-height: 1.5;
  

  
  

Important Note

Click to view

The following steps are to be followed for the tests to pass

• BsPlusSquare, BsDashSquare icons from react-icons should be used for plus and minus buttons in cart item.

• The Cart Item should consist of two HTML button elements with testid attribute values as plus and minus respectively.

• AiFillCloseCircle icon from react-icons should be used for remove button in cartItem.

• The Cart Item should consist of an HTML button element with testid attribute values as remove.

• The product image in Cart Item Route should have the alt text as {title} of the product.

• Prime User credentials

   username: rahul
   password: rahul@2021
  

• Non-Prime User credentials

   username: raja
   password: raja@2021
  

• find()

  • The find() method returns the first item's value that satisfies the provided testing function. If no item is found, it returns undefined.

  Syntax: arr.find(Testing Function)

Resources

Colors

Hex: #0b69ff

Hex: #171f46

Hex: #616e7c

Hex: #ffffff

Font-families

• Roboto

Things to Keep in Mind

• All components you implement should go in the src/components directory.
• Don't change the component folder names as those are the files being imported into the tests.
• Do not remove the pre-filled code
• Want to quickly review some of the concepts you’ve been learning? Take a look at the Cheat Sheets.