I rider

iRide is a dynamic web platform for a network of motorcycle schools, motorcycle services, and motorcycle sales sites in Zaporizhzhia and Dnipro. The project was developed from scratch to automate customer interactions, present the company's services, and collect leads.

Role in the project: Fullstack Developer (Sole Developer)

Project type: Commercial / Case Study

Technology stack
Backend: Java 17, Spring Boot, Spring MVC

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

Template engine: Thymeleaf

Architecture: MVC (Model-View-Controller)

1. Smart geolocation and content customization (Spring Boot + Cookies)
Problem: The network operates in two cities with different prices, schedules, and addresses. Relevant content needs to be displayed without forced registration.

Solution: A system for saving the selected city in Cookies (selectedCity) was implemented. A controller was created that checks for the presence of cookies upon the first visit to any page of the site (even if the user came from Google directly to an internal page). If it is absent, Thymeleaf renders a modal window for city selection, blocking the interface. After selection, the page is refreshed without losing context using the HTTP Referer header.

2. Premium UX/UI and responsiveness (Premium UI)
Glassmorphism effect: A modern background blur effect (backdrop-filter: blur) was used for cards and modal windows. To ensure cross-browser compatibility on mobile devices (especially iOS Safari), vendor prefixes and fallbacks for outdated systems were integrated.

Fullscreen Burger Menu: Adaptive navigation for mobile devices was developed. The menu expands to full screen using CSS clip-path: circle() (a smooth opening effect from the click point). A dynamic delay for element appearance (Staggered Animation using CSS variables --i) was integrated. To prevent scrolling bugs when the menu is open, body { overflow: hidden } was implemented at the JavaScript level.

3. Client-side data validation without third-party libraries
Problem: Users often made mistakes when entering phone numbers (entered letters, did not complete digits), leading to lost leads.

Solution: A custom JavaScript module for phone input masking was written in pure JS (Vanilla). The script automatically inserts the national prefix +380 upon the first digit press, blocks the input of any letters or special characters (regular expressions \D), automatically formats the string, and limits the length to the standard Ukrainian format. Additionally, HTML5 pattern validation was added to prevent the submission of incomplete numbers.