booqly

booqly е SaaS платформа за фризьорски салони, барбершопи, студиа, козметични и терапевтични центрове и всички бизнеси, които работят с часове. Идеята ѝ е проста: Your business. Your time. One place. Календарът, клиентите, екипът, услугите, плащанията и онлайн записването са събрани на едно място, вместо да са разпилени между тетрадки, чатове, таблици и различни приложения.

Проектът обхваща целия път на потребителя. Започва с маркетинговия сайт и регистрацията, минава през настройката на бизнеса и ежедневната работа в приложението и стига до публичната страница, от която клиентите си запазват час сами. Платформата е изцяло на български и английски.

Малките бизнеси, които работят с часове, обикновено управляват деня си с няколко несвързани инструмента. Часовете се записват по телефона или в Instagram, графикът е на хартия или в Google Calendar, а клиентите са в телефонния указател. Плащанията се водят в тетрадка, ако изобщо се водят. Така се губят часове, случват се двойни записвания, собственикът няма ясна представа за приходите и натоварването на екипа, а клиентът не може просто да си запази час в 23:00 вечерта.

Една платформа с три лица:

1. 1Маркетингов сайт, който представя продукта, решенията по вид бизнес и цените и води към регистрация.
2. 2Приложение за бизнеса с 11 модула: преглед, календар, резервации, клиенти, услуги, екип, онлайн записване, анализи, плащания, маркетинг и настройки.
3. 3Публична страница за записване, от която клиентите сами избират услуга, специалист, дата и час.

Интерактивен календар

Календарът е сърцето на продукта. Има дневен, седмичен, месечен и агенда изглед. Дневният изглед показва всеки служител в отделна колона, а седмичният показва дните. И двата използват един и същ компонент, който може да изобрази всякакъв набор от колони. Часовете се местят с плъзгане, удължават се с дърпане на долния ръб, а нов час се създава с клик в празно място. Всичко това е написано на ниско ниво с pointer events, без външна календарна библиотека. Часове, които се застъпват, се подреждат автоматично в паралелни ленти, а ако лентите станат твърде много, излишните се събират.

Онлайн записване за клиенти

Публичната страница води клиента през няколко стъпки: услуга → специалист → дата → час. Отстрани се вижда обобщение, което се обновява на живо. Свободните часове се изчисляват в реално време от работния график на всеки служител, продължителността на услугата и времето за подготовка между клиентите, като вече заетите часове се изключват. Бизнесът определя кои услуги могат да се записват онлайн.

Управление на бизнеса

• Клиенти: профил с история на посещенията, изхарчена сума, етикети, бележки и съгласие за маркетинг.
• Екип: индивидуални работни графици, услуги, които служителят извършва, процент комисионна и статистика за представянето.
• Услуги: категории, цена, продължителност, време за подготовка и цвят в календара.
• Плащания: платени, неплатени и възстановени суми, както и разделение между събрани и очаквани приходи.
• Преглед: ключови показатели за деня, оставащи свободни часове и секция „изисква внимание“ за непотвърдени или неплатени резервации.

Анализи

Графиките за приходи, резервации и натовареност на екипа са нарисувани директно в SVG, без библиотека за графики. Така цветовете съвпадат точно с дизайн системата, а размерът на приложението не расте.

Автоматични молби за отзив

Това е може би най-обмислената функционалност. След като час е платен и приключен и е минало избраното от бизнеса време (от 1 час до 1 ден), системата изпраща имейл с молба за отзив. Правилата са съобразени със закона и с добрите практики:

• Не се пишат писма на клиенти без имейл, на отказали се клиенти и на хора, питани през последните 30 дни.
• При включване на автоматизацията не се пращат писма за стари посещения.
• Петте звезди в имейла са отделни линкове, така че още първото докосване записва оценката.
• С изричното съгласие на клиента положителните отзиви се публикуват автоматично в социалните мрежи на бизнеса. Останалите чакат ръчно одобрение.
• Линкът към Google се предлага при всяка оценка, защото насочването само на доволни клиенти към публични платформи (review gating) е забранено от правилата на Google и от закона за защита на потребителите.

Удобство и детайли

• Команден панел с ⌘K / Ctrl+K за търсене на клиенти, резервации, услуги и служители отвсякъде.
• Клавишни комбинации: N за нова резервация, Esc за затваряне.
• Настройка в 4 стъпки за нов бизнес.
• Демо акаунт с „живо“ студио, което е попълнено и изглежда актуално.

Ясна граница между интерфейса и данните. Всяка промяна, която интерфейсът прави, минава през един-единствен модул за данни. В момента той пази състоянието в React и в localStorage, но за връзка с реален сървър се подменя само този файл. По същия начин автентикацията е изолирана в три асинхронни функции.

Детерминистични демо данни. Демо студиото се генерира с генератор на случайни числа със зададено начално число (seeded PRNG) и спрямо днешната дата. Затова данните са едни и същи при всяко презареждане, но винаги изглеждат актуални: има часове днес, утре и миналата седмица.

Дизайн система от токени. Всички цветове на бранда са дефинирани на едно място като Tailwind @theme токени. Никъде другаде в кода няма твърдо зададен цвят, затова промяна на бранда отнема минути.

Собствена система за преводи. По около 1 100 низа на всеки език, превключване в движение и формати на дати и часове според езика.

Минимални зависимости. Само 5 runtime пакета. Календарът, графиките, командният панел и системата за преводи са написани от нулата.

Седем HTML имейла, на български и английски: приветствен, маркетингов, за старта на продукта и за молба за отзив. Писани са така, че да работят в реални имейл клиенти. Използват вложени таблици, стиловете са вградени в елементите, бутоните са направени с VML заради Outlook, а под 620 px оформлението минава в една колона. Транзакционните и маркетинговите писма са разделени съзнателно, според изискванията на GDPR и на Gmail и Yahoo за масови податели.

Освен продукта създадохме и визуалната идентичност: лого, икони, социални изображения и две рекламни видеа, генерирани изцяло с код.

• Видео за старта: 35 секунди, 60 fps, в хоризонтален (16:9) и вертикален (9:16) формат и с българска версия. То показва целия път в продукта: от разпилените инструменти, през календара и записването, до анализите и логото.
• Анимация, която се повтаря безкрайно: 14 секунди, в която една форма се превръща в 11 компонента от интерфейса и накрая в логото.

Всеки кадър е функция единствено на времето, така че всеки кадър може да се изобрази точно и по всяко време. Кадрите се рендерират с Playwright, а ffmpeg ги сглобява и добавя размазване при движение. Музиката и звуковите ефекти са синтезирани с код, а тактовете на музиката са засечени автоматично и синхронизирани с анимацията с точност до няколко милисекунди.