M.Shop - E-commerce React Project

M.Shop is a modern, responsive, and fully functional sample e-commerce platform built with React, React Router, and Context API.
This project demonstrates essential e-commerce functionalities, making it an excellent portfolio project.

📦 Show

https://shopping-one-flax.vercel.app/

🚀 Features

• Responsive Design: Fully optimized for desktop, tablet, and mobile views.
• Product Listing & Filtering:
  • Filter products by category (Men, Women, Accessories, Electronics).
  • Filter by price range with live updates via URL parameters.
• Product Detail Pages:
  • Dynamic product pages with slugified URLs.
  • Color and size selection.
  • Quantity selector with add-to-cart functionality.
• Shopping Cart:
  • Add/remove items with live cart count badge.
  • Order summary with total price.
• Search Functionality:
  • Live search that matches product titles.
  • Works across all pages (Home, Shop, Product pages).
• Breadcrumb Navigation for better UX.
• Hero Banner, Categories, and Featured Products on the Home Page.
• About Page with project details and developer info.

🛠 Tech Stack

• React 18+
• React Router DOM
• Context API (for global product/cart state)
• CSS Modules for scoped and clean styles
• FakeStore API for product data
• Lucide-React for modern icons

📂 Project Structure

src/
├── components/
│   ├── layout/         # Header, Footer
│   └── ui/             # Card, Buttons, etc.
├── context/            # Product & Cart context
├── pages/              # HomePage, ShopPage, CartPage, AboutPage, CardPage
├── utils/              # categoryMap.js, helpers
└── assets/             # Images and static files

👤 Developer

This project is developed by Rasool Vahid.

• GitHub: mutopia7

---

M.Shop is created as a portfolio project to demonstrate front-end e-commerce design and functionality.