Все проекты

Приложение счетов и оплат

Local-first приложение счетов и литовского учёта на Vue 3, с опциональным webedge-db-синком.

Vue 3webedge-dbLocal-first
Скриншот приложения счетов и оплатDev-story
01

Задача

Маленькому инструменту счетов не должны быть нужны бэкенд, аккаунты или секреты только чтобы набросать и показать счёт.

02

Что делали

Приложение на Vue 3, по умолчанию работающее только в браузере — клиенты, товары, настройки продавца и счета лежат в `localStorage` — с опциональным режимом на webedge-db, добавляющим авторизацию и синхронизацию, когда нужно больше одного устройства.

03

Результат

Можно открыть и сразу выставить счёт без настройки, а бэкенд на webedge-db включить позже, не меняя способ работы с приложением.

Dev-story статья

Приложение счетов и оплат: как создавался проект

Большинство инструментов для счетов заставляют зарегистрироваться прежде, чем покажут хоть один экран. Здесь наоборот: приложение открывается как чисто браузерное, без секретов и без бэкенда, храня счета, клиентов, товары и настройки продавца в localStorage под ключом 'bills'. Сложность была в том, чтобы сохранить этот демо-путь без трения полностью нетронутым и при этом прикрутить настоящий аутентифицированный многопользовательский режим синхронизации через реактивный бэкенд так, чтобы два режима не перетекали друг в друга.

Разделы

05

Модули

05

Стек

Vue 3 + webedge-db

01

Почему появился проект

Маленькому инструменту счетов не должны быть нужны бэкенд, аккаунты или секреты только чтобы набросать и показать счёт.

Большинство инструментов для счетов заставляют зарегистрироваться прежде, чем покажут хоть один экран. Здесь наоборот: приложение открывается как чисто браузерное, без секретов и без бэкенда, храня счета, клиентов, товары и настройки продавца в localStorage под ключом 'bills'. Сложность была в том, чтобы сохранить этот демо-путь без трения полностью нетронутым и при этом прикрутить настоящий аутентифицированный многопользовательский режим синхронизации через реактивный бэкенд так, чтобы два режима не перетекали друг в друга.

02

Что было создано

Приложение на Vue 3, по умолчанию работающее только в браузере — клиенты, товары, настройки продавца и счета лежат в `localStorage` — с опциональным режимом на webedge-db, добавляющим авторизацию и синхронизацию, когда нужно больше одного устройства.

Приложение на Vue 3 для счетов и литовского бухучёта с полностью локализованным на литовский интерфейсом и доменными моделями счетов, заточенными под LT-бухгалтерию. Оно работает в двух разных режимах из одной кодовой базы: чисто браузерное демо на localStorage и сконфигурированный режим, где вход, разграничение данных по пользователю и синхронизация идут через наш реактивный бэкенд, размещённый на своей инфраструктуре.

03

Основные модули и путь пользователя

M01

Два режима работы из одной сборки: чисто браузерное демо, которому не нужны переменные окружения или секреты, и сконфигурированный режим синхронизации за аутентификацией

M02

Слой данных на localStorage с ключом 'bills', сохраняющий счета, клиентов, товары и настройки продавца между перезагрузками без обращения к серверу

M03

Доменные модели счетов для литовского бухучёта плюс полностью литовский интерфейс, предпросмотр PDF, каталоги и отчёты

M04

Вход по email и паролю с обязательным подтверждением почты, OTP-код доставляется через почтовую службу WebEdge, а Google OAuth оставлен как опциональный переключатель через переменные окружения

M05

Разграничение по пользователю на стороне реактивного бэкенда, чтобы счета, каталоги, настройки и отчёты были привязаны к вошедшему пользователю — и жёсткое правило, что сконфигурированный режим никогда молча не откатывается на localStorage при ошибке аутентификации или выполнения

04

Архитектура и технологические решения

Сделано на Vue 3, webedge-db, Local-first.

Фронтенд на Vue 3 с Vite, реактивный бэкенд на своей инфраструктуре (бэкенд и сайт на отдельных портах) с Better Auth для сессий и OTP-писем, развёрнуто на Cloudflare Pages, а чисто браузерное демо получается простым удалением значений окружения бэкенда.

05

Результат и выводы

Можно открыть и сразу выставить счёт без настройки, а бэкенд на webedge-db включить позже, не меняя способ работы с приложением.

Одна и та же кодовая база обслуживает и демо без регистрации, которое можно попробовать за секунды, и настоящее бухгалтерское приложение с разделением по пользователям — оба режима чисто разделены и без тихой деградации между ними.

Читать дальше

Эти проекты близки по техническим или продуктовым решениям и показывают, как тот же принцип работает в другом контексте.

Есть похожая идея?

Обсудить проект