DEV Community: Ben M

Example of E-commice SQL in that specilises in the food industry

Ben M — Wed, 15 Apr 2026 19:42:41 +0000

-- Create database if missing
CREATE DATABASE IF NOT EXISTS task_db;
USE task_db;

-- Role table
CREATE TABLE IF NOT EXISTS role (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50) NOT NULL UNIQUE,
    description VARCHAR(255)
);

-- Insert default roles
INSERT IGNORE INTO role (name, description) VALUES
('admin', 'Full system access'),
('customer', 'Can browse and place orders'),
('staff', 'Can manage orders and products'),
('vendor', 'Supplier with limited access');

-- User table
CREATE TABLE IF NOT EXISTS user (
    id INT AUTO_INCREMENT PRIMARY KEY,
    role_id INT NOT NULL,
    firstName VARCHAR(100) NOT NULL,
    lastName VARCHAR(100) NOT NULL,
    email VARCHAR(255) NOT NULL UNIQUE,
    password_hash VARCHAR(255) NOT NULL,
    phone VARCHAR(20),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (role_id) REFERENCES role(id)
);

-- Producer table
CREATE TABLE IF NOT EXISTS producer (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT NOT NULL UNIQUE,
    bio TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES user(id) ON DELETE CASCADE
);

-- Category table
CREATE TABLE IF NOT EXISTS category (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL UNIQUE
);

-- Insert default categories
INSERT IGNORE INTO category (name) VALUES
('Vegetables'),
('Fruits'),
('Dairy'),
('Honey & Preserves'),
('Meat & Poultry'),
('Drinks'),
('Bakery'),
('Herbs & Flowers');

-- Product table
CREATE TABLE IF NOT EXISTS product (
    id INT AUTO_INCREMENT PRIMARY KEY,
    producer_id INT NOT NULL,
    category_id INT NOT NULL,
    name VARCHAR(255) NOT NULL,
    description TEXT,
    price DECIMAL(10, 2) NOT NULL,
    stock_qty INT NOT NULL DEFAULT 0,
    unit VARCHAR(50) NOT NULL DEFAULT 'item',
    is_organic BOOLEAN DEFAULT FALSE,
    is_available BOOLEAN DEFAULT TRUE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (producer_id) REFERENCES producer(id) ON DELETE CASCADE,
    FOREIGN KEY (category_id) REFERENCES category(id)
);

-- Address table
CREATE TABLE IF NOT EXISTS address (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT NOT NULL,
    street VARCHAR(255) NOT NULL,
    city VARCHAR(100) NOT NULL,
    postcode VARCHAR(20) NOT NULL,
    country VARCHAR(100) NOT NULL DEFAULT 'United Kingdom',
    is_default BOOLEAN DEFAULT FALSE,
    FOREIGN KEY (user_id) REFERENCES user(id) ON DELETE CASCADE
);

-- Orders table
CREATE TABLE IF NOT EXISTS orders (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_id INT NOT NULL,
    address_id INT NOT NULL,
    status ENUM('pending', 'confirmed', 'processing', 'shipped', 'delivered', 'cancelled') DEFAULT 'pending',
    total_price DECIMAL(10, 2) NOT NULL,
    payment_status ENUM('unpaid', 'paid', 'refunded') DEFAULT 'unpaid',
    payment_method VARCHAR(50),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (user_id) REFERENCES user(id),
    FOREIGN KEY (address_id) REFERENCES address(id)
);

-- Order item table
CREATE TABLE IF NOT EXISTS order_item (
    id INT AUTO_INCREMENT PRIMARY KEY,
    order_id INT NOT NULL,
    product_id INT NOT NULL,
    quantity INT NOT NULL DEFAULT 1,
    unit_price DECIMAL(10, 2) NOT NULL,
    FOREIGN KEY (order_id) REFERENCES orders(id) ON DELETE CASCADE,
    FOREIGN KEY (product_id) REFERENCES product(id)
);

Simple backend example

Ben M — Wed, 15 Apr 2026 11:41:39 +0000

from flask import Flask, jsonify, request
from flask_cors import CORS
from werkzeug.security import generate_password_hash, check_password_hash
import mysql.connector
import os
from dotenv import load_dotenv

load_dotenv()

app = Flask(__name__)
CORS(app)


# ---------- DB CONNECTION ----------
def get_cursor():
    conn = mysql.connector.connect(
        host=os.getenv("DB_HOST", "localhost"),
        port=int(os.getenv("DB_PORT", 3306)),
        user=os.getenv("DB_USER"),
        password=os.getenv("DB_PASSWORD"),
        database=os.getenv("DB_NAME", "task_db")
    )
    return conn, conn.cursor(dictionary=True)


# ---------- REGISTER ----------
@app.post("/api/register")
def register():
    conn, cursor = get_cursor()
    try:
        data = request.json or {}

        firstName       = data.get("firstName", "").strip()
        lastName        = data.get("lastName", "").strip()
        email           = data.get("email", "").strip()
        password        = data.get("password", "").strip()
        confirmPassword = data.get("confirmPassword", "").strip()

        # Validation
        if not firstName:
            return jsonify({"success": False, "message": "First name is required."}), 400
        if not lastName:
            return jsonify({"success": False, "message": "Last name is required."}), 400
        if not email:
            return jsonify({"success": False, "message": "Email is required."}), 400
        if not password:
            return jsonify({"success": False, "message": "Password is required."}), 400
        if len(password) < 8:
            return jsonify({"success": False, "message": "Password must be at least 8 characters."}), 400
        if password != confirmPassword:
            return jsonify({"success": False, "message": "Passwords do not match."}), 400

        # Check duplicate email
        cursor.execute("SELECT id FROM user WHERE email = %s", (email,))
        if cursor.fetchone():
            return jsonify({"success": False, "message": "Email already registered."}), 400

        # Hash password before storing
        hashed_password = generate_password_hash(password)

        # Insert new user (role_id 2 = customer)
        cursor.execute("""
            INSERT INTO user (role_id, firstName, lastName, email, password_hash)
            VALUES (%s, %s, %s, %s, %s)
        """, (2, firstName, lastName, email, hashed_password))

        conn.commit()

        # Get new user ID
        cursor.execute("SELECT LAST_INSERT_ID() AS id")
        new_user = cursor.fetchone()

        return jsonify({
            "success": True,
            "message": "User registered successfully!",
            "user": {"id": new_user["id"]}
        }), 200

    except Exception as e:
        conn.rollback()
        print("REGISTER ERROR:", e)
        return jsonify({"success": False, "message": "Server error"}), 500

    finally:
        cursor.close()
        conn.close()


# ---------- LOGIN ----------
@app.post("/api/login")
def login():
    conn, cursor = get_cursor()
    try:
        data     = request.json or {}
        email    = data.get("email", "").strip()
        password = data.get("password", "").strip()

        # Validation
        if not email:
            return jsonify({"success": False, "message": "Email is required."}), 400
        if not password:
            return jsonify({"success": False, "message": "Password is required."}), 400

        cursor.execute("SELECT * FROM user WHERE email = %s", (email,))
        user = cursor.fetchone()

        if not user:
            return jsonify({"success": False, "message": "Email not found."}), 400

        # Check hashed password
        if not check_password_hash(user["password_hash"], password):
            return jsonify({"success": False, "message": "Incorrect password."}), 400

        return jsonify({
            "success": True,
            "message": "Login successful.",
            "user": {
                "id":        user["id"],
                "firstName": user["firstName"],
                "lastName":  user["lastName"],
                "email":     user["email"],
                "phone":     user.get("phone"),
            }
        }), 200

    except Exception as e:
        print("LOGIN ERROR:", e)
        return jsonify({"success": False, "message": "Server error"}), 500

    finally:
        cursor.close()
        conn.close()


# ---------- GET PROFILE ----------
@app.get("/api/user/profile")
def get_profile():
    conn, cursor = get_cursor()
    try:
        user_id = request.args.get("userId")

        if not user_id:
            return jsonify({"success": False, "message": "Missing userId"}), 400

        cursor.execute("""
            SELECT id, firstName, lastName, email, phone
            FROM user
            WHERE id = %s
        """, (user_id,))

        user = cursor.fetchone()

        if not user:
            return jsonify({"success": False, "message": "User not found"}), 404

        return jsonify({"success": True, "user": user}), 200

    except Exception as e:
        print("PROFILE ERROR:", e)
        return jsonify({"success": False, "message": "Server error"}), 500

    finally:
        cursor.close()
        conn.close()


# ---------- UPDATE PROFILE ----------
@app.post("/api/user/update")
def update_profile():
    conn, cursor = get_cursor()
    try:
        data    = request.json or {}
        user_id = data.get("userId")

        if not user_id:
            return jsonify({"success": False, "message": "Missing userId"}), 400

        firstName = data.get("firstName", "").strip()
        lastName  = data.get("lastName", "").strip()
        email     = data.get("email", "").strip()
        phone     = data.get("phone", "").strip()

        if not firstName:
            return jsonify({"success": False, "message": "First name is required."}), 400
        if not lastName:
            return jsonify({"success": False, "message": "Last name is required."}), 400
        if not email:
            return jsonify({"success": False, "message": "Email is required."}), 400

        # Check if new email is taken by another user
        cursor.execute("SELECT id FROM user WHERE email = %s AND id != %s", (email, user_id))
        if cursor.fetchone():
            return jsonify({"success": False, "message": "Email already in use."}), 400

        cursor.execute("""
            UPDATE user
            SET firstName=%s, lastName=%s, email=%s, phone=%s
            WHERE id=%s
        """, (firstName, lastName, email, phone, user_id))

        conn.commit()

        return jsonify({"success": True, "message": "Profile updated"}), 200

    except Exception as e:
        conn.rollback()
        print("UPDATE ERROR:", e)
        return jsonify({"success": False, "message": "Server error"}), 500

    finally:
        cursor.close()
        conn.close()


if __name__ == "__main__":
    app.run(debug=True)

Fullstack login page

Ben M — Wed, 15 Apr 2026 07:09:55 +0000

Backend

from flask import Flask, jsonify, request
import os
from flask_cors import CORS
import mysql.connector
from dotenv import load_dotenv

load_dotenv()

app = Flask(__name__)
CORS(app)

conn = mysql.connector.connect(
    host = os.getenv("DB_HOST", "localhost"),
    port = int(os.getenv("DB_PORT", 3306)),
    user = os.getenv("DB_USER"),
    password = os.getenv("DB_PASSWORD"),
    database = os.getenv("DB_NAME", "task_db")
)

cursor = conn.cursor(dictionary = True)

# ---------- REGISTER ----------
@app.post("/api/register")
def register():
    try:
        data = request.json or {}

        firstName = data.get("firstName", "").strip()
        lastName = data.get("lastName", "").strip()
        email = data.get("email", "").strip()
        password = data.get("password", "").strip()
        confirmPassword = data.get("confirmPassword", "").strip()

        if not firstName:
            return jsonify({"success": False, "message": "First name is required."}), 400
        if not lastName:
            return jsonify({"success": False, "message": "Last name is required."}), 400
        if not email:
            return jsonify({"success": False, "message": "Email is required."}), 400
        if not password:
            return jsonify({"success": False, "message": "Password is required."}), 400
        if password != confirmPassword:
            return jsonify({"success": False, "message": "Passwords do not match."}), 400

        # Check duplicate email
        cursor.execute("SELECT id FROM user WHERE email = %s", (email,))
        if cursor.fetchone():
            return jsonify({"success": False, "message": "Email already registered."}), 400

        # Insert new user
        cursor.execute("""
            INSERT INTO user (role_id, firstName, lastName, email, password_hash)
            VALUES (%s, %s, %s, %s, %s)
        """, (2, firstName, lastName, email, password))

        conn.commit()

        # Get new user ID
        cursor.execute("SELECT LAST_INSERT_ID() AS id")
        new_user = cursor.fetchone()

        return jsonify({
            "success": True,
            "message": "User registered successfully!",
            "user": { "id": new_user["id"] }
        }), 200


    except Exception as e:
        print("REGISTER ERROR:", e)
        return jsonify({"success": False, "message": "Server error"}), 500



# ---------- LOGIN ----------
@app.post("/api/login")
def login():
    try:
        data = request.json or {}
        email = data.get("email", "").strip()
        password = data.get("password", "").strip()

        if not email:
            return jsonify({"success": False, "message": "Email is required."}), 400
        if not password:
            return jsonify({"success": False, "message": "Password is required."}), 400

        cursor.execute("SELECT * FROM user WHERE email = %s", (email,))
        user = cursor.fetchone()

        if not user:
            return jsonify({"success": False, "message": "Email not found."}), 400

        if user["password_hash"] != password:
            return jsonify({"success": False, "message": "Incorrect password."}), 400

        return jsonify({
            "success": True,
            "message": "Login successful.",
            "user": {
                "id": user["id"],
                "firstName": user["firstName"],
                "lastName": user["lastName"],
                "email": user["email"],
                "phone": user.get("phone"),
                "userPoints": 0   # You don't have this column yet
            }
        }), 200

    except Exception as e:
        print("LOGIN ERROR:", e)
        return jsonify({"success": False, "message": "Server error"}), 500



# ---------- GET PROFILE ----------
@app.get("/api/user/profile")
def get_profile():
    try:
        user_id = request.args.get("userId")

        if not user_id:
            return jsonify({"success": False, "message": "Missing userId"}), 400

        cursor.execute("""
            SELECT id, firstName, lastName, email, phone
            FROM user
            WHERE id = %s
        """, (user_id,))

        user = cursor.fetchone()

        if not user:
            return jsonify({"success": False, "message": "User not found"}), 404

        # Add userPoints manually (not in DB)
        user["userPoints"] = 0

        return jsonify({"success": True, "user": user}), 200

    except Exception as e:
        print("PROFILE ERROR:", e)
        return jsonify({"success": False, "message": "Server error"}), 500



# ---------- UPDATE PROFILE ----------
@app.post("/api/user/update")
def update_profile():
    try:
        data = request.json or {}
        user_id = data.get("userId")

        if not user_id:
            return jsonify({"success": False, "message": "Missing userId"}), 400

        firstName = data.get("firstName", "").strip()
        lastName = data.get("lastName", "").strip()
        email = data.get("email", "").strip()
        phone = data.get("phone", "").strip()

        cursor.execute("""
            UPDATE user
            SET firstName=%s, lastName=%s, email=%s, phone=%s
            WHERE id=%s
        """, (firstName, lastName, email, phone, user_id))

        conn.commit()

        return jsonify({"success": True, "message": "Profile updated"}), 200

    except Exception as e:
        print("UPDATE ERROR:", e)
        return jsonify({"success": False, "message": "Server error"}), 500

if __name__ == "__main__":
    app.run(debug=True)

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./login.css";

import Chicken from "../../assets/chicken.png";

export default function Login() {
    const navigate = useNavigate();
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [error, setError] = useState("");

    const handleLogin = async () => {
        try {
            const res = await fetch("/api/login", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ email, password })
            });

            const data = await res.json();

            if (!data.success) {
                setError(data.message);
                return;
            }

            // ⭐ Save userId
            localStorage.setItem("userId", data.user.id);

            // ⭐ Redirect
            navigate("/profile");

        } catch (err) {
            setError("Something went wrong.");
        }
    };

    return (
        <div className="body">
            <div className="loginContainer">
                <div className="mainLoginContainer">
                    <h1 className="loginHeader">Login</h1>

                    <div className="loginTop">
                        <input
                            className="email"
                            placeholder="Email"
                            value={email}
                            type="email"
                            onChange={(e) => setEmail(e.target.value)}
                        />

                        <input
                            className="password"
                            placeholder="Password"
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </div>

                    {error && <div className="errorPopup">{error}</div>}

                    <div className="loginBottom">
                        <button className="loginSubmit" onClick={handleLogin}>
                            Login
                        </button>
                    </div>
                </div>
            </div>

            <div className="imgContainer">
                <img src={Chicken} alt="chicken" className="chickenImg" />
            </div>
        </div>
    );
}

profile

import { useState, useEffect } from "react";
import { products } from "../../data/products.js";
import "../profile/profile.css";

export default function Profile() {
  const userId = localStorage.getItem("userId");

  // 1️⃣ All hooks at the top (safe)
  const [user, setUser] = useState(null);
  const [orders, setOrders] = useState([]);

  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");

  // 2️⃣ Fetch user
  useEffect(() => {
    if (!userId) return;

    fetch(`/api/user/profile?userId=${userId}`)
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          setUser(data.user);
        }
      });

    setOrders([
      { id: 101, status: "delivered", total_price: 25.50, created_at: "2026-03-19" },
      { id: 102, status: "processing", total_price: 14.99, created_at: "2026-03-20" }
    ]);
  }, [userId]);

  // 3️⃣ Sync form fields AFTER user loads
  useEffect(() => {
    if (user) {
      setFirstName(user.firstName);
      setLastName(user.lastName);
      setEmail(user.email);
      setPhone(user.phone || "");
    }
  }, [user]);

  // 4️⃣ Safe loading state (AFTER all hooks)
  if (!user) return <p>Loading...</p>;

  // 5️⃣ Update profile
  const handleUpdateProfile = (e) => {
    e.preventDefault();

    fetch("/api/user/update", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        userId,
        firstName,
        lastName,
        email,
        phone
      })
    })
      .then(res => res.json())
      .then(data => {
        if (data.success) {
          alert("Profile updated!");
        }
      });
  };

  return (
    <div className="profilePage">

      <div className="topSection">

        <div className="welcomeBox">
          <h2>Welcome {user.firstName}!</h2>
          <p className="subtitle">Recommended products for you</p>

          <div className="carouselWrapper">
            {products.map((p) => (
              <div key={p.id} className="carouselItem">
                <img src={p.image} alt={p.name} />
                <h4>{p.name}</h4>
                <p>£{p.price}</p>
                <button>Add to basket</button>
              </div>
            ))}
          </div>
        </div>

        <div className="loyaltyBox">
          <h3>Loyalty Card</h3>
          <p className="points">{user.userPoints} Points</p>
          <p className="info">Points are added when you shop online</p>
          <p className="nextReward">Next Reward 1000 Points: 50% discount</p>

          <div className="progressWrapper">
            <div className="progressBar">
              <div
                className="progressFill"
                style={{ width: `${(user.userPoints / 1000) * 100}%` }}
              ></div>
            </div>
            <p className="progressText">
              {user.userPoints} / 1000 points
            </p>
          </div>

          <button className="continueBtn">Continue shopping</button>
        </div>

      </div>

      <div className="banner">
        <h2>Shop with our best deals</h2>
      </div>

      <div className="recentOrdersSection">
        <h3>Your Recent Orders</h3>

        {orders.length === 0 ? (
          <p>You have no recent orders.</p>
        ) : (
          <div className="ordersList">
            {orders.map((o) => (
              <div key={o.id} className="orderCard">
                <p><strong>Order #{o.id}</strong></p>
                <p>Status: {o.status}</p>
                <p>Total: £{o.total_price}</p>
                <p>Date: {o.created_at}</p>
              </div>
            ))}
          </div>
        )}
      </div>

      <div className="editProfileSection">
        <h3>Edit Profile</h3>

        <form className="editForm" onSubmit={handleUpdateProfile}>
          <input
            type="text"
            placeholder="First Name"
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
          />

          <input
            type="text"
            placeholder="Last Name"
            value={lastName}
            onChange={(e) => setLastName(e.target.value)}
          />

          <input
            type="email"
            placeholder="Email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />

          <input
            type="text"
            placeholder="Phone"
            value={phone}
            onChange={(e) => setPhone(e.target.value)}
          />

          <button type="submit">Save Changes</button>
        </form>
      </div>

    </div>
  );
}

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./signUp.css";

import Bag from "../../assets/bag.png";

export default function SignUp() {
    const navigate = useNavigate();
    const [firstName, setFirstName] = useState("");
    const [lastName, setLastName] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [confirmPassword, setConfirmPassword] = useState("");
    const [error, setError] = useState("");

    const handleRegister = async (e) => {
        e.preventDefault();   // ⭐ IMPORTANT FIX

        try {
            const res = await fetch("/api/register", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    firstName,
                    lastName,
                    email,
                    password,
                    confirmPassword
                }),
            });

            const data = await res.json();

            if (!data.success) {
                setError(data.message);
                return;
            }

            // Save user ID
            localStorage.setItem("userId", data.user.id);

            navigate("/profile");

        } catch (err) {
            setError("Network error. Please try again.");
        }
    };

    return (
        <div className="body">
            <div className="signUpContainer">
                <div className="mainSUContainer">
                    <h1 className="signUpHeader">Sign Up</h1>

                    <form className="signUpTop" onSubmit={handleRegister}>
                        <input
                            className="firstName"
                            placeholder="First Name"
                            value={firstName}
                            onChange={(e) => setFirstName(e.target.value)}
                        />

                        <input
                            className="lastName"
                            placeholder="Last Name"
                            value={lastName}
                            onChange={(e) => setLastName(e.target.value)}
                        />

                        <input
                            className="email"
                            placeholder="Email"
                            type="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                        />

                        <input
                            className="password"
                            placeholder="Password"
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />

                        <input
                            className="confirmPassword"
                            placeholder="Confirm Password"
                            type="password"
                            value={confirmPassword}
                            onChange={(e) => setConfirmPassword(e.target.value)}
                        />

                        {error && <div className="errorPopup">{error}</div>}

                        <div className="signUpBottom">
                            <button className="signUpSubmit" type="submit">
                                Sign Up
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div className="imgContainer">
                <img src={Bag} alt="bag" className="bagImg" />
            </div>
        </div>
    );
}

🛒 Building a Simple Product Page with React (Using Mock Data)

Ben M — Mon, 13 Apr 2026 21:13:49 +0000

When you're building a React app, it's often easier to start with mock data before connecting to a real backend. In this post, I’ll show you how to set up a simple product page with:

Search 🔍
Category + price filters 💰
Add/remove basket functionality 🧺

📁 Step 1: Add Your Main JSX Page

Create this file:

src/pages/ourProducts/Products.jsx

Paste this code:

import { useState } from "react";
import ProductCard from "../../components/productCard/productCard.jsx";
import { products } from "../../data/products.js";
import "../ourProducts/ourProducts.css";

export default function Products() {
  const [basket, setBasket] = useState([]);
  const [searchTerm, setSearchTerm] = useState("");
  const [category, setCategory] = useState("");
  const [minPrice, setMinPrice] = useState("");
  const [maxPrice, setMaxPrice] = useState("");

  // Add item to basket
  const addToBasket = (product) => {
    setBasket((prev) => [...prev, product]);
  };

  // Remove item from basket
  const removeFromBasket = (indexToRemove) => {
    setBasket((prev) => prev.filter((_, i) => i !== indexToRemove));
  };

  // Filtering logic
  const filteredProducts = products.filter((p) => {
    const matchesSearch = p.name.toLowerCase().includes(searchTerm.toLowerCase());
    const matchesCategory = category === "" || p.category === category;
    const matchesMin = minPrice === "" || p.price >= parseFloat(minPrice);
    const matchesMax = maxPrice === "" || p.price <= parseFloat(maxPrice);

    return matchesSearch && matchesCategory && matchesMin && matchesMax;
  });

  return (
    <div className="productsPage">
      <h1>Our Products</h1>

      {/* Filters */}
      <div className="filters">
        <input
          type="text"
          placeholder="Search products..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />

        <select value={category} onChange={(e) => setCategory(e.target.value)}>
          <option value="">All Categories</option>
          <option value="Fruits">Fruits</option>
          <option value="Dairy">Dairy</option>
          <option value="Bakery">Bakery</option>
        </select>

        <input
          type="number"
          placeholder="Min £"
          value={minPrice}
          onChange={(e) => setMinPrice(e.target.value)}
        />

        <input
          type="number"
          placeholder="Max £"
          value={maxPrice}
          onChange={(e) => setMaxPrice(e.target.value)}
        />
      </div>

      {/* Product Grid */}
      <div className="productGrid">
        {filteredProducts.map((p) => (
          <ProductCard key={p.id} product={p} onAdd={addToBasket} />
        ))}
      </div>

      {/* Basket */}
      <div className="basket">
        <h2>Basket ({basket.length})</h2>

        {basket.map((item, i) => (
          <div key={i} className="basketItem">
            <div>
              {item.name} — £{item.price}
            </div>

            <button
              className="removeBtn"
              onClick={() => removeFromBasket(i)}
            >
              Remove
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

🧩 Step 2: Create the ProductCard Component

Create:

src/components/productCard/productCard.jsx

Paste:

import "../productCard/productCard.css"

export default function ProductCard({ product, onAdd }) {
  return (
    <div className="productCard">
      <img src={product.image} alt={product.name} className="productImg" />

      <h3>{product.name}</h3>
      <p>{product.description}</p>

      <div className="productBottom">
        <span className="price">£{product.price}</span>
        <button onClick={() => onAdd(product)}>Add to basket</button>
      </div>
    </div>
  );
}

🧪 Step 3: Add Fake Data

Create:

src/data/products.js

Paste:

export const products = [
  {
    id: 1,
    name: "Fresh Strawberries",
    category: "Fruits",
    description: "Sweet and juicy, 500g pack.",
    price: 3.50,
    image: "/images/strawberries.jpg"
  },
  {
    id: 2,
    name: "Aged Cheddar Cheese",
    category: "Dairy",
    description: "6 month matured, rich flavour.",
    price: 5.99,
    image: "/images/cheese.jpg"
  },
  {
    id: 3,
    name: "Organic Avocados",
    category: "Fruits",
    description: "Two pack, creamy texture.",
    price: 4.00,
    image: "/images/avocado.jpg"
  },
  {
    id: 4,
    name: "Flavoured Almond milk bundle",
    category: "Dairy",
    description: "Three pack, sustainably produced.",
    price: 3.75,
    image: "/images/almondMilk.jpg"
  },
  {
    id: 5,
    name: "Watermelon",
    category: "Fruits",
    description: "Ripe and fresh.",
    price: 4.00,
    image: "/images/watermelon.jpg"
  }
];

`import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
plugins: [react()],
server: {
proxy: {
"/api": {
target: "http://127.0.0.1:5000",
changeOrigin: true,
secure: false,
},
},
},
optimizeDeps: {
include: ['react-fast-marquee']
}
});

`

📂 Suggested Folder Structure

src/
  components/
    productCard/
      productCard.jsx
      productCard.css
  data/
    products.js
  pages/
    ourProducts/
      Products.jsx
      ourProducts.css

⚙️ What You Get

Once everything is connected:

🔍 Search products by name
🥑 Filter by category (Fruits, Dairy, Bakery)
💸 Filter by price range
🧺 Add/remove items from basket