Перейти к основному содержимому

Фронтенд

Зона ответственности фронтенд-разработчика: UI, рендеринг, состояние, дизайн-система. Раздел — стартовая точка, уточняется по ходу.

Стек​

  • Nuxt 3NuxtМета-фреймворк поверх Vue.js. Поддерживает серверный рендеринг (SSR) и режим SPA. Используется для витрины клиента и админок. (Vue 3 + TypeScript) — единый фреймворк для витрины и админок.
  • Pinia — управление состоянием (корзина, сессия, данные брендов).
  • Tailwind CSS — дизайн-система и быстрая стилизация под бренды.
  • Данные — через REST/GraphQL API DirectusDirectusOpen-source headless-платформа поверх PostgreSQL: даёт модель данных, REST/GraphQL API, аутентификацию, RBAC и готовую админку без написания кода. и Node-адаптера.

Главное решение: SSR для витрины, SPA для админок​

  • Витрина клиента — SSRSSRServer-Side Rendering — страница собирается на сервере и отдаётся готовым HTML. Нужен для SEO и скорости первой загрузки витрины.. Меню, страницы блюд и бренда должны попадать в поиск и красиво превьюиться в мессенджерах. Это прямо влияет на конверсию в доставке.
  • Админки — SPASPASingle-Page Application — приложение рендерится в браузере, без перезагрузки страниц. Подходит для админок за логином, где SEO не нужен.. Company/Brand-панели и KDS работают за логином; важнее интерактивность, а не индексация.

Nuxt позволяет держать оба режима в одном проекте (per-route rendering), поэтому это одна кодовая база, а не два разных приложения.

Мультибрендовость на фронте​

Витрина — одна, но «надевает» оформление нужного бренда по домену:

Тема бренда (цвета, логотип, типографика) приходит из поля theme бренда. На старте — «один шаблон с переменными»; позже отдельным брендам можно дать собственные Vue-компоненты, не трогая общие.

Работа с состоянием и API​

  • Корзина и сессия — в Pinia, с сохранением между перезагрузками.
  • Чтение данных (меню, бренд) — Directus API; оформление и оплата — через Node-адаптер.
  • Цены и итоги не считаем на клиенте как истину — сервер их подтверждает при оформлении.

Что дальше​