BurgerDen — Dexie Cloud Restaurant Demo

A small restaurant ordering app that demonstrates how to build a real-world Dexie Cloud application end-to-end.

What this app demonstrates

• A complete Dexie Cloud-backed app — menu browsing, item details, cart, order placement and a simple staff view, all synced through Dexie Cloud.
• Blob offloading with blobMode: 'lazy' — menu item images are stored as Blob fields in the images table. Dexie Cloud automatically offloads the blobs to blob storage and downloads them on demand on the client, keeping the initial sync small and fast.
• Low-res / high-res image pairs — each image exists as two rows in the images table (variant: 'low' | 'high'). The menu grid loads the low-res variant for snappy rendering, and the item detail page loads both, showing the low-res placeholder while the high-res upgrades in.

Tech stack

• Dexie + dexie-cloud-addon
• React + React Router + Vite + TypeScript
• Tailwind CSS
• Zustand (cart state)

Running locally

npm install
npm run dev

The app expects a Dexie Cloud database to be configured in dexie-cloud.json. See Bootstrapping your database below if you want to point the app at your own Dexie Cloud database.

Bootstrapping your database

If you want to run the app against your own Dexie Cloud database, follow these steps:

1. Install the Dexie Cloud CLI globally

   npm install dexie-cloud -g

2. Create a new database

   dexie-cloud create

   This writes the resulting dbUrl to dexie-cloud.json and your client credentials to dexie-cloud.key (gitignored).

3. Whitelist the origins the app will run from

   dexie-cloud whitelist http://localhost:5173

   Add any production origins the same way.

4. Import the database schema

   dexie-cloud import schema.json

5. Import demo users (used for the anonymous demoUser=... URL flow)

   dexie-cloud import demo-users.json

6. Seed public data — menu items first, then images:

   node scripts/seed-menu.mjs
   node scripts/upload-images.mjs

   Both scripts upload into the public realm (rlm-public) so that unauthenticated visitors can read them. upload-images.mjs uploads each image twice — once as the low-res variant (id img-...-N) and once as the high-res variant (id img-...-N-hi) — and relies on Dexie Cloud's lazy blob offloading to keep payloads small.

That's it — npm run dev should now show the menu populated from your own database.

Regenerating images (optional)

The pre-rendered low- and high-res JPEGs are checked in under scripts/images/, so you do not need to regenerate them.

If you want fresh images, there is a generator script that uses the OpenAI image API:

export OPENAI_API_KEY=sk-...
node scripts/generate-images.mjs

It writes -hi.jpg and -lo.jpg files into scripts/images/, which upload-images.mjs then picks up. ImageMagick (convert) must be available on your PATH for the low-res resize step.

Project layout

src/
  components/   Layout, BottomNav, SyncStatusBanner, LoadingSpinner
  db/           Dexie + dexie-cloud-addon setup and schema versions
  pages/        MenuPage, ItemPage, CartPage, OrdersPage, StaffPage, ...
  store/        Zustand cart store
  types/        Shared TypeScript types (MenuItem, Image, Order, ...)
  utils/        Formatting and order helpers
scripts/
  seed-menu.mjs       Uploads categories + menu items to the public realm
  generate-images.mjs Generates image pairs via OpenAI (optional)
  upload-images.mjs   Uploads low/high-res image rows to the public realm
  images/             Generated/source JPEGs (-hi.jpg / -lo.jpg)
schema.json           Dexie Cloud schema (imported via CLI)
demo-users.json       Demo users (imported via CLI)
dexie-cloud.json      Database URL and service URL