An open API service indexing awesome lists of open source software.

https://github.com/simandrew/shopping-cart-reactjs


https://github.com/simandrew/shopping-cart-reactjs

react-icons reactjs usereducer-hook

Last synced: 7 months ago
JSON representation

Awesome Lists containing this project

README

          

## Shopping Cart

### About the Project:
A simple shopping cart application built with React JS using the useReducer hook for state management. The application allows users to view a list of products, add them to the cart, and manage the cart items.

### Features:
- View a list of products with details such as name, price, and image.
- Add products to the cart.
- Remove products from the cart.
- Clear the entire cart.
- Increase or decrease the quantity of items in the cart.
- Display the total number of items and the total price in the cart.
- Responsive design for better user experience on different devices.
- Loading state while fetching data from external API.
- Error handling for API requests.

- fetch cartItems data for Cart from
`https://www.course-api.com/react-useReducer-cart-project`

### Sample task, photo:

![image](https://github.com/user-attachments/assets/a265b5b2-bd3b-419d-a340-87277ea3dc95)

![image1](https://github.com/user-attachments/assets/36bb4dbf-4192-43eb-a2c7-3338fb9392b7)

![image2](https://github.com/user-attachments/assets/ebd048b6-5afd-4864-beb7-b2508c213626)

### Technologies, Libraries:

- [React JS](https://react.dev/)
- [Vite JS](https://vitejs.dev/), [ESLint](https://eslint.org/), [Prettier](https://prettier.io/)

- [useReducer Hook](https://react.dev/reference/react/useReducer) is a function that allows you to manage complex state logic in functional components. It is an alternative to the useState hook and is particularly useful when the state logic involves multiple sub-values or when the next state depends on the previous one.

### Run the app:

- Clone a project: `git clone`

```
git clone https://github.com/SimAndrew/shopping-cart-reactjs.git
```

- Open project code in your editor.
- Install the dependencies, enter into the terminal:

```
npm install
```

- Run the project, enter into the terminal:

```
npm run dev
```