Skip to content
All projects

Case study · Individual project · 2026

Trippycal

Philippine Trip Cost Calculator

An individual project that estimates what a drive in the Philippines will cost: distance, travel time, fuel or electricity use, expressway tolls and the total, for gasoline, diesel, hybrid, plug-in hybrid and electric vehicles. It needs no account, and anything you save stays in your browser.

Trippycal planner in dark mode: a Plan your trip panel with From and To fields, a Toyota Innova diesel at 8.2 km/L city and 18.7 highway, a ₱90 diesel price and a Calculate trip button, beside a map of Luzon and popular trips such as Makati to Baguio

The problem

Drivers planning a trip usually add up fuel and tolls by hand from several websites, and toll fares in particular are scattered across operators, the Toll Regulatory Board and news reports. Trippycal puts the whole cost in one place and labels where every number came from, leaving a value blank rather than showing one it can't back up.

What it does

  • Real road routes on OpenStreetMap data, with alternates and a separately computed toll-free route, each showing its own toll total.
  • Philippine place search and opt-in current location.
  • Fuel and electricity cost that applies city and highway efficiency to their own share of the route.
  • Electric and plug-in hybrid modes with battery percentage used, arrival charge and low-charge warnings.
  • Vehicle search across 15,948 US EPA fuel economy records, a list of 94 common Philippine models, and custom vehicles with your own km/L.
  • Expressway tolls priced entry to exit from official TRB matrices, TRB-approved fares reported in the news, or a third-party compilation, each labelled by source.
  • A trip budget that adds per-day, per-person and quantity-based expenses to the route cost and tracks what was actually spent.
  • Import of a PDF or Word expense guide, read in the browser, with every line reviewed before it is added.
  • Export of the budget as a PDF or an editable Word report.

Engineering decisions

Every figure is labelled by its source
Each value on screen is marked as a verified source, a government test rating, your own value, an estimate or unavailable. A toll section without a known fare shows as unavailable and the total as incomplete, never as zero.
Tolls are priced per toll system, not per road name
The routing engine's road names don't match how tolls are charged, so the route's toll plazas are split into toll systems first. Integrated systems such as NLEX–SCTEX are one fare, and hand-over points count as the exit of one system and the entry of the next.
The calculation engine is separate from the UI
Units, energy, tolls, trip cost and budget maths are plain TypeScript with no UI code, covered by 142 unit tests.
Provider calls stay on the server
Routing and place search go through serverless API routes that validate input, restrict locations to the Philippines, cache results and rate-limit each IP, so provider URLs and keys never reach the browser.

Technologies

  • React 18
  • TypeScript
  • Vite
  • Tailwind CSS 4
  • MapLibre GL
  • Valhalla (routing)
  • Photon (geocoding)
  • Vercel Functions
  • jsPDF & docx
  • pdf.js & mammoth
  • Vitest