[Feature] Shop Page

[HeriYantodotDev]

---

[Feature] Shop Page Shop Page with the several additional functionality

Feature Description

• A shop page that is rendered when the user clicks shop from the navbar
• The page shows the products that are stored in the Firestore database.

Use Case

Proposed Solution

• Fetch the products data from the Firebase database and store in React UseContext.
• useContext:
  • ProductContext. Shop component renders all this product data using useContext
  • CartContext . :
  • cart value which contains toogleOpen for the cart Icon.
  • cartItems value which contains an array of id of the product and the quantity.
  • A function to add an item to the cartItems array , and also adding the quantity for the existing item.
• Components;
  • Shop, A page component to render the ProductCard components.
  • ProductCard: Each product is rendered within ProductCard component. This component has name, image, price, and ADD TO CART button. Adding style of each of it. It should be responsive across view port.
  • CartIcon. This component is beside the signIn / signOut component. When it click it shows the CartDropDown component.
  • CartDropDown. It shows when CartIcon is clicked. It contains button Go to checkout. It renders all the item in the cartItems array. Each item will be rendered in the CartItem component.
  • CartItem. It shows the image, the product name, the quantity and the price based on the item in the cartItems array.

  • Alternatives Considered

Nope at the moment.

Additional Information

The CartIcon and CartDropDown are not intuitive in mobile view. However, in the mean time, let's skip this, and focus and the functionality first.