I rider

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 валідацію для захисту від відправки неповних номерів