PAUZA

PAUSE — to wysokotехнологiczny сайт для студії лазерної епіляції в Києві, орієнтований на високу конверсію та преміальний досвід користувача. Головна особливість проєкту — інтелектуальна система онлайн-бронювання візитів у реальному часі з автоматичною передачею даних на бекенд.

Інтерфейс розроблений із фокусом на мобільні пристрої, швидкість завантаження (Core Web Vitals) та ефекти занурення (smooth-анімації, елементи скляного морфізму). Технологічний стек (Tech Stack)
Backend: Java 17, Spring Boot, Spring MVC, Spring Data JPA

Database: PostgreSQL (міграції, оптимізація збереження та вибірки даних за датами й годинами)

Frontend: HTML5, CSS3 (Custom Grid Layouts, Glassmorphic UI), JavaScript (Vanilla ES6 для високої швидкодії)

Шаблонізатор: Thymeleaf (серверний рендеринг для SEO-оптимізації та швидкого First Contentful Paint)

API та Інтеграції: Telegram Bots API (миттєве сповіщення адміністраторів)

DevOps та Інструменти: Docker, Git, Linux (VPS), Google Search Console

Виконані роботи та Реалізований функціонал
1. Архітектура та Бекенд (Spring Boot & DB)
Розробка REST API для динамічного керування послугами, категоріями, вільними датами та часовими слотами (обробка через BookingFormDTO).

Логіка валідації слотів: Реалізовано алгоритм перевірки доступності часу на стороні сервера, що повністю виключає ризик овербукінгу (подвійного запису на один і той самий час).

База даних: Спроєктовано реляційну структуру в PostgreSQL для збереження прайс-листів, категорій зон та логів поточних бронювань.

2. Преміальний UX/UI та Фронтенд-оптимізація
Гнучкий прайс-акордеон: Створено інтерактивний прайс-лист із використанням сучасного підходу CSS Grid (перехід grid-template-rows від 0fr до 1fr) для ідеально плавної анімації розгортання таблиць без ривків та різких стрибків контенту.

Універсальне інтерактивне модальне вікно запису:

Розроблено дворівневу систему вибору «Категорія -> Зона епіляції» з динамічним підтягуванням цін, тривалості та автоматичним заповненням прихованих полів форми для відправки на сервер.

Кастомний інтерактивний календар та сітка часових слотів з візуальним блокуванням (класи disabled та fully-booked) уже зайнятих або минулих годин.

Оптимізація під мобільні екрани: реалізовано ліміт висоти (max-height: 85vh) та приховано системні скролбари користувача за допомогою CSS для збереження чистоти дизайну.

3. Автоматизація та Сповіщення (Telegram Integration)
Інтегровано модуль автоматичного надсилання заявок у Telegram-канал студії відразу після успішного підтвердження форми (submit). Сповіщення містить повну інформацію про запис: Ім'я, Телефон, Обрана зона, Вартість, Дата та точний Час візиту.

4. Швидкість та SEO (Core Web Vitals)
Miniмізовано використання важких сторонніх JS-бібліотек — увесь інтерактив (календар, маски телефонів, валідація, анімація) написаний на чистому JavaScript (Vanilla ES6). Це забезпечило миттєве завантаження сторінки на смартфонах навіть за умов слабкого мобільного зв'язку.

Налаштовано правильну семантичну структуру тегів для повної індексації пошуковими роботами Google.

Бізнес-результат розробки
Сайт перетворено з базової сторінки-візитки на автономний інструмент генерації лідів. Клієнт отримує можливість записатися на процедуру в кілька кліків, а адміністратори студії миттєво бачать нові броні в месенджері, що знизило час обробки однієї заявки до кількох секунд.