Ja jeźdzę

iRide — to dynamiczna platforma internetowa dla sieci szkół motocyklowych, serwisów motocyklowych oraz miejsc sprzedaży motocykli w Zaporożu i Dnieprze. Projekt został stworzony od podstaw w celu automatyzacji interakcji z klientami, prezentacji usług firmy oraz zbierania leadów.

Rola w projekcie: Fullstack Developer (Jedyny programista)

Typ projektu: Komercyjny / Case Study

Technologiczny stos
Backend: Java 17, Spring Boot, Spring MVC

Frontend: HTML5, CSS3 (Nowoczesny Flexbox/Grid), JavaScript (Vanilla ES6)

Szablonizator: Thymeleaf

Architektura: MVC (Model-View-Controller)

1. Inteligentna geolokalizacja i personalizacja treści (Spring Boot + Cookies)
Problem: Sieć działa w dwóch miastach z różnymi cenami, grafikami i adresami. Należy pokazywać odpowiednie treści bez przymusowej rejestracji.

Rozwiązanie: Zrealizowano system zapisywania wyboru miasta w Cookies (selectedCity). Stworzono kontroler, który przy pierwszej wizycie na dowolnej stronie serwisu (nawet jeśli użytkownik przeszedł z Google bezpośrednio na wewnętrzną stronę) sprawdza obecność ciasteczka. Jeśli go brakuje — Thymeleaf renderuje modalne okno wyboru miasta, blokując interfejs. Po wyborze strona jest aktualizowana bez utraty kontekstu za pomocą nagłówka HTTP Referer.

2. Premium UX/UI i responsywność (Premium UI)
Efekt Glassmorphism: Dla kart i okien modalnych zastosowano nowoczesny efekt rozmycia tła (backdrop-filter: blur). Aby zapewnić zgodność między przeglądarkami na urządzeniach mobilnych (w szczególności iOS Safari), zintegrowano prefiksy dostawców i fallbacki dla przestarzałych systemów.

Fullscreen-Burger Menu: Opracowano responsywną nawigację dla urządzeń mobilnych. Menu rozwija się na cały ekran za pomocą CSS clip-path: circle() (efekt płynnego rozwijania w kształcie koła z punktu kliknięcia). Zintegrowano dynamiczne opóźnienie pojawiania się elementów (Staggered Animation za pomocą zmiennych CSS --i). Aby zapobiec błędom przewijania podczas otwartego menu, zrealizowano blokowanie body { overflow: hidden } na poziomie JavaScript.

3. Walidacja danych po stronie klienta bez zewnętrznych bibliotek
Problem: Użytkownicy często popełniali błędy przy wprowadzaniu numerów telefonów (wprowadzali litery, nie dopisywali cyfr), co prowadziło do utraty leadów.

Rozwiązanie: Napisano niestandardowy moduł JavaScript do maskowania wprowadzania numeru telefonu w czystym JS (Vanilla). Skrypt automatycznie wstawia krajowy prefiks +380 przy pierwszym naciśnięciu cyfry, blokuje wprowadzanie jakichkolwiek liter czy znaków specjalnych (wyrażenia regularne \D), automatycznie formatuje ciąg i ogranicza długość do standardowego ukraińskiego formatu. Dodatkowo dodano walidację wzoru HTML5 w celu ochrony przed wysyłaniem niepełnych numerów.