iOS App - Paw & Care

Overview

The Paw & Care iOS app is the primary interface for veterinarians and clinical staff, optimized for on-the-go documentation and patient care. Built with React, TypeScript, and Capacitor, it provides a native iOS experience while maintaining web technology flexibility. App Details:

App ID: com.pawandcare.vetassist
App Name: Paw & Care
Minimum iOS: 15.0
Target Devices: iPhone 12 and newer (primary), iPad Air/Pro
Technology: React + TypeScript + Capacitor 8.x

Installation & Setup

Build the web application

First, build the React application:

npm run build

This compiles the React app into the dist directory that Capacitor will bundle.

Sync iOS platform

Sync the web assets and native configuration to the iOS project:

npm run build:ios
# or manually:
npx cap sync ios

This copies dist to the iOS project and updates native dependencies.

Open in Xcode

Launch the iOS project in Xcode:

npm run open:ios
# or manually:
npx cap open ios

Configure signing & run

In Xcode:

Select your development team for code signing
Choose a target device or simulator
Press Run (⌘R) to build and launch

App Architecture

The iOS app uses a bottom tab navigation pattern optimized for one-handed operation:

const BOTTOM_TABS = [
  { id: 'dashboard', label: 'Home', icon: LayoutDashboard },
  { id: 'dictation', label: 'Dictate', icon: Mic },
  { id: 'appointments', label: 'Schedule', icon: Calendar },
  { id: 'pets', label: 'Patients', icon: PawPrint },
  { id: 'more', label: 'More', icon: MoreHorizontal },
];

Key Views:

Home: Dashboard with key metrics and today’s overview
Dictate: Voice recording and SOAP note generation
Schedule: Appointment calendar and booking
Patients: Pet records database
More: Additional features (clients, billing, templates, etc.)

See src/App.tsx:71-77 for the complete navigation configuration.

Mobile-Specific Layout

Mobile Header

Fixed header with practice branding, page title, notifications bell, and AI assistant status indicator.

Content Area

Scrollable main content with pull-to-refresh support and mobile-optimized spacing.

Bottom Tab Bar

Fixed navigation with 5 tabs, active indicators, and badge notifications.

Safe Areas

Automatic handling of notch and home indicator on modern iPhones.

The mobile layout is detected using the useIsMobile() hook (breakpoint: 768px) defined in src/hooks/use-mobile.ts:3.

Core Features

Voice Dictation

The centerpiece of the iOS app is the voice dictation feature for creating clinical notes: Recording Capabilities:

Background audio recording with MediaRecorder API
Live speech-to-text using browser SpeechRecognition API
High-quality audio capture with noise suppression and echo cancellation
Pause/resume functionality during recording
Visual waveform feedback

Implementation: src/sections/DictationSOAP.tsx:170-203

const stream = await navigator.mediaDevices.getUserMedia({
  audio: {
    echoCancellation: true,
    noiseSuppression: true,
    autoGainControl: true,
  },
});

Patient Records

Complete patient management optimized for mobile workflows:

Quick Search

Fast patient search by name, breed, or species with real-time filtering.

Photo Integration

Native camera access to capture pet photos directly in-app using Capacitor.

Medical History

View complete vaccination records, conditions, allergies, and medications.

Owner Details

One-tap calling, SMS, and email to pet owners via native iOS integrations.

Appointment Management

Streamlined scheduling designed for mobile efficiency: Features:

Swipe gestures for quick actions (reschedule, cancel, complete)
Push notifications for appointments and emergencies
Native calendar integration (iOS Calendar sync)
Color-coded triage levels (Emergency, Urgent, Routine)
Quick check-in from lock screen notifications

Dashboard & Analytics

Real-time practice metrics on your mobile device:

// Key metrics displayed
const metrics = [
  { label: 'Calls Today', value: callCount },
  { label: 'Appointments', value: appointmentCount },
  { label: 'Emergencies', value: emergencyCount },
  { label: 'New Clients', value: newClientCount },
];

Pull-to-refresh updates metrics in real-time with under 5 second data sync.

Mobile UX Patterns

Gestures

The iOS app supports common mobile gesture patterns:

Gesture	Action	Context
Swipe Left	Quick actions (delete, archive)	Appointment list, record list
Swipe Right	Mark complete, approve	Task lists, pending items
Pull Down	Refresh data	All scrollable views
Long Press	Context menu	Patient cards, appointments
Tap	Navigate, select	All interactive elements

Haptic Feedback

Tactile responses for critical actions using the Capacitor Haptics plugin:

import { hapticTap, hapticImpact } from '@/lib/capacitor';

// Light tap for navigation
await hapticTap();

// Medium impact for important actions
await hapticImpact();

Implemented in src/lib/capacitor.ts:44-65.

Responsive Design

The app adapts to different iOS devices:

iPhone (Portrait): Bottom tab navigation, single column layout
iPad (Portrait): Collapsed sidebar + bottom tabs
iPad (Landscape): Full sidebar navigation, multi-column layout

Performance Optimization

Target Metrics

Cold Start

< 2 seconds from tap to interactive

Screen Transitions

< 300ms navigation between views

Voice Recording

< 500ms from tap to recording start

Battery Usage

< 5% per hour of active use

Optimization Techniques

Code Splitting: Lazy-load sections and components to reduce initial bundle size. Image Optimization: Pet photos are automatically compressed and resized for mobile display. Network Efficiency: Background sync queues operations when offline, uploads when connected. Memory Management: Audio recordings are automatically cleaned up after processing to prevent memory leaks.

Testing on Device

Development Workflow

Enable Developer Mode

On your iPhone:

Go to Settings > Privacy & Security > Developer Mode
Toggle Developer Mode ON
Restart your device

Connect iPhone

Connect your iPhone to your Mac via USB cable. Trust the computer when prompted.

Select Device in Xcode

In Xcode, select your iPhone from the device dropdown menu in the toolbar.

Run the App

Press Run (⌘R) in Xcode. The app will build and install on your device.

Debugging

Web Inspector: Access the web view console using Safari:

Enable Develop menu in Safari Preferences
Connect iPhone and run the app
Go to Develop > [Your iPhone] > Paw & Care
Web Inspector opens with full console, network, and element inspection

Native Logs: View native plugin logs in Xcode Console (⇧⌘C).

App Store Preparation

When ready to distribute your app:

Update version & build

In Xcode, update CFBundleShortVersionString and CFBundleVersion in Info.plist.

Configure app icons

Add app icons to ios/App/App/Assets.xcassets/AppIcon.appiconset/.

Set up signing

Configure App Store distribution provisioning profile and certificate.

Archive & upload

Select Product > Archive in Xcode
Once archived, click Distribute App
Choose App Store Connect
Follow the upload wizard

Troubleshooting

Common Issues

“Failed to install app”

Verify your provisioning profile matches your device
Check that Developer Mode is enabled on iOS 16+
Clean build folder (⇧⌘K) and rebuild

“Microphone permission denied”

Add NSMicrophoneUsageDescription to Info.plist
Delete and reinstall the app to trigger permission prompt

“Network request failed”

Ensure backend server is running on accessible IP
Check VITE_API_URL environment variable
For iOS simulator, use http://localhost:3000 (not 127.0.0.1)

“White screen on launch”

Verify dist folder was created by npm run build
Run npx cap sync ios to copy web assets
Check for JavaScript errors in Safari Web Inspector

Performance Issues

Slow app launch:

Reduce bundle size by code splitting
Remove unused dependencies
Enable production build optimizations

High battery drain:

Disable background audio when not recording
Reduce polling frequency for real-time updates
Use iOS Background Modes judiciously

Next Steps

Offline Mode

Learn about offline data sync and queue-based operations

Dictation Features

Deep dive into voice recording and SOAP generation

Native Features

Explore Capacitor plugins and iOS integrations

Configuration

Configure Capacitor settings and plugins

Get Started

Core Features

Practice Management

Mobile App

Administration

​Overview

​Installation & Setup

​App Architecture

​Navigation Structure

​Mobile-Specific Layout

Mobile Header

Content Area

Bottom Tab Bar

Safe Areas

​Core Features

​Voice Dictation

​Patient Records

Quick Search

Photo Integration

Medical History

Owner Details

​Appointment Management

​Dashboard & Analytics

​Mobile UX Patterns

​Gestures

​Haptic Feedback

​Responsive Design

​Performance Optimization

​Target Metrics

Cold Start

Screen Transitions

Voice Recording

Battery Usage

​Optimization Techniques

​Testing on Device

​Development Workflow

​Debugging

​App Store Preparation

​Troubleshooting

​Common Issues

​Performance Issues

​Next Steps

Offline Mode

Dictation Features

Native Features

Configuration

Build docs developers (and LLMs) love

Overview

Installation & Setup

App Architecture

Navigation Structure

Mobile-Specific Layout

Core Features

Voice Dictation

Patient Records

Appointment Management

Dashboard & Analytics

Mobile UX Patterns

Gestures

Haptic Feedback

Responsive Design

Performance Optimization

Target Metrics

Optimization Techniques

Testing on Device

Development Workflow

Debugging

App Store Preparation

Troubleshooting

Common Issues

Performance Issues

Next Steps