Mobile Build Guide
Relevant source files
The following files were used as context for generating this wiki page:
The Driveway Estimator Pro mobile implementation utilizes Capacitor to wrap the React-based web application into native iOS and Android binaries. This architectural choice allows the project to leverage a single codebase while accessing native hardware features such as the camera for driveway capture and GPS for localized material pricing.
The mobile system is designed for internal distribution and field use by contractors and homeowners. The build pipeline synchronizes compiled web assets from the client/ directory into native Xcode and Android Studio projects located in the ios/ and android/ directories respectively.
Sources: MOBILE_BUILD.md:3-5, README.md:35-40, todo.md:103-106
Architecture and Build Flow
The mobile transformation process follows a structured pipeline where the React application is first compiled into static assets before being injected into the native platform wrappers.
Mobile Build Pipeline
The diagram below illustrates the sequence from web source code to a native mobile application.
This flow ensures that any changes in the React frontend are accurately reflected in the native mobile containers.
Sources: MOBILE_BUILD.md:13-24, MOBILE_BUILD.md:43-52
Project Structure
The repository is organized to separate web logic from native platform configurations:
client/: Contains the React application source.ios/: Native Xcode project files.android/: Native Gradle and Android Studio project files.capacitor.config.ts: Main configuration for the native bridge.
Sources: MOBILE_BUILD.md:26-34
Development and Build Scripts
The project defines several pnpm scripts to automate the synchronization and building of native applications.
| Script | Purpose |
|---|---|
pnpm mobile:build | Compiles web assets and synchronizes them to both native projects. |
pnpm mobile:ios | Builds web assets, syncs, and opens the iOS project in Xcode. |
pnpm mobile:android | Builds web assets, syncs, and opens the Android project in Android Studio. |
pnpm mobile:build-ios | Executes a production release build for iOS (requires macOS). |
pnpm mobile:build-android | Executes a production release build for Android. |
Sources: MOBILE_BUILD.md:43-52, README.md:131-140
Native Feature Integration
The mobile application integrates specific Capacitor plugins to enable core functionality that is not available in standard web environments or requires enhanced permissions.
Plugin Usage
- @capacitor/camera: Used in the
Estimatorcomponent to capture high-resolution photos of driveways for AI analysis. - @capacitor/geolocation: Used to determine the user's coordinates to fetch accurate regional material pricing via ZIP code lookups.
Sources: MOBILE_BUILD.md:138-142, client/src/pages/Estimator.tsx:89-106
Hardware Interaction Sequence
This diagram shows how the frontend interacts with native hardware via the Capacitor bridge.
Platform Configuration and Permissions
Native platforms require explicit permission strings defined in their respective configuration files to access sensitive hardware.
iOS Configuration (Info.plist)
The application requires the following keys for privacy compliance:
NSCameraUsageDescription: "We need camera access to capture driveway photos"NSLocationWhenInUseUsageDescription: "We need your location to provide accurate local pricing"
Sources: MOBILE_BUILD.md:144-150
Android Configuration (AndroidManifest.xml)
The following permissions must be declared:
android.permission.CAMERAandroid.permission.ACCESS_FINE_LOCATIONandroid.permission.ACCESS_COARSE_LOCATION
Sources: MOBILE_BUILD.md:152-158
Release and Distribution
Android Release
Release builds for Android require a signed Keystore. The process involves generating a .jks file and configuring keystore.properties within the android/ directory before running the Gradle build.
# Example Keystore Generation
keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-key-alias
Sources: MOBILE_BUILD.md:103-118
iOS Distribution
iOS distribution is handled via Xcode's archiving process. Developers must select the "Any iOS Device (arm64)" target and use the Product -> Archive menu to generate builds for TestFlight or Ad Hoc distribution.
Sources: MOBILE_BUILD.md:121-136
The Mobile Build Guide provides a robust framework for converting the Driveway Estimator Pro web tool into a high-performance native utility, ensuring field users have access to essential camera and location-based features.