ПАУЗА

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

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

База данных: PostgreSQL (миграции, оптимизация сохранения и выборки данных по датам и часам)

Фронтенд: 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)
Минимизировано использование тяжелых сторонних JS-библиотек — весь интерактив (календарь, маски телефонов, валидация, анимация) написан на чистом JavaScript (Vanilla ES6). Это обеспечило мгновенную загрузку страницы на смартфонах даже в условиях слабого мобильного соединения.

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

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