Я всадник

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 валидация для защиты от отправки неполных номеров.