Einkaufswagen-Projekt in React.js

Verwendete Technologien

• React.js
• Vite
• Redux Toolkit
• RTK Query
• Tailwind CSS

Merkmale:

• Verwaltung des Warenkorbs
• Responsives Design

Die vollständige Demoversion ist verfügbar unter: https://internetshopping.doctorpesheto.ir/

Projektübersicht

Das Einkaufswagen-Projekt ist eine weit verbreitete Anwendung, die für die meisten E-Commerce-Websites unerlässlich ist. Dieses Projekt kann einfach in Ihre eigenen Online-Shops integriert werden.

In dieser Implementierung können Benutzer Artikel zum Einkaufswagen hinzufügen, Artikel aus dem Einkaufswagen entfernen und den Einkaufswagen ändern. Die Informationen des Einkaufswagens werden so gespeichert, dass sie auch nach dem Schließen des Browsers des Benutzers erhalten bleiben.

Funktionen:

Hinzufügen zum Warenkorb: Ermöglichen Sie Benutzern, Artikel einfach zu ihrem Warenkorb hinzuzufügen. Entfernen aus dem Warenkorb: Ermöglichen Sie Benutzern, Artikel mühelos aus ihrem Warenkorb zu entfernen. Warenkorb ändern: Bieten Sie den Benutzern die Möglichkeit, den Inhalt ihres Warenkorbs zu ändern. Persistente Warenkorbinformationen: Stellen Sie sicher, dass die Informationen des Warenkorbs auch nach dem Schließen des Browsers erhalten bleiben.

Zusätzlich wird der lokale Speicher verwendet, um den Zustand des Einkaufswagens zu verwalten, wobei der entityAdapter eingesetzt wird, um die schnellen Suchfähigkeiten zu nutzen. Produkte werden mit RTK Query abgerufen, das Vorteile wie effizientes Datenladen, Caching und integrierte Unterstützung für Funktionen wie Pagination und erneute Abfragen bietet.

Technologies Used

• React.js
• Vite
• Redux Toolkit
• RTK Query
• Tailwind CSS

Project Overview

The Shopping Cart Project is a widely used application that is essential for most e-commerce websites. This project can be easily integrated into your own online stores.

In this implementation, users can add items to the shopping cart, remove items from the cart, and modify the cart. The shopping cart information is stored such that it persists even after the user’s browser is closed.

Features:

• Add to Cart: Allow users to easily add items to their shopping cart.
• Remove from Cart: Enable users to remove items from their cart effortlessly.
• Modify Cart: Provide options for users to modify the contents of their cart.
• Persistent Cart Information: Ensure that shopping cart information is maintained even after the browser is closed.

Additionally, local storage is utilized for managing the shopping cart state, employing the entityAdapter to leverage its fast search capabilities. Products are fetched using RTK Query, which offers advantages such as efficient data fetching, caching, and built-in support for features like pagination and re-fetching.

The full demo version is available at: https://internetshopping.doctorpesheto.ir/

Installation and Usage

1. Clone the repository (if you haven’t already):

https://github.com/hnazarparvar28782/Shopping--Cart-Project.git

2. Navigate to the project directory:

cd Shopping--Cart-Project

3. installing dependencies (e.g., installing dependencies, running the app).

npm install

4.running the app:

npm strat

5-open your browser :

http://localhost:3000