Flutter Favorite Places App

Flutter mobile app with Firebase authentication, Cloud Firestore database, real-time data sync, camera integration, GPS location services, Google Maps API, and cloud storage. Demonstrates full-stack mobile development with native device features and Material Design.

Made with Flutter 3.35 / Dart 3.9

Overview

A full-featured Flutter mobile application that allows users to capture, save, and manage their favorite locations with photos and geolocation data. This project demonstrates enterprise-level mobile development practices with Firebase backend integration and native device features.

Features

Core Functionality

  • Photo Capture & Management: Take photos directly from the device camera or select from gallery with automatic quality optimization and cloud storage
  • Geolocation Services: Capture precise location coordinates with automatic address resolution using Google Maps Geocoding API
  • Interactive Maps: Display saved locations on static map previews with Google Maps integration
  • User Authentication: Secure email/password authentication with email verification flow
  • Real-time Data Sync: Instant synchronization of places across devices using Firebase Firestore
  • Dismissible List Items: Swipe-to-delete functionality with undo capability

User Experience

  • Responsive Form Validation: Real-time input validation with helpful error messages
  • Loading States: Visual feedback during asynchronous operations (uploads, authentication, data fetching)
  • Error Handling: Graceful error handling with user-friendly snackbar notifications
  • Smooth Navigation: Intuitive page routing between screens with proper state management
  • Modal Interfaces: Bottom sheet for image source selection (camera vs. gallery)
  • Custom Theming: Consistent Material Design 3 theme with dark mode support

Technical Skills Demonstrated

Flutter & Dart

  • State Management: StatefulWidget lifecycle management with proper controller patterns
  • Custom Controllers: Reusable controller pattern for form components (UserImagePicker, LocationInput)
  • Async/Await: Proper asynchronous programming with Future handling and error management
  • Stream Builders: Real-time UI updates using Firestore snapshots
  • Form Validation: Complex form validation with custom validators
  • Platform Detection: Cross-platform code with web/mobile conditional rendering

Firebase Integration

  • Firebase Authentication: User registration, login, email verification, and session management
  • Cloud Firestore: NoSQL database with nested collections for user-specific data
  • Firebase Storage: Image upload with metadata, organized folder structure, and download URL generation
  • Firebase Functions: Backend cleanup of orphaned images (implemented separately)
  • Security: Proper user-based data isolation and authentication state management

Native Device Features

  • Camera Access: Integration with device camera using image_picker plugin
  • Photo Gallery: Access to device photo library
  • Location Services: GPS location retrieval with permission handling
  • Permission Management: Runtime permission requests for camera and location

API Integration

  • Google Maps Geocoding API: Reverse geocoding to convert coordinates to human-readable addresses
  • Google Maps Static API: Generate static map images for location previews
  • RESTful HTTP Requests: Proper API calls with error handling using the http package

Architecture & Best Practices

  • Separation of Concerns: Clear separation between models, screens, and widgets
  • Error Handling: Comprehensive try-catch blocks with timeout handling
  • Loading States: Proper UI feedback during async operations
  • Memory Management: Proper disposal of controllers and resources
  • Code Organization: Well-structured file hierarchy and naming conventions
  • Logging: Strategic use of developer logs for debugging

UI/UX Design

  • Material Design 3: Modern UI following Material Design guidelines
  • Responsive Layouts: Adaptive layouts using SingleChildScrollView and flexible containers
  • Custom Theming: Centralized theme configuration with ColorScheme
  • Visual Feedback: Loading indicators, fade-in images, and smooth transitions
  • Accessibility: Proper semantic structure and color contrast