Skip to content

el-sherbini/Product-Details-Page-With-Cart

Repository files navigation

Product-Details-Page-With-Cart

A Reactjs application with Redux-Toolkit and Tailwind CSS as a task for Hyper Media Labs company to get product details and it's related products with the ability to add, update, and remove it to cart through API.

Installation and Setup Instructions

To clone this repository. You will need node and npm installed globally on your machine.

Installation:

Clone the repo:

git clone https://github.com/el-sherbini/Product-Details-Page-With-Cart.git

Run terminal command:

npm install

To Run App:

npm satrt

To Visit App:

localhost:3000

Technologies Used

  • React.js.
  • Redux-Toolkit.
  • Tailwind CSS.
  • Axios.
  • React-hot-toast.
  • Spinners-react.

Features

  • UI Screen Development.
  • User gets specific product details and it's related products from API.
  • User ability to add the main item and related items to the cart.
  • User ability to increment and decrement the quantity of items.
  • Navbar cart icon updated with the count of items quantity in the cart.
  • User ability to increment and decrement the quantity of each item in the cart.
  • User ability to remove each item from the cart.
  • User ability to get the total price for each element.
  • User ability to get the total price for all elements and the total price before discount.