Mr Detector Mobile App

A mobile application that allows users to take selfies and check if their images have been used elsewhere on the web.

Features

• Take selfies using your device camera
• Upload images to check for matches
• View where your images have been found
• Save images to your device gallery
• Share images directly from the app
• Dark mode support
• Offline detection and handling
• Haptic feedback for better user experience
• Responsive design for all device sizes
• Proper handling of app lifecycle events
• Support for safe areas on notched devices

Prerequisites

• Node.js 16+
• npm or yarn
• Android Studio (for Android development)
• Xcode (for iOS development, Mac only)

Installation

Clone the repository and install dependencies:

git clone [your-repo-url]
cd mr-detector-app
npm install

Development

Run in the browser

npm run dev

Run with Ionic

npm run ionic:serve

Building for Mobile

Setup

Ensure you have installed all required native modules:

npm install @capacitor/core @capacitor/camera @capacitor/haptics @capacitor/network
npm install @capacitor/preferences @capacitor/splash-screen @capacitor/status-bar @capacitor/share

Generate App Icons and Splash Screens

npm run resources

Sync Project with Capacitor

After making changes to the web app, always sync with Capacitor:

npm run sync

Live Development

For real-time development with device hot-reloading:

# For Android
npm run cap:run:android

# For iOS
npm run cap:run:ios

Build for Android

1. Ensure you have Android Studio installed
2. Run the build command:

npm run build:android

3. Android Studio will open - click Run to build and run on a connected device or emulator

Build for iOS (Mac only)

1. Ensure you have Xcode installed
2. Run the build command:

npm run build:ios

3. Xcode will open - select a development team and run on a connected device or simulator

Project Structure

• src/ - Source code
  • views/ - Main application views
  • components/ - Reusable components
  • router/ - Application routing
  • images/ - Static images
  • theme/ - CSS and theme variables
• public/ - Public assets
• android/ - Android platform files
• ios/ - iOS platform files
• capacitor.config.ts - Capacitor configuration
• ionic.config.json - Ionic configuration

Mobile-Specific Features

Offline Support

The app checks for network connectivity and provides appropriate feedback when offline. Certain features like image uploading and searching are disabled when offline, but users can still:

• Take photos with the camera
• View previously loaded results
• Save images to their device

Performance Optimization

• Lazy loading of heavy components and images
• Efficient memory management with proper cleanup of listeners
• Optimized animations and transitions

Native Integrations

• Camera: Direct access to device camera
• Share: Native sharing interface for images
• Haptics: Tactile feedback for user interactions
• Splash Screen: Customized native splash screen
• Status Bar: Properly themed status bar
• Network: Real-time network connectivity detection

Best Practices for Mobile Development

1. Testing on Real Devices: Always test on real devices before releasing
2. Performance: Keep app size and memory usage low
3. Offline Support: Handle offline scenarios gracefully
4. Battery Usage: Minimize operations that drain battery
5. Native UI Guidelines: Follow platform-specific UI guidelines

Troubleshooting

• Camera not working: Ensure permissions are properly set in capacitor.config.ts
• Build errors: Run npm run sync before building for mobile
• White screen on launch: Check for JavaScript errors in the console
• Sharing not working: Ensure proper URLs and file types are being shared
• Permission errors: Request permissions at appropriate times and handle rejections gracefully

License

[Your License Information]