Overview

Development of a Flutter mobile application that empowers users to find the best gas prices in their area through community-driven price updates, interactive map visualization, and real-time price tracking. The app combines location services, social features, and data visualization to create a comprehensive gas price discovery platform.

Key Features

• Interactive Map View: Built a custom map interface using Google Maps Flutter that displays gas stations with price markers. Stations show their current 87 octane price in pill-shaped markers with station logos, similar to Airbnb's map design, making it easy to compare prices at a glance.
• Community-Driven Price Updates: Implemented a user-submitted price system with confirmation points. Users can submit gas prices for different fuel types (87, 90, Diesel, ULSD), and the community can confirm or dispute prices, creating a reliable crowdsourced database.
• Real-Time Price Tracking: Developed a BLoC-based state management system that efficiently handles real-time price updates, location changes, and data synchronization with Supabase backend. The app refreshes prices on pull-to-refresh and automatically updates when users navigate the map.
• Multi-Platform Authentication: Integrated multiple authentication methods including Google Sign-In, Apple Sign-In (iOS), and anonymous authentication, providing flexible access options while maintaining user privacy preferences.
• Price Analytics & Savings Calculator: Created data visualization components using FL Chart to display price trends and calculate potential savings. Users can see historical price data and understand how much they save by choosing cheaper stations.
• Firebase Integration: Set up comprehensive Firebase services including Cloud Messaging for push notifications, Remote Config for feature flags and A/B testing, and Cloud Functions for backend processing including price scraping automation.
• Dev/Prod Environment Management: Implemented a robust flavor system for managing development and production environments with separate Firebase projects, API keys, and build configurations, ensuring safe testing and deployment workflows.

Technologies Used

• Flutter: Cross-platform mobile development framework for iOS and Android
• Supabase: Backend-as-a-Service for database management and real-time data synchronization
• Google Maps Flutter: Interactive map visualization and location services
• Firebase: Cloud messaging, remote configuration, and cloud functions
• BLoC Pattern: State management architecture using flutter_bloc for predictable state handling
• FL Chart: Data visualization library for displaying price trends and analytics
• GetIt: Dependency injection for clean architecture and testability

Challenges and Learnings

One significant challenge was managing real-time data synchronization between the mobile app and Supabase database while maintaining optimal performance. The solution involved implementing efficient caching strategies, pagination for large datasets, and rate limiting to prevent excessive API calls. Additionally, handling location permissions across different platforms (iOS and Android) required careful implementation of platform-specific configurations. Another key learning was balancing the community-driven aspect with data accuracy. Implementing a confirmation system where multiple users can verify prices helped maintain data quality while encouraging community participation. The challenge was designing a fair system that rewards accurate submissions without penalizing occasional mistakes. Setting up the dual-environment system (dev/prod) with separate Firebase projects and Supabase instances required careful configuration management. Using environment-specific configuration files and Flutter's flavor system ensured that development work never affected production data, which was crucial for maintaining data integrity.

Outcome

Gas Watch successfully launched on both iOS and Android platforms, providing users with a reliable tool to find the best gas prices in their area. The community-driven approach has resulted in thousands of price submissions, creating a comprehensive database of gas prices. The app has improved user savings by helping them make informed decisions about where to fill up, and the interactive map interface has made price comparison intuitive and accessible. The modular architecture and clean code structure have made it easy to add new features and maintain the codebase as the app continues to grow.