Firebase – Rugburn https://rugburn.dev Software Development Sun, 02 Nov 2025 20:12:16 +0000 en-US hourly 1 https://wordpress.org/?v=6.8.3 https://i0.wp.com/rugburn.dev/wp-content/uploads/2025/07/20250729_2055_Software-Developer-Logo_remix_01k1cghcbzfzy8hv45v6gsykj2.webp?fit=32%2C32&ssl=1 Firebase – Rugburn https://rugburn.dev 32 32 244879875 Flutter Favorite Places App https://rugburn.dev/flutter-favorite-places-app/ Sun, 02 Nov 2025 20:08:43 +0000 https://rugburn.dev/?p=765 .flutter-embed-container { display: flex; justify-content: center; align-items: center; padding: 20px; background: #f5f5f5; } .mobile-frame { width: 375px; height: 667px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 10px solid #1a1a1a; position: relative; } .mobile-frame iframe { width: 100%; height: 100%; border: none; } /* Responsive - full width on mobile */ @media (max-width: 768px) { .mobile-frame { width: 100%; height: 800px; border-radius: 0; border: none; } }

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
]]> 765 Flutter Messaging App https://rugburn.dev/flutter-messaging-app/ Fri, 24 Oct 2025 21:04:03 +0000 https://rugburn.dev/?p=760 .flutter-embed-container { display: flex; justify-content: center; align-items: center; padding: 20px; background: #f5f5f5; } .mobile-frame { width: 375px; height: 667px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 10px solid #1a1a1a; position: relative; } .mobile-frame iframe { width: 100%; height: 100%; border: none; } /* Responsive - full width on mobile */ @media (max-width: 768px) { .mobile-frame { width: 100%; height: 800px; border-radius: 0; border: none; } }

Overview

This is a cross-platform message board app, in which users can log in and post messages to a global board. All messages are deleted every 24 hours and midnight UTC starts a fresh board. Users must verify their email prior to being allowed to post.

This project builds on to previous foundational mobile app concepts, including page navigation and state management, and adds a backend database using Firebase’s FireStore, Storage, Authentication, Messaging, and Functions services.

Skills

  • FireStore to manage chats and user details
  • Firebase Authentication to create new accounts, verify email addresses, and log users in to access restricted app features
  • Firebase Messaging to manage push notifications
  • Firebase Storage to store user-uploaded profile pictures
  • Server-side Functions to manage chat and user cleanup, and to push notifications when new chat messages are posted.

]]> 760 Flutter Grocery List App https://rugburn.dev/flutter-grocery-list-app/ Mon, 20 Oct 2025 23:59:32 +0000 https://rugburn.dev/?p=719 .flutter-embed-container { display: flex; justify-content: center; align-items: center; padding: 20px; background: #f5f5f5; } .mobile-frame { width: 375px; height: 667px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 10px solid #1a1a1a; position: relative; } .mobile-frame iframe { width: 100%; height: 100%; border: none; } /* Responsive - full width on mobile */ @media (max-width: 768px) { .mobile-frame { width: 100%; height: 800px; border-radius: 0; border: none; } }

This app incorporates most aspects of previous projects, namely page navigation and state management, and adds local persistent user data storage to keep list data between sessions. Initial backend was developed with SQLite, but then modified to use the Hive package for better cross-platform integration (specifically web, for the demo).

Skills

  • Hive Package backend database integration
  • Logging to help with debugging and track program execution
  • Use of Forms and Form Validators to handle user input
  • Managing Screen Stack to allow users to navigate between different screens
  • State Management using stateful widgets.
  • Hosted with Firebase
]]> 719 Flutter Recipe App https://rugburn.dev/flutter-recipe-app/ Fri, 17 Oct 2025 22:04:50 +0000 https://rugburn.dev/?p=704 .flutter-embed-container { display: flex; justify-content: center; align-items: center; padding: 20px; background: #f5f5f5; } .mobile-frame { width: 375px; height: 667px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 10px solid #1a1a1a; position: relative; } .mobile-frame iframe { width: 100%; height: 100%; border: none; } /* Responsive - full width on mobile */ @media (max-width: 768px) { .mobile-frame { width: 100%; height: 800px; border-radius: 0; border: none; } }

This Recipe app demonstrates more advanced flutter features, like page navigation, state management, animations, external app integration (to launch a web page). Additionally, full Docstrings are leveraged to better document functions in this project.

Skills

  • Managing Screen Stack to allow users to navigate between different screens
  • Tab Bar for main page navigation
  • Side Drawer to navigate to a filter setting screen, and to display acknowledgments
  • State Management both with passing state between widgets, and using Riverpod’s Providers/Consumers pattern for a global state management
  • Use of Docstrings to better document the more complicated logic in this app
  • AndroidManifest.xml (Android) / Info.plist (iOS) configuration to allow users to open a link in an external app (as required by Icons8 license agreement)
  • Explicit and Implicit animations
  • Hosted with Firebase

]]> 704 Flutter To-Do App https://rugburn.dev/flutter-to-do-app/ Mon, 13 Oct 2025 18:25:40 +0000 https://rugburn.dev/?p=690 .flutter-embed-container { display: flex; justify-content: center; align-items: center; padding: 20px; background: #f5f5f5; } .mobile-frame { width: 375px; height: 667px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 10px solid #1a1a1a; position: relative; } .mobile-frame iframe { width: 100%; height: 100%; border: none; } /* Responsive - full width on mobile */ @media (max-width: 768px) { .mobile-frame { width: 100%; height: 800px; border-radius: 0; border: none; } }

Developed with Flutter 3.35 / Dart 3.9

This project is a cross-platform To-Do list app demo. Users can add, delete, change the priority and log completion of tasks. Check out the live To-Do web app demo.

Theming

This app offers two unique UIs for Dark and Light theme user preferences.

Light vs Dark Theme

Skills

  • Theming to support dark and light mode UIs
  • Modal Views for adding new to-do tasks and alerting user of invalid input
  • Dismissible list items, to allow user to swipe an task to remove it
  • Snackbar notifications to allow user to ‘undo’ when deleting a task
  • Hosting using Firebase
]]> 690 Flutter Expense Tracking App https://rugburn.dev/flutter-expense-tracking-app/ Sat, 11 Oct 2025 15:28:56 +0000 https://rugburn.dev/?p=638 .flutter-embed-container { display: flex; justify-content: center; align-items: center; padding: 20px; background: #f5f5f5; } .mobile-frame { width: 375px; height: 667px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 10px solid #1a1a1a; position: relative; } .mobile-frame iframe { width: 100%; height: 100%; border: none; } /* Responsive - full width on mobile */ @media (max-width: 768px) { .mobile-frame { width: 100%; height: 800px; border-radius: 0; border: none; } }

Developed with Flutter 3.35 / Dart 3.9

This project is a cross-platform expense tracking app. Users can add and delete expenses, and quickly compare total expenses visually on the included chart. Check out the live Expense Tracker web app.

Theming

This app offers two unique UIs for Dark and Light theme user preferences.

Android Light/Dark Theme

Responsive

The app also support responsive UI adjustments, reorganizing elements for portrait and landscape orientations.

Adaptive

This app also demonstrates Adaptive UI adjustments, to give a more native experience if the user is viewing on Android or iOS.

Android v iOS

Testing

This project includes more expansive Widget Testing (component testing) to ensure elements continue to render and function properly with future updates.

Skills

  • Theming to support dark and light mode UIs
  • Modal Views for adding new expenses and alerting user of invalid input
  • Dismissible list items, to allow user to swipe an expense to remove it
  • Snackbar notifications to allow user to ‘undo’ when deleting an expense
  • Custom Chart Widget to visually display total expenses
  • Responsive UI to adjust UI elements for different screen sizes and rotations.
  • Adaptive UI to fine tune look for iOS vs Android
  • More in-depth Widget Testing (component testing) to test UI element functionality in both portrait and landscape renderings.
]]> 638 Flutter Quiz App https://rugburn.dev/flutter-quiz-app/ Sun, 05 Oct 2025 14:13:45 +0000 https://rugburn.dev/?p=626 .flutter-embed-container { display: flex; justify-content: center; align-items: center; padding: 20px; background: #f5f5f5; } .mobile-frame { width: 375px; height: 667px; border-radius: 30px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); border: 10px solid #1a1a1a; position: relative; } .mobile-frame iframe { width: 100%; height: 100%; border: none; } /* Responsive - full width on mobile */ @media (max-width: 768px) { .mobile-frame { width: 100%; height: 800px; border-radius: 0; border: none; } }

Developed with Flutter 3.35 / Dart 3.9

This project is a basic cross-platform Quiz App demo, developed using Flutter and coded in Dart. Current question database is loaded with Flutter quiz questions, but could be easily converted to other topics. The demo is hosted on firebase, so check out the live Quiz Web App.

This project also makes use of component testing to ensure project navigation, structure, and behavior function as expected with any future changes.

Testing

Skills

  • Firebase hosting
  • Cross-Platform development using Dart and Flutter
  • Web App Deployment
  • Stateless and Stateful Widgets
  • Component Testing using flutter_test Testing Suite
]]> 626