A React E-commerce app with dynamic cart features
Tags: ecommerce
Published: 2023-11-11 02:56:05

---
title: A React E-commerce app with dynamic cart features
published: true
date: 2023-11-11 00:45:00 UTC
tags: Ecommerce
canonical_url: https://reactjsexample.com/a-react-e-commerce-app-with-dynamic-cart-features/
---

# SNKR-hub
 ![A React E-commerce app with dynamic cart features](https://reactjsexample.com/content/images/2023/11/Code_2023-11_22-39-47.jpg)

SNKR-hub is a front-end project built using React, Redux Toolkit, and Tailwind CSS. It’s a Single Page Application (SPA) designed for a seamless shopping experience. Users can explore sneakers, add or remove items from the cart, adjust item quantities, and see real-time price updates. The project leverages Redux Toolkit for state management and has been deployed on Vercel.

![A React E-commerce app with dynamic cart features](https://user-images.githubusercontent.com/110151059/280470058-ac847c8d-f343-41e3-b35c-30426fda8b9a.png)

![A React E-commerce app with dynamic cart features](https://user-images.githubusercontent.com/110151059/280470089-70816afd-3b9a-44bc-8764-881a0bf05548.png)

![A React E-commerce app with dynamic cart features](https://user-images.githubusercontent.com/110151059/280470098-eaf8bc4b-834f-43e1-ad9e-f98a5dd2d995.png)

## Features

1. **Single Page Application (SPA):** SNKR-hub is designed as a SPA, providing users with a seamless shopping experience without the need for page reloads.

2. **Add & Remove Items from Cart:** Users can easily add items to their shopping cart and remove them as needed.

3. **Increase/Decrease Quantity of Items:** The application allows users to conveniently adjust the quantity of items in their cart.

4. **Dynamic Price Updates:** The cart’s total price is automatically updated as items are added, removed, or their quantities are adjusted.

5. **State Management Using Redux Toolkit:** Redux Toolkit is employed for efficient state management, ensuring a consistent and predictable application state.

6. **Deployed on Vercel:** The project is hosted on Vercel, making it accessible online.

## Pages

SNKR-hub consists of three main pages:

1. **Home Page:** The landing page where users can explore featured sneakers and navigate to other sections.

2. **Explore Page:** Users can browse the entire catalog of sneakers, view details, and add items to their cart.

3. **Cart Page:** This page displays the items in the user’s shopping cart, allows them to adjust quantities, and proceed to checkout.

## Installation and Usage

To run SNKR-hub on your local machine, follow these steps:

1. **Clone the Repository:**

```
git clone https://github.com/yourusername/snkr-hub.git
cd snkr-hub
```

2. **Install Dependencies:**

```
npm install

```

3. **Run the Development Server:**

```
npm run dev

```

4. **Open in Your Browser:** Visit [http://localhost:3000](http://localhost:3000) to explore SNKR-hub.

## Technologies Used

SNKR-hub utilizes the following technologies:

- React
- Redux Toolkit
- Tailwind CSS
- And other libraries and tools as required for the project.

## Deployment

SNKR-hub is deployed on Vercel, a popular platform for hosting web applications.

## Contributing

If you’d like to contribute to this project, please open an issue or create a pull request. We appreciate feedback and contributions from the community.

## License

This project is licensed under the MIT License. See the [LICENSE](https://github.com/manipandit/snkr-hub/blob/main/LICENSE) file for details.

Enjoy using SNKR-hub, your ultimate destination for sneaker shopping! If you have questions or need assistance, please feel free to reach out.

Happy shopping and coding! 🚀

## GitHub

[View Github](https://github.com/manipandit/snkr-hub?ref=reactjsexample.com)