Skip to content

Developer Guide

Technical Reference

Architecture overview, API endpoints, and deployment configuration for Basket.

Architecture

┌─────────────┐    ┌──────────────┐    ┌─────────────┐
│   Kiosk     │    │  Storefront  │    │  Dashboard  │
│  (SvelteKit)│    │  (SvelteKit) │    │  (SvelteKit)│
└──────┬──────┘    └──────┬───────┘    └──────┬──────┘
       │                  │                   │
       └──────────────────┼───────────────────┘
                          │
                    ┌─────▼──────┐
                    │  Supabase  │
                    │ (Postgres) │
                    └─────┬──────┘
                          │
              ┌───────────┼───────────┐
              │           │           │
         ┌────▼───┐ ┌────▼───┐ ┌────▼───┐
         │ Stripe │ │PayNow  │ │GrabPay │
         │(Cards) │ │  QR    │ │        │
         └────────┘ └────────┘ └────────┘

Tech Stack

  • Frontend: SvelteKit 5 with Svelte 5 runes
  • Database: Supabase (PostgreSQL)
  • Payments: Stripe, PayNow QR, GrabPay
  • Storage: Cloudflare R2 (product images)
  • Deployment: Cloudflare Workers
  • Real-time: WebSocket via Supabase Realtime

Environment Variables

# Supabase
PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

# Stripe
STRIPE_SECRET_KEY=sk_live_...
STRIPE_WEBHOOK_SECRET=whsec_...

# R2 Storage
R2_ACCESS_KEY_ID=your-r2-key
R2_SECRET_ACCESS_KEY=your-r2-secret
R2_BUCKET_NAME=basket-images
R2_ACCOUNT_ID=your-account-id

# Store Config
PUBLIC_BASKET_URL=https://basket.guidesify.com

Deployment

Basket deploys to Cloudflare Workers using @sveltejs/adapter-cloudflare.

# Development
npm run dev

# Production build
npm run build

# Deploy
npx wrangler deploy

wrangler.jsonc Configuration

Key bindings required in Cloudflare:

  • R2 bucket — R2_BUCKET binding for product images
  • Supabase variables — Via environment variables
  • Stripe secrets — Via encrypted environment variables

Key Routes

Route Purpose
/kiosk/[slug] Self-service retail terminal
/store/[slug] Customer-facing storefront
/dashboard Merchant admin panel
/products Product management
/api/create-payment Stripe payment intent creation
/api/stripe-webhook Stripe event webhook handler
/wc-api/* WooCommerce-compatible API endpoints

Database Schema

Key tables:

  • stores — Multi-tenant store configuration (app_slug, settings, domain)
  • products — Product listings with pricing, variants, images
  • orders — Customer orders with line items and status
  • order_items — Individual items within an order
  • customers — Customer profiles and contact info
  • coupons — Discount codes and promotions