DEV Community: smith

Build a Full E-Commerce App with Flask & React (Complete Guide) ver 2

smith — Tue, 21 Apr 2026 12:20:47 +0000

🛒 Build a Full E-Commerce App with Flask & React (Complete Tutorial)

In this tutorial, you’ll build a full working e-commerce system with:

Flask REST API backend (__init__.py)
React + Vite frontend
SQLite database
User authentication
Editable user accounts
Order system
Cart (localStorage)
VAT support (UK 20%)
JSON API responses in browser

📁 Project Structure

ecommerce/
├── backend/
│   └── __init__.py
├── shop.db
└── frontend/
    ├── index.html
    └── src/
        ├── api.js
        ├── main.jsx
        ├── App.jsx
        └── pages/
            ├── Home.jsx
            ├── Shop.jsx
            ├── Cart.jsx
            ├── Account.jsx
            ├── Orders.jsx
            └── Admin.jsx

⚙️ Backend Setup (Flask)

Install dependencies

bash pip install flask flask-cors bcrypt

backend/init.py

`python
from flask import Flask, request, jsonify
from flask_cors import CORS
import sqlite3
import bcrypt
from datetime import datetime

VAT = 0.20

def create_app():
app = Flask(name)
CORS(app)

def db():
    conn = sqlite3.connect("shop.db")
    conn.row_factory = sqlite3.Row
    return conn

def init_db():
    conn = db()

    conn.executescript("""
    CREATE TABLE IF NOT EXISTS users (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        username TEXT,
        email TEXT UNIQUE,
        password TEXT,
        first_name TEXT,
        last_name TEXT,
        role TEXT DEFAULT 'user',
        account_created TEXT,
        last_login TEXT
    );

    CREATE TABLE IF NOT EXISTS products (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        name TEXT,
        description TEXT,
        price REAL,
        stock INTEGER
    );

    CREATE TABLE IF NOT EXISTS orders (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        user_id INTEGER,
        username TEXT,
        total REAL,
        created_at TEXT
    );

    CREATE TABLE IF NOT EXISTS order_items (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        order_id INTEGER,
        product_name TEXT,
        product_desc TEXT,
        qty INTEGER,
        price REAL,
        vat_price REAL
    );
    """)

    conn.commit()
    conn.close()

init_db()

@app.route("/")
def home():
    return jsonify({"status": "API running"})

# ───────── AUTH ─────────
@app.route("/register", methods=["POST"])
def register():
    d = request.json
    hashed = bcrypt.hashpw(d["password"].encode(), bcrypt.gensalt())

    conn = db()
    conn.execute("""
        INSERT INTO users(username, email, password, account_created)
        VALUES (?, ?, ?, ?)
    """, (d["username"], d["email"], hashed.decode(), datetime.now().isoformat()))
    conn.commit()
    conn.close()

    return jsonify({"msg": "registered"})

@app.route("/login", methods=["POST"])
def login():
    d = request.json
    conn = db()

    user = conn.execute(
        "SELECT * FROM users WHERE email=?",
        (d["email"],)
    ).fetchone()

    if not user:
        return jsonify({"error": "not found"}), 404

    if not bcrypt.checkpw(d["password"].encode(), user["password"].encode()):
        return jsonify({"error": "wrong password"}), 401

    conn.execute(
        "UPDATE users SET last_login=? WHERE id=?",
        (datetime.now().isoformat(), user["id"])
    )

    conn.commit()
    conn.close()

    return jsonify({
        "user_id": user["id"],
        "username": user["username"],
        "role": user["role"]
    })

# ───────── PRODUCTS ─────────
@app.route("/products")
def products():
    conn = db()
    rows = conn.execute("SELECT * FROM products").fetchall()
    conn.close()
    return jsonify([dict(r) for r in rows])

# ───────── VAT FUNCTION ─────────
def vat(price):
    return round(price * (1 + VAT), 2)

# ───────── CHECKOUT ─────────
@app.route("/checkout", methods=["POST"])
def checkout():
    d = request.json
    conn = db()

    user = conn.execute(
        "SELECT username FROM users WHERE id=?",
        (d["user_id"],)
    ).fetchone()

    total = 0

    for item in d["cart"]:
        p = conn.execute(
            "SELECT * FROM products WHERE id=?",
            (item["id"],)
        ).fetchone()

        total += p["price"] * item["qty"]

    cur = conn.cursor()

    cur.execute("""
        INSERT INTO orders(user_id, username, total, created_at)
        VALUES (?, ?, ?, ?)
    """, (d["user_id"], user["username"], total, datetime.now().isoformat()))

    order_id = cur.lastrowid

    for item in d["cart"]:
        p = conn.execute(
            "SELECT * FROM products WHERE id=?",
            (item["id"],)
        ).fetchone()

        conn.execute("""
            INSERT INTO order_items(
                order_id, product_name,
                product_desc, qty,
                price, vat_price
            )
            VALUES (?, ?, ?, ?, ?, ?)
        """, (
            order_id,
            p["name"],
            p["description"],
            item["qty"],
            p["price"],
            vat(p["price"])
        ))

    conn.commit()
    conn.close()

    return jsonify({"msg": "order created"})

# ───────── USER ACCOUNT ─────────
@app.route("/me")
def me():
    user_id = request.args.get("user_id")

    conn = db()
    user = conn.execute(
        "SELECT * FROM users WHERE id=?",
        (user_id,)
    ).fetchone()

    conn.close()
    return jsonify(dict(user))

@app.route("/me", methods=["PUT"])
def update_me():
    d = request.json

    conn = db()
    conn.execute("""
        UPDATE users
        SET username=?, first_name=?, last_name=?
        WHERE id=?
    """, (d["username"], d["first_name"], d["last_name"], d["user_id"]))

    conn.commit()
    conn.close()

    return jsonify({"msg": "updated"})

# ───────── ORDERS ─────────
@app.route("/me/orders")
def my_orders():
    user_id = request.args.get("user_id")

    conn = db()

    orders = conn.execute(
        "SELECT * FROM orders WHERE user_id=?",
        (user_id,)
    ).fetchall()

    result = []

    for o in orders:
        items = conn.execute(
            "SELECT * FROM order_items WHERE order_id=?",
            (o["id"],)
        ).fetchall()

        result.append({
            "order": dict(o),
            "items": [dict(i) for i in items]
        })

    conn.close()
    return jsonify(result)

return app

app = create_app()

if name == "main":
app.run(debug=True)
`

🌐 Frontend Setup (React + Vite)

src/api.js

js export const API = "http://127.0.0.1:5000";

src/main.jsx

`jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

ReactDOM.createRoot(document.getElementById("root")).render();
`

src/App.jsx

`jsx
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

import Home from "./pages/Home";
import Shop from "./pages/Shop";
import Cart from "./pages/Cart";
import Account from "./pages/Account";
import Orders from "./pages/Orders";
import Admin from "./pages/Admin";

export default function App() {
const user = JSON.parse(localStorage.getItem("user") || "{}");

return (

Home |
Shop |
Cart |
Account |
Orders |
{user.role === "admin" && Admin}

  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/shop" element={<Shop />} />
    <Route path="/cart" element={<Cart />} />
    <Route path="/account" element={<Account />} />
    <Route path="/orders" element={<Orders />} />
    <Route path="/admin" element={<Admin />} />
  </Routes>
</BrowserRouter>

);
}
`

📄 Pages

Home.jsx

jsx export default function Home() { return <h1>Welcome to the Store 🛒</h1>; }

Shop.jsx

`jsx
import { useEffect, useState } from "react";
import { API } from "../api";

export default function Shop() {
const [products, setProducts] = useState([]);

useEffect(() => {
fetch(API + "/products")
.then(r => r.json())
.then(setProducts);
}, []);

const add = (p) => {
const cart = JSON.parse(localStorage.getItem("cart") || "[]");
const found = cart.find(i => i.id === p.id);

if (found) found.qty++;
else cart.push({ ...p, qty: 1 });

localStorage.setItem("cart", JSON.stringify(cart));

};

return (

{products.map(p => (

{p.name}

add(p)}>Add to Cart

))}

);
}
`

Cart.jsx

`jsx
import { API } from "../api";

export default function Cart() {
const cart = JSON.parse(localStorage.getItem("cart") || "[]");
const user = JSON.parse(localStorage.getItem("user") || "{}");

const checkout = async () => {
await fetch(API + "/checkout", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ user_id: user.user_id, cart })
});

localStorage.removeItem("cart");
alert("Order placed");

};

return (

{cart.map(i => (

{i.name} x{i.qty}

))}
Checkout

);
}
`

Account.jsx (EDIT USER)

`jsx
import { useEffect, useState } from "react";
import { API } from "../api";

export default function Account() {
const user = JSON.parse(localStorage.getItem("user") || "{}");
const [form, setForm] = useState({});

useEffect(() => {
fetch(API + "/me?user_id=" + user.user_id)
.then(r => r.json())
.then(setForm);
}, []);

const save = async () => {
await fetch(API + "/me", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ...form, user_id: user.user_id })
});

alert("Saved");

};

return (

setForm({ ...form, username: e.target.value })} />
setForm({ ...form, first_name: e.target.value })} />
setForm({ ...form, last_name: e.target.value })} />
Save

);
}
`

Orders.jsx

`jsx
import { useEffect, useState } from "react";
import { API } from "../api";

export default function Orders() {
const user = JSON.parse(localStorage.getItem("user") || "{}");
const [orders, setOrders] = useState([]);

useEffect(() => {
fetch(API + "/me/orders?user_id=" + user.user_id)
.then(r => r.json())
.then(setOrders);
}, []);

return (

{orders.map(o => (

Order #{o.order.id}

{o.items.map(i => (

{i.product_name} x{i.qty}

))}

))}

);
}
`

Admin.jsx

jsx export default function Admin() { return <h1>Admin Panel</h1>; }

✅ DONE

You now have a complete working full-stack e-commerce system:

✔ Flask API backend
✔ React frontend
✔ Account editing
✔ Order history
✔ Cart system
✔ VAT pricing
✔ JSON API in browser
✔ Clean file structure

Build a Full E-Commerce App with Flask & React (Complete Guide)

smith — Tue, 21 Apr 2026 08:17:29 +0000

By the end of this tutorial you will have a working full-stack e-commerce application with:

A Flask REST API (products, auth, orders, admin)
A React + Vite frontend (shop, cart, account, orders, admin dashboard)
bcrypt password hashing
SQLite database (zero config, runs locally)
A cart persisted in localStorage

No prior Flask or React experience is assumed, but you should be comfortable running commands in a terminal.

Project Structure
Backend — Flask
- Install & bootstrap
- Database setup
- Auth routes
- Product routes
- Checkout & orders
- Admin routes
- Full backend code
Frontend — React + Vite
- Create the project
- App shell
- Pages
- Full frontend code
Running the app
Security checklist before going live

Project Structure

ecommerce/
├── app.py              ← entire Flask backend
├── shop.db             ← SQLite DB (auto-created on first run)
└── frontend/
    ├── index.html
    └── src/
        ├── api.js
        ├── main.jsx
        ├── App.jsx
        └── pages/
            ├── Home.jsx
            ├── Shop.jsx
            ├── Cart.jsx
            ├── Account.jsx
            ├── Orders.jsx
            └── Admin.jsx

Backend — Flask

Install & bootstrap

pip install flask flask-cors bcrypt

Create app.py and add the imports and app object:

from flask import Flask, request, jsonify
from flask_cors import CORS
import sqlite3
import bcrypt
from datetime import datetime

app = Flask(__name__)
CORS(app)  # allows the React dev server (different port) to call the API

DB = "shop.db"

flask-cors is required because the React dev server runs on localhost:5173 while Flask runs on localhost:5000 — the browser blocks cross-origin requests unless the server sends the right headers.

Database setup

SQLite creates the file automatically. The helper db() returns a connection with row_factory set so rows behave like dictionaries.

def db():
    conn = sqlite3.connect(DB)
    conn.row_factory = sqlite3.Row
    return conn


def init_db():
    conn = db()
    cur = conn.cursor()

    cur.execute("""
    CREATE TABLE IF NOT EXISTS users (
        id         INTEGER PRIMARY KEY AUTOINCREMENT,
        username   TEXT,
        email      TEXT UNIQUE,
        password   TEXT,
        first_name TEXT,
        last_name  TEXT,
        role       TEXT DEFAULT 'user'
    )""")

    cur.execute("""
    CREATE TABLE IF NOT EXISTS products (
        id    INTEGER PRIMARY KEY AUTOINCREMENT,
        name  TEXT,
        price REAL,
        stock INTEGER,
        image TEXT
    )""")

    cur.execute("""
    CREATE TABLE IF NOT EXISTS orders (
        id         INTEGER PRIMARY KEY AUTOINCREMENT,
        user_id    INTEGER,
        total      REAL,
        status     TEXT DEFAULT 'pending',
        created_at TEXT
    )""")

    cur.execute("""
    CREATE TABLE IF NOT EXISTS order_items (
        id         INTEGER PRIMARY KEY AUTOINCREMENT,
        order_id   INTEGER,
        product_id INTEGER,
        qty        INTEGER,
        price      REAL
    )""")

    conn.commit()
    conn.close()


init_db()

Table	What it stores
`users`	Accounts with hashed passwords and a `role` field (`user` or `admin`)
`products`	Catalogue — name, price, stock count, image URL
`orders`	One row per placed order, linked to a user
`order_items`	Line items (product, quantity, price snapshot at time of order)

Auth routes

`POST /register`

The password is hashed with bcrypt before it ever reaches the database. Parameterised queries (?) protect against SQL injection.

@app.route("/register", methods=["POST"])
def register():
    d = request.json
    hashed = bcrypt.hashpw(d["password"].encode(), bcrypt.gensalt())

    conn = db()
    conn.execute("""
        INSERT INTO users(username, email, password, first_name, last_name)
        VALUES (?, ?, ?, ?, ?)
    """, (d["username"], d["email"], hashed.decode(), d["first_name"], d["last_name"]))
    conn.commit()
    conn.close()

    return jsonify({"msg": "registered"})

`POST /login`

bcrypt.checkpw compares the plain-text input against the stored hash. The API returns user_id, username, and role — the frontend stores this in localStorage.

@app.route("/login", methods=["POST"])
def login():
    d = request.json

    conn = db()
    user = conn.execute("SELECT * FROM users WHERE email=?", (d["email"],)).fetchone()
    conn.close()

    if not user:
        return jsonify({"error": "not found"}), 404

    if not bcrypt.checkpw(d["password"].encode(), user["password"].encode()):
        return jsonify({"error": "wrong password"}), 401

    return jsonify({
        "user_id": user["id"],
        "username": user["username"],
        "role": user["role"]
    })

Product routes

# List all products
@app.route("/products", methods=["GET"])
def get_products():
    conn = db()
    rows = conn.execute("SELECT * FROM products").fetchall()
    conn.close()
    return jsonify([dict(r) for r in rows])


# Add a product (should be admin-only in production)
@app.route("/products", methods=["POST"])
def add_product():
    d = request.json
    conn = db()
    conn.execute("""
        INSERT INTO products(name, price, stock, image)
        VALUES (?, ?, ?, ?)
    """, (d["name"], d["price"], d["stock"], d["image"]))
    conn.commit()
    conn.close()
    return jsonify({"msg": "added"})


# Delete a product (should be admin-only in production)
@app.route("/products/<int:pid>", methods=["DELETE"])
def delete_product(pid):
    conn = db()
    conn.execute("DELETE FROM products WHERE id=?", (pid,))
    conn.commit()
    conn.close()
    return jsonify({"msg": "deleted"})

Checkout & orders

The checkout endpoint validates stock before writing anything, then creates the order, writes line items, and decrements stock in one commit.

@app.route("/checkout", methods=["POST"])
def checkout():
    d = request.json
    user_id = d["user_id"]
    cart    = d["cart"]

    conn  = db()
    total = 0

    # Validate stock first — fail before writing anything
    for item in cart:
        p = conn.execute("SELECT * FROM products WHERE id=?", (item["id"],)).fetchone()
        if p["stock"] < item["qty"]:
            return jsonify({"error": "out of stock"}), 400
        total += p["price"] * item["qty"]

    cur = conn.cursor()
    cur.execute("""
        INSERT INTO orders(user_id, total, created_at)
        VALUES (?, ?, ?)
    """, (user_id, total, datetime.now().isoformat()))
    order_id = cur.lastrowid

    for item in cart:
        conn.execute("""
            INSERT INTO order_items(order_id, product_id, qty, price)
            VALUES (?, ?, ?, ?)
        """, (order_id, item["id"], item["qty"], item["price"]))

        conn.execute("""
            UPDATE products SET stock = stock - ? WHERE id=?
        """, (item["qty"], item["id"]))

    conn.commit()
    conn.close()
    return jsonify({"msg": "order created"})


# Order history for a single user
@app.route("/orders/<int:user_id>")
def user_orders(user_id):
    conn   = db()
    orders = conn.execute("SELECT * FROM orders WHERE user_id=?", (user_id,)).fetchall()
    result = []

    for o in orders:
        items = conn.execute(
            "SELECT * FROM order_items WHERE order_id=?", (o["id"],)
        ).fetchall()
        result.append({"order": dict(o), "items": [dict(i) for i in items]})

    conn.close()
    return jsonify(result)

Admin routes

# All orders
@app.route("/admin/orders")
def admin_orders():
    conn   = db()
    orders = conn.execute("SELECT * FROM orders").fetchall()
    result = []

    for o in orders:
        items = conn.execute(
            "SELECT * FROM order_items WHERE order_id=?", (o["id"],)
        ).fetchall()
        result.append({"order": dict(o), "items": [dict(i) for i in items]})

    conn.close()
    return jsonify(result)


# Update order status
@app.route("/admin/orders/<int:oid>", methods=["PUT"])
def update_order(oid):
    d = request.json
    conn = db()
    conn.execute("UPDATE orders SET status=? WHERE id=?", (d["status"], oid))
    conn.commit()
    conn.close()
    return jsonify({"msg": "updated"})


# Delete an order and its line items
@app.route("/admin/orders/<int:oid>", methods=["DELETE"])
def delete_order(oid):
    conn = db()
    conn.execute("DELETE FROM order_items WHERE order_id=?", (oid,))
    conn.execute("DELETE FROM orders WHERE id=?", (oid,))
    conn.commit()
    conn.close()
    return jsonify({"msg": "deleted"})

Full backend code

Here is app.py in its entirety — copy this into a new file and run python app.py.

from flask import Flask, request, jsonify
from flask_cors import CORS
import sqlite3
import bcrypt
from datetime import datetime

app = Flask(__name__)
CORS(app)

DB = "shop.db"


# ── Database ──────────────────────────────────────────────────────────────────

def db():
    conn = sqlite3.connect(DB)
    conn.row_factory = sqlite3.Row
    return conn


def init_db():
    conn = db()
    cur  = conn.cursor()

    cur.execute("""
    CREATE TABLE IF NOT EXISTS users (
        id         INTEGER PRIMARY KEY AUTOINCREMENT,
        username   TEXT,
        email      TEXT UNIQUE,
        password   TEXT,
        first_name TEXT,
        last_name  TEXT,
        role       TEXT DEFAULT 'user'
    )""")

    cur.execute("""
    CREATE TABLE IF NOT EXISTS products (
        id    INTEGER PRIMARY KEY AUTOINCREMENT,
        name  TEXT,
        price REAL,
        stock INTEGER,
        image TEXT
    )""")

    cur.execute("""
    CREATE TABLE IF NOT EXISTS orders (
        id         INTEGER PRIMARY KEY AUTOINCREMENT,
        user_id    INTEGER,
        total      REAL,
        status     TEXT DEFAULT 'pending',
        created_at TEXT
    )""")

    cur.execute("""
    CREATE TABLE IF NOT EXISTS order_items (
        id         INTEGER PRIMARY KEY AUTOINCREMENT,
        order_id   INTEGER,
        product_id INTEGER,
        qty        INTEGER,
        price      REAL
    )""")

    conn.commit()
    conn.close()


init_db()


# ── Auth ──────────────────────────────────────────────────────────────────────

@app.route("/register", methods=["POST"])
def register():
    d      = request.json
    hashed = bcrypt.hashpw(d["password"].encode(), bcrypt.gensalt())

    conn = db()
    conn.execute("""
        INSERT INTO users(username, email, password, first_name, last_name)
        VALUES (?, ?, ?, ?, ?)
    """, (d["username"], d["email"], hashed.decode(), d["first_name"], d["last_name"]))
    conn.commit()
    conn.close()

    return jsonify({"msg": "registered"})


@app.route("/login", methods=["POST"])
def login():
    d = request.json

    conn = db()
    user = conn.execute("SELECT * FROM users WHERE email=?", (d["email"],)).fetchone()
    conn.close()

    if not user:
        return jsonify({"error": "not found"}), 404

    if not bcrypt.checkpw(d["password"].encode(), user["password"].encode()):
        return jsonify({"error": "wrong password"}), 401

    return jsonify({
        "user_id":  user["id"],
        "username": user["username"],
        "role":     user["role"]
    })


# ── Products ──────────────────────────────────────────────────────────────────

@app.route("/products", methods=["GET"])
def get_products():
    conn = db()
    rows = conn.execute("SELECT * FROM products").fetchall()
    conn.close()
    return jsonify([dict(r) for r in rows])


@app.route("/products", methods=["POST"])
def add_product():
    d = request.json
    conn = db()
    conn.execute("""
        INSERT INTO products(name, price, stock, image)
        VALUES (?, ?, ?, ?)
    """, (d["name"], d["price"], d["stock"], d["image"]))
    conn.commit()
    conn.close()
    return jsonify({"msg": "added"})


@app.route("/products/<int:pid>", methods=["DELETE"])
def delete_product(pid):
    conn = db()
    conn.execute("DELETE FROM products WHERE id=?", (pid,))
    conn.commit()
    conn.close()
    return jsonify({"msg": "deleted"})


# ── Checkout & orders ─────────────────────────────────────────────────────────

@app.route("/checkout", methods=["POST"])
def checkout():
    d       = request.json
    user_id = d["user_id"]
    cart    = d["cart"]

    conn  = db()
    total = 0

    for item in cart:
        p = conn.execute("SELECT * FROM products WHERE id=?", (item["id"],)).fetchone()
        if p["stock"] < item["qty"]:
            return jsonify({"error": "out of stock"}), 400
        total += p["price"] * item["qty"]

    cur = conn.cursor()
    cur.execute("""
        INSERT INTO orders(user_id, total, created_at)
        VALUES (?, ?, ?)
    """, (user_id, total, datetime.now().isoformat()))
    order_id = cur.lastrowid

    for item in cart:
        conn.execute("""
            INSERT INTO order_items(order_id, product_id, qty, price)
            VALUES (?, ?, ?, ?)
        """, (order_id, item["id"], item["qty"], item["price"]))

        conn.execute("""
            UPDATE products SET stock = stock - ? WHERE id=?
        """, (item["qty"], item["id"]))

    conn.commit()
    conn.close()
    return jsonify({"msg": "order created"})


@app.route("/orders/<int:user_id>")
def user_orders(user_id):
    conn   = db()
    orders = conn.execute("SELECT * FROM orders WHERE user_id=?", (user_id,)).fetchall()
    result = []

    for o in orders:
        items = conn.execute(
            "SELECT * FROM order_items WHERE order_id=?", (o["id"],)
        ).fetchall()
        result.append({"order": dict(o), "items": [dict(i) for i in items]})

    conn.close()
    return jsonify(result)


# ── Admin ─────────────────────────────────────────────────────────────────────

@app.route("/admin/orders")
def admin_orders():
    conn   = db()
    orders = conn.execute("SELECT * FROM orders").fetchall()
    result = []

    for o in orders:
        items = conn.execute(
            "SELECT * FROM order_items WHERE order_id=?", (o["id"],)
        ).fetchall()
        result.append({"order": dict(o), "items": [dict(i) for i in items]})

    conn.close()
    return jsonify(result)


@app.route("/admin/orders/<int:oid>", methods=["PUT"])
def update_order(oid):
    d = request.json
    conn = db()
    conn.execute("UPDATE orders SET status=? WHERE id=?", (d["status"], oid))
    conn.commit()
    conn.close()
    return jsonify({"msg": "updated"})


@app.route("/admin/orders/<int:oid>", methods=["DELETE"])
def delete_order(oid):
    conn = db()
    conn.execute("DELETE FROM order_items WHERE order_id=?", (oid,))
    conn.execute("DELETE FROM orders WHERE id=?", (oid,))
    conn.commit()
    conn.close()
    return jsonify({"msg": "deleted"})


# ── Run ───────────────────────────────────────────────────────────────────────

app.run(debug=True)

Frontend — React + Vite

Create the project

npm create vite@latest frontend
cd frontend
npm install
npm install react-router-dom
npm run dev

The dev server starts on http://localhost:5173.

App shell

`src/api.js`

One place to change if you deploy the backend to a real server.

export const API = "http://127.0.0.1:5000";

`src/main.jsx`

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

`src/App.jsx`

Sets up the router. The Admin link is only rendered when the stored user has role === "admin".

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home    from "./pages/Home.jsx";
import Shop    from "./pages/Shop.jsx";
import Cart    from "./pages/Cart.jsx";
import Account from "./pages/Account.jsx";
import Orders  from "./pages/Orders.jsx";
import Admin   from "./pages/Admin.jsx";

export default function App() {
  const user = JSON.parse(localStorage.getItem("user") || "{}");

  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>{" | "}
        <Link to="/shop">Shop</Link>{" | "}
        <Link to="/cart">Cart</Link>{" | "}
        <Link to="/account">Account</Link>{" | "}
        <Link to="/orders">Orders</Link>{" | "}
        {user.role === "admin" && <Link to="/admin">Admin</Link>}
      </nav>

      <Routes>
        <Route path="/"       element={<Home />} />
        <Route path="/shop"   element={<Shop />} />
        <Route path="/cart"   element={<Cart />} />
        <Route path="/account" element={<Account />} />
        <Route path="/orders" element={<Orders />} />
        <Route path="/admin"  element={<Admin />} />
      </Routes>
    </BrowserRouter>
  );
}

Pages

`src/pages/Home.jsx`

export default function Home() {
  return (
    <div>
      <h1>Welcome Store</h1>
      <p>Best products online</p>
    </div>
  );
}

`src/pages/Shop.jsx`

Fetches products on mount. "Add to cart" pushes into localStorage, incrementing qty if the item already exists.

import { useEffect, useState } from "react";
import { API } from "../api";

export default function Shop() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch(API + "/products")
      .then(r => r.json())
      .then(setProducts);
  }, []);

  const add = (p) => {
    const cart  = JSON.parse(localStorage.getItem("cart") || "[]");
    const found = cart.find(i => i.id === p.id);
    if (found) found.qty++;
    else cart.push({ ...p, qty: 1 });
    localStorage.setItem("cart", JSON.stringify(cart));
  };

  return (
    <div>
      {products.map(p => (
        <div key={p.id}>
          <h3>{p.name} — £{p.price}</h3>
          <p>In stock: {p.stock}</p>
          <button onClick={() => add(p)}>Add to cart</button>
        </div>
      ))}
    </div>
  );
}

`src/pages/Cart.jsx`

Reads the cart from localStorage, displays items, and sends the full cart to POST /checkout. The cart is wiped from storage after a successful order.

import { API } from "../api";

export default function Cart() {
  const cart = JSON.parse(localStorage.getItem("cart") || "[]");
  const user = JSON.parse(localStorage.getItem("user") || "{}");

  const checkout = async () => {
    const res = await fetch(API + "/checkout", {
      method:  "POST",
      headers: { "Content-Type": "application/json" },
      body:    JSON.stringify({ user_id: user.user_id, cart })
    });

    const data = await res.json();

    if (res.ok) {
      localStorage.removeItem("cart");
      alert("Order placed!");
    } else {
      alert(data.error);
    }
  };

  if (cart.length === 0) return <p>Your cart is empty.</p>;

  return (
    <div>
      {cart.map(i => (
        <div key={i.id}>
          {i.name} x{i.qty} — £{(i.price * i.qty).toFixed(2)}
        </div>
      ))}
      <button onClick={checkout}>Checkout</button>
    </div>
  );
}

`src/pages/Account.jsx`

Handles login. The API response is stored in localStorage so user_id and role persist across page loads.

import { useState } from "react";
import { API } from "../api";

export default function Account() {
  const [email,    setEmail]    = useState("");
  const [password, setPassword] = useState("");
  const [msg,      setMsg]      = useState("");

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

    if (res.ok) {
      localStorage.setItem("user", JSON.stringify(data));
      setMsg("Logged in as " + data.username);
    } else {
      setMsg(data.error);
    }
  };

  return (
    <div>
      <h2>Login</h2>
      <input
        type="email"
        placeholder="Email"
        onChange={e => setEmail(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        onChange={e => setPassword(e.target.value)}
      />
      <button onClick={login}>Login</button>
      {msg && <p>{msg}</p>}
    </div>
  );
}

`src/pages/Orders.jsx`

Fetches the logged-in user's order history using their stored user_id.

import { useEffect, useState } from "react";
import { API } from "../api";

export default function Orders() {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    const user = JSON.parse(localStorage.getItem("user") || "{}");
    if (!user.user_id) return;

    fetch(API + "/orders/" + user.user_id)
      .then(r => r.json())
      .then(setOrders);
  }, []);

  if (orders.length === 0) return <p>No orders yet.</p>;

  return (
    <div>
      {orders.map(o => (
        <div key={o.order.id}>
          <strong>Order #{o.order.id}</strong> — £{o.order.total.toFixed(2)} — {o.order.status}
          <ul>
            {o.items.map(i => (
              <li key={i.id}>Product #{i.product_id} × {i.qty}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

`src/pages/Admin.jsx`

Fetches all orders. Admins can mark an order as "shipped" or delete it. In production this page should be behind a route guard that checks role.

import { useEffect, useState } from "react";
import { API } from "../api";

export default function Admin() {
  const [orders, setOrders] = useState([]);

  const load = () =>
    fetch(API + "/admin/orders")
      .then(r => r.json())
      .then(setOrders);

  useEffect(() => { load(); }, []);

  const update = async (id, status) => {
    await fetch(API + "/admin/orders/" + id, {
      method:  "PUT",
      headers: { "Content-Type": "application/json" },
      body:    JSON.stringify({ status })
    });
    load();
  };

  const del = async (id) => {
    await fetch(API + "/admin/orders/" + id, { method: "DELETE" });
    load();
  };

  return (
    <div>
      <h2>All Orders</h2>
      {orders.map(o => (
        <div key={o.order.id} style={{ marginBottom: "1rem", borderBottom: "1px solid #ccc" }}>
          <strong>Order #{o.order.id}</strong> — £{o.order.total.toFixed(2)} — {o.order.status}
          <ul>
            {o.items.map(i => (
              <li key={i.id}>Product #{i.product_id} × {i.qty}</li>
            ))}
          </ul>
          <button onClick={() => update(o.order.id, "shipped")}>Mark shipped</button>{" "}
          <button onClick={() => del(o.order.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

Full frontend code

All files together for easy copying.

src/api.js

export const API = "http://127.0.0.1:5000";

src/main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

src/App.jsx

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import Home    from "./pages/Home.jsx";
import Shop    from "./pages/Shop.jsx";
import Cart    from "./pages/Cart.jsx";
import Account from "./pages/Account.jsx";
import Orders  from "./pages/Orders.jsx";
import Admin   from "./pages/Admin.jsx";

export default function App() {
  const user = JSON.parse(localStorage.getItem("user") || "{}");

  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>{" | "}
        <Link to="/shop">Shop</Link>{" | "}
        <Link to="/cart">Cart</Link>{" | "}
        <Link to="/account">Account</Link>{" | "}
        <Link to="/orders">Orders</Link>{" | "}
        {user.role === "admin" && <Link to="/admin">Admin</Link>}
      </nav>
      <Routes>
        <Route path="/"        element={<Home />} />
        <Route path="/shop"    element={<Shop />} />
        <Route path="/cart"    element={<Cart />} />
        <Route path="/account" element={<Account />} />
        <Route path="/orders"  element={<Orders />} />
        <Route path="/admin"   element={<Admin />} />
      </Routes>
    </BrowserRouter>
  );
}

src/pages/Home.jsx

export default function Home() {
  return (
    <div>
      <h1>Welcome Store</h1>
      <p>Best products online</p>
    </div>
  );
}

src/pages/Shop.jsx

import { useEffect, useState } from "react";
import { API } from "../api";

export default function Shop() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    fetch(API + "/products").then(r => r.json()).then(setProducts);
  }, []);

  const add = (p) => {
    const cart  = JSON.parse(localStorage.getItem("cart") || "[]");
    const found = cart.find(i => i.id === p.id);
    if (found) found.qty++;
    else cart.push({ ...p, qty: 1 });
    localStorage.setItem("cart", JSON.stringify(cart));
  };

  return (
    <div>
      {products.map(p => (
        <div key={p.id}>
          <h3>{p.name} — £{p.price}</h3>
          <p>In stock: {p.stock}</p>
          <button onClick={() => add(p)}>Add to cart</button>
        </div>
      ))}
    </div>
  );
}

src/pages/Cart.jsx

import { API } from "../api";

export default function Cart() {
  const cart = JSON.parse(localStorage.getItem("cart") || "[]");
  const user = JSON.parse(localStorage.getItem("user") || "{}");

  const checkout = async () => {
    const res  = await fetch(API + "/checkout", {
      method:  "POST",
      headers: { "Content-Type": "application/json" },
      body:    JSON.stringify({ user_id: user.user_id, cart })
    });
    const data = await res.json();
    if (res.ok) { localStorage.removeItem("cart"); alert("Order placed!"); }
    else alert(data.error);
  };

  if (cart.length === 0) return <p>Your cart is empty.</p>;

  return (
    <div>
      {cart.map(i => (
        <div key={i.id}>{i.name} x{i.qty} — £{(i.price * i.qty).toFixed(2)}</div>
      ))}
      <button onClick={checkout}>Checkout</button>
    </div>
  );
}

src/pages/Account.jsx

import { useState } from "react";
import { API } from "../api";

export default function Account() {
  const [email,    setEmail]    = useState("");
  const [password, setPassword] = useState("");
  const [msg,      setMsg]      = useState("");

  const login = async () => {
    const res  = await fetch(API + "/login", {
      method:  "POST",
      headers: { "Content-Type": "application/json" },
      body:    JSON.stringify({ email, password })
    });
    const data = await res.json();
    if (res.ok) { localStorage.setItem("user", JSON.stringify(data)); setMsg("Logged in as " + data.username); }
    else setMsg(data.error);
  };

  return (
    <div>
      <h2>Login</h2>
      <input type="email"    placeholder="Email"    onChange={e => setEmail(e.target.value)} />
      <input type="password" placeholder="Password" onChange={e => setPassword(e.target.value)} />
      <button onClick={login}>Login</button>
      {msg && <p>{msg}</p>}
    </div>
  );
}

src/pages/Orders.jsx

import { useEffect, useState } from "react";
import { API } from "../api";

export default function Orders() {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    const user = JSON.parse(localStorage.getItem("user") || "{}");
    if (!user.user_id) return;
    fetch(API + "/orders/" + user.user_id).then(r => r.json()).then(setOrders);
  }, []);

  if (orders.length === 0) return <p>No orders yet.</p>;

  return (
    <div>
      {orders.map(o => (
        <div key={o.order.id}>
          <strong>Order #{o.order.id}</strong> — £{o.order.total.toFixed(2)} — {o.order.status}
          <ul>{o.items.map(i => <li key={i.id}>Product #{i.product_id} × {i.qty}</li>)}</ul>
        </div>
      ))}
    </div>
  );
}

src/pages/Admin.jsx

import { useEffect, useState } from "react";
import { API } from "../api";

export default function Admin() {
  const [orders, setOrders] = useState([]);

  const load = () => fetch(API + "/admin/orders").then(r => r.json()).then(setOrders);
  useEffect(() => { load(); }, []);

  const update = async (id, status) => {
    await fetch(API + "/admin/orders/" + id, {
      method: "PUT", headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status })
    });
    load();
  };

  const del = async (id) => {
    await fetch(API + "/admin/orders/" + id, { method: "DELETE" });
    load();
  };

  return (
    <div>
      <h2>All Orders</h2>
      {orders.map(o => (
        <div key={o.order.id} style={{ marginBottom: "1rem", borderBottom: "1px solid #ccc" }}>
          <strong>Order #{o.order.id}</strong> — £{o.order.total.toFixed(2)} — {o.order.status}
          <ul>{o.items.map(i => <li key={i.id}>Product #{i.product_id} × {i.qty}</li>)}</ul>
          <button onClick={() => update(o.order.id, "shipped")}>Mark shipped</button>{" "}
          <button onClick={() => del(o.order.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

Running the app

Open two terminals:

# Terminal 1 — backend
python app.py
# → Running on http://127.0.0.1:5000

# Terminal 2 — frontend
cd frontend
npm run dev
# → Local: http://localhost:5173

To seed a test product, call the API directly:

curl -X POST http://127.0.0.1:5000/products \
  -H "Content-Type: application/json" \
  -d '{"name":"Widget","price":9.99,"stock":50,"image":"https://placehold.co/200"}'

To create an admin user, register normally then open the SQLite database and set the role:

sqlite3 shop.db "UPDATE users SET role='admin' WHERE email='you@example.com';"

Security checklist before going live

This tutorial is a learning scaffold. Here are the issues to fix before any real deployment:

Issue	Fix
Admin routes are unprotected	Verify a JWT or session token on every `/admin/*` request and check `role === "admin"`
Product write routes are unprotected	Same — admin check on `POST /products` and `DELETE /products/<id>`
`user_id` comes from the client at checkout	Derive it server-side from the session token, not the request body
`localStorage` for auth state	Use `httpOnly` cookies to prevent XSS from reading the token
No input validation	Validate all JSON fields with a library like `marshmallow` or `pydantic` before writing to the DB
SQLite in production	Switch to PostgreSQL or MySQL; SQLite doesn't handle concurrent writes well
`debug=True` in production	Set `debug=False` and run behind Gunicorn: `gunicorn app:app`

Found a bug or want to add registration, search, or Stripe payments? Drop a comment below.

DEV Community: smith

Build a Full E-Commerce App with Flask & React (Complete Guide) ver 2

🛒 Build a Full E-Commerce App with Flask & React (Complete Tutorial)

📁 Project Structure

⚙️ Backend Setup (Flask)

Install dependencies

backend/init.py

🌐 Frontend Setup (React + Vite)

src/api.js

src/main.jsx

src/App.jsx

📄 Pages

Home.jsx

Shop.jsx

{p.name}

Cart.jsx

Account.jsx (EDIT USER)

Orders.jsx

Order #{o.order.id}

Admin.jsx

✅ DONE

Build a Full E-Commerce App with Flask & React (Complete Guide)

Table of Contents

Project Structure

Backend — Flask

Install & bootstrap

Database setup

Auth routes

POST /register

POST /login

Product routes

Checkout & orders

Admin routes

Full backend code

Frontend — React + Vite

Create the project

App shell

src/api.js

src/main.jsx

src/App.jsx

Pages

src/pages/Home.jsx

src/pages/Shop.jsx

src/pages/Cart.jsx

src/pages/Account.jsx

src/pages/Orders.jsx

src/pages/Admin.jsx

Full frontend code

Running the app

Security checklist before going live

`POST /register`

`POST /login`

`src/api.js`

`src/main.jsx`

`src/App.jsx`

`src/pages/Home.jsx`

`src/pages/Shop.jsx`

`src/pages/Cart.jsx`

`src/pages/Account.jsx`

`src/pages/Orders.jsx`

`src/pages/Admin.jsx`