🛍️ ShopWave — Modern E-Commerce Frontend

A sleek, responsive mini e-commerce frontend built with React, Material UI, and Framer Motion. Designed as a clean, interview-ready project that demonstrates modern React patterns and component-driven architecture.

---

✨ Features

Feature	Description
Product Listing	Responsive grid of product cards with image, title, price, and star rating
Category Filtering	Filter by Electronics, Clothing, Accessories, or view All
Sorting	Sort by Price (Low → High), Price (High → Low), or Rating
Live Search	Instant search-as-you-type filtering by product name
Add to Cart	Add products with toast notification feedback
Cart Page	Full cart management — update quantity, remove items, order summary
Product Detail Modal	Click any product card to view full details in a dialog
Dark / Light Mode	Theme toggle persisted in localStorage
Loading Skeletons	Animated placeholder cards during initial data load
Smooth Animations	Fade-in cards, hover effects, and page transitions via Framer Motion

---

🛠️ Tech Stack

• React 18 — Component-based UI with hooks
• Vite — Lightning-fast build tool and dev server
• Material UI (MUI) v7 — Pre-built, accessible, and themeable UI components
• Framer Motion — Declarative animations and page transitions
• React Hot Toast — Lightweight toast notifications
• Context API — Global state management for cart and theme

---

📁 Project Structure

src/
├── components/
│   ├── Navbar.jsx          # Sticky app bar with cart badge & dark mode toggle
│   ├── ProductCard.jsx     # Animated product card with skeleton loader
│   ├── ProductModal.jsx    # Product detail dialog
│   ├── SearchBar.jsx       # Live search input
│   └── FilterMenu.jsx      # Category chips + sort dropdown
├── pages/
│   ├── Home.jsx            # Product grid with filtering, sorting, and search
│   └── Cart.jsx            # Cart items, quantity controls, order summary
├── context/
│   └── CartContext.jsx     # Global cart & theme state (React Context API)
├── data/
│   └── products.js         # 15 demo products across 3 categories
├── App.jsx                 # Root component with MUI ThemeProvider
├── main.jsx                # Entry point
├── theme.js                # MUI custom theme (light/dark)
└── index.css               # Minimal global styles

---

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher recommended)
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/liner14/E-commerce.git
cd E-commerce

# Install dependencies
npm install

# Start the development server
npm run dev

The app will be available at http://localhost:5173.

Build for Production

npm run build
npm run preview

---

📸 Screenshots

Home Page (Light Mode)

Product grid with search bar, category filters, and sort controls.

Cart Page

Cart items with quantity controls, remove button, and order summary.

Dark Mode

Full dark theme support with a single toggle.

---

🧩 Key Concepts Demonstrated

• React Context API for global state (cart + theme)
• useMemo for optimized filtering and sorting
• Custom MUI Theme with light/dark mode support
• Framer Motion for declarative animations (fade-in, hover, page transitions, spring modals)
• Component composition — small, reusable, well-commented components
• Responsive design using MUI's Grid and breakpoint-aware sx prop

---

📄 License

This project is open source and available under the MIT License.