DEV Community: Bastien Moriel

react shop practice

Bastien Moriel — Thu, 16 Apr 2026 12:26:42 +0000

import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import './Marketplace.css'

function Marketplace({ user }) {
const navigate = useNavigate()
const [products, setProducts] = useState([])
const [quantities, setQuantities] = useState({})
const [basket, setBasket] = useState([])
const [message, setMessage] = useState('')

useEffect(() => {
const load = async () => {
const res = await fetch('/api/products')
const data = await res.json()
setProducts(data)
}
load()
}, [])

const changeQty = (id, delta) => {
setQuantities(prev => ({
...prev,
[id]: Math.max(1, (prev[id] || 1) + delta)
}))
}

const addToBasket = (product) => {
if (!user) { navigate('/login'); return }

const qty      = quantities[product.productID] || 1
const existing = basket.find(i => i.productID === product.productID)

if (existing) {
  setBasket(basket.map(i =>
    i.productID === product.productID
      ? { ...i, quantity: i.quantity + qty }
      : i
  ))
} else {
  setBasket([...basket, {
    productID:     product.productID,
    product_name:  product.product_name,
    product_price: product.product_price,
    quantity:      qty
  }])
}

setMessage('Added to basket!')
setTimeout(() => setMessage(''), 2000)

}

const goToCheckout = () => {
if (basket.length === 0) { alert('Your basket is empty'); return }
navigate('/checkout', { state: { basket } })
}

return (

Marketplace

  {message && <p className="success">{message}</p>}

  {basket.length > 0 && (
    <button className="basket-btn" onClick={goToCheckout}>
      Go to Checkout ({basket.length} items)
    </button>
  )}

  <div className="product-grid">
    {products.map(product => (
      <div key={product.productID} className="product-card">
        <div className="product-img" />
        <p className="product-name">{product.product_name}</p>
        <p className="product-price">£{Number(product.product_price).toFixed(2)}</p>
        <p className="product-stock">Stock: {product.product_stock}</p>
        <p className="product-desc">{product.product_description}</p>
        <div className="product-controls">
          <button onClick={() => changeQty(product.productID, -1)}>-</button>
          <span>{quantities[product.productID] || 1}</span>
          <button onClick={() => changeQty(product.productID, +1)}>+</button>
          <button onClick={() => addToBasket(product)}>
            {user ? 'Add to Basket' : 'Login to Order'}
          </button>
        </div>
      </div>
    ))}
  </div>
</div>

)
}

export default Marketplace

.page { padding: 30px; }

.success {
background: #A2C24A;
color: white;
padding: 10px;
border-radius: 6px;
margin-bottom: 15px;
text-align: center;
}

.basket-btn {
background: #144A5C;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
font-family: 'Gluten', cursive;
margin-bottom: 20px;
}

.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.product-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
}

.product-img {
background: #c8c8c8;
height: 120px;
border-radius: 6px;
margin-bottom: 10px;
}

.product-name { font-weight: 700; margin-bottom: 5px; }
.product-price { color: #A2C24A; font-weight: 700; margin-bottom: 5px; }
.product-stock { font-size: 13px; margin-bottom: 5px; }
.product-desc { font-size: 13px; color: #666; margin-bottom: 10px; }

.product-controls {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}

.product-controls button {
background: #144A5C;
color: white;
border: none;
border-radius: 6px;
padding: 6px 12px;
cursor: pointer;
font-family: 'Gluten', cursive;
}

python system practice

Bastien Moriel — Thu, 16 Apr 2026 12:25:52 +0000

@app.route("/api/health")
def health():
return jsonify({"status": "ok"})

@app.route("/api/register", methods=["POST"])
def register():
data = request.get_json()
conn = get_db()
cursor = conn.cursor()
hashed = bcrypt.hashpw(
data["password"].encode('utf-8'),
bcrypt.gensalt()
).decode('utf-8')
cursor.execute(
"INSERT INTO customers (first_name, last_name, email, PWD_Hash, Address) VALUES (%s,%s,%s,%s,%s)",
(data["first_name"], data["last_name"], data["email"], hashed, data["address"])
)
conn.commit()
conn.close()
return jsonify({"message": "Account created"})

@app.route("/api/login", methods=["POST"])
def login():
data = request.get_json()
conn = get_db()
cursor = conn.cursor(dictionary=True)
cursor.execute(
"SELECT * FROM customers WHERE email = %s",
(data["email"],)
)
customer = cursor.fetchone()
conn.close()
if not customer:
return jsonify({"error": "Wrong email or password"}), 401
password_correct = bcrypt.checkpw(
data["password"].encode('utf-8'),
customer["PWD_Hash"].encode('utf-8')
)
if not password_correct:
return jsonify({"error": "Wrong email or password"}), 401
return jsonify({
"customerID": customer["customerID"],
"name": customer["first_name"],
"role": "customer"
})

@app.route("/api/producer/login", methods=["POST"])
def producer_login():
data = request.get_json()
conn = get_db()
cursor = conn.cursor(dictionary=True)
cursor.execute(
"SELECT * FROM producers WHERE email=%s AND PWD_Hash=%s",
(data["email"], data["password"])
)
producer = cursor.fetchone()
conn.close()
if not producer:
return jsonify({"error": "Wrong email or password"}), 401
return jsonify({
"producerID": producer["producerID"],
"name": producer["producer_name"],
"role": "producer"
})

@app.route("/api/products")
def get_products():
conn = get_db()
cursor = conn.cursor(dictionary=True)
cursor.execute("SELECT * FROM products")
products = cursor.fetchall()
conn.close()
return jsonify(products)

@app.route("/api/products", methods=["POST"])
def add_product():
data = request.get_json()
conn = get_db()
cursor = conn.cursor()
cursor.execute(
"INSERT INTO products (product_name, product_price, product_stock, product_description, producerID) VALUES (%s,%s,%s,%s,%s)",
(data["product_name"], data["product_price"], data["product_stock"], data["product_description"], data["producerID"])
)
conn.commit()
conn.close()
return jsonify({"message": "Product added"})

@app.route("/api/orders", methods=["POST"])
def place_order():
data = request.get_json()
conn = get_db()
cursor = conn.cursor()
cursor.execute(
"INSERT INTO orders (customerID) VALUES (%s)",
(data["customerID"],)
)
order_id = cursor.lastrowid
for item in data["items"]:
cursor.execute(
"INSERT INTO order_details (orderID, productID, product_quantity) VALUES (%s,%s,%s)",
(order_id, item["productID"], item["quantity"])
)
conn.commit()
conn.close()
return jsonify({"message": "Order placed"})

@app.route("/api/orders/int:customer_id")
def get_orders(customer_id):
conn = get_db()
cursor = conn.cursor(dictionary=True)
cursor.execute("""
SELECT orders.orderID, products.product_name,
order_details.product_quantity, orders.order_date
FROM orders
JOIN order_details ON orders.orderID = order_details.orderID
JOIN products ON order_details.productID = products.productID
WHERE orders.customerID = %s
""", (customer_id,))
orders = cursor.fetchall()
conn.close()
return jsonify(orders)

@app.route("/api/producer/orders/int:producer_id")
def producer_orders(producer_id):
conn = get_db()
cursor = conn.cursor(dictionary=True)
cursor.execute("""
SELECT orders.orderID, products.product_name,
order_details.product_quantity, orders.order_date,
customers.first_name, customers.last_name
FROM orders
JOIN order_details ON orders.orderID = order_details.orderID
JOIN products ON order_details.productID = products.productID
JOIN customers ON orders.customerID = customers.customerID
WHERE products.producerID = %s
""", (producer_id,))
orders = cursor.fetchall()
conn.close()
return jsonify(orders)

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

react checkout practice

Bastien Moriel — Thu, 16 Apr 2026 12:21:29 +0000

import { useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import './Checkout.css'

function Checkout({ user }) {
const location = useLocation()
const navigate = useNavigate()
const basket = location.state?.basket || []
const [success, setSuccess] = useState(false)
const [error, setError] = useState('')

const total = basket.reduce((sum, item) => {
return sum + item.product_price * item.quantity
}, 0)

const placeOrder = async () => {
if (!user) { navigate('/login'); return }

const res = await fetch('/api/orders', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    customerID: user.customerID,
    items: basket.map(item => ({
      productID: item.productID,
      quantity:  item.quantity
    }))
  })
})

const data = await res.json()
if (!res.ok) { setError(data.error); return }
setSuccess(true)

}

if (success) {
return (

Order Placed!

Thank you for your order.

navigate('/orders')}>
View My Orders

)
}

return (

Checkout

{basket.length === 0 ?

Your basket is empty.

: (
<>
{basket.map((item, index) => (

{item.product_name}

Quantity: {item.quantity}

£{(item.product_price * item.quantity).toFixed(2)}

))}

Total: £{total.toFixed(2)}

{error &&

{error}

}
Place Order
</>
)}

)
}

export default Checkout

.page { padding: 30px; }
.page h1 { margin-bottom: 20px; }

.checkout-item {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
margin-bottom: 10px;
max-width: 500px;
}

.item-name { font-weight: 700; margin-bottom: 5px; color: #144A5C; }

.checkout-total { margin: 20px 0; }
.checkout-total h2 { color: #A2C24A; }

.error {
color: white;
background: red;
padding: 10px;
border-radius: 6px;
margin-bottom: 10px;
}

.order-btn {
background: #A2C24A;
color: white;
border: none;
padding: 12px 30px;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
font-family: 'Gluten', cursive;
}

react orders practice

Bastien Moriel — Thu, 16 Apr 2026 12:18:50 +0000

import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import './MyOrders.css'

function MyOrders({ user }) {
const navigate = useNavigate()
const [orders, setOrders] = useState([])

useEffect(() => {
if (!user) { navigate('/login'); return }
const load = async () => {
const res = await fetch(/api/orders/${user.customerID})
const data = await res.json()
setOrders(data)
}
load()
}, [user])

if (!user) return

Please log in.

return (

My Orders

{orders.length === 0 &&

No orders yet.

}
{orders.map(order => (

{order.product_name}

Quantity: {order.product_quantity}

Date: {new Date(order.order_date).toLocaleDateString()}

))}

)
}

export default MyOrders

css dashboard practice

Bastien Moriel — Thu, 16 Apr 2026 12:16:23 +0000

.page { padding: 30px; }

.dashboard-section {
margin-bottom: 40px;
max-width: 500px;
}

.dashboard-section h2 { margin-bottom: 15px; }

.dashboard-section input,
.dashboard-section textarea {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 12px;
border-radius: 6px;
border: 1px solid #ccc;
font-family: 'Gluten', cursive;
font-size: 14px;
color: #144A5C;
}

.dashboard-section textarea { height: 80px; resize: none; }

.dashboard-section button {
background: #A2C24A;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
font-family: 'Gluten', cursive;
font-size: 14px;
}

.error {
color: white;
background: red;
padding: 10px;
border-radius: 6px;
margin-bottom: 10px;
}

.success {
color: white;
background: #A2C24A;
padding: 10px;
border-radius: 6px;
margin-bottom: 10px;
}

.order-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
margin-bottom: 10px;
}

.order-product { font-weight: 700; margin-bottom: 8px; color: #144A5C; }

react loyalty practice

Bastien Moriel — Thu, 16 Apr 2026 12:11:39 +0000

import './Loyalty.css'

function Loyalty() {
return (

Loyalty Scheme

Complete 8 purchases and get free delivery!

  <div className="loyalty-section">
    <h2>Your Rewards</h2>
    <div className="reward-card">
      <p>10% off all dairy products</p>
      <button>Activate</button>
    </div>
    <div className="reward-card">
      <p>15% off your next order</p>
      <button>Activate</button>
    </div>
  </div>

  <div className="loyalty-section">
    <h2>Stamp Card</h2>
    <div className="stamps">
      {Array.from({ length: 8 }).map((_, i) => (
        <div key={i} className="stamp">
          {i === 7 ? 'FREE' : i + 1}
        </div>
      ))}
    </div>
  </div>
</div>

)
}

export default Loyalty

.page { padding: 30px; }
.page h1 { margin-bottom: 10px; }
.subtitle { color: #666; margin-bottom: 30px; }

.loyalty-section { margin-bottom: 30px; }
.loyalty-section h2 { margin-bottom: 15px; }

.reward-card {
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
margin-bottom: 10px;
max-width: 400px;
display: flex;
justify-content: space-between;
align-items: center;
}

.reward-card button {
background: #A2C24A;
color: white;
border: none;
border-radius: 6px;
padding: 8px 16px;
cursor: pointer;
font-family: 'Gluten', cursive;
}

.stamps { display: flex; gap: 10px; flex-wrap: wrap; }

.stamp {
width: 55px;
height: 55px;
border-radius: 50%;
background: #A2C24A;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 13px;
}

react app practice

Bastien Moriel — Thu, 16 Apr 2026 12:11:21 +0000

import { useState } from 'react'
import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom'
import Home from './pages/Home'
import Login from './pages/Login'
import Marketplace from './pages/Marketplace'
import Checkout from './pages/Checkout'
import MyOrders from './pages/MyOrders'
import ProducerDashboard from './pages/ProducerDashboard'
import Loyalty from './pages/Loyalty'
import './index.css'

function Navbar({ user, setUser }) {
const navigate = useNavigate()

const handleLogout = () => {
localStorage.removeItem('user')
setUser(null)
navigate('/')
}

return (

Home
Marketplace
{user && user.role === 'customer' && My Orders}
{user && user.role === 'customer' && Loyalty}
{user && user.role === 'producer' && Dashboard}
{!user && Login}
{user && Hi {user.name}}
{user && (

Logout

)}

)
}

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

return (

} />
} />
} />
} />
} />
} />
} />

)
}

export default App`

How to make Admin Dashboard

Bastien Moriel — Wed, 15 Apr 2026 12:27:54 +0000

In the modern data landscape, the ability to transform raw numbers into actionable insights is no longer just a "nice-to-have"—it is a necessity. However, building a custom web application traditionally required a deep understanding of HTML, CSS, and JavaScript.

Enter Streamlit, the open-source Python framework that is effectively "democratizing" dashboard creation. By treating a web app like a simple script, developers can move from a CSV file to a live interactive interface in under ten minutes.
The Architecture of Simplicity

Most web frameworks follow a "Request-Response" cycle that can be mentally taxing to manage. Streamlit flips this by using a Top-Down Execution model. Every time a user interacts with a widget (like a slider or a button), the entire script reruns from top to bottom.

While this sounds inefficient, Streamlit handles the heavy lifting through smart caching, ensuring your app stays snappy even with large datasets.
Building a "Random Insights" Tracker

To demonstrate how little code is required, we can look at a standard analytics use case: tracking sales performance across different regions.

The Setup

First, we import the "Big Three" of Python data science: pandas for data manipulation, numpy for math, and plotly for the visual heavy lifting.
Python

import streamlit as st
import pandas as pd
import numpy as np
import plotly.express as px

st.set_page_config(page_title="Performance Dash", layout="wide")

Crafting the "Brain" (The Data)

Using a simple function, we can generate a mock dataset to simulate real-world business volatility.
Python

def get_data(rows):
return pd.DataFrame({
'Date': pd.date_range(start='2023-01-01', periods=rows),
'Sales': np.random.randint(100, 1000, size=rows),
'Region': np.random.choice(['North', 'South', 'East', 'West'], size=rows)
})

Visualizing the Story

The beauty of modern Python tools is that UI elements—like columns and metrics—are now just single lines of code. By combining Streamlit’s layout options with Plotly’s interactive charts, we create a high-density information environment:

KPI Metrics: Highlighting total sales and growth at a glance.

Time Series: Using line charts to spot seasonal trends.

Proportional Data: Using donut charts to compare regional market share.

Choosing the Right Tool

While Streamlit is perfect for rapid prototyping, it is part of a larger ecosystem. Choosing the right tool depends on your end goal:
Tool Complexity Best Use Case
Streamlit Low Internal tools, ML demos, fast iterations.
Plotly Dash Medium Enterprise-grade apps requiring fine-grained UI control.
Panel High Complex scientific apps with massive data streams.
Conclusion

The barrier to entry for data visualization has never been lower. Whether you are a data scientist looking to showcase a model or a manager trying to track team KPIs, Python provides a robust, "code-first" approach to building professional dashboards without the overhead of a full-stack development team.

Ready to launch? Save your code, run streamlit run app.py in your terminal, and watch your data come to life.