add cart/wishlist count badges

Author: Mishra-coder

README.md

@@ -1,4 +1,5 @@
 # Zappify Shoes
+<<<<<<< Updated upstream
 **Zappify Shoes** is an online shoe store built to sell just *one* premium pair of shoes. Instead of a messy website with hundreds of products, Zappify gives the user a super clean and focused shopping experience for that single product.
 
 ### Simple Breakdown of What It Does:
@@ -8,6 +9,17 @@
 - **Powerful Engine (Backend):** Behind the scenes, it uses a real database to safely store user data and orders. It's built on popular, modern technologies (React for what you see, Node.js and MongoDB for what happens behind the scenes).
 
 In simple words, Zappify is a complete, real-world example of an e-commerce website designed to look great and work perfectly from start to checkout.
+=======
+Zappify Shoes is a highly-optimized, premium e-commerce platform dedicated to showcasing and selling a single, flagship shoe model. Rather than overwhelming users with endless product catalogs, Zappify provides a focused, immersive shopping experience.
+
+### What It Does
+- **Immersive Showcase:** Presents the product using smooth, performant animations and a sleek UI built with React and Framer Motion.
+- **Secure Shopping:** Users can securely sign up, log in, and manage their sessions via a robust JWT-based authentication system.
+- **Order Processing:** Includes backend capabilities for securely capturing user orders, managing cart data, and processing shipping details via a REST API.
+- **Scalable Architecture:** Powered by a robust Node.js/Express backend and MongoDB Atlas, offering a complete, production-ready full-stack (MERN) environment containerized with Docker.
+
+Designed for both performance enthusiasts and modern shoe lovers, Zappify ensures a beautiful, secure, and seamless user journey from the landing page to checkout.
+>>>>>>> Stashed changes
 
 ## Key Features
 

frontend/src/App.jsx

@@ -5,54 +5,99 @@ import ProductGrid from './components/ProductGrid'
 import ProductDetail from './components/ProductDetail'
 import { ALL_PRODUCTS } from './data/products'
 import { motion, AnimatePresence } from 'framer-motion'
-import { X, ShoppingBag, Heart, User, ArrowRight } from 'lucide-react'
+import { X, ShoppingBag, Heart, User, Trash2 } from 'lucide-react'
 
 function App() {
   const [selectedCategories, setSelectedCategories] = useState([]);
   const [selectedThemes, setSelectedThemes] = useState([]);
   const [selectedProduct, setSelectedProduct] = useState(null);
   const [activeOverlay, setActiveOverlay] = useState(null);
+  const [cartItems, setCartItems] = useState([]);
+  const [wishlistItems, setWishlistItems] = useState([]);
+  const [sortOption, setSortOption] = useState('recommended');
 
   const toggleFilter = (item, type) => {
     if (type === 'category') {
-      setSelectedCategories(prev => 
+      setSelectedCategories(prev =>
         prev.includes(item) ? prev.filter(i => i !== item) : [...prev, item]
       );
     } else {
-      setSelectedThemes(prev => 
+      setSelectedThemes(prev =>
         prev.includes(item) ? prev.filter(i => i !== item) : [...prev, item]
       );
     }
   };
 
+  const [activeNav, setActiveNav] = useState('MEN');
+
+  const [sneakersView, setSneakersView] = useState(false);
+
   const handleNavigate = (destination) => {
-    if (destination === 'home' || destination === 'MEN' || destination === 'SNEAKERS') {
-      setSelectedProduct(null);
-      setSelectedCategories([]);
-      setSelectedThemes([]);
+    setSelectedProduct(null);
+    setSelectedThemes([]);
+    setSelectedCategories([]);
+    if (destination === 'SNEAKERS') {
+      setSneakersView(true);
+    } else {
+      setSneakersView(false);
     }
+    if (destination !== 'home') setActiveNav(destination);
+  };
+
+  const addToCart = (product, size) => {
+    setCartItems(prev => {
+      const exists = prev.find(i => i.id === product.id && i.size === size);
+      if (exists) {
+        return prev.map(i => i.id === product.id && i.size === size ? { ...i, qty: i.qty + 1 } : i);
+      }
+      return [...prev, { ...product, size, qty: 1 }];
+    });
+  };
+
+  const removeFromCart = (id, size) => {
+    setCartItems(prev => prev.filter(i => !(i.id === id && i.size === size)));
+  };
+
+  const toggleWishlist = (product) => {
+    setWishlistItems(prev =>
+      prev.find(i => i.id === product.id)
+        ? prev.filter(i => i.id !== product.id)
+        : [...prev, product]
+    );
   };
 
+  const isWishlisted = (id) => wishlistItems.some(i => i.id === id);
+
   const filteredProducts = useMemo(() => {
-    return ALL_PRODUCTS.filter(product => {
+    let result = ALL_PRODUCTS.filter(product => {
+      const sneakerMatch = sneakersView ? product.id >= 30 && product.id <= 44 : true;
       const categoryMatch = selectedCategories.length === 0 || selectedCategories.includes(product.category);
       const themeMatch = selectedThemes.length === 0 || selectedThemes.includes(product.theme);
-      return categoryMatch && themeMatch;
+      return sneakerMatch && categoryMatch && themeMatch;
     });
-  }, [selectedCategories, selectedThemes]);
+
+    if (sortOption === 'low-high') result = [...result].sort((a, b) => a.price - b.price);
+    else if (sortOption === 'high-low') result = [...result].sort((a, b) => b.price - a.price);
+    else if (sortOption === 'newest') result = [...result].sort((a, b) => b.id - a.id);
+
+    return result;
+  }, [selectedCategories, selectedThemes, sortOption, sneakersView]);
 
   return (
     <div className="zappify-app">
-      <Header 
-        onOpenOverlay={setActiveOverlay} 
+      <Header
+        onOpenOverlay={setActiveOverlay}
         onNavigate={handleNavigate}
+        cartCount={cartItems.reduce((sum, i) => sum + i.qty, 0)}
+        wishlistCount={wishlistItems.length}
+        activeNav={activeNav}
       />
-      
+
       <main className="app-main">
         <div className="container-broad main-layout">
           <AnimatePresence mode="wait">
             {!selectedProduct ? (
-              <motion.div 
+              <motion.div
                 key="grid"
                 className="grid-view"
                 initial={{ opacity: 0, x: -20 }}
@@ -61,24 +106,37 @@ function App() {
                 transition={{ duration: 0.3 }}
               >
                 <div className="layout-split">
-                  <Sidebar 
+                  <Sidebar
                     selectedCategories={selectedCategories}
                     selectedThemes={selectedThemes}
                     onToggleFilter={toggleFilter}
                   />
-                  <ProductGrid products={filteredProducts} onProductClick={setSelectedProduct} />
+                  <ProductGrid
+                    products={filteredProducts}
+                    onProductClick={setSelectedProduct}
+                    sortOption={sortOption}
+                    onSortChange={setSortOption}
+                    onToggleWishlist={toggleWishlist}
+                    isWishlisted={isWishlisted}
+                  />
                 </div>
               </motion.div>
             ) : (
-              <motion.div 
+              <motion.div
                 key="detail"
                 className="detail-view"
                 initial={{ opacity: 0, y: 20 }}
                 animate={{ opacity: 1, y: 0 }}
                 exit={{ opacity: 0, y: -20 }}
                 transition={{ duration: 0.4 }}
               >
-                <ProductDetail product={selectedProduct} onBack={() => setSelectedProduct(null)} />
+                <ProductDetail
+                  product={selectedProduct}
+                  onBack={() => setSelectedProduct(null)}
+                  onAddToCart={addToCart}
+                  onToggleWishlist={toggleWishlist}
+                  isWishlisted={isWishlisted(selectedProduct.id)}
+                />
               </motion.div>
             )}
           </AnimatePresence>
@@ -95,32 +153,38 @@ function App() {
 
       <AnimatePresence>
         {activeOverlay && (
-          <Overlay 
-            type={activeOverlay} 
-            onClose={() => setActiveOverlay(null)} 
+          <Overlay
+            type={activeOverlay}
+            onClose={() => setActiveOverlay(null)}
+            cartItems={cartItems}
+            wishlistItems={wishlistItems}
+            onRemoveFromCart={removeFromCart}
+            onToggleWishlist={toggleWishlist}
+            onSwitchOverlay={setActiveOverlay}
           />
         )}
       </AnimatePresence>
-
-      </div>
+    </div>
   )
 }
 
-const Overlay = ({ type, onClose }) => {
+const Overlay = ({ type, onClose, cartItems, wishlistItems, onRemoveFromCart, onToggleWishlist, onSwitchOverlay }) => {
+  const [isSignUp, setIsSignUp] = useState(false);
   const isDrawer = type === 'cart' || type === 'wishlist';
+  const cartTotal = cartItems.reduce((sum, i) => sum + i.price * i.qty, 0);
 
   return (
     <div className="overlay-system">
-      <motion.div 
+      <motion.div
         className="backdrop"
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
         onClick={onClose}
       />
-      
+
       {isDrawer ? (
-        <motion.div 
+        <motion.div
           className="drawer"
           initial={{ x: '100%' }}
           animate={{ x: 0 }}
@@ -131,16 +195,66 @@ const Overlay = ({ type, onClose }) => {
             <h3>{type === 'cart' ? 'SHOPPING BAG' : 'MY WISHLIST'}</h3>
             <button className="close-btn" onClick={onClose}><X size={24} /></button>
           </div>
+
           <div className="overlay-content">
-            <div className="empty-state">
-              {type === 'cart' ? <ShoppingBag size={48} /> : <Heart size={48} />}
-              <p>Your {type} is currently empty.</p>
-              <button className="btn-primary" onClick={onClose}>CONTINUE SHOPPING</button>
-            </div>
+            {type === 'cart' ? (
+              cartItems.length === 0 ? (
+                <div className="empty-state">
+                  <ShoppingBag size={48} />
+                  <p>Your bag is currently empty.</p>
+                  <button className="btn-primary" onClick={onClose}>CONTINUE SHOPPING</button>
+                </div>
+              ) : (
+                <div className="cart-items">
+                  {cartItems.map((item, i) => (
+                    <div key={i} className="cart-item">
+                      <img src={item.image} alt={item.name} />
+                      <div className="cart-item-info">
+                        <p className="cart-item-name">{item.name}</p>
+                        <p className="cart-item-size">Size: UK {item.size}</p>
+                        <p className="cart-item-qty">Qty: {item.qty}</p>
+                        <p className="cart-item-price">₹ {item.price * item.qty}</p>
+                      </div>
+                      <button className="remove-btn" onClick={() => onRemoveFromCart(item.id, item.size)}>
+                        <Trash2 size={16} />
+                      </button>
+                    </div>
+                  ))}
+                  <div className="cart-total">
+                    <span>Total</span>
+                    <span>₹ {cartTotal}</span>
+                  </div>
+                  <button className="btn-primary checkout-btn">PROCEED TO CHECKOUT</button>
+                </div>
+              )
+            ) : (
+              wishlistItems.length === 0 ? (
+                <div className="empty-state">
+                  <Heart size={48} />
+                  <p>Your wishlist is currently empty.</p>
+                  <button className="btn-primary" onClick={onClose}>CONTINUE SHOPPING</button>
+                </div>
+              ) : (
+                <div className="cart-items">
+                  {wishlistItems.map((item, i) => (
+                    <div key={i} className="cart-item">
+                      <img src={item.image} alt={item.name} />
+                      <div className="cart-item-info">
+                        <p className="cart-item-name">{item.name}</p>
+                        <p className="cart-item-price">₹ {item.price}</p>
+                      </div>
+                      <button className="remove-btn" onClick={() => onToggleWishlist(item)}>
+                        <Trash2 size={16} />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )
+            )}
           </div>
         </motion.div>
       ) : (
-        <motion.div 
+        <motion.div
           className="modal"
           initial={{ opacity: 0, scale: 0.9, y: 20 }}
           animate={{ opacity: 1, scale: 1, y: 0 }}
@@ -151,23 +265,27 @@ const Overlay = ({ type, onClose }) => {
           </div>
           <div className="modal-content login-modal">
             <User size={48} className="user-icon-large" />
-            <h2>Welcome Back</h2>
-            <p>Login to your Zappify account</p>
-            
+            <h2>{isSignUp ? 'Create Account' : 'Welcome Back'}</h2>
+            <p>{isSignUp ? 'Join Zappify today' : 'Login to your Zappify account'}</p>
+
             <div className="auth-form">
+              {isSignUp && <input type="text" placeholder="Full Name" />}
               <input type="email" placeholder="Email Address" />
               <input type="password" placeholder="Password" />
-              <button className="btn-primary auth-btn">SIGN IN</button>
+              {isSignUp && <input type="password" placeholder="Confirm Password" />}
+              <button className="btn-primary auth-btn">{isSignUp ? 'CREATE ACCOUNT' : 'SIGN IN'}</button>
               <div className="separator"><span>OR CONTINUE WITH</span></div>
               <button className="btn-outline google-btn">GOOGLE</button>
             </div>
-            
-            <p className="auth-footer">Don't have an account? <span>Sign Up</span></p>
+
+            <p className="auth-footer">
+              {isSignUp ? 'Already have an account? ' : "Don't have an account? "}
+              <span onClick={() => setIsSignUp(!isSignUp)}>{isSignUp ? 'Sign In' : 'Sign Up'}</span>
+            </p>
           </div>
         </motion.div>
       )}
-
-      </div>
+    </div>
   );
 };