PROD [Live] : https://react-redux-toolkit-cart-v2-prod.netlify.app/
- List of some of the items added to the cart, Navbar with the title Redux Toolkit , cart amount i.e. total number of items added by default, and a
CLEAR CART
button which upon click triggers a pop-up modal with few options i.e.,CONFIRM
to clear all items in the cart, closes the modal and displaysYOUR BAG is currently empty
orCANCEL
to close the modal - Each cartItem has the
image
,title
,price
,amount
, along with a few buttons i.e.remove
to remove the item from the cart, 🔼 to increase , 🔽 to decrease the amount of that particular item and when the item amount gets less than 1, it is automatically removed from the cart. - For every change in cartItem, the total price and cart amount gets adjusted.
- Data is handled by
data.js
, and styles are handled byindex.css
- To run the project locally, clone the repo,
npm install
to install the dependencies, andnpm run dev
to start up the development server on default port 5173.
HTML, CSS, JavaScript, ECMAScript, React - Hooks ~ useEffect, Redux Toolkit - createAsyncThunk
Netlify
Note: I have developed this project ~ [22] as part of the React 18 Tutorial and Projects Course (2023) taught by John Smilga.