Mini "Shell" Gas Station with React: useState and JSON DB

Small applications often seem insignificant. However, if these apps solve a real problem, are technically sound, and are built with UX in mind, they can be more valuable than complex systems.

In this article, I will talk about the logic behind a mini fuel calculation app I built using React, the technical decisions I made, and the problems I encountered. The goal isn't to claim I've created something "never seen before," but to explain why I made these specific choices.

Starting the App

First, because fuel prices are dynamic, I decided to store them in a JSON file. This allows for centralized management of the pricing.

{
  "AI-92_gasoline": 1.15,
  "AI-95_gasoline": 1.60,
  "AI-98_gasoline": 2.30,
  "diesel": 1.10,
  "LPG": 0.45,
  "methane_CNG": 0.40,
  "electricity": 0.125
}

Next, I set up the component structure. This prevents the codebase from becoming overly complex as it scales. Since it's a small project, I divided it into two main components: Header and Content.

Retrieving Data

Typically, when we go to a gas station, we specify the amount of fuel we want, the employee fills it up, and gives us a receipt. I decided to simulate this in my project. The user selects the fuel type from a dropdown menu and enters the amount in an input field. Once the "Calculate" button is clicked, a receipt is generated for the user.

You can check out the source code in the GitHub repository.

Calculating Data

As we know, calculating the fuel cost requires multiplying the fuel price by the fuel amount. Let's create a function for this calculation:

import React from 'react'
import '../css/content.css'
import tarif from '../data/tarif.json'

const Content = () => {

    function CalcFuel(type, amount) {
        return tarif[type] * amount;
    }

    console.log(CalcFuel("LPG", 3))


    return (
        <div>

        </div>
    )
}

export default Content

As we can see, this function takes two dynamic arguments: type (fuel type) and amount (fuel volume).

We can get the type value by linking the user's dropdown selection to our JSON data: tarif[type]. By placing the selected value into the type parameter, we can navigate the JSON and retrieve the corresponding value.

const type = e.target.fuel.value;

The fuel amount can be retrieved by sending the value entered by the user in the amount input.

const amount = parseFloat(e.target.amount.value);

To calculate the total amount, we can trigger the following code during the form's submit event:

const total = CalcFuel(type, amount);

This defines a total variable and assigns it the result of the CalcFuel() function.

Displaying the Result

Inspired by the physical receipts given at gas stations, I decided to design a UI element that represents a receipt to display the final result.

After applying the necessary CSS styling, I achieved the following result:

The problem I encountered here was that it wasn't immediately possible to show the result from a function directly in the UI.

To solve this, I used useState. useState caught my attention because it allows variables to be used and updated globally within the component's scope. I assigned the variables to useState, and they were ready to be rendered in the UI.

With this, the selected fuel type, amount, and total price are calculated dynamically and presented to the UI.

Conclusion

Our mini "Gas Station" site is now fully functional. The user selects the fuel type, enters the amount, and sees the result on the receipt upon clicking the "Calculate" button.

I hope the logic behind this mini project inspires you and helps you build your own small applications with React.

Thanks for your time! ;)

Project GitHub Repo: Shell-Gas-Station

Note: This site is for educational purposes only and has no affiliation with the Shell company.