Project overview
Hold My Drink is a mobile application for iOS and Android, developed entirely with Flutter, allowing users to easily log, rate, and organize the alcoholic beverages they consume (Beer, Wine, and Spirits). Based on detailed design specifications (Adobe XD prototype), the app features a multi-step logging process with photo uploads, custom categories, scoring, local data persistence (no backend required), list filtering/sorting, social sharing, and integrated AdMob advertisements for potential monetization.
The Challenge
The objective was to build a user-friendly and visually appealing drink tracking app strictly following provided UI/UX designs and functional specifications. Key technical challenges included:
- Implementing the specific UI details (Montserrat font, defined color scheme, animations like the splash screen) accurately in Flutter.
- Building the multi-step “Add Drink” workflow, incorporating native camera/gallery access with a requirement for square image cropping.
- Managing all application data – logged drinks, user notes, scores – exclusively using local storage on the user’s device, ensuring offline functionality and data privacy.
- Implementing client-side logic for filtering the drink lists by category (multi-select) and sorting by various criteria (score, date, name, brand).
- Integrating AdMob banner and full-screen interstitial ads at specific points within the app’s flow as defined in the requirements.
My Role
As the sole developer for the Hold My Drink app, I was responsible for the complete technical implementation based on the provided Adobe XD designs and detailed functional description. My tasks included:
- Translating the UI/UX designs into functional Flutter widgets and screens, ensuring visual fidelity (using Montserrat font, specific colors, layouts).
- Developing the core application logic for adding, viewing, editing (with confirmation prompts for deletion), and managing drink entries.
- Integrating device hardware features, specifically the camera and photo gallery, including the logic for square image cropping.
- Implementing robust local data storage with sqlite for all app data, ensuring data persistence without needing a network connection.
- Writing the client-side logic for multi-category filtering and multi-criteria sorting of the drink lists.
- Integrating native social sharing functionality.
- Setting up and configuring the Google Mobile Ads (AdMob) SDK for both banner and interstitial ad units according to the specified placements.
The Solution
I successfully developed the Hold My Drink app in Flutter, incorporating all specified features and design elements:
- Pixel-Perfect Flutter UI: Replicated the Adobe XD designs accurately, using the specified Montserrat font, color palette, and screen layouts to create a polished user interface.
- Intuitive Drink Logging: Built a guided, multi-step process for users to add Beer, Wine, or Spirits, complete with photo capture/selection (square crop), brand name variations (Brewery, Winehouse, Distillery), predefined categories, notes, and scoring.
- Offline-First with Local Storage: All user data is stored securely on the device, making the app fully functional offline and ensuring user privacy as no data leaves the device.
- Organized & Searchable Lists: Provided clear, separated lists for each drink type, enhanced with user-friendly filtering by category and sorting by score, date, name, or brand.
- Native Sharing Integration: Allowed users to easily share their logged drinks (including the photo and pre-filled text with hashtags) using the standard iOS/Android share sheet.
- Integrated Monetization (AdMob): Successfully implemented AdMob banner ads (320×50) fixed at the bottom of relevant screens and full-screen interstitial ads displayed after saving or editing a drink, following the project requirements.
Results / Outcome
This project resulted in a complete, functional, and visually polished Flutter application that precisely matches the detailed functional and design specifications. Key accomplishments include:
- Successful implementation of a specific UI/UX design in Flutter.
- Demonstrated ability to manage application state and data entirely locally on the device.
- Integrated multiple device features (camera, gallery, sharing) and third-party services (AdMob).
- Delivered a ready-to-use application (or polished portfolio piece) showcasing practical Flutter development skills for consumer-facing apps.
