LoongDingXuan — Trilingual Site & In-House Delivery Platform

As a diner you arrive at a full-screen hero and choose your language — with the entire page, including its typography and layout direction, adapting to that choice. You browse a tabbed signature menu, open FAQ answers, check opening hours, and either book a table or move into the ordering flow.

As a delivery customer you build a cart from a categorised catalog with live quantity controls and a running total pinned to the bottom of the screen. At checkout you pin your address on a map, tap to use GPS, or type it — and watch the delivery fee and arrival estimate recalculate from your actual distance. You land on a printable, shareable receipt, then follow your order through a four-stage timeline while your driver moves across the map in real time.

As the restaurant you sign into an operations dashboard showing today’s revenue, new orders demanding action, and every active delivery. You assign a driver from a dropdown and the order propagates instantly to that driver’s phone and to the customer’s tracking screen. You watch the whole fleet move on a live map, onboard new drivers from a form, and review thirty days of volume, revenue, average order value, cancellation rate and per-driver performance.

Two deliberately distinct design languages coexist, which is itself a mark of maturity. The guest-facing site runs on deep jade green with warm antique gold as the sole accent and cream text — reading as lacquer, brass and candlelight rather than the red-and-gold cliché of most Chinese restaurant sites.

The staff-facing tools invert to a near-black operations UI with a soft accent and a semantic status palette — green for delivered, amber for in-transit, red for cancelled. It reads as a control room, not a restaurant, which is correct: the audience and the lighting conditions are different.

Arabic is handled as a layout problem rather than a translation problem. Font families are swapped at the custom-property level, so the Arabic face resolves through the same variables while every downstream rule stays identical — and a dedicated RTL rule block mirrors direction everywhere it matters, down to which side the mobile drawer slides in from.

A driver’s phone must stream its position continuously, and that position must appear with low latency and no polling on both an internal fleet map and an arbitrary customer’s public tracking page — on a static site with no server. The driver app writes each high-accuracy fix to a real-time database node. The admin dashboard subscribes to the whole node and reconciles markers by driver id, moving an existing marker rather than destroying and recreating it so the map stays smooth. The customer page subscribes to a single driver only, and only once that driver is assigned, detaching the previous listener before attaching a new one.

Choosing a document store for durable orders while using the real-time database for the coordinate firehose is the correct split: the real-time store is the cheaper and lower-latency option for rapid position writes, and orders need queryable documents.

Customer, dispatcher and driver each need a different view of the same order, updating live, with no backend to broker between them. One orders collection is the shared source of truth, with each role attached through a differently scoped subscription — the driver app filters to orders assigned to them and still active, the customer to their single document, the admin to recent orders by creation time. A dispatch action writes one document update and it propagates to both other roles simultaneously.

The whole system — nine pages, a database-backed ordering platform, an admin dashboard, a driver app, four map integrations and a custom animation layer — ships with no build step, no bundler and no dependency tree. Every runtime library is a script tag. That means no build breakage, no dependency rot, and deployment by copying files to any static host.

The project also degrades gracefully before credentials are supplied: every page checks whether its configuration still holds placeholder values and falls back to a demo path, and every geospatial constant has an inline fallback, so no page throws if the config fails to load.

Marketing pages break at 992px, where the location grid stacks and reorders so the map appears above the info panel, and at 768px for the drawer navigation and single-column forms. The catalog adds a 480px breakpoint where cards flip from horizontal to vertical. The admin dashboard breaks at three widths, swapping its sidebar for a scrolling tab bar. The driver app is mobile-first throughout, and the receipt page carries a dedicated print stylesheet.