Все проекты

Платформа календарных бронирований

Бронирование на Vue 3 — слоты, записи, письма и Meet-видеозвонки в один клик.

Vue 3webedge-dbScheduling
Скриншот входа в WebEdge CalendarDev-story
01

Задача

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

02

Что делали

Приложение-планировщик на Vue 3 + webedge-db: живые окна доступности и брони, работающие отдельным проектом на нашем бэкенде webedge-db, с собственной парольной авторизацией и письмами-подтверждениями через mailer.webedge.dev.

03

Результат

Клиенты выбирают свободные слоты, исполнители ведут доступность, а подтверждения уходят автоматически — на нашем бэкенде, а не в арендованном планировщике.

Dev-story статья

Платформа календарных бронирований: как создавался проект

Инструменту планирования можно доверять только тогда, когда предлагаемое время совпадает с тем, когда хост действительно работает. Здесь движок слотов изначально читал рабочие часы каждого хоста в формате "HH:MM" как UTC и игнорировал заданный им часовой пояс, поэтому всем не-UTC пользователям предлагались неверные слоты, а переходы на летнее время тихо ломали брони. Исправление этой ошибки, а затем укрепление публичной части бронирования и составили основную часть инженерной работы.

Разделы

05

Модули

05

Стек

Vue 3 + webedge-db

01

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

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

Инструменту планирования можно доверять только тогда, когда предлагаемое время совпадает с тем, когда хост действительно работает. Здесь движок слотов изначально читал рабочие часы каждого хоста в формате "HH:MM" как UTC и игнорировал заданный им часовой пояс, поэтому всем не-UTC пользователям предлагались неверные слоты, а переходы на летнее время тихо ломали брони. Исправление этой ошибки, а затем укрепление публичной части бронирования и составили основную часть инженерной работы.

02

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

Приложение-планировщик на Vue 3 + webedge-db: живые окна доступности и брони, работающие отдельным проектом на нашем бэкенде webedge-db, с собственной парольной авторизацией и письмами-подтверждениями через mailer.webedge.dev.

Полноценное приложение планирования: хосты задают типы событий и недельную доступность, гости выбирают свободные слоты и бронируют, а система отправляет письма-подтверждения и сгенерированную ссылку на видеовстречу. Оно начиналось на Fastify + MongoDB + Redis и было целиком перенесено на наш самостоятельно размещаемый реактивный backend, чтобы доступность и брони оставались живыми без опроса, работая как отдельный арендатор внутри общего webedge-db.

03

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

M01

Движок слотов с корректными часовыми поясами: рабочие часы по настенным часам конвертируются в UTC и обратно через Intl.DateTimeFormat, поэтому переход на летнее время обрабатывается верно, а итерация идёт по локальному дню хоста, а не по дню UTC

M02

Слой правил бронирования: ключи идемпотентности, защита от дубликатов, лимиты активных броней на гостя, заблокированные даты, переопределения дней и ограничения периода (rolling/range) — всё вычисляется как слой занятости до показа слотов

M03

Укреплённая публичная HTTP-поверхность: неаутентифицированные загрузки ICS и живые ленты календаря, JSON API слотов, обязательная верификация email гостя до публичной брони, а также валидация ввода, очищенные ошибки и ограничения частоты

M04

Планирование видеовстреч: бронь генерирует ссылку на встречу и может направляться прямо в создание события Webedge Meet с запасной ссылкой в проде

M05

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

04

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

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

Vue 3 + Vite + Tailwind на фронте, наш самостоятельно размещаемый реактивный backend для схемы, realtime-запросов, аутентификации (парольный провайдер), запланированных функций и HTTP-действий; развёртывание на статический хостинг, backend запускается как проект внутри webedge-db.

05

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

Клиенты выбирают свободные слоты, исполнители ведут доступность, а подтверждения уходят автоматически — на нашем бэкенде, а не в арендованном планировщике.

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

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

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

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

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