Skip to main content

Frontend

The frontend developer's area of responsibility: UI, rendering, state, design system. This section is a starting point, refined as work progresses.

Stack​

  • Nuxt 3NuxtA meta-framework on top of Vue.js. Supports server-side rendering (SSR) and SPA mode. Used for the customer storefront and the admin panels. (Vue 3 + TypeScript) — a single framework for the storefront and the admin panels.
  • Pinia — state management (cart, session, brand data).
  • Tailwind CSS — design system and fast styling per brand.
  • Data — via the REST/GraphQL API of DirectusDirectusAn open-source headless platform on top of PostgreSQL: provides the data model, REST/GraphQL API, authentication, RBAC and a ready-made admin UI without writing code. and the Node adapter.

Key decision: SSR for the storefront, SPA for the admins​

  • Customer storefront — SSRSSRServer-Side Rendering — the page is built on the server and delivered as ready HTML. Needed for SEO and fast first load of the storefront.. The menu, dish pages and brand pages must reach search and preview nicely in messengers. This directly affects delivery conversion.
  • Admin panels — SPASPASingle-Page Application — the app renders in the browser without page reloads. Suitable for behind-login admin panels where SEO is not needed.. Company/Brand panels and KDS run behind login; interactivity matters more than indexing.

Nuxt lets both modes live in one project (per-route rendering), so this is one codebase, not two separate apps.

Multi-brand on the frontend​

The storefront is single, but "wears" the right brand's styling based on the domain:

The brand theme (colors, logo, typography) comes from the brand's theme field. To start — "one template with variables"; later, specific brands can be given their own Vue components without touching the shared ones.

State and API​

  • Cart and session — in Pinia, persisted across reloads.
  • Reading data (menu, brand) — via the Directus API; checkout and payment — via the Node adapter.
  • Prices and totals are not treated as truth on the client — the server confirms them at checkout.

What's next​

  • Apps & screens — which interfaces we build and which screens they consist of.