Fruit and Vegetable Market Shop using MERN

// server.js
const express = require('express');
const mongoose = require('mongoose');
const app = express();
const PORT = process.env.PORT || 5000;
const cors = require('cors');

mongoose.connect('mongodb://localhost/fruitvegmarke',
{
	useNewUrlParser: true,
	useUnifiedTopology: true
}
);

app.use(express.json());
app.use(cors()); // Use the cors middleware

const productSchema = new mongoose.Schema({
name: String,
type: String,
description: String,
price: Number,
image: String,
});

const Product = mongoose.model('Product', productSchema);

// Function to seed initial data into the database
const seedDatabase = async () => {
try {
	await Product.deleteMany(); // Clear existing data

	const products = [
	{
		name: 'Apple', type: 'Fruit',
		description: 'Fresh and crispy',
		price: 150,
		image:
'https://media.geeksforgeeks.org/wp-content/uploads/20240104142542/apple.jpg'
	},
	{
		name: 'Banana',
		type: 'Fruit',
		description: 'Rich in potassium',
		price: 75,
		image:
'https://media.geeksforgeeks.org/wp-content/uploads/20240104142554/banana.jpg'
	},
	{
		name: 'Orange',
		type: 'Fruit',
		description: 'Packed with vitamin C',
		price: 200,
		image:
'https://media.geeksforgeeks.org/wp-content/uploads/20240104142641/orange.jpg'
	},
	{
		name: 'Carrot',
		type: 'Vegetable',
		description: 'Healthy and crunchy',
		price: 100,
		image:
'https://media.geeksforgeeks.org/wp-content/uploads/20240104142613/carrot.jpg'
	},
	{
		name: 'Broccoli',
		type: 'Vegetable',
		description: 'Nutrient-rich greens',
		price: 175,
		image:
'https://media.geeksforgeeks.org/wp-content/uploads/20240104142601/brocoli.jpg'
	},
	{
		name: 'Grapes',
		type: 'Fruit',
		description: 'Sweet and juicy',
		price: 250,
		image:
'https://media.geeksforgeeks.org/wp-content/uploads/20240104142629/grapes.jpg'
	},
	{
		name: 'Strawberry',
		type: 'Fruit',
		description: 'Delicious red berries',
		price: 300,
		image:
'https://media.geeksforgeeks.org/wp-content/uploads/20240104142657/strawberry.jpg'
	},
	{
		name: 'Lettuce',
		type: 'Vegetable',
		description: 'Crisp and fresh',
		price: 120,
		image:
'https://media.geeksforgeeks.org/wp-content/uploads/20240104142635/lettue.jpg'
	},
	{
		name: 'Tomato',
		type: 'Vegetable',
		description: 'Versatile and flavorful',
		price: 180,
		image:
'https://media.geeksforgeeks.org/wp-content/uploads/20240104142704/tomato.jpg'
	},
	{
		name: 'Cucumber',
		type: 'Vegetable',
		description: 'Cool and hydrating',
		price: 130,
		image:
'https://media.geeksforgeeks.org/wp-content/uploads/20240104142621/cocumber.jpg'
	},

	];

	await Product.insertMany(products);
	console.log('Database seeded successfully');
} catch (error) {
	console.error('Error seeding database:', error);
}
};

// Seed the database on server startup
seedDatabase();

// Define API endpoint for fetching all products
app.get('/api/products', async (req, res) => {
try {
	// Fetch all products from the database
	const allProducts = await Product.find();

	// Send the entire products array as JSON response
	res.json(allProducts);
} catch (error) {
	console.error(error);
	res.status(500)
	.json({ error: 'Internal Server Error' });
}
});

app.listen(PORT, () => {
console.log(
	`Server is running on port ${PORT}`
);
});

// client/src/App.js
import React from 'react';

import ProductList from './components/ProductList';
import Header from './components/Header';
import './App.css'
import CustomItemContext from './context/ItemContext';

const App = () => {
	return (
		<CustomItemContext>
			<Header />
			<ProductList />
		</CustomItemContext>
	);
};

export default App;

//context/ItemContext.js

import {
	createContext,
	useEffect,
	useState
} from 'react';

const itemContext = createContext();

// creating custom provider
function CustomItemContext({ children }) {
	const [products, setProducts] = useState([]);
	const [cart, setCart] = useState([]);
	const [itemsInCart, setItemsInCart] = useState(0);
	const [totalPrice, setTotalPrice] = useState(0)

	// useEffect to load all the vegetables
	useEffect(() => {
		// Fetch products from the backend and dispatch 'SET_PRODUCTS' action
		const fetchData = async () => {
			const response =
				await fetch('http://localhost:5000/api/products');
			const products = await response.json();
			// console.log(products)
			setProducts(products);
		};

		fetchData();
	}, []);

	const addToCart = (product) => {
		setTotalPrice(totalPrice + product.price)
		setCart([...cart, product]);
		setItemsInCart(itemsInCart + 1);
	};

	const removeFromCart = (product) => {
		const index =
			cart.findIndex(
				(prdt) =>
					prdt._id === product._id);
		console.log(index);

		if (index !== -1) {
			// Item found in the cart
			// Now you can remove it from the cart array
			const updatedCart = [...cart];
			updatedCart.splice(index, 1);
			setTotalPrice(totalPrice - cart[index].price);
			setCart(updatedCart);
			setItemsInCart(itemsInCart - 1);
		} else {
			console.log("Item not found in the cart");
		}
	};

	return (
		// default provider
		<itemContext.Provider value={
			{
				products, addToCart,
				removeFromCart,
				itemsInCart, totalPrice
			}}>
			{children}
		</itemContext.Provider>
	);
}

export { itemContext };
export default CustomItemContext;

// client/src/components/Header.js
import React, { useContext } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCartShopping } from '@fortawesome/free-solid-svg-icons'
import { itemContext } from '../context/ItemContext';

const Header = () => {

	const { itemsInCart, totalPrice } = useContext(itemContext)

	return (
		<div className='header' >
			<h1 className='gfg'>
				GFG Fruit & Vegetable Market
			</h1>
			<h3 style={{ color: "green" }}>
				Total Price: {totalPrice}
			</h3>
			<div className='cart-num'>
				<div className='cart-items'>
					{itemsInCart}
				</div>
				<FontAwesomeIcon icon={faCartShopping} size="4x" />
			</div>
		</div>
	);
};

export default Header;

// client/src/components/ProductItem.js
import React, { useContext } from 'react';
import { itemContext } from '../context/ItemContext';


const ProductItem = ({ product }) => {
	const { addToCart, removeFromCart } = useContext(itemContext)
	const handleAddToCart = (product) => {
		console.log(product)
		addToCart(product)

	};
	const handleRemoveToCart = (product) => {
		console.log("product removed", product)
		removeFromCart(product)

	};
	return (
		<div className="product-card">
			<img className="product-image"
				src={product.image}
				alt={product.name} />
			<div className="product-details">
				<h3 style={{ fontWeight: "700" }}>
					{product.name}
				</h3>
				<p style={{ fontWeight: "300" }}>
					{product.description}
				</p>
				<p style={{ fontWeight: "500" }}>
					Price: {product.price} Rs/Kg
				</p>
				<button onClick={
					() => handleAddToCart(product)
				}>
					Add to Cart
				</button>
				<button onClick={
					() =>
						handleRemoveToCart(product)
				}>
					-
				</button>
			</div>
		</div>
	);
};

export default ProductItem;

// client/src/components/ProductList.js

import React, { useContext, useEffect, useState } from 'react';
import ProductItem from './ProductItem';
import { itemContext } from '../context/ItemContext';

const ProductList = () => {
	const { products } = useContext(itemContext);
	// Keep a local state for sorted products
	const [sortedProducts, setSortedProducts] =
		useState([...products]);
	const [minPrice, setMinPrice] = useState(0);
	const [maxPrice, setMaxPrice] = useState(3000);
	// 'all' represents no type filter
	const [selectedType, setSelectedType] = useState('all');

	useEffect(() => {
		setSortedProducts([...products])
	}, [products])

	const handleSortByPrice = () => {
		const sorted = [...sortedProducts]
			.sort((a, b) => a.price - b.price);
		setSortedProducts(sorted);
	};

	const handleFilterByPriceRange = () => {
		const filtered =
			products.filter(
				(product) =>
					product.price >= minPrice &&
					product.price <= maxPrice);
		setSortedProducts(filtered);
	};

	const handleFilterByType = () => {
		if (selectedType === 'all') {
			// Reset the type filter
			setSortedProducts([...products]);
		} else {
			const filtered =
				products.filter(
					(product) =>
						product.type === selectedType);
			setSortedProducts(filtered);
		}
	};

	return (
		<div className='prdt-list'>
			<h2>Product List</h2>
			<div className='filter-btn'>
				<button onClick={handleSortByPrice}>
					Sort by Price
				</button>
				<label>
					Min Price:
					<input type='number' value={minPrice}
						onChange={
							(e) =>
								setMinPrice(Number(e.target.value))
						} />
				</label>
				<label>
					Max Price:
					<input type='number' value={maxPrice}
						onChange={
							(e) =>
								setMaxPrice(Number(e.target.value))
						} />
				</label>
				<button onClick={() => handleFilterByPriceRange()}>
					Filter by Price Range
				</button>
				<label>
					Filter by Type:
					<select value={selectedType}
						onChange={
							(e) =>
								setSelectedType(e.target.value)
						}>
						<option value='all'>
							All
						</option>
						<option value='Fruit'>Fruit</option>
						<option value='Vegetable'>Vegetable</option>
					</select>
				</label>

				<button onClick={handleFilterByType}>
					Filter by Type
				</button>
			</div>

			<ul className='item-card'>
				{sortedProducts.map((product) => (
					<ProductItem key={product._id}
						product={product} />
				))}
			</ul>
			<div className='buy-now-btn'>Buy Now</div>
		</div>
	);
};

export default ProductList;