troypoulter / fuelpulse

Effortlessly locate the most economical fuel prices near you. Streamlined. User-Friendly. Constantly Updated.

Fuel Pulse

Effortlessly locate the most economical fuel prices near you. Streamlined. User-Friendly. Constantly Updated.

Features

• Filters your nearest fuel stations by location and fuel type
• Displays the cost of a full tank alongside the cost per litre
• Sort by price or by distance
• Responsive design, working well on all screen sizes
• NSW supported, more states and territories support coming in the future!

Motivation

I've wanted to explore building a public app that collects and displays real data, considers SEO and to try out technologies like Next.js with Server-Side Rendering (SSR), to mix it up from my day-to-day work.

I set out to build a decently functional fuel price tracking app, that uses live data from NSW Government's Fuel API, the state I live in Australia, to help my partner see the price difference at a tank level, like 30L, instead of per litre - so I thankfully will always have one user.

I also wanted to put a time limit on it, most of the core functionality was built in just over a week during the holidays in 2023/2024 before I went back to work, and I am very happy I was able to finish* a side project!

*By finish, I of course mean, the first public version, as I have many more ideas I'd love to add to this over time, or for others to add! It surprised me just how much functionality a fuel price tracking app can have.

Tech Stack

• Next.js
• TailwindCSS & shadcn/ui
• SQLite hosted via Turso
• DrizzleORM
• Vercel for hosting and deployment
• Plausible for analytics

Contributing

Contributions are always welcome!

See CONTRIBUTING.md for ways to get started.

Feedback

Feedback is appreciated! Reach out on Twitter or submit a new issue!

License

Licensed under the MIT license.

fuelpulse's Issues

Add search by suburb/postcode

Only relying on the user's current location isn't too helpful if they aren't currently where they have their car or want to get fuel. Until maps are supported, being able to search by suburb or postcode will be very handy!

There are two main things to consider with this, getting the data and how to display it, here are some starting suggestions.

Getting the data

The dataset needs to contain not just all suburbs and their postcodes, also, their latitude and longitude as all our calculations come down to that, where two main options arise as I want to keep it mostly free of cost where possible.

1. Google Maps Geocoding API: Geocoding API overview  |  Google for Developers seems to be the normal approach others go, well documented, good coverage and for the realistic user load should stay within the free tier. There are other alternatives like https://www.mapbox.com/ but I'm keen to more explore the common Google API if this route is taken.
2. Matthew Proctor's Australian Suburb and Postcode Dataset: Australian Post Codes - Matthew Proctor is a fantastic resource made by @matthewproctor which is fairly up-to-date, is free and would allow experimentation with storing a large dataset and how to quickly retrieve values, likely utilising something like Redis.

Displaying the input and results

I'm thinking this could replace the home page main CTA with an input instead which, when selected, takes to the search page:

And then on the seach page, we already have these inputs which take up a good amount of space:

Desktop

Mobile

Perhaps we would make each input smaller on mobile or have an expand view, more experimentation would need to be done there.

Create a page for each station

Right now there is no view of all stations or to find stations by state or similar, so creating a page like /station/[slug] would be a good way to display for each station data points like:

• Location and direction data
• Current fuel prices (opportunity for some cool styling?)
• History of fuel prices

We'd want each page to consider SEO, so setting the appropriate metadata information and using dynamic OG generation (could learn from #1 approach) is also a way to boost organic growth towards the website.

Then in the main search page, we can add some details button to navigate to the station.

In terms of the slug, unsure whether to use an id like /station/2853 or do a combination of the name, suburb and maybe postcode for uniqueness, so something like /station/Ultra+Manly+2095, something to explore.

Dynamically generate OpenGraph image for main page

Right now the OpenGraph (OG) image is static, shown below.

https://github.com/troypoulter/fuelpulse/blob/main/public/og.png

But the number of stations grows fairly regularly, it's now at 2,843 after just two weeks, where with more time it will only grow larger.

So let's change it to use Open Graph (OG) Image Generation to generate it based on the number of current stations and invalidate after an hour or so.

This will be helpful as down the track when we add more detail pages for stations, we'd want to dynamically generate their OG images as well!

Update the contributing guide to include Turso setup

After #6, we now rely on having extensions installed with our SQLite DB, and the simplest way to do this for now is to utilise Turso and create a database.

We need to update the contributing guide to explain how to do this.