jicoing

Posted on May 23

# ⛽ I Built a Cross-Platform Fuel Finder with React & Supabase: The Indie Dev Journey

#react #showdev #sideprojects #webdev

As someone who loves long road trips, I was tired of switching between five different apps to find a station, log my mileage, and calculate if I actually had enough cash for the next leg of the trip. So, I did what any dev does... I built my own.

In this post, I want to share the tech stack, the "aha!" moments, and the "why did I do this to myself?" challenges of building a mapping app as a solo dev.

Check out the live here: findmyfuel.site

🛠 The Stack: Keeping it Lean and Fast

When you're building solo, speed of iteration is everything. I chose a stack that let me move fast without sacrificing power:

Frontend: React (Vite) + TypeScript + Tailwind CSS.
UI Components: shadcn/ui (Absolute game changer for clean aesthetics).
Mapping: Leaflet with OpenStreetMap & Overpass API.
Backend/Auth: Supabase. I needed auth and a database that "just worked" so I could focus on the features.
Mobile: Capacitor. One codebase, running on web and Android.
Animations: Framer Motion for those "premium feel" transitions.

🗺 The Challenge: Mapping without the "Google Tax"

We've all seen the Google Maps API bills. For an indie project, I wanted to keep overhead low. I went with OpenStreetMap and the Overpass API.

Fetching fuel stations nearby is handled by a simple Overpass query:

const buildOverpassQuery = (latValue, lonValue, radiusMeters) => {
  return `
    [out:json];
    (
      node
        ["amenity"="fuel"]
        (around:${radiusMeters},${latValue},${lonValue});
    );
    out center;
  `;
};

It’s fast, free, and surprisingly accurate. The only trade-off is that you have to handle the parsing yourself, but it’s a small price to pay for independence!

📊 Feature Spotlight: More Than Just a Map

I didn't want this to be just a station finder. I wanted a companion for the road.

Fuel Logging: Every time you fill up, you can log the price, amount, and current mileage. The app then calculates your fuel rate (cost per liter) over time.
Trip Calculator: A built-in tool to estimate how much your next journey will cost based on distance and your car's efficiency.
Multi-Country Support: Whether you're in the US (Miles/Gallons) or India (KM/Liters), the app adapts its units and currency automatically.

📱 Going Mobile with Capacitor

One of the best decisions was using Capacitor. I didn't have to learn Kotlin or Swift. I just wrapped my Vite build, and boom—I had an Android app.

The most satisfying part was seeing the Leaflet map work smoothly with native touch gestures. If you haven't tried Capacitor yet, it’s a total life-saver for web devs wanting to hit the app stores.

💡 Lessons Learned

Geolocation is Tricky: Browsers and mobile OSs are (rightfully) strict about location permissions. Handling the "User denied access" state gracefully is 50% of the UI work.
Data Consistency: When you support multiple countries, you realize how many ways there are to write a ZIP code. Nominatim's structured search saved me here.
Indie Dev Mindset: Perfect is the enemy of shipped. I spent too much time on a "perfect" logo before realizing the core map functionality was what people actually cared about.

🚀 What's Next?

FindMyFuel is live, but the roadmap is long:

[ ] Real-time fuel prices (via regional APIs).
[ ] Offline map caching for those remote mountain passes.
[ ] More advanced charts for fuel consumption trends.

Check out the repo here: jicoing/FuelFinder

I’d love to hear your thoughts! Have you built anything with mapping APIs recently? Any tips for a fellow indie dev?

Let's chat in the comments! 👇

webdev #javascript #react #supabase #indiedev #showdev

DEV Community