Comparing fuel prices or exchange rates across countries meant opening multiple tabs, cross-referencing different sources, and manually converting currencies. There was no single place to get a clean, comparable view of global pricing data.
The Problem
Travelers, digital nomads, and anyone making cross-border financial decisions had no simple tool to compare fuel costs, exchange rates, and cost of living indices in one place. Existing solutions were either bloated with ads, required registration, or only covered one data category at a time.
What It Does
RateRadar aggregates three types of global pricing data into a single, fast SPA:
Fuel Prices — retail gasoline, diesel, and LPG prices for 115+ countries. Filterable by region, searchable by country name. Null prices shown as — where data is unavailable.
Currency Rates — live exchange rates for 30+ major currencies. Select any base currency (EUR, USD, HUF, RSD, GBP, CHF, TRY), enter an amount, and see all conversions update instantly. Cross-rate formula handles any base correctly regardless of the EUR-based API response.
Food Basket Index — cost of living food index for 90+ countries relative to world average (100). Countries are tiered as Cheap, Average, or Expensive with color-coded badges. A compare mode lets you select two countries and see the exact percentage difference in food costs.
Architecture
Built as a pure frontend SPA — no backend, no database, no server-side code. All data comes from the OpenVan.camp Public API, which is free, requires no authentication, and supports CORS for direct browser requests.
State is managed with Pinia stores, one per data category. Each store caches its API response for the session — switching between tabs does not trigger re-fetches. The app is deployed as a static build via FTP to shared hosting, with a .htaccess rewrite rule to support Vue Router history mode.
Key Technical Decisions
shadcn-vue was chosen for UI components — Table, Card, Select, Input, Badge, Skeleton, Alert, and Combobox are all from shadcn-vue, giving a consistent design system without a heavy component library dependency.
Session caching with Pinia — each data category has its own Pinia store. API responses are cached for the session lifetime — switching between the Fuel, Currency, and Basket tabs does not trigger re-fetches. The cache guard checks store state before every fetch, keeping the app fast on slow mobile connections.
Searchable country combobox — the basket compare mode uses a Popover + Command pattern from shadcn-vue instead of a native select, allowing users to search across 90+ countries by name rather than scrolling through a long dropdown.
Cross-rate formula — the OpenVan.camp currency API returns all rates relative to EUR. Converting between two non-EUR currencies requires a cross-rate calculation: amount × (rates[target] / rates[base]). A guard handles missing or zero base rates gracefully.