https://github.com/eman-abukhater/e-commerce_product_app

Full-featured E-Commerce App built with React.js. Includes dynamic product listing, filtering, cart, search, wishlist, and responsive design using Tailwind CSS .
https://github.com/eman-abukhater/e-commerce_product_app

ecomerce-app ecommerce fetch-api javascript react react-router reactjs

Last synced: 2 months ago
JSON representation

Full-featured E-Commerce App built with React.js. Includes dynamic product listing, filtering, cart, search, wishlist, and responsive design using Tailwind CSS .

• Host: GitHub
• URL: https://github.com/eman-abukhater/e-commerce_product_app
• Owner: Eman-Abukhater
• Created: 2025-04-14T20:11:04.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2025-04-15T15:05:55.000Z (2 months ago)
• Last Synced: 2025-04-15T16:22:54.398Z (2 months ago)
• Topics: ecomerce-app, ecommerce, fetch-api, javascript, react, react-router, reactjs
• Language: CSS
• Homepage:
• Size: 38.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🛍️ E-Commerce Product App

An advanced, fully responsive E-Commerce frontend built with **React.js**, designed to simulate real-world shopping experiences including filtering, cart management, wishlists, and more.

---

## 🎯 Objective

Build a complete E-Commerce UI using React that includes product listings, detailed views, filters, sorting, cart functionality, and responsive design.

---

## 📦 Core Features

- **Product Listing Page**  

  - Fetches products from [Fake Store API](https://fakestoreapi.com/)

  - Displays image, title, price, category, and rating

- **Filters & Sorting**  

  - Filter by category, price range, and rating  

  - Sort by price (low-high/high-low) and name

- **Search Bar**  

  - Real-time product search by keyword or title

- **Cart System**  

  - Add/remove items  

  - Displays total price and item count  

  - Persists data in `localStorage`

- **Product Detail Page**  

  - View full product info on a separate route  

  - Add to cart from detail page

- **Pagination / Infinite Scroll**  

  - Load products gradually for improved UX

---

## 🧠 Advanced Features

- **Wishlist**  

  - Add items to wishlist (saved in `localStorage`)

- **Toast Notifications**  

  - Friendly alerts for actions like adding to cart/wishlist

- **State Management**  

  - Uses React Context API for global state

- **Responsive UI**  

  - Designed for all screen sizes using Tailwind CSS 

- **Dark Mode **  

  - Toggle between dark and light modes

- **Loaders / Skeletons**  

  - Display loading indicators during fetch

---

## 🛠 Tech Stack

- React.js  

- React Router DOM  

- Context API 

- Fetch API  

- Tailwind CSS 

- LocalStorage  

- Fake Store API