Drawing Without Touching the Screen: How Monnom Works and Its Cloud Architecture

Monnom is an iOS application that leverages the device's camera and Computer Vision capabilities to transform physical gestures into digital drawings. Moving beyond the traditional touch screen experience, it utilizes the device's native hardware power to enable drawing in mid-air.

Here is an overview of the app's core features and the engineering approaches that support them:

1. Computer Vision and Core Mechanics

The primary mechanic of the application relies on detecting a "Pinch" gesture formed by the user bringing their thumb and index finger together.

1. Hand and Gesture Tracking: Utilizing Apple's Vision Framework, the app analyzes dozens of frames per second. The raw and normalized coordinates obtained from the camera are instantly calculated and mapped to the screen based on the device's orientation and aspect ratio.
2. Color Match: Users can use any colored physical object they hold as a brush. To prevent camera noise from distorting the color, the system calculates the color average of a 7x7 pixel area instead of a single pixel. In cases of occlusion (where fingers are hidden behind the object), the system references other joints of the hand to prevent the drawing stroke from breaking.
3. Face Paint and Optimization: To maintain UI performance while anchoring drawings to facial features using augmented reality (AR) principles, a Direct Overlay rendering architecture is implemented. Calculations are processed in an isolated serial queue to avoid blocking the Main Thread.

2. Flexible Authentication and Data Migration

Initially designed as an entirely on-device experience, Monnom transitioned to a Firebase and Google Cloud infrastructure to allow data synchronization across different devices. To avoid disrupting the user experience, a flexible authentication system was established.

1. Login Methods: The app supports Sign in with Apple (secured via CryptoKit) and standard email/password authentication.
2. Lossless Data Migration: The app can be used without creating an account (Guest Mode). Local database records created in guest mode are scanned the moment a user signs up, and the data is seamlessly integrated into the new account and pushed to the cloud without any data loss.

3. Bidirectional Cloud Synchronization

Data synchronization across devices operates bidirectionally between the local database and the cloud (Firestore and Firebase Storage). The technical standards applied in this phase include:

1. Alpha Channel Preservation: To preserve the transparent background data of the drawings, aggressive image compression is avoided during uploads; files are transferred in formats that natively support transparency.
2. Timestamp Management: To prevent synchronization errors caused by local time differences across devices, data is written to Firestore using server-side Timestamps rather than local device dates.
3. Trigger Optimization: The synchronization process is tied to state listener functions that definitively verify the authentication status, rather than the app's initial launch moment. This effectively prevents race conditions.

4. Dynamic Content Management (Zero-Update Architecture)

To introduce new game modes and drawing packs without waiting for the App Store review process, a "Zero-Update" architecture was implemented. Using a custom web admin panel built with Next.js and the Firebase Admin SDK, new content is deployed instantly via Firebase Remote Config. The iOS client detects these changes and automatically downloads the new assets to the device's local cache.

5. Data Security and Comprehensive Deletion

The security of user data is enforced through strict security rules defined on Google Cloud. Data is kept in isolated directories, ensuring that each user can only access their own information. When a user requests account deletion, a dedicated Server Action on the backend is triggered. This function permanently and irreversibly deletes the authentication record, all database documents, and all images in the storage bucket.