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