{ "name": "supermarket-website", "version": "1.0.0", "private": true, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.14.2", "react-icons": "^4.10.1", "tailwindcss": "^3.3.3" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: { colors: { primary: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', }, secondary: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', } }, fontFamily: { sans: ['Inter', 'sans-serif'], }, }, }, plugins: [], darkMode: 'class', } import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); reportWebVitals(); @tailwind base; @tailwind components; @tailwind utilities; body { font-family: 'Inter', sans-serif; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #555; } .dark ::-webkit-scrollbar-track { background: #1e293b; } .dark ::-webkit-scrollbar-thumb { background: #64748b; } import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { useState } from 'react'; import Navbar from './components/Navbar'; import Footer from './components/Footer'; import Home from './pages/Home'; import Products from './pages/Products'; import ProductDetails from './pages/ProductDetails'; import Cart from './pages/Cart'; import Checkout from './pages/Checkout'; import About from './pages/About'; import Contact from './pages/Contact'; function App() { const [darkMode, setDarkMode] = useState(false); const [cartItems, setCartItems] = useState([]); const toggleDarkMode = () => { setDarkMode(!darkMode); document.documentElement.classList.toggle('dark'); }; const addToCart = (product) => { setCartItems(prevItems => { const existingItem = prevItems.find(item => item.id === product.id); if (existingItem) { return prevItems.map(item => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item ); } return [...prevItems, { ...product, quantity: 1 }]; }); }; const removeFromCart = (productId) => { setCartItems(prevItems => prevItems.filter(item => item.id !== productId)); }; const updateQuantity = (productId, newQuantity) => { if (newQuantity < 1) return; setCartItems(prevItems => prevItems.map(item => item.id === productId ? { ...item, quantity: newQuantity } : item ) ); }; return (

} /> } /> } /> } /> } /> } /> } />

); } export default App; import { useState } from 'react'; import { Link } from 'react-router-dom'; import { FiShoppingCart, FiUser, FiSearch, FiSun, FiMoon } from 'react-icons/fi'; import { FaBars, FaTimes } from 'react-icons/fa'; const Navbar = ({ cartItems, darkMode, toggleDarkMode }) => { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isLoginOpen, setIsLoginOpen] = useState(false); const [searchQuery, setSearchQuery] = useState(''); const toggleMenu = () => { setIsMenuOpen(!isMenuOpen); }; const toggleLogin = () => { setIsLoginOpen(!isLoginOpen); }; const handleSearch = (e) => { e.preventDefault(); // Search functionality would be implemented here console.log('Searching for:', searchQuery); }; const cartItemCount = cartItems.reduce((total, item) => total + item.quantity, 0); return (

{/* Logo */} FreshMart {/* Desktop Navigation */} {/* Search, Cart, and Theme Toggle */}

{cartItemCount > 0 && ( {cartItemCount} )}

{/* Mobile menu button */}

{cartItemCount > 0 && ( {cartItemCount} )}

{/* Mobile Menu */} {isMenuOpen && (

Home Products About Contact

)}

{/* Login Modal */} {isLoginOpen && (

Login / Register

)}

); }; export default Navbar; import { Link } from 'react-router-dom'; import { FiFacebook, FiTwitter, FiInstagram, FiLinkedin } from 'react-icons/fi'; const Footer = () => { return ( ); }; export default Footer; import { useState } from 'react'; import { Link } from 'react-router-dom'; import { FiShoppingCart, FiHeart, FiEye } from 'react-icons/fi'; const ProductCard = ({ product, addToCart }) => { const [isHovered, setIsHovered] = useState(false); const [isWishlisted, setIsWishlisted] = useState(false); const [quickViewOpen, setQuickViewOpen] = useState(false); const handleAddToCart = () => { addToCart(product); }; const toggleWishlist = () => { setIsWishlisted(!isWishlisted); }; const toggleQuickView = () => { setQuickViewOpen(!quickViewOpen); }; return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{/* Badge */} {product.discount && ( -{product.discount}% )} {/* Quick actions */}

{product.name}

★ {product.rating}

{product.discount ? (

${(product.price * (1 - product.discount / 100)).toFixed(2)} ${product.price.toFixed(2)}

) : ( ${product.price.toFixed(2)} )}

{/* Quick View Modal */} {quickViewOpen && (

{product.name}

{[...Array(5)].map((_, i) => ( ★ ))}

{product.rating} ({product.reviews} reviews)

{product.discount ? (

${(product.price * (1 - product.discount / 100)).toFixed(2)} ${product.price.toFixed(2)} Save {product.discount}%

) : (

${product.price.toFixed(2)}

)}

{product.description}

)}

); }; export default ProductCard; import { useState } from 'react'; import { Link } from 'react-router-dom'; import ProductCard from '../components/ProductCard'; const categories = [ { id: 1, name: 'Fruits', image: 'https://images.unsplash.com/photo-1619566636858-adf3ef46400b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80' }, { id: 2, name: 'Vegetables', image: 'https://images.unsplash.com/photo-1594282416549-9453d3f97025?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80' }, { id: 3, name: 'Dairy', image: 'https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80' }, { id: 4, name: 'Beverages', image: 'https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1257&q=80' }, { id: 5, name: 'Snacks', image: 'https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80' }, ]; const featuredProducts = [ { id: 1, name: 'Organic Apples', price: 2.99, discount: 10, rating: 4.5, reviews: 120, image: 'https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', description: 'Fresh organic apples from local farms, crisp and juicy.' }, { id: 2, name: 'Bananas', price: 1.49, rating: 4.2, reviews: 85, image: 'https://images.unsplash.com/photo-1603833665858-e61d17a86224?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80', description: 'Sweet and nutritious bananas, perfect for snacks or smoothies.' }, { id: 3, name: 'Organic Carrots', price: 3.29, discount: 15, rating: 4.7, reviews: 64, image: 'https://images.unsplash.com/photo-1447175008436-054170c2e979?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', description: 'Fresh organic carrots, rich in vitamins and antioxidants.' }, { id: 4, name: 'Fresh Milk', price: 4.99, rating: 4.8, reviews: 210, image: 'https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80', description: 'Fresh whole milk from grass-fed cows, rich in calcium.' }, ]; const Home = () => { const [searchQuery, setSearchQuery] = useState(''); const handleSearch = (e) => { e.preventDefault(); // Search functionality would be implemented here console.log('Searching for:', searchQuery); }; return (

{/* Hero Section */}

Fresh Groceries Delivered to Your Door

Shop the freshest produce, dairy, and pantry staples with free delivery on orders over $50.

{/* Categories Section */}

Shop by Category

View All

{categories.map((category) => (

{category.name}

))}

{/* Featured Products */}

Featured Products

View All

{featuredProducts.map((product) => ( {}} /> ))}

{/* Promo Banner */}

Summer Sale - Up to 30% Off

Enjoy amazing discounts on selected fruits, vegetables, and dairy products. Limited time offer!

Shop Now

); }; export default Home; import { useState } from 'react'; import { useSearchParams } from 'react-router-dom'; import ProductCard from '../components/ProductCard'; const products = [ { id: 1, name: 'Organic Apples', price: 2.99, discount: 10, rating: 4.5, reviews: 120, category: 'fruits', image: 'https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', description: 'Fresh organic apples from local farms, crisp and juicy.' }, { id: 2, name: 'Bananas', price: 1.49, rating: 4.2, reviews: 85, category: 'fruits', image: 'https://images.unsplash.com/photo-1603833665858-e61d17a86224?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80', description: 'Sweet and nutritious bananas, perfect for snacks or smoothies.' }, { id: 3, name: 'Organic Carrots', price: 3.29, discount: 15, rating: 4.7, reviews: 64, category: 'vegetables', image: 'https://images.unsplash.com/photo-1447175008436-054170c2e979?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', description: 'Fresh organic carrots, rich in vitamins and antioxidants.' }, { id: 4, name: 'Fresh Milk', price: 4.99, rating: 4.8, reviews: 210, category: 'dairy', image: 'https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80', description: 'Fresh whole milk from grass-fed cows, rich in calcium.' }, { id: 5, name: 'Whole Wheat Bread', price: 3.49, rating: 4.3, reviews: 92, category: 'bakery', image: 'https://images.unsplash.com/photo-1509440159596-0249088772ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1172&q=80', description: 'Nutritious whole wheat bread with no artificial preservatives.' }, { id: 6, name: 'Free Range Eggs', price: 5.99, discount: 5, rating: 4.6, reviews: 156, category: 'dairy', image: 'https://images.unsplash.com/photo-1587486913049-53fc88980cfc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80', description: 'Farm fresh free range eggs, packed with protein.' }, { id: 7, name: 'Organic Spinach', price: 2.99, rating: 4.4, reviews: 78, category: 'vegetables', image: 'https://images.unsplash.com/photo-1576045057995-568f588f82fb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', description: 'Fresh organic spinach leaves, perfect for salads and cooking.' }, { id: 8, name: 'Orange Juice', price: 3.99, discount: 20, rating: 4.1, reviews: 112, category: 'beverages', image: 'https://images.unsplash.com/photo-1551024506-0bccd828d307?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1257&q=80', description: '100% pure squeezed orange juice with no added sugar.' }, { id: 9, name: 'Almonds', price: 8.99, rating: 4.9, reviews: 203, category: 'snacks', image: 'https://images.unsplash.com/photo-1605244475641-5b84f2b0f0b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', description: 'Premium quality almonds, rich in healthy fats and protein.' }, { id: 10, name: 'Greek Yogurt', price: 3.49, rating: 4.7, reviews: 145, category: 'dairy', image: 'https://images.unsplash.com/photo-1577049118871-8b6b0a0b0b0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', description: 'Creamy Greek yogurt with live active cultures.' }, { id: 11, name: 'Dark Chocolate', price: 4.99, discount: 15, rating: 4.8, reviews: 187, category: 'snacks', image: 'https://images.unsplash.com/photo-1574085733277-851d9d856a3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1176&q=80', description: '70% cocoa dark chocolate with rich, intense flavor.' }, { id: 12, name: 'Avocados', price: 2.49, rating: 4.5, reviews: 96, category: 'fruits', image: 'https://images.unsplash.com/photo-1595231776511-1d0b1c9b0b0b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80', description: 'Creamy Hass avocados, perfect for guacamole or toast.' }, ]; const Products = ({ addToCart }) => { const [searchParams] = useSearchParams(); const category = searchParams.get('category'); const [priceRange, setPriceRange] = useState([0, 20]); const [minRating, setMinRating] = useState(0); const [sortBy, setSortBy] = useState('default'); const filteredProducts = products.filter(product => { // Filter by category if specified if (category && product.category !== category.toLowerCase()) { return false; } // Filter by price range if (product.price < priceRange[0] || product.price > priceRange[1]) { return false; } // Filter by minimum rating if (product.rating < minRating) { return false; } return true; }); // Sort products const sortedProducts = [...filteredProducts].sort((a, b) => { switch (sortBy) { case 'price-low': return a.price - b.price; case 'price-high': return b.price - a.price; case 'rating': return b.rating - a.rating; case 'name': return a.name.localeCompare(b.name); default: return 0; } }); return (

{category ? `${category.charAt(0).toUpperCase() + category.slice(1)}` : 'All Products'}

Sort by:

{/* Filters */}

Filters

{/* Price Range */}

Price Range

${priceRange[0]} ${priceRange[1]}

setPriceRange([parseFloat(e.target.value), priceRange[1]])} className="w-full mb-2" /> setPriceRange([priceRange[0], parseFloat(e.target.value)])} className="w-full" />

{/* Rating */}

Minimum Rating

{[1, 2, 3, 4, 5].map((star) => ( ))}

{/* Categories */}