This mini fuel-cost calculator is a React learning project: it reads sample prices from a JSON object, lets a user choose a fuel and enter an amount, then calculates a receipt-style total. It is not an official Shell product or a source of current fuel prices.
What the mini gas-station app does
Samir Hashimov’s tutorial, “Mini "Shell" Gas Station with React: useState and JSON DB”, builds a small form with three parts: a fuel-type dropdown, an amount input, and a Calculate action. After submission, the interface displays a receipt-like result.
The project is divided into Header and Content components. That is the author’s structure for this example, not a required React pattern. Hashimov describes the intent this way: “The goal isn’t to claim I’ve created something "never seen before," but to explain why I made these specific choices.”
How the JSON price data works
The tutorial keeps its sample fuel values in a JSON object and imports that data into the component. The selected fuel’s key is used to look up its price, keeping the example values in one place rather than embedding each value in the calculation.
#1 Best Overall
| Fuel option in the tutorial | Sample value |
|---|---|
| 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 |
These numbers are code-example values only. The tutorial does not identify a currency, geography, unit or measurement basis, date, or independent price source, so they should not be interpreted as real or current market prices.
How the calculator arrives at a total
The calculation is straightforward: the app selects the price associated with the chosen fuel and multiplies it by the entered amount. In simplified form, the operation is selectedFuelPrice * amount. The tutorial parses the amount from the form input before using it in the calculation.
This arithmetic illustrates the data flow, but the available tutorial text does not establish how the project handles invalid or empty input, rounding, or currency formatting. Those behaviors should not be assumed from the displayed result.
Why the example uses useState
React’s useState makes values that change during interaction available to the component’s rendered UI. In this example, state is used for the selected form values and the calculated result: when the user changes a selection or submits a calculation, the component can render the corresponding information.
The tutorial’s small component-local example does not establish a need for shared state or a runtime data service. Its JSON is imported as static example data; the text does not document a price-update workflow, persistence, deployment, accessibility behavior, or production readiness.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What “Shell” means here
“Shell” is part of the tutorial’s project name, not an indication that the calculator is operated, endorsed, or maintained by Shell. The author’s closing note says: “This site is for educational purposes only and has no affiliation with the Shell company.”
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
