Fuel App Web Application

Project Overview

Fuel App Web Application is a modern, mobile-first web app that calculates trip costs based on user input (departure and destination addresses, fuel consumption) and real-time fuel prices retrieved via an external API. The app also displays an interactive map with the calculated route, stores trip history, and visualizes trip costs in a chart.

Technical Architecture

Modular Structure: The project is built with a clear folder structure. Separate files are used for the HTML (index.html), CSS (style.css), and for the JavaScript modules that each address a specific domain:

• js/app.js: Main application written in Vue 3. This module handles user input, calculations, and UI updates.
• js/api.js: Responsible for fetching and processing fuel prices via an external API (Statbel).
• js/map.js: Initializes and manages the Leaflet map to visually display the route.
• js/chart.js: Handles the visualization of trip costs in a chart using Chart.js.
• js/storage.js: Manages saving and loading trip history using localStorage.
• js/cookieBanner.js: Displays a cookie consent banner according to current privacy regulations.

Frameworks and Libraries: Vue 3, Bulma CSS, Animate.css, SweetAlert2, Leaflet, and Chart.js.

Mobile-first Approach: The CSS is written with a mobile-first mindset, and media queries are used for tablets and desktops.

Functional Flow

• User Input and Calculation: The user enters a departure address, destination address, fuel consumption, and selects a fuel type from a dropdown. Upon clicking "Calculate Trip Cost," the following steps occur:
  • The addresses are converted into coordinates via the Nominatim API.
  • The route is calculated using the OSRM API (including distance and travel time).
  • Real-time fuel prices are fetched via the Statbel API, and the trip cost is calculated.
  • The result is displayed and the route is shown on a Leaflet map.
• Storage and Visualization: After each calculation, the trip is saved in localStorage. The history is displayed and visualized using Chart.js.
• Cookie Consent and Returning Users: On the first visit, a cookie banner is shown. If trip data is already stored, a popup asks the user if they want to view the last calculation.
• Navigation and Additional Pages: The main app contains the calculator and visualization, while "About Us" and "Contact" are on separate pages. The navigation is responsive and uses Bulma's navbar component.

UI Design & Styling

• Dark, Modern Look: Designed with a macOS-inspired style using transparent rgba colors and a backdrop filter to create a “frosted glass” effect.
• Rounded Corners and Shadows: All components, such as boxes and the map, have rounded corners and subtle shadows.
• Mobile-first Styling: The CSS is optimized for mobile devices with additional styles for larger screens via media queries.

Critical Reflection

Strengths: The modular setup, modern technologies (Vue 3, Bulma, etc.), and mobile-first approach provide a fast and responsive app.

Improvements: Dependence on external APIs can lead to issues (e.g., rate limits), and error handling could be further refined.

Conclusion

The Fuel App Web Application combines modern web technologies to deliver a responsive, mobile-first experience. The project demonstrates both technical skill and a critical approach to user experience and design, forming a solid basis for further expansion.