iRide — это динамичная веб-платформа для сети мотошкол, мотосервисов и площадок по продаже мотоциклов в Запорожье и Днепре. Проект разработан с нуля для автоматизации взаимодействия с клиентами, презентации услуг компании и сбора лидов.
Роль в проекте: Fullstack Developer (Единственный разработчик)
Тип проекта: Коммерческий / Case Study
Технологический стек
Backend: Java 17, Spring Boot, Spring MVC
Frontend: HTML5, CSS3 (Modern Flexbox/Grid), JavaScript (Vanilla ES6)
Шаблонизатор: Thymeleaf
Архитектура: MVC (Model-View-Controller)
1. Умная геолокация и кастомизация контента (Spring Boot + Cookies)
Проблема: Сеть работает в двух городах с разными ценами, графиками и адресами. Нужно показывать релевантный контент без принудительной регистрации.
Решение: Реализована система сохранения выбора города в Cookies (selectedCity). Создан контроллер, который при первом визите на любую страницу сайта (даже если пользователь пришел с Google сразу на внутреннюю страницу) проверяет наличие куки. Если она отсутствует — Thymeleaf рендерит модальное окно выбора города, блокируя интерфейс. После выбора страница обновляется без потери контекста с помощью HTTP-заголовка Referer.
2. Премиальный UX/UI и адаптивность (Premium UI)
Эффект Glassmorphism: Для карточек и модальных окон использован современный эффект размытия фона (backdrop-filter: blur). Для обеспечения кроссбраузерности на мобильных устройствах (в частности iOS Safari) интегрированы вендорные префиксы и fallbacks для устаревших систем.
Fullscreen-Бургер Меню: Разработана адаптивная навигация для мобильных устройств. Меню разворачивается на весь экран с помощью CSS clip-path: circle() (эффект плавного раскрытия кругом из точки клика). Интегрирована динамическая задержка появления элементов (Staggered Animation с помощью CSS-переменных --i). Для предотвращения багов прокрутки во время открытого меню реализовано блокирование body { overflow: hidden } на уровне JavaScript.
3. Клиентская валидация данных без сторонних библиотек
Проблема: Пользователи часто ошибались при вводе номеров телефонов (вводили буквы, не дописывали цифры), что приводило к потере лидов.
Решение: Написан кастомный JavaScript-модуль для маски ввода телефона на чистом JS (Vanilla). Скрипт автоматически подставляет национальный префикс +380 при первом нажатии на цифру, блокирует ввод любых букв или спецсимволов (регулярные выражения \D), автоматически форматирует строку и ограничивает длину до стандартного украинского формата. Дополнительно добавлена HTML5 pattern валидация для защиты от отправки неполных номеров.
Роль в проекте: Fullstack Developer (Единственный разработчик)
Тип проекта: Коммерческий / Case Study
Технологический стек
Backend: Java 17, Spring Boot, Spring MVC
Frontend: HTML5, CSS3 (Modern Flexbox/Grid), JavaScript (Vanilla ES6)
Шаблонизатор: Thymeleaf
Архитектура: MVC (Model-View-Controller)
1. Умная геолокация и кастомизация контента (Spring Boot + Cookies)
Проблема: Сеть работает в двух городах с разными ценами, графиками и адресами. Нужно показывать релевантный контент без принудительной регистрации.
Решение: Реализована система сохранения выбора города в Cookies (selectedCity). Создан контроллер, который при первом визите на любую страницу сайта (даже если пользователь пришел с Google сразу на внутреннюю страницу) проверяет наличие куки. Если она отсутствует — Thymeleaf рендерит модальное окно выбора города, блокируя интерфейс. После выбора страница обновляется без потери контекста с помощью HTTP-заголовка Referer.
2. Премиальный UX/UI и адаптивность (Premium UI)
Эффект Glassmorphism: Для карточек и модальных окон использован современный эффект размытия фона (backdrop-filter: blur). Для обеспечения кроссбраузерности на мобильных устройствах (в частности iOS Safari) интегрированы вендорные префиксы и fallbacks для устаревших систем.
Fullscreen-Бургер Меню: Разработана адаптивная навигация для мобильных устройств. Меню разворачивается на весь экран с помощью CSS clip-path: circle() (эффект плавного раскрытия кругом из точки клика). Интегрирована динамическая задержка появления элементов (Staggered Animation с помощью CSS-переменных --i). Для предотвращения багов прокрутки во время открытого меню реализовано блокирование body { overflow: hidden } на уровне JavaScript.
3. Клиентская валидация данных без сторонних библиотек
Проблема: Пользователи часто ошибались при вводе номеров телефонов (вводили буквы, не дописывали цифры), что приводило к потере лидов.
Решение: Написан кастомный JavaScript-модуль для маски ввода телефона на чистом JS (Vanilla). Скрипт автоматически подставляет национальный префикс +380 при первом нажатии на цифру, блокирует ввод любых букв или спецсимволов (регулярные выражения \D), автоматически форматирует строку и ограничивает длину до стандартного украинского формата. Дополнительно добавлена HTML5 pattern валидация для защиты от отправки неполных номеров.