Gas Tracker PWA – Full Breakdown

Offline-first web app that logs fuel fill-ups, stores data in localStorage, and computes MPG & cost-per-mile—no connectivity required.

Live Demo

1. Problem → Solution

Pain point: Paper receipts and random notes apps make it hard to track real fuel efficiency and cost over time—especially in areas with poor cell coverage.

Solution: A Progressive Web App that runs 100 % on the client, logs gallons, miles, price, and instantly shows MPG & cost-per-mile—no account needed.

2. Architecture

3. Core Logic (excerpt)

// src/stats.js
export function calcStats(log) {
  if (log.length < 2) return {};
  let totalMiles = 0, totalGallons = 0, totalCost = 0;
  for (let i = 1; i < log.length; i++) {
    const miles = log[i].odometer - log[i-1].odometer;
    totalMiles   += miles;
    totalGallons += log[i].gallons;
    totalCost    += log[i].gallons * log[i].price;
  }
  return {
    mpg:  (totalMiles / totalGallons).toFixed(2),
    cpm:  (totalCost / totalMiles).toFixed(3),
    fillups: log.length - 1
  };
}

4. Challenges & Lessons

5. Future Improvements

← Back to Projects