Visual Studio Code

Project Structure

The application is split into two folders: a Node.js backend API and a React frontend.

Setup Commands

Rough order — your teacher might want screenshots of each step.

Make folders: mkdir backend and mkdir frontend
React app: cd frontend then npx create-react-app . (or copy a package.json and run npm install)
Backend deps: cd backend then npm install
Inside backend: mkdir routes
Copy the files from below into the right places
Install deps: npm install in backend/, in frontend/, and once at the repo root (root has a small helper that runs both apps)
Reset empty DB: cd backend then node seed.js (wipes tables — no starter products)
Run both API and React from the repo root: npm run dev or npm start (API on port 5000, React on 3000). Alternatively run node server.js in backend/ and npm start in frontend/ in two terminals.

First time: register on Login, then add stock in Admin. Shop stays empty until you do. No card / payment step — not needed for the brief.

Vagrant setup

Tested with Vagrant 2.4.9. Guest VM should use Node 22.22.2 and npm 10.9.7 (or close — run node -v / npm -v inside the VM).

Put Vagrantfile and provision-vm.sh in the same folder as backend/ and frontend/ (repo root).
vagrant up — first boot installs Node via the provision script.
vagrant ssh then cd /vagrant (project is mounted there).
Ports 5000 and 3000 are forwarded to your Windows machine — open http://localhost:3000 in Edge/Chrome on the host.
Inside the VM: cd backend && npm install && node seed.js && node server.js in one terminal, and cd frontend && npm install && npm start in another (or use screen/tmux).
If the React dev server binds only to localhost inside the VM, that still works with Vagrant port forwarding.

If VirtualBox complains about VT-x, turn on virtualisation in BIOS or use WSL2 instead of Vagrant — same Node commands apply.

Backend: package.json

Use the npm package sqlite (Promise/async API for SQLite). It needs the sqlite3 driver package installed too so Node can talk to the SQLite engine. (That is not the same as using the old sqlite3 API everywhere in your routes — your code uses sqlite's db.all / db.get / db.run.) Skipping cors keeps the file small. On Windows, native modules may need Visual Studio Build Tools.

backend/package.json

{
  "name": "shop-backend",
  "version": "1.0.0",
  "description": "coursework api",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "seed": "node seed.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "multer": "^1.4.5-lts.1",
    "sqlite": "^5.1.1",
    "sqlite3": "^5.1.7"
  }
}

Backend: database.js

SQLite database file grocery.db next to server.js. The sqlite package gives you await db.all(), await db.get(), and await db.run(). Pass sqlite3.Database as the driver when opening (that is the driver the sqlite docs use).

backend/database.js

const path = require('path');
const sqlite3 = require('sqlite3');
const { open } = require('sqlite');

const DB_PATH = path.join(__dirname, 'grocery.db');

let db;

async function initDatabase() {
  db = await open({
    filename: DB_PATH,
    driver: sqlite3.Database
  });
  await db.exec('PRAGMA journal_mode = WAL;');
  await db.exec(`
    CREATE TABLE IF NOT EXISTS users (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      name TEXT NOT NULL,
      email TEXT UNIQUE NOT NULL,
      password TEXT NOT NULL,
      reward_points INTEGER DEFAULT 0,
      created_at TEXT DEFAULT CURRENT_TIMESTAMP
    );

    CREATE TABLE IF NOT EXISTS products (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      name TEXT NOT NULL,
      price REAL NOT NULL,
      category TEXT NOT NULL,
      image_url TEXT DEFAULT '',
      description TEXT DEFAULT '',
      stock INTEGER DEFAULT 100
    );

    CREATE TABLE IF NOT EXISTS deals (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      product_id INTEGER NOT NULL,
      discount_percent REAL NOT NULL,
      deal_price REAL NOT NULL,
      description TEXT DEFAULT '',
      start_date TEXT,
      end_date TEXT,
      FOREIGN KEY (product_id) REFERENCES products(id)
    );

    CREATE TABLE IF NOT EXISTS orders (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      user_id INTEGER NOT NULL,
      total REAL NOT NULL,
      status TEXT DEFAULT 'confirmed',
      order_type TEXT NOT NULL,
      delivery_address TEXT,
      store_location TEXT,
      slot_time TEXT,
      slot_date TEXT,
      created_at TEXT DEFAULT CURRENT_TIMESTAMP,
      FOREIGN KEY (user_id) REFERENCES users(id)
    );

    CREATE TABLE IF NOT EXISTS order_items (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      order_id INTEGER NOT NULL,
      product_id INTEGER NOT NULL,
      quantity INTEGER NOT NULL,
      price REAL NOT NULL,
      FOREIGN KEY (order_id) REFERENCES orders(id),
      FOREIGN KEY (product_id) REFERENCES products(id)
    );

    CREATE TABLE IF NOT EXISTS rewards (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      user_id INTEGER NOT NULL,
      points INTEGER NOT NULL,
      type TEXT NOT NULL,
      description TEXT DEFAULT '',
      created_at TEXT DEFAULT CURRENT_TIMESTAMP,
      FOREIGN KEY (user_id) REFERENCES users(id)
    );
  `);

  return db;
}

function getDb() {
  if (!db) throw new Error('Database not initialized');
  return db;
}

module.exports = { initDatabase, getDb };

Backend: server.js

Makes an uploads folder, serves files at /uploads/... so product photos work. Still no cors. initDatabase() is async, so routes load after the DB is ready.

backend/server.js

const express = require('express');
const path = require('path');
const fs = require('fs');
const { initDatabase } = require('./database');

const app = express();
const PORT = 5000;

const uploadsDir = path.join(__dirname, 'uploads');
if (!fs.existsSync(uploadsDir)) {
  fs.mkdirSync(uploadsDir, { recursive: true });
}
app.use('/uploads', express.static(uploadsDir));

app.use(express.json());

(async () => {
  await initDatabase();

  const productRoutes = require('./routes/products');
  const orderRoutes = require('./routes/orders');
  const userRoutes = require('./routes/users');
  const adminRoutes = require('./routes/admin');

  app.use('/api/products', productRoutes);
  app.use('/api/orders', orderRoutes);
  app.use('/api/users', userRoutes);
  app.use('/api/admin', adminRoutes);

  app.get('/', (req, res) => {
    res.json({ ok: true, message: 'API running' });
  });

  app.listen(PORT, () => {
    console.log('http://localhost:' + PORT);
  });
})().catch((err) => {
  console.error(err);
  process.exit(1);
});

Backend: seed.js

Only clears tables — no fake stock. You add real rows through Admin so the marker can see you doing CRUD. Run again if you want a clean slate (wipes users too).

backend/seed.js

const { initDatabase, getDb } = require('./database');

(async () => {
  await initDatabase();
  const db = getDb();

  await db.exec(`
    DELETE FROM rewards;
    DELETE FROM order_items;
    DELETE FROM orders;
    DELETE FROM deals;
    DELETE FROM products;
    DELETE FROM users;
  `);

  console.log('Database reset. No products yet — add them in Admin.');
  console.log('Register an account on the site, then use /admin to add stock.');
})().catch((err) => {
  console.error(err);
  process.exit(1);
});

Backend: routes/products.js

REST API routes for products (async handlers). Uses await db.all() / await db.get() from the sqlite package. Supports filtering by category, searching by name, categories list, deals JOIN, and single product by ID.

backend/routes/products.js

const express = require('express');
const router = express.Router();
const { getDb } = require('../database');

router.get('/', async (req, res) => {
  try {
    const db = getDb();
    const { category, search } = req.query;
    let sql = 'SELECT * FROM products WHERE 1=1';
    const params = [];

    if (category) {
      sql += ' AND category = ?';
      params.push(category);
    }
    if (search) {
      sql += ' AND name LIKE ?';
      params.push(`%${search}%`);
    }

    sql += ' ORDER BY category, name';
    const products = await db.all(sql, params);
    res.json(products);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

router.get('/categories', async (req, res) => {
  try {
    const db = getDb();
    const rows = await db.all('SELECT DISTINCT category FROM products ORDER BY category');
    res.json(rows.map(r => r.category));
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

router.get('/deals', async (req, res) => {
  try {
    const db = getDb();
    const deals = await db.all(`
      SELECT d.*, p.name, p.price AS original_price, p.image_url, p.category, p.description AS product_description
      FROM deals d
      JOIN products p ON d.product_id = p.id
      ORDER BY d.discount_percent DESC
    `);
    res.json(deals);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

router.get('/:id', async (req, res) => {
  try {
    const db = getDb();
    const product = await db.get('SELECT * FROM products WHERE id = ?', [parseInt(req.params.id)]);
    if (!product) return res.status(404).json({ error: 'Product not found' });

    const deal = await db.get('SELECT * FROM deals WHERE product_id = ?', [product.id]);
    res.json({ ...product, deal: deal || null });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

module.exports = router;

Backend: routes/orders.js

Async routes: await db.all / await db.run. Fetches order history with items; new orders use result.lastID from db.run (not lastInsertRowid). Awards 1 point per whole pound spent.

backend/routes/orders.js

const express = require('express');
const router = express.Router();
const { getDb } = require('../database');

router.get('/:userId', async (req, res) => {
  try {
    const db = getDb();
    const orders = await db.all(
      'SELECT * FROM orders WHERE user_id = ? ORDER BY created_at DESC',
      [parseInt(req.params.userId)]
    );

    const enriched = [];
    for (const order of orders) {
      const items = await db.all(`
        SELECT oi.*, p.name, p.image_url
        FROM order_items oi
        JOIN products p ON oi.product_id = p.id
        WHERE oi.order_id = ?
      `, [order.id]);
      enriched.push({ ...order, items });
    }

    res.json(enriched);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

router.post('/', async (req, res) => {
  try {
    const db = getDb();
    const { user_id, items, order_type, delivery_address, store_location, slot_time, slot_date } = req.body;

    if (!user_id || !items || !items.length || !order_type) {
      return res.status(400).json({ error: 'Missing required fields' });
    }

    let total = 0;
    items.forEach(item => {
      total += item.price * item.quantity;
    });
    total = Math.round(total * 100) / 100;

    const result = await db.run(`
      INSERT INTO orders (user_id, total, order_type, delivery_address, store_location, slot_time, slot_date)
      VALUES (?, ?, ?, ?, ?, ?, ?)
    `, [
      user_id, total, order_type,
      delivery_address || null, store_location || null,
      slot_time || null, slot_date || null
    ]);

    const orderId = result.lastID;

    for (const item of items) {
      await db.run(
        'INSERT INTO order_items (order_id, product_id, quantity, price) VALUES (?, ?, ?, ?)',
        [orderId, item.product_id, item.quantity, item.price]
      );
    }

    const points = Math.floor(total);
    await db.run('UPDATE users SET reward_points = reward_points + ? WHERE id = ?', [points, user_id]);
    await db.run(
      "INSERT INTO rewards (user_id, points, type, description) VALUES (?, ?, 'earned', ?)",
      [user_id, points, `Order #${orderId}`]
    );

    res.status(201).json({ id: orderId, total, points_earned: points });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

module.exports = router;

Backend: routes/users.js

Sign up / log in (async). Passwords plain text for a short demo. Redeem fixed at 100 points = £10 off. Registration uses result.lastID after await db.run.

backend/routes/users.js

const express = require('express');
const router = express.Router();
const { getDb } = require('../database');

router.post('/register', async (req, res) => {
  const db = getDb();
  const { name, email, password } = req.body;

  if (!name || !email || !password) {
    return res.status(400).json({ error: 'All fields are required' });
  }

  try {
    const existing = await db.get('SELECT id FROM users WHERE email = ?', [email]);
    if (existing) {
      return res.status(400).json({ error: 'Email already exists' });
    }

    const result = await db.run(
      'INSERT INTO users (name, email, password) VALUES (?, ?, ?)',
      [name, email, password]
    );

    const user = await db.get(
      'SELECT id, name, email, reward_points FROM users WHERE id = ?',
      [result.lastID]
    );

    res.status(201).json(user);
  } catch (err) {
    res.status(400).json({ error: 'Registration failed' });
  }
});

router.post('/login', async (req, res) => {
  try {
    const db = getDb();
    const { email, password } = req.body;
    const user = await db.get('SELECT * FROM users WHERE email = ?', [email]);

    if (!user || user.password !== password) {
      return res.status(401).json({ error: 'Invalid email or password' });
    }

    res.json({
      id: user.id,
      name: user.name,
      email: user.email,
      reward_points: user.reward_points
    });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

router.get('/:userId/rewards', async (req, res) => {
  try {
    const db = getDb();
    const user = await db.get('SELECT reward_points FROM users WHERE id = ?', [parseInt(req.params.userId)]);
    if (!user) return res.status(404).json({ error: 'User not found' });

    const history = await db.all(
      'SELECT * FROM rewards WHERE user_id = ? ORDER BY created_at DESC',
      [parseInt(req.params.userId)]
    );

    res.json({ total_points: user.reward_points, history });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

router.post('/:userId/rewards/redeem', async (req, res) => {
  try {
    const db = getDb();
    const { points } = req.body;
    const uid = parseInt(req.params.userId, 10);

    if (points !== 100) {
      return res.status(400).json({ error: 'Redeem exactly 100 points at a time (£10)' });
    }

    const user = await db.get('SELECT reward_points FROM users WHERE id = ?', [uid]);

    if (!user) return res.status(404).json({ error: 'User not found' });
    if (user.reward_points < 100) {
      return res.status(400).json({ error: 'Not enough points (need 100 for £10)' });
    }

    await db.run('UPDATE users SET reward_points = reward_points - 100 WHERE id = ?', [uid]);
    await db.run(
      "INSERT INTO rewards (user_id, points, type, description) VALUES (?, 100, 'redeemed', '£10 off voucher')",
      [uid]
    );

    const updated = await db.get('SELECT reward_points FROM users WHERE id = ?', [uid]);
    res.json({ message: 'Redeemed', remaining: updated.reward_points });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

module.exports = router;

Backend: routes/admin.js

POST /api/admin/upload with form field image returns { url: "/uploads/..." }. CRUD routes use await db.all / get / run and result.lastID on inserts.

backend/routes/admin.js

const express = require('express');
const path = require('path');
const fs = require('fs');
const multer = require('multer');
const router = express.Router();
const { getDb } = require('../database');

const uploadDir = path.join(__dirname, '..', 'uploads');
if (!fs.existsSync(uploadDir)) {
  fs.mkdirSync(uploadDir, { recursive: true });
}

const storage = multer.diskStorage({
  destination: (req, file, cb) => cb(null, uploadDir),
  filename: (req, file, cb) => {
    const ext = path.extname(file.originalname).toLowerCase() || '.png';
    const safe = ['.jpg', '.jpeg', '.png', '.gif', '.webp'].includes(ext) ? ext : '.png';
    cb(null, 'p-' + Date.now() + safe);
  }
});

const upload = multer({
  storage,
  limits: { fileSize: 3 * 1024 * 1024 },
  fileFilter: (req, file, cb) => {
    if (!file.mimetype || !file.mimetype.startsWith('image/')) {
      return cb(new Error('images only'));
    }
    cb(null, true);
  }
});

router.post('/upload', (req, res) => {
  upload.single('image')(req, res, (err) => {
    if (err) {
      return res.status(400).json({ error: err.message || 'upload failed' });
    }
    if (!req.file) {
      return res.status(400).json({ error: 'no file' });
    }
    res.json({ url: '/uploads/' + req.file.filename });
  });
});

router.get('/products', async (req, res) => {
  try {
    const db = getDb();
    const rows = await db.all('SELECT * FROM products ORDER BY id DESC');
    res.json(rows);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

router.post('/products', async (req, res) => {
  try {
    const db = getDb();
    const { name, price, category, image_url, description, stock } = req.body;
    if (!name || price == null || !category) {
      return res.status(400).json({ error: 'name, price and category needed' });
    }
    const r = await db.run(
      'INSERT INTO products (name, price, category, image_url, description, stock) VALUES (?, ?, ?, ?, ?, ?)',
      [name, Number(price), category, image_url || '', description || '', stock != null ? Number(stock) : 100]
    );
    const row = await db.get('SELECT * FROM products WHERE id = ?', [r.lastID]);
    res.status(201).json(row);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

router.put('/products/:id', async (req, res) => {
  try {
    const db = getDb();
    const id = parseInt(req.params.id, 10);
    const old = await db.get('SELECT * FROM products WHERE id = ?', [id]);
    if (!old) return res.status(404).json({ error: 'not found' });
    const { name, price, category, image_url, description, stock } = req.body;
    await db.run(
      'UPDATE products SET name=?, price=?, category=?, image_url=?, description=?, stock=? WHERE id=?',
      [
        name != null ? name : old.name,
        price != null ? Number(price) : old.price,
        category != null ? category : old.category,
        image_url !== undefined ? image_url : old.image_url,
        description !== undefined ? description : old.description,
        stock != null ? Number(stock) : old.stock,
        id
      ]
    );
    const updated = await db.get('SELECT * FROM products WHERE id = ?', [id]);
    res.json(updated);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

router.delete('/products/:id', async (req, res) => {
  try {
    const db = getDb();
    const id = parseInt(req.params.id, 10);
    const row = await db.get('SELECT id FROM products WHERE id = ?', [id]);
    if (!row) {
      return res.status(404).json({ error: 'not found' });
    }
    await db.run('DELETE FROM deals WHERE product_id = ?', [id]);
    await db.run('DELETE FROM products WHERE id = ?', [id]);
    res.json({ ok: true });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

router.get('/orders', async (req, res) => {
  try {
    const db = getDb();
    const orders = await db.all(
      `SELECT o.*, u.name AS user_name, u.email AS user_email
       FROM orders o JOIN users u ON o.user_id = u.id ORDER BY o.created_at DESC`
    );
    for (const order of orders) {
      order.items = await db.all(
        `SELECT oi.*, p.name AS product_name FROM order_items oi
         JOIN products p ON oi.product_id = p.id WHERE oi.order_id = ?`,
        [order.id]
      );
    }
    res.json(orders);
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

router.put('/orders/:id/status', async (req, res) => {
  try {
    const db = getDb();
    const id = parseInt(req.params.id, 10);
    const { status } = req.body;
    if (!status) return res.status(400).json({ error: 'status required' });
    const o = await db.get('SELECT id FROM orders WHERE id = ?', [id]);
    if (!o) return res.status(404).json({ error: 'not found' });
    await db.run('UPDATE orders SET status = ? WHERE id = ?', [status, id]);
    res.json({ id, status });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

module.exports = router;

Frontend: package.json

React app dependencies. Uses react-router-dom for page navigation and react-scripts for the dev server and build tooling.

frontend/package.json

{
  "name": "shop-frontend",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.0",
    "react-scripts": "5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
  }
}

Frontend: public/index.html

The HTML shell. React mounts into the div with id "root".

frontend/public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>FreshMart</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛒</text></svg>">
</head>
<body>
  <div id="root"></div>
</body>
</html>

Frontend: src/index.js

Entry point. Wraps the App in BrowserRouter (for routing), UserProvider and CartProvider (for global state).

frontend/src/index.js

// index.js — React app entry point
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import { CartProvider } from './context/CartContext';
import { UserProvider } from './context/UserContext';
import './index.css';

// Mount the app into the root div, wrapped in providers for routing and state
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <UserProvider>
        <CartProvider>
          <App />
        </CartProvider>
      </UserProvider>
    </BrowserRouter>
  </React.StrictMode>
);

Frontend: src/index.css

Global CSS reset. Removes default margins, sets the base font, and resets link/button/input styles.

frontend/src/index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
  background-color: #f4f4f4;
  color: #333;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  font-family: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

Frontend: src/App.js

Navbar, routes, footer. Admin route is just another path.

frontend/src/App.js

import { Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import Products from './pages/Products';
import Deals from './pages/Deals';
import OrderHistory from './pages/OrderHistory';
import Rewards from './pages/Rewards';
import Collection from './pages/Collection';
import Delivery from './pages/Delivery';
import Login from './pages/Login';
import Admin from './pages/Admin';
import './App.css';

function App() {
  return (
    <div className="app">
      <Navbar />
      <main className="main-content">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/products" element={<Products />} />
          <Route path="/deals" element={<Deals />} />
          <Route path="/order-history" element={<OrderHistory />} />
          <Route path="/rewards" element={<Rewards />} />
          <Route path="/collection" element={<Collection />} />
          <Route path="/delivery" element={<Delivery />} />
          <Route path="/login" element={<Login />} />
          <Route path="/admin" element={<Admin />} />
        </Routes>
      </main>
      <footer className="footer">
        <div className="footer-content">
          <div className="footer-section">
            <h4>FreshMart</h4>
            <p>Online groceries coursework.</p>
          </div>
          <div className="footer-section">
            <h4>Links</h4>
            <p>Products | Deals | Rewards</p>
          </div>
          <div className="footer-section">
            <h4>Contact</h4>
            <p>help@freshmart.local</p>
          </div>
        </div>
        <div className="footer-bottom">
          <p>© 2026 FreshMart</p>
        </div>
      </footer>
    </div>
  );
}

export default App;

Frontend: src/App.css

All the styles for the entire application — navbar, slide-out basket, footer, hero, product grid, cards, forms, checkout layout, auth pages, and responsive breakpoints. This is the longest file.

frontend/src/App.css

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 20px;
}

/* ============ NAVBAR ============ */

.navbar {
  background: #00539f;
  color: white;
  padding: 0 20px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.navbar-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.navbar-logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
}

.navbar-logo span {
  color: #ffd700;
}

.navbar-links {
  display: flex;
  gap: 4px;
}

.navbar-links a {
  color: rgba(255, 255, 255, 0.85);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.2s;
}

.navbar-links a:hover,
.navbar-links a.active {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cart-btn {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}

.cart-btn:hover {
  background: rgba(255, 255, 255, 0.25);
}

.cart-badge {
  background: #e31837;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.user-btn {
  background: #ffd700;
  color: #333;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  transition: opacity 0.2s;
}

.user-btn:hover {
  opacity: 0.9;
}

.logout-btn {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.8rem;
}

/* ============ CART PANEL ============ */

.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
}

.cart-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  background: white;
  z-index: 201;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.cart-header {
  padding: 20px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-header h2 {
  font-size: 1.25rem;
}

.cart-close {
  background: none;
  font-size: 1.5rem;
  color: #666;
}

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.cart-empty {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.cart-item-emoji {
  font-size: 2rem;
  width: 50px;
  text-align: center;
}

.cart-item-info {
  flex: 1;
}

.cart-item-info h4 {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.cart-item-info p {
  color: #00539f;
  font-weight: 600;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f0f0f0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.qty-btn:hover {
  background: #e0e0e0;
}

.cart-item-remove {
  background: none;
  color: #e31837;
  font-size: 0.8rem;
  padding: 4px;
}

.cart-footer {
  border-top: 2px solid #e0e0e0;
  padding: 20px;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.cart-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-delivery {
  background: #00539f;
  color: white;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  transition: opacity 0.2s;
}

.btn-delivery:hover {
  opacity: 0.9;
}

.btn-collection {
  background: #27ae60;
  color: white;
  padding: 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  transition: opacity 0.2s;
}

.btn-collection:hover {
  opacity: 0.9;
}

/* ============ FOOTER ============ */

.footer {
  background: #1a1a2e;
  color: rgba(255, 255, 255, 0.8);
  margin-top: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 40px 20px;
}

.footer-section h4 {
  color: white;
  margin-bottom: 8px;
}

.footer-bottom {
  text-align: center;
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
}

/* ============ HERO ============ */

.hero {
  background: linear-gradient(135deg, #00539f 0%, #003d75 100%);
  color: white;
  border-radius: 12px;
  padding: 60px 40px;
  margin-bottom: 32px;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.hero p {
  font-size: 1.15rem;
  opacity: 0.9;
  margin-bottom: 24px;
}

.hero-btn {
  background: #ffd700;
  color: #333;
  padding: 14px 32px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  display: inline-block;
  transition: transform 0.2s;
}

.hero-btn:hover {
  transform: translateY(-2px);
}

/* ============ SECTIONS ============ */

.section-title {
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 3px solid #00539f;
  display: inline-block;
}

/* ============ CATEGORY GRID ============ */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.category-card {
  background: white;
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.category-card .emoji {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 8px;
}

.category-card .label {
  font-weight: 600;
  font-size: 0.85rem;
  color: #333;
}

/* ============ PRODUCT GRID ============ */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.product-image {
  background: #f8f9fa;
  text-align: center;
  padding: 24px;
  font-size: 3.5rem;
}

.product-info {
  padding: 16px;
}

.product-info h3 {
  font-size: 0.95rem;
  margin-bottom: 4px;
  line-height: 1.3;
}

.product-info .description {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 8px;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.product-price .current {
  font-size: 1.15rem;
  font-weight: 700;
  color: #00539f;
}

.product-price .original {
  font-size: 0.85rem;
  color: #999;
  text-decoration: line-through;
}

.deal-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #e31837;
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
}

.add-to-cart-btn {
  width: 100%;
  background: #00539f;
  color: white;
  padding: 10px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: background 0.2s;
}

.add-to-cart-btn:hover {
  background: #003d75;
}

.add-to-cart-btn.added {
  background: #27ae60;
}

/* ============ PRODUCTS PAGE ============ */

.products-layout {
  display: flex;
  gap: 24px;
}

.products-sidebar {
  width: 200px;
  flex-shrink: 0;
}

.products-main {
  flex: 1;
}

.search-bar {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  margin-bottom: 20px;
  transition: border-color 0.2s;
}

.search-bar:focus {
  outline: none;
  border-color: #00539f;
}

.filter-list {
  list-style: none;
}

.filter-list li {
  padding: 10px 14px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 4px;
  transition: background 0.2s;
}

.filter-list li:hover {
  background: #e8f0fe;
}

.filter-list li.active {
  background: #00539f;
  color: white;
  font-weight: 600;
}

/* ============ DEALS PAGE ============ */

.deals-banner {
  background: linear-gradient(135deg, #e31837 0%, #b71c1c 100%);
  color: white;
  padding: 32px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 32px;
}

.deals-banner h1 {
  font-size: 2rem;
}

.deals-banner p {
  opacity: 0.9;
}

/* ============ ORDER HISTORY ============ */

.order-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.order-id {
  font-weight: 700;
  font-size: 1.05rem;
}

.order-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: capitalize;
}

.order-status.confirmed {
  background: #e3f2fd;
  color: #1565c0;
}

.order-status.delivered {
  background: #e8f5e9;
  color: #2e7d32;
}

.order-status.collected {
  background: #fff3e0;
  color: #ef6c00;
}

.order-items-list {
  margin-bottom: 12px;
}

.order-item-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.9rem;
}

.order-meta {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  color: #666;
  font-size: 0.85rem;
}

.order-total {
  font-weight: 700;
  color: #00539f;
  font-size: 1rem;
}

/* ============ REWARDS ============ */

.rewards-header {
  background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
  color: #333;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 32px;
}

.rewards-points {
  font-size: 3rem;
  font-weight: 800;
  margin: 8px 0;
}

.rewards-value {
  font-size: 1.1rem;
  opacity: 0.8;
}

.reward-history-item {
  background: white;
  padding: 16px 20px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.points-earned {
  color: #27ae60;
  font-weight: 700;
}

.points-redeemed {
  color: #e31837;
  font-weight: 700;
}

/* ============ CHECKOUT (DELIVERY/COLLECTION) ============ */

.checkout-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
}

.checkout-form {
  background: white;
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.checkout-form h2 {
  margin-bottom: 24px;
  font-size: 1.3rem;
}

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #444;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #00539f;
}

.order-summary {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  height: fit-content;
  position: sticky;
  top: 88px;
}

.order-summary h3 {
  margin-bottom: 16px;
  font-size: 1.1rem;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid #f5f5f5;
}

.summary-total {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 2px solid #e0e0e0;
  font-weight: 700;
  font-size: 1.15rem;
}

.place-order-btn {
  width: 100%;
  background: #00539f;
  color: white;
  padding: 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 20px;
  transition: background 0.2s;
}

.place-order-btn:hover {
  background: #003d75;
}

.place-order-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* ============ LOGIN PAGE ============ */

.auth-container {
  max-width: 440px;
  margin: 40px auto;
}

.auth-card {
  background: white;
  border-radius: 12px;
  padding: 36px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.auth-card h2 {
  text-align: center;
  margin-bottom: 24px;
  color: #00539f;
}

.auth-toggle {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9rem;
  color: #666;
}

.auth-toggle button {
  background: none;
  color: #00539f;
  font-weight: 600;
  text-decoration: underline;
  font-size: 0.9rem;
}

.auth-submit {
  width: 100%;
  background: #00539f;
  color: white;
  padding: 14px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 8px;
  transition: background 0.2s;
}

.auth-submit:hover {
  background: #003d75;
}

.auth-error {
  background: #fde8e8;
  color: #e31837;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  text-align: center;
}

/* ============ EMPTY / INFO STATES ============ */

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-state .icon {
  font-size: 4rem;
  margin-bottom: 16px;
}

.empty-state h2 {
  margin-bottom: 8px;
  color: #555;
}

.empty-state p {
  color: #999;
  margin-bottom: 20px;
}

.empty-state a {
  background: #00539f;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  display: inline-block;
}

/* ============ SUCCESS MESSAGE ============ */

.success-message {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
}

.success-message .icon {
  font-size: 4rem;
  margin-bottom: 16px;
}

.success-message h2 {
  color: #27ae60;
  margin-bottom: 12px;
}

/* ============ LOADING ============ */

.loading {
  text-align: center;
  padding: 40px;
  color: #999;
}

/* ============ RESPONSIVE ============ */

@media (max-width: 768px) {
  .hero h1 {
    font-size: 1.75rem;
  }

  .products-layout {
    flex-direction: column;
  }

  .products-sidebar {
    width: 100%;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .navbar-links {
    display: none;
  }
}

State Management: CartContext.js

React Context for the checkout basket. Provides addToCart, removeFromCart, updateQuantity, clearCart, plus computed cartTotal and cartCount values to all components.

frontend/src/context/CartContext.js

// CartContext.js — Global shopping basket state using React Context
import { createContext, useContext, useState } from 'react';

const CartContext = createContext();

export function CartProvider({ children }) {
  const [cartItems, setCartItems] = useState([]); // array of {product, quantity}

  // Add a product or increment its quantity if already in basket
  const addToCart = (product) => {
    setCartItems(prev => {
      const existing = prev.find(item => item.id === product.id);
      if (existing) {
        return prev.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }
      return [...prev, { ...product, quantity: 1 }];
    });
  };

  const removeFromCart = (productId) => {
    setCartItems(prev => prev.filter(item => item.id !== productId));
  };

  const updateQuantity = (productId, quantity) => {
    if (quantity <= 0) {
      removeFromCart(productId);
      return;
    }
    setCartItems(prev =>
      prev.map(item =>
        item.id === productId ? { ...item, quantity } : item
      )
    );
  };

  const clearCart = () => setCartItems([]);

  const cartTotal = cartItems.reduce(
    (sum, item) => sum + item.price * item.quantity, 0
  );

  const cartCount = cartItems.reduce(
    (sum, item) => sum + item.quantity, 0
  );

  return (
    <CartContext.Provider value={{
      cartItems, addToCart, removeFromCart, updateQuantity, clearCart, cartTotal, cartCount
    }}>
      {children}
    </CartContext.Provider>
  );
}

export const useCart = () => useContext(CartContext);

State Management: UserContext.js

React Context for the logged-in user. Persists user data to localStorage so the session survives page refreshes.

frontend/src/context/UserContext.js

// UserContext.js — Global auth state, persisted in localStorage
import { createContext, useContext, useState, useEffect } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  // Try to restore session from localStorage on first render
  const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('shop_user');
    return saved ? JSON.parse(saved) : null;
  });

  useEffect(() => {
    if (user) {
      localStorage.setItem('shop_user', JSON.stringify(user));
    } else {
      localStorage.removeItem('shop_user');
    }
  }, [user]);

  const login = (userData) => setUser(userData);
  const logout = () => setUser(null);

  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
}

export const useUser = () => useContext(UserContext);

Component: Navbar.js

Navigation bar with logo, page links (including Admin link), basket button with item count badge, and login/logout. Includes a slide-out panel with quantity controls and checkout links for delivery or collection.

frontend/src/components/Navbar.js

// Navbar.js — Top navigation bar with links, basket panel, and auth
import { useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import { useCart } from '../context/CartContext';
import { useUser } from '../context/UserContext';

function Navbar() {
  const [cartOpen, setCartOpen] = useState(false);
  const { cartItems, cartCount, cartTotal, updateQuantity, removeFromCart } = useCart();
  const { user, logout } = useUser();
  const location = useLocation();
  const navigate = useNavigate();

  // Helper to highlight the active page link
  const isActive = (path) => location.pathname === path ? 'active' : '';

  return (
    <>
      <nav className="navbar">
        <div className="navbar-content">
          <Link to="/" className="navbar-logo">
            🛒 Fresh<span>Mart</span>
          </Link>

          <div className="navbar-links">
            <Link to="/" className={isActive('/')}>Home</Link>
            <Link to="/products" className={isActive('/products')}>Products</Link>
            <Link to="/deals" className={isActive('/deals')}>Deals</Link>
            {user && <Link to="/order-history" className={isActive('/order-history')}>Orders</Link>}
            {user && <Link to="/rewards" className={isActive('/rewards')}>Rewards</Link>}
            <Link to="/admin" className={isActive('/admin')}>Admin</Link>
          </div>

          <div className="navbar-right">
            <button className="cart-btn" onClick={() => setCartOpen(true)}>
              🛒 Basket
              {cartCount > 0 && <span className="cart-badge">{cartCount}</span>}
            </button>

            {user ? (
              <>
                <span style={{ color: 'white', fontSize: '0.85rem' }}>Hi, {user.name.split(' ')[0]}</span>
                <button className="logout-btn" onClick={logout}>Logout</button>
              </>
            ) : (
              <Link to="/login" className="user-btn">Login</Link>
            )}
          </div>
        </div>
      </nav>

      {cartOpen && (
        <>
          <div className="cart-overlay" onClick={() => setCartOpen(false)} />
          <div className="cart-panel">
            <div className="cart-header">
              <h2>Your basket ({cartCount})</h2>
              <button className="cart-close" onClick={() => setCartOpen(false)}>✕</button>
            </div>

            <div className="cart-items">
              {cartItems.length === 0 ? (
                <div className="cart-empty">
                  <p style={{ fontSize: '3rem' }}>🛒</p>
                  <p>Your basket is empty</p>
                </div>
              ) : (
                cartItems.map(item => (
                  <div key={item.id} className="cart-item">
                    <div className="cart-item-emoji">{item.image_url}</div>
                    <div className="cart-item-info">
                      <h4>{item.name}</h4>
                      <p>£{(item.price * item.quantity).toFixed(2)}</p>
                    </div>
                    <div className="cart-item-controls">
                      <button className="qty-btn" onClick={() => updateQuantity(item.id, item.quantity - 1)}>-</button>
                      <span>{item.quantity}</span>
                      <button className="qty-btn" onClick={() => updateQuantity(item.id, item.quantity + 1)}>+</button>
                    </div>
                    <button className="cart-item-remove" onClick={() => removeFromCart(item.id)}>✕</button>
                  </div>
                ))
              )}
            </div>

            {cartItems.length > 0 && (
              <div className="cart-footer">
                <div className="cart-total">
                  <span>Total</span>
                  <span>£{cartTotal.toFixed(2)}</span>
                </div>
                <div className="cart-actions">
                  <Link
                    to="/delivery"
                    className="btn-delivery"
                    onClick={() => setCartOpen(false)}
                  >
                    🚚 Checkout for Delivery
                  </Link>
                  <Link
                    to="/collection"
                    className="btn-collection"
                    onClick={() => setCartOpen(false)}
                  >
                    🏪 Checkout (pickup)
                  </Link>
                </div>
              </div>
            )}
          </div>
        </>
      )}
    </>
  );
}

export default Navbar;

Component: ProductCard.js

Reusable product card used on the Home, Products, and Deals pages. Shows the image (emoji), name, description, price (with deal price if applicable), and an add button with a brief confirmation state.

frontend/src/components/ProductCard.js

// ProductCard.js — Reusable card showing product info and add-to-basket button
import { useState } from 'react';
import { useCart } from '../context/CartContext';

function ProductCard({ product, deal }) {
  const { addToCart } = useCart();
  const [added, setAdded] = useState(false);

  const effectivePrice = deal ? deal.deal_price : product.price;

  const handleAdd = () => {
    addToCart({
      id: product.id,
      name: product.name,
      price: effectivePrice,
      image_url: product.image_url
    });
    setAdded(true);
    setTimeout(() => setAdded(false), 800);
  };

  return (
    <div className="product-card">
      {deal && (
        <span className="deal-badge">{deal.discount_percent}% OFF</span>
      )}
      <div className="product-image">{product.image_url}</div>
      <div className="product-info">
        <h3>{product.name}</h3>
        <p className="description">{product.description}</p>
        <div className="product-price">
          <span className="current">£{effectivePrice.toFixed(2)}</span>
          {deal && (
            <span className="original">£{product.price.toFixed(2)}</span>
          )}
        </div>
        <button
          className={`add-to-cart-btn ${added ? 'added' : ''}`}
          onClick={handleAdd}
        >
          {added ? '✔ Added' : 'Add to basket'}
        </button>
      </div>
    </div>
  );
}

export default ProductCard;

Page: Home.js

Landing page with a hero banner, category grid linking to filtered listings, a preview of current promotions, and featured items from the first category (Electronics).

frontend/src/pages/Home.js

// Home.js — Landing page with hero banner, category grid, and featured products
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import ProductCard from '../components/ProductCard';

const API = 'http://localhost:5000/api';

const categoryEmojis = {
  'Electronics': '💻',
  'Peripherals': '🔌',
  'Office': '💼',
  'Stationery': '✍',
  'Media': '💿',
  'Gadgets': '📱',
  'Home': '🏠',
  'General': '📦'
};

function Home() {
  const [deals, setDeals] = useState([]);
  const [featured, setFeatured] = useState([]);
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    fetch(`${API}/products/deals`)
      .then(res => res.json())
      .then(data => setDeals(data.slice(0, 4)))
      .catch(() => {});

    fetch(`${API}/products?category=Electronics`)
      .then(res => res.json())
      .then(data => setFeatured(data.slice(0, 4)))
      .catch(() => {});

    fetch(`${API}/products/categories`)
      .then(res => res.json())
      .then(data => setCategories(data))
      .catch(() => {});
  }, []);

  return (
    <div>
      <div className="hero">
        <h1>FreshMart</h1>
        <p>Delivery or pickup — no card payment on this build</p>
        <Link to="/products" className="hero-btn">Browse products</Link>
      </div>

      <h2 className="section-title">Browse by category</h2>
      <div className="category-grid">
        {categories.map(cat => (
          <Link to={`/products?category=${encodeURIComponent(cat)}`} key={cat} className="category-card">
            <span className="emoji">{categoryEmojis[cat] || '📦'}</span>
            <span className="label">{cat}</span>
          </Link>
        ))}
      </div>

      {deals.length > 0 && (
        <>
          <h2 className="section-title">Promotions</h2>
          <div className="product-grid">
            {deals.map(deal => (
              <ProductCard
                key={deal.id}
                product={{
                  id: deal.product_id,
                  name: deal.name,
                  price: deal.original_price,
                  image_url: deal.image_url,
                  description: deal.product_description
                }}
                deal={deal}
              />
            ))}
          </div>
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <Link to="/deals" className="hero-btn" style={{ background: '#e31837', color: 'white' }}>
              View all promotions
            </Link>
          </div>
        </>
      )}

      {featured.length > 0 && (
        <>
          <h2 className="section-title">Featured items</h2>
          <div className="product-grid">
            {featured.map(product => (
              <ProductCard key={product.id} product={product} />
            ))}
          </div>
        </>
      )}
    </div>
  );
}

export default Home;

Page: Products.js

Browse all products with a sidebar category filter and search bar. Uses useSearchParams to read/write the category from the URL query string. Fetches deals to show discount badges on matching products.

frontend/src/pages/Products.js

// Products.js — Product listing with category filter and search
import { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import ProductCard from '../components/ProductCard';

const API = 'http://localhost:5000/api';

function Products() {
  const [products, setProducts] = useState([]);
  const [categories, setCategories] = useState([]);
  const [deals, setDeals] = useState([]);
  const [search, setSearch] = useState('');
  const [searchParams, setSearchParams] = useSearchParams();
  const activeCategory = searchParams.get('category') || '';

  useEffect(() => {
    fetch(`${API}/products/categories`)
      .then(res => res.json())
      .then(data => setCategories(data))
      .catch(() => {});

    fetch(`${API}/products/deals`)
      .then(res => res.json())
      .then(data => setDeals(data))
      .catch(() => {});
  }, []);

  useEffect(() => {
    let url = `${API}/products`;
    const params = new URLSearchParams();
    if (activeCategory) params.append('category', activeCategory);
    if (search) params.append('search', search);
    if (params.toString()) url += '?' + params.toString();

    fetch(url)
      .then(res => res.json())
      .then(data => setProducts(data))
      .catch(() => {});
  }, [activeCategory, search]);

  const getDealForProduct = (productId) => {
    return deals.find(d => d.product_id === productId) || null;
  };

  const selectCategory = (cat) => {
    if (cat === activeCategory) {
      setSearchParams({});
    } else {
      setSearchParams({ category: cat });
    }
  };

  return (
    <div>
      <h1 style={{ marginBottom: 20 }}>
        {activeCategory || 'All Products'}
      </h1>

      <div className="products-layout">
        <aside className="products-sidebar">
          <input
            type="text"
            className="search-bar"
            placeholder="Search products..."
            value={search}
            onChange={e => setSearch(e.target.value)}
          />
          <ul className="filter-list">
            <li
              className={!activeCategory ? 'active' : ''}
              onClick={() => setSearchParams({})}
            >
              All Products
            </li>
            {categories.map(cat => (
              <li
                key={cat}
                className={activeCategory === cat ? 'active' : ''}
                onClick={() => selectCategory(cat)}
              >
                {cat}
              </li>
            ))}
          </ul>
        </aside>

        <div className="products-main">
          {products.length === 0 ? (
            <div className="empty-state">
              <div className="icon">🔍</div>
              <h2>No products found</h2>
              <p>Try a different search term or category</p>
            </div>
          ) : (
            <div className="product-grid">
              {products.map(product => (
                <ProductCard
                  key={product.id}
                  product={product}
                  deal={getDealForProduct(product.id)}
                />
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

export default Products;

Page: Deals.js

Shows all active deals with a red banner and product cards displaying discount percentages and original/deal prices.

frontend/src/pages/Deals.js

// Deals.js — Displays all active deals with discount badges
import { useState, useEffect } from 'react';
import ProductCard from '../components/ProductCard';

const API = 'http://localhost:5000/api';

function Deals() {
  const [deals, setDeals] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`${API}/products/deals`)
      .then(res => res.json())
      .then(data => {
        setDeals(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, []);

  if (loading) return <div className="loading">Loading promotions...</div>;

  return (
    <div>
      <div className="deals-banner">
        <h1>🔥 Promotions</h1>
        <p>Discounted items from the catalog</p>
      </div>

      {deals.length === 0 ? (
        <div className="empty-state">
          <div className="icon">🏆</div>
          <h2>No promotions right now</h2>
          <p>Check back later for discounts</p>
        </div>
      ) : (
        <div className="product-grid">
          {deals.map(deal => (
            <ProductCard
              key={deal.id}
              product={{
                id: deal.product_id,
                name: deal.name,
                price: deal.original_price,
                image_url: deal.image_url,
                description: deal.product_description
              }}
              deal={deal}
            />
          ))}
        </div>
      )}
    </div>
  );
}

export default Deals;

Page: OrderHistory.js

Displays the logged-in user's past orders. Each order card shows the order number, date, status badge, item list, delivery/collection info, and total. Requires authentication.

frontend/src/pages/OrderHistory.js

// OrderHistory.js — Displays the logged-in user's past orders
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useUser } from '../context/UserContext';

const API = 'http://localhost:5000/api';

function OrderHistory() {
  const { user } = useUser();
  const [orders, setOrders] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!user) {
      setLoading(false);
      return;
    }
    fetch(`${API}/orders/${user.id}`)
      .then(res => res.json())
      .then(data => {
        setOrders(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, [user]);

  if (!user) {
    return (
      <div className="empty-state">
        <div className="icon">🔒</div>
        <h2>Please log in</h2>
        <p>You need to be logged in to view your order history</p>
        <Link to="/login">Login</Link>
      </div>
    );
  }

  if (loading) return <div className="loading">Loading orders...</div>;

  return (
    <div>
      <h1 style={{ marginBottom: 24 }}>Order History</h1>

      {orders.length === 0 ? (
        <div className="empty-state">
          <div className="icon">📦</div>
          <h2>No orders yet</h2>
          <p>Place an order to see history here</p>
          <Link to="/products">Browse products</Link>
        </div>
      ) : (
        orders.map(order => (
          <div key={order.id} className="order-card">
            <div className="order-header">
              <div>
                <span className="order-id">Order #{order.id}</span>
                <span style={{ marginLeft: 12, color: '#666', fontSize: '0.85rem' }}>
                  {new Date(order.created_at).toLocaleDateString('en-GB', {
                    day: 'numeric', month: 'short', year: 'numeric'
                  })}
                </span>
              </div>
              <span className={`order-status ${order.status}`}>{order.status}</span>
            </div>

            <div className="order-items-list">
              {order.items.map(item => (
                <div key={item.id} className="order-item-row">
                  <span>{item.image_url} {item.name} x{item.quantity}</span>
                  <span>£{(item.price * item.quantity).toFixed(2)}</span>
                </div>
              ))}
            </div>

            <div className="order-meta">
              <span>
                {order.order_type === 'delivery' ? '🚚 Delivery' : '🏪 Collection'}
                {order.order_type === 'delivery' && order.delivery_address && ` - ${order.delivery_address}`}
                {order.order_type === 'collection' && order.store_location && ` - ${order.store_location}`}
              </span>
              <span className="order-total">Total: £{order.total.toFixed(2)}</span>
            </div>
          </div>
        ))
      )}
    </div>
  );
}

export default OrderHistory;

Page: Rewards.js

£1 spent = 1 point. 100 points = £10 off (button posts { points: 100 } to the API).

frontend/src/pages/Rewards.js

// Rewards.js — View loyalty points balance, history, and redeem
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useUser } from '../context/UserContext';

const API = 'http://localhost:5000/api';

function Rewards() {
  const { user } = useUser();
  const [rewardsData, setRewardsData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!user) {
      setLoading(false);
      return;
    }
    fetch(`${API}/users/${user.id}/rewards`)
      .then(res => res.json())
      .then(data => {
        setRewardsData(data);
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, [user]);

  const handleRedeem = async () => {
    const res = await fetch(`${API}/users/${user.id}/rewards/redeem`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ points: 100 })
    });

    if (res.ok) {
      const data = await res.json();
      setRewardsData(prev => ({
        ...prev,
        total_points: data.remaining,
        history: [
          { id: Date.now(), points: 100, type: 'redeemed', description: '£10 off voucher', created_at: new Date().toISOString() },
          ...prev.history
        ]
      }));
    }
  };

  if (!user) {
    return (
      <div className="empty-state">
        <div className="icon">🔒</div>
        <h2>Please log in</h2>
        <p>You need to be logged in to view your rewards</p>
        <Link to="/login">Login</Link>
      </div>
    );
  }

  if (loading) return <div className="loading">Loading rewards...</div>;

  return (
    <div>
      <div className="rewards-header">
        <h1>Rewards</h1>
        <div className="rewards-points">{rewardsData?.total_points || 0}</div>
        <p className="rewards-value">
          About £{((rewardsData?.total_points || 0) / 10).toFixed(2)} value (100 pts = £10)
        </p>
        {rewardsData?.total_points >= 100 && (
          <button
            type="button"
            onClick={handleRedeem}
            style={{
              marginTop: 16, background: '#333', color: '#ffd700',
              padding: '12px 24px', borderRadius: 8, fontWeight: 700, border: 'none', cursor: 'pointer'
            }}
          >
            Use 100 points for £10 off
          </button>
        )}
      </div>

      <h2 className="section-title">Points History</h2>

      {rewardsData?.history?.length === 0 ? (
        <div className="empty-state">
          <div className="icon">⭐</div>
          <h2>No rewards yet</h2>
          <p>Earn 1 point for every £1 you spend</p>
          <Link to="/products">Browse products</Link>
        </div>
      ) : (
        rewardsData?.history?.map(item => (
          <div key={item.id} className="reward-history-item">
            <div>
              <strong>{item.description}</strong>
              <p style={{ fontSize: '0.8rem', color: '#888', marginTop: 2 }}>
                {new Date(item.created_at).toLocaleDateString('en-GB', {
                  day: 'numeric', month: 'short', year: 'numeric'
                })}
              </p>
            </div>
            <span className={item.type === 'earned' ? 'points-earned' : 'points-redeemed'}>
              {item.type === 'earned' ? '+' : '-'}{item.points} pts
            </span>
          </div>
        ))
      )}
    </div>
  );
}

export default Rewards;

Page: Collection.js

Pickup checkout page. Uses a single branch (no dropdown — just one store). User picks a date and time slot, reviews the order summary, and submits. Success screen shows confirmation and loyalty points.

frontend/src/pages/Collection.js

// Collection.js — Store pickup checkout page (single branch)
import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useCart } from '../context/CartContext';
import { useUser } from '../context/UserContext';

const API = 'http://localhost:5000/api';

// Only one store — no dropdown needed
const STORE_NAME = 'Main Branch';

const timeSlots = [
  '08:00 - 10:00',
  '10:00 - 12:00',
  '12:00 - 14:00',
  '14:00 - 16:00',
  '16:00 - 18:00',
  '18:00 - 20:00'
];

function Collection() {
  const { cartItems, cartTotal, clearCart } = useCart();
  const { user } = useUser();
  const navigate = useNavigate();

  // No store dropdown — always use the single branch
  const [date, setDate] = useState('');
  const [time, setTime] = useState('');
  const [success, setSuccess] = useState(false);
  const [orderDetails, setOrderDetails] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();

    const res = await fetch(`${API}/orders`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        user_id: user.id,
        items: cartItems.map(item => ({
          product_id: item.id,
          quantity: item.quantity,
          price: item.price
        })),
        order_type: 'collection',
        store_location: STORE_NAME, // always use the single branch
        slot_date: date,
        slot_time: time
      })
    });

    if (res.ok) {
      const data = await res.json();
      setOrderDetails(data);
      setSuccess(true);
      clearCart();
    }
  };

  if (!user) {
    return (
      <div className="empty-state">
        <div className="icon">🔒</div>
        <h2>Please log in</h2>
        <p>You need to be logged in to place an order</p>
        <Link to="/login">Login</Link>
      </div>
    );
  }

  if (cartItems.length === 0 && !success) {
    return (
      <div className="empty-state">
        <div className="icon">🛒</div>
        <h2>Your basket is empty</h2>
        <p>Add some products before checkout</p>
        <Link to="/products">Browse products</Link>
      </div>
    );
  }

  if (success) {
    return (
      <div className="success-message">
        <div className="icon">✔</div>
        <h2>Order Placed Successfully!</h2>
        <p>Order #{orderDetails.id} - Total: £{orderDetails.total.toFixed(2)}</p>
        <p>You earned <strong>{orderDetails.points_earned} reward points</strong>!</p>
        <p style={{ marginTop: 8, color: '#666' }}>
          🏪 Collect from: {STORE_NAME}<br />
          📅 {date} at {time}
        </p>
        <div style={{ marginTop: 24, display: 'flex', gap: 12, justifyContent: 'center' }}>
          <Link to="/order-history" className="hero-btn" style={{ fontSize: '0.9rem', padding: '10px 20px' }}>
            View Orders
          </Link>
          <Link to="/products" className="hero-btn" style={{ fontSize: '0.9rem', padding: '10px 20px', background: '#27ae60' }}>
            Continue browsing
          </Link>
        </div>
      </div>
    );
  }

  const today = new Date().toISOString().split('T')[0];

  return (
    <div>
      <h1 style={{ marginBottom: 24 }}>🏪 Store pickup</h1>

      <div className="checkout-layout">
        <form className="checkout-form" onSubmit={handleSubmit}>
          <h2>Collection Details</h2>

          {/* Single store — just display it, no dropdown */}
          <div className="form-group">
            <label>Branch</label>
            <input type="text" value={STORE_NAME} disabled style={{ background: '#f0f0f0' }} />
          </div>

          <div className="form-group">
            <label>Collection Date</label>
            <input
              type="date"
              value={date}
              min={today}
              onChange={e => setDate(e.target.value)}
              required
            />
          </div>

          <div className="form-group">
            <label>Collection Time Slot</label>
            <select value={time} onChange={e => setTime(e.target.value)} required>
              <option value="">Choose a time slot...</option>
              {timeSlots.map(t => (
                <option key={t} value={t}>{t}</option>
              ))}
            </select>
          </div>

          <button
            type="submit"
            className="place-order-btn"
            disabled={!date || !time}
          >
            Place Collection Order - £{cartTotal.toFixed(2)}
          </button>
        </form>

        <div className="order-summary">
          <h3>Order Summary</h3>
          {cartItems.map(item => (
            <div key={item.id} className="summary-item">
              <span>{item.image_url} {item.name} x{item.quantity}</span>
              <span>£{(item.price * item.quantity).toFixed(2)}</span>
            </div>
          ))}
          <div className="summary-total">
            <span>Total</span>
            <span>£{cartTotal.toFixed(2)}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Collection;

Page: Delivery.js

Home delivery checkout page. User enters their address, postcode, selects a date and time slot. Includes a delivery fee (£3.99, free over £40). Order summary with running total. Success screen on completion.

frontend/src/pages/Delivery.js

// Delivery.js — Home delivery checkout page with address + time slot
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { useCart } from '../context/CartContext';
import { useUser } from '../context/UserContext';

const API = 'http://localhost:5000/api';

const timeSlots = [
  '08:00 - 10:00',
  '10:00 - 12:00',
  '12:00 - 14:00',
  '14:00 - 16:00',
  '16:00 - 18:00',
  '18:00 - 20:00',
  '20:00 - 22:00'
];

function Delivery() {
  const { cartItems, cartTotal, clearCart } = useCart();
  const { user } = useUser();

  const [address, setAddress] = useState('');
  const [postcode, setPostcode] = useState('');
  const [date, setDate] = useState('');
  const [time, setTime] = useState('');
  const [success, setSuccess] = useState(false);
  const [orderDetails, setOrderDetails] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const fullAddress = `${address}, ${postcode}`;

    const res = await fetch(`${API}/orders`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        user_id: user.id,
        items: cartItems.map(item => ({
          product_id: item.id,
          quantity: item.quantity,
          price: item.price
        })),
        order_type: 'delivery',
        delivery_address: fullAddress,
        slot_date: date,
        slot_time: time
      })
    });

    if (res.ok) {
      const data = await res.json();
      setOrderDetails(data);
      setSuccess(true);
      clearCart();
    }
  };

  if (!user) {
    return (
      <div className="empty-state">
        <div className="icon">🔒</div>
        <h2>Please log in</h2>
        <p>You need to be logged in to place an order</p>
        <Link to="/login">Login</Link>
      </div>
    );
  }

  if (cartItems.length === 0 && !success) {
    return (
      <div className="empty-state">
        <div className="icon">🛒</div>
        <h2>Your basket is empty</h2>
        <p>Add some products before checkout</p>
        <Link to="/products">Browse products</Link>
      </div>
    );
  }

  if (success) {
    return (
      <div className="success-message">
        <div className="icon">✔</div>
        <h2>Order Placed Successfully!</h2>
        <p>Order #{orderDetails.id} - Total: £{orderDetails.total.toFixed(2)}</p>
        <p>You earned <strong>{orderDetails.points_earned} reward points</strong>!</p>
        <p style={{ marginTop: 8, color: '#666' }}>
          🚚 Delivering to: {address}, {postcode}<br />
          📅 {date} at {time}
        </p>
        <div style={{ marginTop: 24, display: 'flex', gap: 12, justifyContent: 'center' }}>
          <Link to="/order-history" className="hero-btn" style={{ fontSize: '0.9rem', padding: '10px 20px' }}>
            View Orders
          </Link>
          <Link to="/products" className="hero-btn" style={{ fontSize: '0.9rem', padding: '10px 20px', background: '#27ae60' }}>
            Continue browsing
          </Link>
        </div>
      </div>
    );
  }

  const today = new Date().toISOString().split('T')[0];
  const deliveryFee = cartTotal >= 40 ? 0 : 3.99;

  return (
    <div>
      <h1 style={{ marginBottom: 24 }}>🚚 Delivery</h1>

      <div className="checkout-layout">
        <form className="checkout-form" onSubmit={handleSubmit}>
          <h2>Delivery Details</h2>

          <div className="form-group">
            <label>Delivery Address</label>
            <textarea
              rows={3}
              value={address}
              onChange={e => setAddress(e.target.value)}
              placeholder="Enter your full address..."
              required
            />
          </div>

          <div className="form-group">
            <label>Postcode</label>
            <input
              type="text"
              value={postcode}
              onChange={e => setPostcode(e.target.value)}
              placeholder="e.g. SW1A 1AA"
              required
            />
          </div>

          <div className="form-group">
            <label>Delivery Date</label>
            <input
              type="date"
              value={date}
              min={today}
              onChange={e => setDate(e.target.value)}
              required
            />
          </div>

          <div className="form-group">
            <label>Delivery Time Slot</label>
            <select value={time} onChange={e => setTime(e.target.value)} required>
              <option value="">Choose a time slot...</option>
              {timeSlots.map(t => (
                <option key={t} value={t}>{t}</option>
              ))}
            </select>
          </div>

          {deliveryFee > 0 && (
            <p style={{ fontSize: '0.85rem', color: '#e31837', marginBottom: 8 }}>
              Delivery fee: £{deliveryFee.toFixed(2)} (Free delivery on orders over £40)
            </p>
          )}

          <button
            type="submit"
            className="place-order-btn"
            disabled={!address || !postcode || !date || !time}
          >
            Place Delivery Order - £{(cartTotal + deliveryFee).toFixed(2)}
          </button>
        </form>

        <div className="order-summary">
          <h3>Order Summary</h3>
          {cartItems.map(item => (
            <div key={item.id} className="summary-item">
              <span>{item.image_url} {item.name} x{item.quantity}</span>
              <span>£{(item.price * item.quantity).toFixed(2)}</span>
            </div>
          ))}
          <div className="summary-item" style={{ color: deliveryFee === 0 ? '#27ae60' : '#333' }}>
            <span>Delivery</span>
            <span>{deliveryFee === 0 ? 'FREE' : `£${deliveryFee.toFixed(2)}`}</span>
          </div>
          <div className="summary-total">
            <span>Total</span>
            <span>£{(cartTotal + deliveryFee).toFixed(2)}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Delivery;

Page: Login.js

Combined login and registration page. Toggles between login and register forms. Sends credentials to the backend API and stores the returned user data in UserContext on success.

frontend/src/pages/Login.js

// Login.js — Combined login and registration page
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useUser } from '../context/UserContext';

const API = 'http://localhost:5000/api';

function Login() {
  const { login } = useUser();
  const navigate = useNavigate();

  // Toggle between login and register modes
  const [isRegister, setIsRegister] = useState(false);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError('');

    const endpoint = isRegister ? '/users/register' : '/users/login';
    const body = isRegister
      ? { name, email, password }
      : { email, password };

    try {
      const res = await fetch(`${API}${endpoint}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
      });

      const data = await res.json();

      if (!res.ok) {
        setError(data.error || 'Something went wrong');
        return;
      }

      login(data);
      navigate('/');
    } catch {
      setError('Could not connect to server');
    }
  };

  return (
    <div className="auth-container">
      <div className="auth-card">
        <h2>{isRegister ? 'Create Account' : 'Welcome Back'}</h2>

        {error && <div className="auth-error">{error}</div>}

        <form onSubmit={handleSubmit}>
          {isRegister && (
            <div className="form-group">
              <label>Full Name</label>
              <input
                type="text"
                value={name}
                onChange={e => setName(e.target.value)}
                placeholder="Enter your name"
                required
              />
            </div>
          )}

          <div className="form-group">
            <label>Email</label>
            <input
              type="email"
              value={email}
              onChange={e => setEmail(e.target.value)}
              placeholder="Enter your email"
              required
            />
          </div>

          <div className="form-group">
            <label>Password</label>
            <input
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
              placeholder="Enter your password"
              required
            />
          </div>

          <button type="submit" className="auth-submit">
            {isRegister ? 'Create Account' : 'Login'}
          </button>
        </form>

        <div className="auth-toggle">
          {isRegister ? 'Already have an account? ' : "Don't have an account? "}
          <button onClick={() => { setIsRegister(!isRegister); setError(''); }}>
            {isRegister ? 'Login' : 'Register'}
          </button>
        </div>
      </div>
    </div>
  );
}

export default Login;

Page: Admin.js + image helpers

Admin: file input → FormData + fetch('/api/admin/upload') → paste returned url into image_url. Or type an emoji. Stock: number input + show in the table. Shop: ProductThumb.js + productImage.js turn /uploads/... into <img src="http://localhost:5000/uploads/..."> (React runs on 3000, images on 5000).

frontend/src/pages/Admin.js

// Admin.js — Admin dashboard for managing products and orders
import { useState, useEffect } from 'react';

const API = 'http://localhost:5000/api';

function Admin() {
  // Tab state: 'products' or 'orders'
  const [tab, setTab] = useState('products');

  // ============ PRODUCT STATE ============
  const [products, setProducts] = useState([]);
  const [editId, setEditId] = useState(null); // null = adding new, number = editing
  const [form, setForm] = useState({
    name: '', price: '', category: '', image_url: '', description: '', stock: 100
  });

  // ============ ORDER STATE ============
  const [orders, setOrders] = useState([]);

  // Fetch products from the admin API
  const loadProducts = () => {
    fetch(`${API}/admin/products`)
      .then(r => r.json())
      .then(setProducts)
      .catch(console.error);
  };

  // Fetch orders from the admin API
  const loadOrders = () => {
    fetch(`${API}/admin/orders`)
      .then(r => r.json())
      .then(setOrders)
      .catch(console.error);
  };

  // Load data when the component mounts
  useEffect(() => {
    loadProducts();
    loadOrders();
  }, []);

  // Reset the form fields
  const resetForm = () => {
    setForm({ name: '', price: '', category: '', image_url: '', description: '', stock: 100 });
    setEditId(null);
  };

  // Handle add or edit product submit
  const handleProductSubmit = async (e) => {
    e.preventDefault();

    const body = {
      ...form,
      price: parseFloat(form.price),
      stock: parseInt(form.stock)
    };

    if (editId) {
      // Editing an existing product
      await fetch(`${API}/admin/products/${editId}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
      });
    } else {
      // Adding a new product
      await fetch(`${API}/admin/products`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
      });
    }

    resetForm();
    loadProducts(); // refresh the list
  };

  // Populate the form for editing
  const startEdit = (p) => {
    setEditId(p.id);
    setForm({
      name: p.name,
      price: p.price,
      category: p.category,
      image_url: p.image_url || '',
      description: p.description || '',
      stock: p.stock
    });
  };

  // Delete a product
  const deleteProduct = async (id) => {
    if (!window.confirm('Delete this product?')) return;
    await fetch(`${API}/admin/products/${id}`, { method: 'DELETE' });
    loadProducts();
  };

  // Update order status
  const updateStatus = async (id, status) => {
    await fetch(`${API}/admin/orders/${id}/status`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ status })
    });
    loadOrders();
  };

  return (
    <div>
      <h1 style={{ marginBottom: 16 }}>Admin Dashboard</h1>

      {/* Tab buttons */}
      <div style={{ display: 'flex', gap: 8, marginBottom: 24 }}>
        <button
          className={`hero-btn${tab === 'products' ? '' : ' outline'}`}
          onClick={() => setTab('products')}
          style={{ padding: '10px 20px' }}
        >
          Products
        </button>
        <button
          className={`hero-btn${tab === 'orders' ? '' : ' outline'}`}
          onClick={() => setTab('orders')}
          style={{ padding: '10px 20px' }}
        >
          Orders
        </button>
      </div>

      {/* ============ PRODUCTS TAB ============ */}
      {tab === 'products' && (
        <div>
          <h2>{editId ? 'Edit Product' : 'Add Product'}</h2>
          <form onSubmit={handleProductSubmit} style={{ display: 'grid', gap: 10, maxWidth: 500, marginBottom: 24 }}>
            <input placeholder="Name" value={form.name} onChange={e => setForm({...form, name: e.target.value})} required />
            <input placeholder="Price" type="number" step="0.01" value={form.price} onChange={e => setForm({...form, price: e.target.value})} required />
            <input placeholder="Category" value={form.category} onChange={e => setForm({...form, category: e.target.value})} required />
            <input placeholder="Emoji / Image URL" value={form.image_url} onChange={e => setForm({...form, image_url: e.target.value})} />
            <input placeholder="Description" value={form.description} onChange={e => setForm({...form, description: e.target.value})} />
            <input placeholder="Stock" type="number" value={form.stock} onChange={e => setForm({...form, stock: e.target.value})} />
            <div style={{ display: 'flex', gap: 8 }}>
              <button type="submit" className="hero-btn" style={{ padding: '10px 20px' }}>
                {editId ? 'Save Changes' : 'Add Product'}
              </button>
              {editId && (
                <button type="button" className="hero-btn" style={{ padding: '10px 20px', background: '#999' }} onClick={resetForm}>
                  Cancel
                </button>
              )}
            </div>
          </form>

          <h2>All Products ({products.length})</h2>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.85rem' }}>
            <thead>
              <tr style={{ background: '#f1f5f9', textAlign: 'left' }}>
                <th style={{ padding: 8 }}>ID</th>
                <th style={{ padding: 8 }}>Name</th>
                <th style={{ padding: 8 }}>Price</th>
                <th style={{ padding: 8 }}>Category</th>
                <th style={{ padding: 8 }}>Stock</th>
                <th style={{ padding: 8 }}>Actions</th>
              </tr>
            </thead>
            <tbody>
              {products.map(p => (
                <tr key={p.id} style={{ borderBottom: '1px solid #e2e8f0' }}>
                  <td style={{ padding: 8 }}>{p.id}</td>
                  <td style={{ padding: 8 }}>{p.image_url} {p.name}</td>
                  <td style={{ padding: 8 }}>£{p.price.toFixed(2)}</td>
                  <td style={{ padding: 8 }}>{p.category}</td>
                  <td style={{ padding: 8 }}>{p.stock}</td>
                  <td style={{ padding: 8 }}>
                    <button onClick={() => startEdit(p)} style={{ marginRight: 6, cursor: 'pointer' }}>Edit</button>
                    <button onClick={() => deleteProduct(p.id)} style={{ color: 'red', cursor: 'pointer' }}>Delete</button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}

      {/* ============ ORDERS TAB ============ */}
      {tab === 'orders' && (
        <div>
          <h2>All Orders ({orders.length})</h2>
          {orders.length === 0 && <p>No orders yet.</p>}
          {orders.map(order => (
            <div key={order.id} style={{
              border: '1px solid #e2e8f0', borderRadius: 8, padding: 16, marginBottom: 16
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8 }}>
                <div>
                  <strong>Order #{order.id}</strong> — {order.user_name} ({order.user_email})
                  <br />
                  <small>Type: {order.order_type} | Date: {order.created_at}</small>
                  <br />
                  <small>Total: £{order.total.toFixed(2)}</small>
                </div>
                <div>
                  <label>Status: </label>
                  <select
                    value={order.status}
                    onChange={e => updateStatus(order.id, e.target.value)}
                  >
                    <option value="confirmed">Confirmed</option>
                    <option value="dispatched">Dispatched</option>
                    <option value="delivered">Delivered</option>
                    <option value="collected">Collected</option>
                    <option value="cancelled">Cancelled</option>
                  </select>
                </div>
              </div>
              {order.items && order.items.length > 0 && (
                <ul style={{ marginTop: 8, paddingLeft: 20, fontSize: '0.85rem' }}>
                  {order.items.map((item, i) => (
                    <li key={i}>{item.product_name} x{item.quantity} — £{(item.price * item.quantity).toFixed(2)}</li>
                  ))}
                </ul>
              )}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default Admin;

Shop coursework walkthrough (React + Node + SQLite)

Project Structure

Setup Commands

Vagrant setup

Backend: package.json

Backend: database.js

Backend: server.js

Backend: seed.js

Backend: routes/products.js

Backend: routes/orders.js

Backend: routes/users.js

Backend: routes/admin.js

Frontend: package.json

Frontend: public/index.html

Frontend: src/index.js

Frontend: src/index.css

Frontend: src/App.js

Frontend: src/App.css

State Management: CartContext.js

State Management: UserContext.js

Component: Navbar.js

Component: ProductCard.js

Page: Home.js

Page: Products.js

Page: Deals.js

Page: OrderHistory.js

Page: Rewards.js

Page: Collection.js

Page: Delivery.js

Page: Login.js

Page: Admin.js + image helpers