Technical Documentation
Architecture, APIs & Development Guide
Technology Stack
Frontend
Framework:
React 18
Language:
TypeScript
Styling:
Tailwind CSS
UI Library:
shadcn/ui
State:
React Query
Routing:
React Router
Backend
Platform:
Base44
Runtime:
Deno Deploy
Database:
PostgreSQL
Security:
RLS
Auth:
Base44 Auth
SDK:
@base44/sdk
Integrations
Payments:
Stripe
Email:
Base44 Core
2FA:
Custom
Files:
Supabase Storage
Icons:
Lucide React
Forms:
React Hook Form
Project Structure
tradietough/ ├── 📁 entities/ # Database schemas (JSON) │ ├── User.json # Extended user attributes │ ├── Product.json # Product catalog │ ├── Cart.json # Shopping carts │ ├── Order.json # Order management │ ├── PricingQuote.json # Admin quotes │ ├── PricingConfiguration.json │ ├── CustomerNote.json # CRM notes │ ├── Cart.json │ ├── TrustedDevice.json │ ├── EmailVerification.json │ ├── AdminAuditLog.json │ ├── PriceList.json │ ├── ProductReview.json │ └── TenderRequest.json │ ├── 📁 pages/ # React page components │ ├── Home.js │ ├── Products.js │ ├── ProductDetail.js │ ├── Cart.js │ ├── Checkout.js │ ├── OrderHistory.js │ ├── Documentation.js │ ├── AdminGuide.js │ ├── TechnicalDocs.js │ ├── Admin*.js # Admin pages │ └── ... │ ├── 📁 components/ # Reusable components │ ├── products/ │ │ ├── ProductCard.jsx │ │ ├── ProductFilter.jsx │ │ ├── ComparisonBar.jsx │ │ └── ... │ ├── ui/ # shadcn/ui components │ └── IdleTimer.js # Session management │ ├── 📁 functions/ # Backend Deno functions │ ├── createStripeCheckout.js │ ├── stripeWebhook.js │ ├── sendQuoteEmail.js │ ├── sendBulkNotification.js │ ├── sendVerificationEmail.js │ ├── generate2FASecret.js │ ├── verify2FACode.js │ ├── sendCartAbandonmentEmail.js │ └── clearExpiredCarts.js │ └── 📄 Layout.js # Main app layout
Database Entities (14 Total)
User (Built-in + Extended)
Authentication & membership management
id, email, full_name, role, membership_status, abn, company_name, two_factor_enabled, two_factor_secret, two_factor_verified_atProduct
Product catalog with variants & pricing
sku, title, description, grade, thickness_mil, color, pack_quantity, bulk_pricing[], variants[], certificationsOrder
Order processing & fulfillment
order_number, user_id, items[], total, status, payment_method, stripe_checkout_session_id, shipping_addressPricingQuote
Admin pricing quotes & tracking
quote_number, customer_name, quote_type, xe_rate, products[], total_value, valid_until+ 10 more entities: CustomerNote, TrustedDevice, EmailVerification, AdminAuditLog, PriceList, PricingConfiguration, ProductReview, TenderRequest
Base44 SDK Quick Reference
Frontend - Import & Use
import { base44 } from '@/api/base44Client';
// Auth
const user = await base44.auth.me();
await base44.auth.updateMe({ company_name: "New Name" });
base44.auth.logout();
base44.auth.redirectToLogin();
// Entities - List
const products = await base44.entities.Product.list('-created_date', 20);
// Entities - Filter
const orders = await base44.entities.Order.filter({
user_id: user.id,
status: 'pending'
}, '-created_date', 10);
// Entities - Create
const cart = await base44.entities.Cart.create({
user_id: user.id,
items: [...]
});
// Entities - Update
await base44.entities.Order.update(orderId, {
status: 'shipped'
});
// Entities - Delete
await base44.entities.Product.delete(productId);
// Integrations
await base44.integrations.Core.SendEmail({
to: "customer@example.com",
subject: "Order Confirmation",
body: "Your order has been confirmed..."
});
const { file_url } = await base44.integrations.Core.UploadFile({
file: selectedFile
});Backend Functions - Deno
import { createClientFromRequest } from 'npm:@base44/sdk@0.8.4';
Deno.serve(async (req) => {
try {
const base44 = createClientFromRequest(req);
// Authenticate user
const user = await base44.auth.me();
if (!user) {
return Response.json({ error: 'Unauthorized' }, { status: 401 });
}
// User-scoped operations
const items = await base44.entities.Product.list();
// Admin operations (service role)
const allOrders = await base44.asServiceRole.entities.Order.list();
return Response.json({ success: true });
} catch (error) {
return Response.json({ error: error.message }, { status: 500 });
}
});Security Implementation
Row-Level Security (RLS)
Example: Order Entity
{
"rls": {
"read": {
"$or": [
{ "user_id": "{{user.id}}" },
{ "user_condition": { "role": "admin" } }
]
},
"create": {
"user_id": "{{user.id}}"
}
}
}2FA Implementation
- ✓ TOTP-based (Time-based One-Time Password)
- ✓ QR code generation for authenticator apps
- ✓ Backup codes (10 single-use)
- ✓ Email fallback verification
- ✓ 12-hour re-verification for admins
- ✓ Audit logging for all 2FA events
