carFlo Web Platform
Modern SaaS landing page, interactive fuel calculator & bilingual web platform.
01. Context & Objectives
carFlo is a modern iOS/Android automotive utility for digital expense tracking, verified service logs, real-world fuel consumption analytics, and 1-tap SMS parking in Serbia. The goal of the web platform was to build an ultra-fast, aesthetically pristine, high-converting landing page that demonstrates product value, establishes trust, hosts interactive browser utilities, and offers seamless bilingual support (EN/SR).
The Engineering Challenge
Most modern SaaS landing pages rely on bloated JavaScript frameworks (React/Vue/Webpack bundles), leading to slow initial paint times on mobile cellular networks, heavy runtime dependencies, and poor conversion. Additionally, users needed interactive vehicle utilities (such as fuel cost calculations and verified digital service book previews) directly in the browser without downloading the app first.
The Implemented Solution
Engineered a zero-dependency, pure vanilla frontend architecture leveraging Semantic HTML5, modular CSS3 custom properties, and ES6+ JavaScript. Designed a cohesive design system with dark/light themes, custom client-side i18n engine without page refreshes, and interactive browser tools while achieving perfect 100/100 Core Web Vitals.
System Architecture & Infrastructure
Frontend Layer
Semantic HTML5 (W3C validated), Modular CSS3 (Custom Properties & Glassmorphism), Vanilla JavaScript (ES6+), Satoshi variable typography.
Backend & Serverless Handlers
Zero-framework static edge architecture; client-side localStorage state persistence and localized parameter routing.
Cloud Storage & Media Pipeline
Optimized SVG vector asset pipeline and modern WebP imagery with inline critical CSS.
Engineered Product Features
Proprietary Client-Side i18n Engine
Instantaneous EN/SR switching via data-i18n attributes and in-memory translation dictionaries without page reloads, persisting locale in localStorage.
Interactive Smart Fuel Cost Calculator
Live calculation of 100km, monthly, and yearly driving costs with quick presets (Eurodiesel, Petrol, Hybrid/EV) and adaptive currency (RSD/EUR).
Verified Digital Service Book Modal
Interactive preview demonstrating certified vehicle maintenance history (VIN, mileage, service stamp) designed to boost vehicle resale value.
Cross-Platform Flag Engineering
Bypassed Windows OS emoji flag rendering limitations by crafting custom 21x14px SVG badges (Serbian coat of arms & Union Jack).
Native Dark / Light Theme Engine
Auto-detection of prefers-color-scheme with manual toggle, localStorage persistence, and zero flash of unstyled content (FOUC).
Full Legal & Changelog Subpages
Independent subpages built in the same design system: changelog.html, privacy.html, terms.html, and account deletion compliance.
Engineering Challenges & Tradeoffs
Windows OS Emoji Flag Rendering Inconsistency
Sub-Second Load Times with Zero Framework Overhead
Production Results & Reliability
Flawless 100/100 Core Web Vitals across mobile and desktop devices with sub-second LCP and 0.00 CLS.
Zero-framework architecture resulting in an ultralight footprint and instantaneous interface transitions.
Substantially higher App Store click-through conversion rates driven by interactive in-browser calculators and verified trust badges.