React Backend Example
A backend for a React application with CORS support, product API, and stats endpoints.
Application Code
# app.py
from flaxon import Flaxon
from flaxon.middleware import CORSMiddleware
from flaxon.validation import Schema, fields
app = Flaxon("react-backend")
# Configure CORS for React development server
app.add_middleware(
CORSMiddleware,
allowed_origins=["http://localhost:5173", "http://localhost:3000"],
allow_credentials=True,
)
# Product schema
class CreateProduct(Schema):
name = fields.String(required=True, min_length=2, max_length=100)
price = fields.Float(required=True, minimum=0)
description = fields.String(required=False, max_length=500)
category = fields.String(required=False, max_length=50)
in_stock = fields.Boolean(default=True)
# In-memory storage
products = []
product_id_counter = 1
@app.get("/api/products")
async def list_products(request):
category = request.query.get("category")
in_stock = request.query.get_bool("in_stock")
result = products
if category:
result = [p for p in result if p.get("category") == category]
if in_stock is not None:
result = [p for p in result if p.get("in_stock") == in_stock]
return {"data": result, "total": len(result)}
@app.get("/api/products/<int:product_id>")
async def get_product(product_id: int):
for product in products:
if product["id"] == product_id:
return product
return {"error": "Product not found"}, 404
@app.post("/api/products")
async def create_product(data: CreateProduct):
global product_id_counter
product = data.to_dict()
product["id"] = product_id_counter
product_id_counter += 1
products.append(product)
return {"created": True, "product": product}, 201
@app.put("/api/products/<int:product_id>")
async def update_product(product_id: int, data: CreateProduct):
for product in products:
if product["id"] == product_id:
product.update(data.to_dict())
return {"updated": True, "product": product}
return {"error": "Product not found"}, 404
@app.delete("/api/products/<int:product_id>")
async def delete_product(product_id: int):
for i, product in enumerate(products):
if product["id"] == product_id:
products.pop(i)
return {"deleted": True}
return {"error": "Product not found"}, 404
@app.get("/api/categories")
async def list_categories():
categories = list(set(p.get("category") for p in products if p.get("category")))
return {"categories": categories}
@app.get("/api/stats")
async def get_stats():
total = len(products)
in_stock = sum(1 for p in products if p.get("in_stock", False))
total_value = sum(p.get("price", 0) for p in products)
return {
"total_products": total,
"in_stock": in_stock,
"out_of_stock": total - in_stock,
"total_value": round(total_value, 2),
}
React Client Example
// api.js
const API_URL = "http://localhost:8000/api";
export async function getProducts() {
const response = await fetch(`${API_URL}/products`);
return response.json();
}
export async function getProduct(id) {
const response = await fetch(`${API_URL}/products/${id}`);
return response.json();
}
export async function createProduct(product) {
const response = await fetch(`${API_URL}/products`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(product),
});
return response.json();
}
export async function updateProduct(id, product) {
const response = await fetch(`${API_URL}/products/${id}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(product),
});
return response.json();
}
export async function deleteProduct(id) {
const response = await fetch(`${API_URL}/products/${id}`, {
method: "DELETE",
});
return response.json();
}
Key Concepts
- CORS: Configured for React development servers
- Filtering: Query parameters for category and stock status
- Stats: Aggregated product statistics
- REST API: Full CRUD operations for products