Приложение счетов и оплат
Local-first приложение счетов и литовского учёта на Vue 3, с опциональным webedge-db-синком.
Dev-storyЗадача
Маленькому инструменту счетов не должны быть нужны бэкенд, аккаунты или секреты только чтобы набросать и показать счёт.
Что делали
Приложение на Vue 3, по умолчанию работающее только в браузере — клиенты, товары, настройки продавца и счета лежат в `localStorage` — с опциональным режимом на webedge-db, добавляющим авторизацию и синхронизацию, когда нужно больше одного устройства.
Результат
Можно открыть и сразу выставить счёт без настройки, а бэкенд на webedge-db включить позже, не меняя способ работы с приложением.
Dev-story статья
Приложение счетов и оплат: как создавался проект
Большинство инструментов для счетов заставляют зарегистрироваться прежде, чем покажут хоть один экран. Здесь наоборот: приложение открывается как чисто браузерное, без секретов и без бэкенда, храня счета, клиентов, товары и настройки продавца в localStorage под ключом 'bills'. Сложность была в том, чтобы сохранить этот демо-путь без трения полностью нетронутым и при этом прикрутить настоящий аутентифицированный многопользовательский режим синхронизации через реактивный бэкенд так, чтобы два режима не перетекали друг в друга.
Разделы
05
Модули
05
Стек
Vue 3 + webedge-db
Почему появился проект
Маленькому инструменту счетов не должны быть нужны бэкенд, аккаунты или секреты только чтобы набросать и показать счёт.
Большинство инструментов для счетов заставляют зарегистрироваться прежде, чем покажут хоть один экран. Здесь наоборот: приложение открывается как чисто браузерное, без секретов и без бэкенда, храня счета, клиентов, товары и настройки продавца в localStorage под ключом 'bills'. Сложность была в том, чтобы сохранить этот демо-путь без трения полностью нетронутым и при этом прикрутить настоящий аутентифицированный многопользовательский режим синхронизации через реактивный бэкенд так, чтобы два режима не перетекали друг в друга.
Что было создано
Приложение на Vue 3, по умолчанию работающее только в браузере — клиенты, товары, настройки продавца и счета лежат в `localStorage` — с опциональным режимом на webedge-db, добавляющим авторизацию и синхронизацию, когда нужно больше одного устройства.
Приложение на Vue 3 для счетов и литовского бухучёта с полностью локализованным на литовский интерфейсом и доменными моделями счетов, заточенными под LT-бухгалтерию. Оно работает в двух разных режимах из одной кодовой базы: чисто браузерное демо на localStorage и сконфигурированный режим, где вход, разграничение данных по пользователю и синхронизация идут через наш реактивный бэкенд, размещённый на своей инфраструктуре.
Основные модули и путь пользователя
Два режима работы из одной сборки: чисто браузерное демо, которому не нужны переменные окружения или секреты, и сконфигурированный режим синхронизации за аутентификацией
Слой данных на localStorage с ключом 'bills', сохраняющий счета, клиентов, товары и настройки продавца между перезагрузками без обращения к серверу
Доменные модели счетов для литовского бухучёта плюс полностью литовский интерфейс, предпросмотр PDF, каталоги и отчёты
Вход по email и паролю с обязательным подтверждением почты, OTP-код доставляется через почтовую службу WebEdge, а Google OAuth оставлен как опциональный переключатель через переменные окружения
Разграничение по пользователю на стороне реактивного бэкенда, чтобы счета, каталоги, настройки и отчёты были привязаны к вошедшему пользователю — и жёсткое правило, что сконфигурированный режим никогда молча не откатывается на localStorage при ошибке аутентификации или выполнения
Архитектура и технологические решения
Сделано на Vue 3, webedge-db, Local-first.
Фронтенд на Vue 3 с Vite, реактивный бэкенд на своей инфраструктуре (бэкенд и сайт на отдельных портах) с Better Auth для сессий и OTP-писем, развёрнуто на Cloudflare Pages, а чисто браузерное демо получается простым удалением значений окружения бэкенда.
Результат и выводы
Можно открыть и сразу выставить счёт без настройки, а бэкенд на webedge-db включить позже, не меняя способ работы с приложением.
Одна и та же кодовая база обслуживает и демо без регистрации, которое можно попробовать за секунды, и настоящее бухгалтерское приложение с разделением по пользователям — оба режима чисто разделены и без тихой деградации между ними.
Связанные статьи
Читать дальше
Связанные истории проектов
Эти проекты близки по техническим или продуктовым решениям и показывают, как тот же принцип работает в другом контексте.
Dev-storyCMS
Динамический headless-CMS на webedge-db — типы контента, медиа, роли и публичный read-API, питающий наши сайты и статьи.
Dev-storyПлатформа календарных бронирований
Бронирование на Vue 3 — слоты, записи, письма и Meet-видеозвонки в один клик.
Dev-storyFableVita
FableVita — AI-фитнес-тренер с лигами, квестами и защищённой от фрода экономикой наград.
Есть похожая идея?
Обсудить проект