https://github.com/developerzeeshu/react-cart
A simple e-commerce web application built with React and TypeScript. Browse products, filter and sort by category/price, view product details, and manage a cart with persistent state.
https://github.com/developerzeeshu/react-cart
context-api ecommerce-website localstorage playwright react reactjs tailwindcss typescript
Last synced: about 1 month ago
JSON representation
A simple e-commerce web application built with React and TypeScript. Browse products, filter and sort by category/price, view product details, and manage a cart with persistent state.
- Host: GitHub
- URL: https://github.com/developerzeeshu/react-cart
- Owner: DeveloperZeeshu
- Created: 2025-11-16T15:39:50.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-12-01T12:07:26.000Z (6 months ago)
- Last Synced: 2025-12-02T09:40:09.823Z (6 months ago)
- Topics: context-api, ecommerce-website, localstorage, playwright, react, reactjs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://reacts-cart.vercel.app
- Size: 306 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🛒 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
```bash
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**
```bash
git clone https://github.com/DeveloperZeeshu/React-Cart.git
2. **Navigate to the project directory:**
```bash
cd React-Cart
4. **Install dependencies:**
```bash
npm install
# or
yarn
5. **Start the development server:**
```bash
npm run dev
# or
yarn dev
6. **Open your browser and go to:**
```bash
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