https://github.com/pktcodes/cart-redux-toolkit-react-project-v2

Cart Project using React with Redux Toolkit
https://github.com/pktcodes/cart-redux-toolkit-react-project-v2

action-creator actions cart configurestore create-slice createasyncthunk extra-reducers heroicons john-smilga react react-redux reducers redux-devtools redux-toolkit slice-reducer thunkapi usedispatch useselector vite

Last synced: 6 days ago
JSON representation

Cart Project using React with Redux Toolkit

• Host: GitHub
• URL: https://github.com/pktcodes/cart-redux-toolkit-react-project-v2
• Owner: pktcodes
• Created: 2023-12-04T02:51:16.000Z (12 months ago)
• Default Branch: master
• Last Pushed: 2023-12-08T06:08:43.000Z (11 months ago)
• Last Synced: 2024-08-12T23:21:23.368Z (3 months ago)
• Topics: action-creator, actions, cart, configurestore, create-slice, createasyncthunk, extra-reducers, heroicons, john-smilga, react, react-redux, reducers, redux-devtools, redux-toolkit, slice-reducer, thunkapi, usedispatch, useselector, vite
• Language: JavaScript
• Homepage: https://react-redux-toolkit-cart-v2-prod.netlify.app/
• Size: 68.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Cart 🛒

> PROD [Live] : https://react-redux-toolkit-cart-v2-prod.netlify.app/

#### Cart consists of a straightforward user interface where there is a

- 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 displays `YOUR BAG is currently empty` or  **`CANCEL`** 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 by **`index.css`**

- To run the project locally, clone the repo, `npm install` to install the dependencies, and `npm run dev` to start up the development server on default port 5173.

#### Languages

HTML, CSS, JavaScript, ECMAScript, React - Hooks ~ useEffect, Redux Toolkit - createAsyncThunk

#### Deployment / Hosting

Netlify

---

_Note: I have developed this project ~ [22] as part of the React 18 Tutorial and Projects Course (2023) taught by John Smilga._