Voice-Driven iOS Photo Manager

Build a voice-controlled iOS app for capturing and tagging photos with metadata, plus a React web dashboard for viewing and searching. Designed for construction/field documentation workflows.

Project Architecture

This skill guides development of a two-part system:

1. **iOS App (Swift/SwiftUI)**: Voice-powered photo capture with automatic metadata tagging

2. **Web Dashboard (React)**: View, search, and manage uploaded photos and documents

3. **Backend (Firebase)**: Firestore for metadata, Storage for files, optional Authentication

Directory Structure

iOS Project

```

VoicePhotoManager-iOS/

├─ VoicePhotoManager.xcodeproj

├─ VoicePhotoManager/

│ ├─ App.swift

│ ├─ ContentView.swift

│ └─ FirebaseConfig.swift

└─ Podfile

```

Web Project

```

VoicePhotoManager-Web/

├─ src/

│ ├─ App.js

│ ├─ firebase.js

│ ├─ components/

│ └─ pages/

├─ package.json

└─ .gitignore

```

Core Features

Voice Command Parsing

iOS Implementation

Web Dashboard

Dependencies

iOS (Podfile)

```ruby

pod 'Firebase/Core'

pod 'Firebase/Firestore'

pod 'Firebase/Storage'

pod 'Firebase/Auth' # optional

```

Web (package.json)

```json

{

"dependencies": {

"firebase": "^latest",

"react": "^latest",

"react-dom": "^latest"

}

}

```

Implementation Guidelines

1. Voice Recognition Setup (iOS)

Generate Swift code using Apple's Speech framework to transcribe short voice commands. Parse for keywords like "Floor" and "Unit" to extract metadata.

**Key considerations:**

2. Firebase Upload Function (iOS)

Create Swift code to:

3. React Photo Gallery

Build a React component that:

4. Voice Search (Web)

Optional: Use Web Speech API to:

Code Generation Principles

1. **Keep it Simple**: Target beginner-level code, avoid advanced patterns

2. **Comment Everything**: Include inline comments explaining key lines

3. **Self-Contained**: Generate complete, copy-paste-ready functions

4. **Error Handling**: Include basic error handling for network/permissions

5. **Minimal UI**: Focus on functionality over fancy styling

Sample Prompts

iOS Voice Recognition

```

Generate Swift code using Apple's Speech framework to transcribe

short voice commands. Return the recognized text and extract

floor/unit numbers using simple string parsing.

```

iOS Firebase Upload

```

Generate Swift code to upload an image to Firebase Storage

and save its metadata (floor, unit, timestamp) in Firestore.

Include upload progress tracking.

```

React Photo Gallery

```

Generate a React component named 'PhotoGallery' that fetches

photo metadata from Firestore, displays images from Storage URLs,

and shows floor/unit tags for each photo.

```

React Voice Search

```

Generate a React hook that uses the Web Speech API to capture

voice input, convert to text, and filter a photo list by

floor or unit keywords.

```

CRUD Operations

Both iOS and Web should support:

Testing & Deployment

iOS

Web

Best Practices

1. **Permissions**: Request camera, microphone, speech recognition permissions clearly

2. **Offline Support**: Consider caching photos before upload

3. **Validation**: Validate floor/unit inputs are numeric

4. **Security**: Use Firebase Security Rules to protect user data

5. **Performance**: Lazy load images, paginate large galleries

Constraints

Example Workflow

1. User opens iOS app and taps "Record"

2. Says: "Take photo of Floor 3 Unit 412"

3. App parses voice → captures photo → uploads to Firebase

4. User opens web dashboard → searches "Floor 3"

5. All Floor 3 photos appear in gallery with unit tags