🛒 React Cart

A modern, minimal e-commerce web application built with React + TypeScript.
Users can browse products, apply filters & sorting, view detailed product information, and manage a shopping cart with persistent state using localStorage.

🔗 Live Demo: https://reacts-cart.vercel.app

---

✨ Features

🏠 Home Page

• Displays all products in a responsive grid
• Each Product Card shows only:
  • 🖼️ Image
  • 🏷️ Title
  • 💰 Price
  • ✅ Availability
• Category filters and price sorting available directly on the Home Page

📄 Product Detail Page

• Full product details
• Product description
• Add to Cart button (➕ Add to cart only from here)

🛍️ Cart Page

• View selected products
• Increase / decrease quantity
• Remove items from cart
• Cart total & item count displayed
• Cart state persists using localStorage

✅ General

• Responsive design for all screen sizes
• Toast notifications using React Hot Toast
• Clean UI with simple user flow

---

🧪 E2E Testing

Basic End-to-End testing is implemented using Playwright:

• Application loads successfully.
• Products page renders and displays the "Products" text.
• Cart page loads and navigates to /cart route correctly.

▶️ How to Run Tests

npx playwright test

---

⚙️ Technologies Used

• ⚛️ React.js
• 🔐 TypeScript
• 🔀 React Router
• 🧠 React Context API (State Management)
• 📦 FakeStoreAPI (Product Data)
• 🔔 React Hot Toast (Notifications)
• 💾 localStorage (Cart Persistence)
• 🧪 Playwright (E2E Testing)

---

🚀 Installation & Setup

1. Clone the repository

   git clone https://github.com/DeveloperZeeshu/React-Cart.git
   
   

2. Navigate to the project directory:

    cd React-Cart
   

3. Install dependencies:

    npm install
    # or
    yarn
   

4. Start the development server:

    npm run dev
    # or
    yarn dev
   

5. Open your browser and go to:

    http://localhost:5173
   

Make sure you have Node.js (v18 or higher) installed before running the project.

---

How to Use

• Browse products on the Home Page

• Filter products by category

• Sort products by price

• Click on any product to open the Product Detail Page

• Add product to cart from the detail page

• Open the Cart Page to:

  • Adjust quantities
  • Remove items
  • View total price

• Reload the page — your cart will still be there

---

🙋‍♂️ Author

Made with ❤️ by Jeesan Abbas