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.