Fuel Tracker

Problem Statement

Drivers who want to actually understand their vehicle costs — real fuel economy vs. the manufacturer's estimate, cost per mile/km, how fuel prices trend over time — have nowhere good to log it. Spreadsheets are clunky and most apps demand an account and a server round-trip for what is fundamentally private, personal data that should work offline.

Proposed Solution

Fuel Tracker (shown as MileTracker) is an offline-first web app for logging mileage and fuel and turning those logs into analytics. You add fuel/mileage logs; it computes actual vs. estimated MPG, cost-per-distance, and fuel-price trends, visualized with charts — all stored locally in the browser, with CSV import/export so the data is portable.

Full Solution Details

• Dashboard — analytics overview (with a clean empty state for first use).
• Mileage Logs — the full list of entries.
• Add Log — record mileage + fuel.
• Analytics — actual vs. estimated MPG, cost per mile/km, fuel-price trends over time (Recharts).
• CSV import/export — bring data in, take it out — no lock-in.
• Offline-first persistence — data lives in IndexedDB (via LocalForage), so it works with no network and no account.
• NGN currency support for the Nigerian market.

Technical Documentation

React + TypeScript + Vite SPA. Persistence uses LocalForage (IndexedDB under the hood) rather than localStorage, which matters: IndexedDB handles structured records and larger datasets and is async, so logging history scales without blocking the UI. Recharts powers the trend/MPG visualizations. React Router handles the Dashboard / Logs / Add-Log navigation. No backend — the entire app is client-side, making it instant, private, and trivially deployable (Netlify).

Tech Stack

React, TypeScript, Vite, Recharts, LocalForage (IndexedDB), React Router; CSV import/export.

System Design

Add Log (mileage + fuel + cost)
        │
        ▼
  LocalForage / IndexedDB (offline, structured records)
        │
  ┌─────┴───────────────┐
  ▼                     ▼
Analytics engine     CSV import/export
(MPG actual vs est,   (portability, no lock-in)
 cost/mile, trends)
        │
        ▼
  Recharts dashboard (Dashboard / Mileage Logs)

Smart Architectural Decisions

• IndexedDB over localStorage. Choosing LocalForage/IndexedDB for time-series log data is the correct call — async, structured, and scalable — versus the common (and limiting) localStorage shortcut. It shows understanding of browser storage trade-offs.
• Offline-first, account-free. Personal vehicle data stays on-device: private, instant, zero backend cost, and usable with no connection — the right model for this use case.
• CSV in/out as a first-class feature respects data ownership and bridges the spreadsheet workflow users are migrating from.
• Derived analytics, not just storage. Actual-vs-estimated MPG and cost-per-distance turn raw logs into the insight users actually want.

Impacts

A private, offline-capable vehicle-cost tracker that converts fuel/mileage logs into real economy and cost analytics, with portable CSV data and no account required — deployed live.

Demonstrated Skills

Offline-first / local-first app design; correct browser-storage selection (IndexedDB via LocalForage); data visualization (Recharts); analytics/derived-metric computation (MPG, cost-per-distance, trends); CSV import/export; React + TypeScript + Vite SPA development.