Full-Stack Web Dev Tutorial: React, Node.js & SQLite

Project Structure

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

project/ ├── backend/ │ ├── package.json │ ├── database.js │ ├── server.js │ ├── seed.js │ └── routes/ │ ├── products.js │ ├── orders.js │ └── users.js └── frontend/ ├── package.json ├── public/ │ └── index.html └── src/ ├── index.js ├── index.css ├── App.js ├── App.css ├── context/ │ ├── CartContext.js │ └── UserContext.js ├── components/ │ ├── Navbar.js │ └── ProductCard.js └── pages/ ├── Home.js ├── Products.js ├── Deals.js ├── OrderHistory.js ├── Rewards.js ├── Collection.js ├── Delivery.js └── Login.js

Setup Commands

Run these terminal commands in order to get the project running.

Create the project folders: mkdir backend then mkdir frontend
Create the frontend with React: cd frontend then npx create-react-app . (or manually create package.json and run npm install)
Install backend dependencies: cd backend then npm install
Create the route folder: mkdir routes (inside backend)
Create all the files listed above and paste the code from each section below
Seed the database: cd backend then node seed.js
Start the backend: node server.js (runs on port 5000)
Start the frontend: cd frontend then npm start (runs on port 3000)

Demo login after seeding: john@email.com / password123

Backend: package.json

Dependencies: Express for the server, cors for cross-origin requests, sql.js for SQLite, bcryptjs for password hashing.

backend/package.json

{
  "name": "catalog-api-backend",
  "version": "1.0.0",
  "description": "Demo REST API for coursework",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "seed": "node seed.js"
  },
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "express": "^4.18.2",
    "sql.js": "^1.10.0"
  }
}

Backend: database.js

Sets up the SQLite database using sql.js. Creates a Statement wrapper class so we can use .prepare().all(), .get() and .run() methods. Also creates all 6 tables: users, products, deals, orders, order_items, and rewards.

backend/database.js

const initSqlJs = require('sql.js');
const fs = require('fs');
const path = require('path');

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

let db;

function save() {
  const data = db.export();
  fs.writeFileSync(DB_PATH, Buffer.from(data));
}

class Statement {
  constructor(sql) {
    this.sql = sql;
  }

  all(...params) {
    const stmt = db.prepare(this.sql);
    if (params.length) stmt.bind(params);
    const results = [];
    while (stmt.step()) {
      results.push(stmt.getAsObject());
    }
    stmt.free();
    return results;
  }

  get(...params) {
    const stmt = db.prepare(this.sql);
    if (params.length) stmt.bind(params);
    let result = null;
    if (stmt.step()) {
      result = stmt.getAsObject();
    }
    stmt.free();
    return result;
  }

  run(...params) {
    db.run(this.sql, params);
    const lastId = db.exec("SELECT last_insert_rowid() as id");
    const changes = db.exec("SELECT changes() as cnt");
    save();
    return {
      lastInsertRowid: lastId[0]?.values[0]?.[0] || 0,
      changes: changes[0]?.values[0]?.[0] || 0
    };
  }
}

const dbWrapper = {
  prepare(sql) {
    return new Statement(sql);
  },
  exec(sql) {
    db.run(sql);
    save();
  }
};

async function initDatabase() {
  const SQL = await initSqlJs();

  if (fs.existsSync(DB_PATH)) {
    const buffer = fs.readFileSync(DB_PATH);
    db = new SQL.Database(buffer);
  } else {
    db = new SQL.Database();
  }

  db.run(`
    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
    )
  `);

  db.run(`
    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
    )
  `);

  db.run(`
    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)
    )
  `);

  db.run(`
    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)
    )
  `);

  db.run(`
    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)
    )
  `);

  db.run(`
    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)
    )
  `);

  save();
  return dbWrapper;
}

function getDb() {
  return dbWrapper;
}

module.exports = { initDatabase, getDb };

Backend: server.js

Main entry point. Initializes the database asynchronously, then sets up Express with CORS and JSON middleware, mounts the API routes, and starts listening on port 5000.

backend/server.js

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

async function startServer() {
  await initDatabase();

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

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

  app.use(cors());
  app.use(express.json());

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

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

  app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
  });
}

startServer();

Backend: seed.js

Run with node seed.js to populate the database with sample products (37 items across 8 categories), deals, demo users, and order history.

backend/seed.js

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

async function seed() {
  await initDatabase();
  const db = getDb();

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

  const hashedPassword = bcrypt.hashSync('password123', 10);
  db.prepare('INSERT INTO users (name, email, password, reward_points) VALUES (?, ?, ?, ?)').run(
    'John Smith', 'john@email.com', hashedPassword, 250
  );
  db.prepare('INSERT INTO users (name, email, password, reward_points) VALUES (?, ?, ?, ?)').run(
    'Jane Doe', 'jane@email.com', hashedPassword, 180
  );

  const products = [
    ['LED Desk Lamp', 2.00, 'Electronics', '💡', 'Adjustable brightness desk lamp'],
    ['Wireless Mouse', 0.75, 'Electronics', '🖱️', 'Compact optical mouse'],
    ['USB-C Cable 2m', 0.55, 'Electronics', '🔌', 'Braided charging cable'],
    ['HD Webcam', 0.69, 'Electronics', '📷', '720p plug-and-play webcam'],
    ['Bluetooth Speaker Mini', 2.25, 'Electronics', '🔊', 'Portable rechargeable speaker'],
    ['Monitor Stand', 2.50, 'Electronics', '🖥️', 'Aluminium riser for monitors'],
    ['Mechanical Keyboard', 1.80, 'Electronics', '⌨️', 'Tactile switches, UK layout'],
    ['Laptop Sleeve 15"', 0.65, 'Electronics', '💼', 'Padded protective sleeve'],

    ['USB-C Hub 7-in-1', 3.50, 'Peripherals', '🔧', 'HDMI, USB-A, SD, power pass-through'],
    ['HDMI Cable 2m', 3.25, 'Peripherals', '📺', 'High-speed 4K capable'],
    ['External SSD 500GB', 4.00, 'Peripherals', '💾', 'USB 3.2 portable drive'],
    ['Docking Station', 2.75, 'Peripherals', '🔗', 'Laptop dock with display outputs'],
    ['Card Reader USB-C', 4.50, 'Peripherals', '🗂️', 'SD and microSD slots'],

    ['Desk Organizer Set', 1.45, 'Office', '📥', 'Mesh tray and pen cups'],
    ['Large Desk Pad', 2.50, 'Office', '📋', 'Non-slip desk mat'],
    ['Notebook 5-pack', 1.80, 'Office', '📓', 'A5 ruled notebooks'],
    ['Pen Set 12 Colours', 1.95, 'Office', '✏️', 'Gel pens assorted colours'],

    ['Printer Paper A4 500', 1.10, 'Stationery', '📄', '80gsm white copier paper'],
    ['Sticky Notes 6pk', 1.50, 'Stationery', '📝', 'Assorted sizes and colours'],
    ['Highlighter Set 4pk', 1.75, 'Stationery', '🖍️', 'Chisel tip highlighters'],
    ['Ring Binder A4', 0.85, 'Stationery', '📒', '2-ring mechanism, durable cover'],

    ['Blank DVDs 10pk', 1.20, 'Media', '💿', 'Writeable optical discs'],
    ['USB Flash Drive 32GB', 1.10, 'Media', '🔑', 'USB 3.0 swivel drive'],
    ['External HDD 1TB', 3.50, 'Media', '💽', 'Powered desktop hard drive'],
    ['SD Card 64GB', 1.85, 'Media', '📼', 'Class 10 UHS-I memory card'],

    ['Screen Protector 2pk', 1.55, 'Gadgets', '🛡️', 'Tempered glass universal size'],
    ['Phone Stand Foldable', 1.25, 'Gadgets', '📱', 'Adjustable aluminium stand'],
    ['Cable Ties 100pc', 2.30, 'Gadgets', '🔗', 'Reusable velcro ties'],
    ['Power Bank 10000mAh', 1.00, 'Gadgets', '🔋', 'Dual USB output portable charger'],

    ['Desk Fan USB', 2.50, 'Home', '🌀', 'Quiet 3-speed mini fan'],
    ['LED Strip 2m', 2.25, 'Home', '✨', 'RGB with remote control'],
    ['Air Purifier Mini', 2.75, 'Home', '🌬️', 'HEPA filter compact unit'],
    ['Cable Management Box', 1.00, 'Home', '📦', 'Hide power strips and cables'],

    ['Screen Cleaning Kit', 1.50, 'General', '🧽', 'Spray and microfibre cloth'],
    ['Microfibre Cloths 5pk', 2.00, 'General', '🧺', 'Lint-free cleaning cloths'],
    ['Precision Screwdriver Set', 1.25, 'General', '🪛', 'Torx and Phillips bits'],
    ['Storage Box Stackable', 1.75, 'General', '🗃️', 'Clear plastic with lid'],
  ];

  const insertProduct = db.prepare(
    'INSERT INTO products (name, price, category, image_url, description) VALUES (?, ?, ?, ?, ?)'
  );
  products.forEach(p => insertProduct.run(...p));

  const deals = [
    [2, 20, 0.60, 'Price Drop', '2025-01-01', '2025-12-31'],
    [9, 30, 2.45, 'Member Price', '2025-01-01', '2025-12-31'],
    [14, 15, 1.23, 'Weekly Offer', '2025-01-01', '2025-12-31'],
    [22, 25, 0.90, 'Price Drop', '2025-01-01', '2025-12-31'],
    [30, 50, 1.25, 'Half Price', '2025-01-01', '2025-12-31'],
    [26, 33, 1.04, '3 for 2', '2025-01-01', '2025-12-31'],
    [5, 20, 1.80, 'Member Price', '2025-01-01', '2025-12-31'],
    [16, 10, 1.62, 'Price Drop', '2025-01-01', '2025-12-31'],
  ];

  const insertDeal = db.prepare(
    'INSERT INTO deals (product_id, discount_percent, deal_price, description, start_date, end_date) VALUES (?, ?, ?, ?, ?, ?)'
  );
  deals.forEach(d => insertDeal.run(...d));

  const insertOrder = db.prepare(
    'INSERT INTO orders (user_id, total, status, order_type, delivery_address, store_location, slot_time, slot_date, created_at) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)'
  );
  const insertItem = db.prepare(
    'INSERT INTO order_items (order_id, product_id, quantity, price) VALUES (?, ?, ?, ?)'
  );
  const insertReward = db.prepare(
    'INSERT INTO rewards (user_id, points, type, description, created_at) VALUES (?, ?, ?, ?, ?)'
  );

  const o1 = insertOrder.run(1, 12.45, 'delivered', 'delivery', '42 Oak Street, London, SW1A 1AA', null, '10:00-12:00', '2025-03-15', '2025-03-15 09:30:00');
  insertItem.run(o1.lastInsertRowid, 1, 2, 2.00);
  insertItem.run(o1.lastInsertRowid, 14, 1, 1.45);
  insertItem.run(o1.lastInsertRowid, 18, 1, 1.10);
  insertItem.run(o1.lastInsertRowid, 9, 1, 3.50);
  insertReward.run(1, 12, 'earned', `Order #${o1.lastInsertRowid}`, '2025-03-15 09:30:00');

  const o2 = insertOrder.run(1, 8.75, 'collected', 'collection', null, 'Branch A — City Centre', '14:00-16:00', '2025-04-01', '2025-04-01 13:00:00');
  insertItem.run(o2.lastInsertRowid, 22, 2, 1.20);
  insertItem.run(o2.lastInsertRowid, 26, 1, 1.55);
  insertItem.run(o2.lastInsertRowid, 30, 1, 2.50);
  insertReward.run(1, 8, 'earned', `Order #${o2.lastInsertRowid}`, '2025-04-01 13:00:00');

  console.log('Database seeded successfully!');
  console.log('Demo login: john@email.com / password123');
}

seed();

Backend: routes/products.js

REST API routes for products. Supports filtering by category, searching by name, fetching categories, getting active deals (with a JOIN to the products table), and fetching a single product by ID.

backend/routes/products.js

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

router.get('/', (req, res) => {
  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 = db.prepare(sql).all(...params);
  res.json(products);
});

router.get('/categories', (req, res) => {
  const db = getDb();
  const rows = db.prepare('SELECT DISTINCT category FROM products ORDER BY category').all();
  res.json(rows.map(r => r.category));
});

router.get('/deals', (req, res) => {
  const db = getDb();
  const deals = db.prepare(`
    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
  `).all();
  res.json(deals);
});

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

  const deal = db.prepare('SELECT * FROM deals WHERE product_id = ?').get(product.id);
  res.json({ ...product, deal: deal || null });
});

module.exports = router;

Backend: routes/orders.js

Handles fetching a user's order history (with a JOIN to get item details) and creating new orders. When an order is placed, it calculates the total, inserts order items, and awards loyalty reward points (1 point per pound spent).

backend/routes/orders.js

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

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

  const enriched = orders.map(order => {
    const items = db.prepare(`
      SELECT oi.*, p.name, p.image_url
      FROM order_items oi
      JOIN products p ON oi.product_id = p.id
      WHERE oi.order_id = ?
    `).all(order.id);
    return { ...order, items };
  });

  res.json(enriched);
});

router.post('/', (req, res) => {
  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 = db.prepare(`
    INSERT INTO orders (user_id, total, order_type, delivery_address, store_location, slot_time, slot_date)
    VALUES (?, ?, ?, ?, ?, ?, ?)
  `).run(
    user_id, total, order_type,
    delivery_address || null, store_location || null,
    slot_time || null, slot_date || null
  );

  const orderId = result.lastInsertRowid;

  const insertItem = db.prepare(
    'INSERT INTO order_items (order_id, product_id, quantity, price) VALUES (?, ?, ?, ?)'
  );
  items.forEach(item => {
    insertItem.run(orderId, item.product_id, item.quantity, item.price);
  });

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

  res.status(201).json({ id: orderId, total, points_earned: points });
});

module.exports = router;

Backend: routes/users.js

User authentication routes (register and login with bcrypt password hashing), plus reward points endpoints for viewing history and redeeming points.

backend/routes/users.js

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

router.post('/register', (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' });
  }

  const hashed = bcrypt.hashSync(password, 10);

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

    const result = db.prepare(
      'INSERT INTO users (name, email, password) VALUES (?, ?, ?)'
    ).run(name, email, hashed);

    const user = db.prepare(
      'SELECT id, name, email, reward_points FROM users WHERE id = ?'
    ).get(result.lastInsertRowid);

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

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

  if (!user || !bcrypt.compareSync(password, user.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
  });
});

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

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

  res.json({ total_points: user.reward_points, history });
});

router.post('/:userId/rewards/redeem', (req, res) => {
  const db = getDb();
  const { points } = req.body;
  const user = db.prepare('SELECT reward_points FROM users WHERE id = ?').get(parseInt(req.params.userId));

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

  db.prepare('UPDATE users SET reward_points = reward_points - ? WHERE id = ?').run(points, parseInt(req.params.userId));
  db.prepare(
    "INSERT INTO rewards (user_id, points, type, description) VALUES (?, ?, 'redeemed', 'Redeemed for discount')"
  ).run(parseInt(req.params.userId), points);

  res.json({ message: 'Points redeemed', remaining: user.reward_points - points });
});

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": "catalog-demo-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>Catalog Demo</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

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';

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

Root component. Renders the Navbar, defines all Routes using React Router, and includes a footer.

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 './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 />} />
        </Routes>
      </main>
      <footer className="footer">
        <div className="footer-content">
          <div className="footer-section">
            <h4>Catalog Demo</h4>
            <p>Example full-stack coursework project.</p>
          </div>
          <div className="footer-section">
            <h4>Quick Links</h4>
            <p>Products | Deals | Rewards</p>
          </div>
          <div className="footer-section">
            <h4>Contact</h4>
            <p>support@example.com</p>
          </div>
        </div>
        <div className="footer-bottom">
          <p>© 2025 Demo project. All rights reserved.</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

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

const CartContext = createContext();

export function CartProvider({ children }) {
  const [cartItems, setCartItems] = useState([]);

  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

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

const UserContext = createContext();

export function UserProvider({ children }) {
  const [user, setUser] = useState(() => {
    const saved = localStorage.getItem('catalogdemo_session');
    return saved ? JSON.parse(saved) : null;
  });

  useEffect(() => {
    if (user) {
      localStorage.setItem('catalogdemo_session', JSON.stringify(user));
    } else {
      localStorage.removeItem('catalogdemo_session');
    }
  }, [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, 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

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();

  const isActive = (path) => location.pathname === path ? 'active' : '';

  return (
    <>
      <nav className="navbar">
        <div className="navbar-content">
          <Link to="/" className="navbar-logo">
            🛒 Catalog<span>Demo</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>}
          </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

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

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>Welcome to Catalog Demo</h1>
        <p>Browse the catalog with delivery or pickup checkout flows</p>
        <Link to="/products" className="hero-btn">Browse catalog</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

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

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

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 catalog</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

Shows the user's loyalty points balance, points value in pounds, a redeem button (when 100+ points), and a full history of earned/redeemed points.

frontend/src/pages/Rewards.js

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

    if (res.ok) {
      const data = await res.json();
      setRewardsData(prev => ({
        ...prev,
        total_points: data.remaining,
        history: [
          { id: Date.now(), points, type: 'redeemed', description: 'Redeemed for discount', 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>🎉 Your Rewards</h1>
        <div className="rewards-points">{rewardsData?.total_points || 0}</div>
        <p className="rewards-value">
          Points worth £{((rewardsData?.total_points || 0) / 100).toFixed(2)} in vouchers
        </p>
        {rewardsData?.total_points >= 100 && (
          <button
            onClick={() => handleRedeem(100)}
            style={{
              marginTop: 16, background: '#333', color: '#ffd700',
              padding: '12px 24px', borderRadius: 8, fontWeight: 700, border: 'none', cursor: 'pointer'
            }}
          >
            Redeem 100 Points (£1.00 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 catalog</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. User selects a branch from a dropdown, picks a date and time slot, reviews the order summary, and submits. Success screen shows confirmation and loyalty points.

frontend/src/pages/Collection.js

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';

const stores = [
  'Branch A — City Centre',
  'Branch B — Riverside',
  'Branch C — Tech Park',
  'Branch D — Mall',
  'Branch E — North',
  'Branch F — South'
];

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();

  const [store, setStore] = 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 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,
        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 catalog</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}<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>

          <div className="form-group">
            <label>Select branch</label>
            <select value={store} onChange={e => setStore(e.target.value)} required>
              <option value="">Choose a branch...</option>
              {stores.map(s => (
                <option key={s} value={s}>{s}</option>
              ))}
            </select>
          </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={!store || !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

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 catalog</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

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();

  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;

Full-Stack Web Development Tutorial: Sample Catalog App

Project Structure

Setup Commands

Backend: package.json

Backend: database.js

Backend: server.js

Backend: seed.js

Backend: routes/products.js

Backend: routes/orders.js

Backend: routes/users.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