Voice-Driven Photo & Document Manager

A comprehensive project setup for building a voice-driven photo and document management system with an iOS app (Swift/SwiftUI) and React web dashboard.

Project Overview

This project consists of two main components:

1. **iOS App (Swift/SwiftUI)**: Voice-powered photo capture with automatic metadata tagging using Apple's Speech Framework

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

3. **Firebase Backend**: Data storage, authentication, and file storage

Primary Features

Code Generation Instructions

Language & Framework Approach

**For Swift/SwiftUI (iOS)**:

**For React (Web)**:

Code Generation Standards

1. Provide **concise** and **heavily commented** code snippets

2. Generate **self-contained** functions or components that are easy to copy

3. **Avoid** advanced patterns beyond beginner scope

4. Keep UI **simple** and **intuitive**

5. Include short usage instructions with each snippet

Project Structure

iOS (Swift) Directory Structure

```

VoicePhotoManager-iOS/

├─ VoicePhotoManager.xcodeproj

├─ VoicePhotoManager/

│ ├─ App.swift

│ ├─ ContentView.swift

│ └─ FirebaseConfig.swift (for Firebase init)

└─ Podfile

```

Web (React) Directory Structure

```

VoicePhotoManager-Web/

├─ src/

│ ├─ App.js

│ ├─ firebase.js (Firebase init)

│ ├─ components/

│ └─ pages/

├─ package.json

└─ .gitignore

```

Required Dependencies

iOS (Podfile)

```ruby

pod 'Firebase/Core'

pod 'Firebase/Firestore'

pod 'Firebase/Storage'

pod 'Firebase/Auth' # if authentication is needed

```

Web (package.json)

```json

{

"dependencies": {

"firebase": "^latest",

"react": "^latest",

"react-dom": "^latest"

}

}

```

Common Code Generation Prompts

Voice Recognition Setup (Swift)

```

Generate Swift code using Apple's Speech framework to transcribe short voice commands. Return the recognized text.

```

Firebase Upload Function (Swift)

```

Generate Swift code to upload an image to Firebase Storage and save its metadata (floor, unit) in Firestore.

```

React Photo Gallery

```

Generate a React component named 'PhotoGallery' that fetches photo metadata from Firestore, displays images, and shows floor/unit tags.

```

Voice Search (React)

```

Generate a React hook that uses the Web Speech API to capture voice input, convert to text, and filter a photo list accordingly.

```

Implementation Details

Transcription Parsing

Parse recognized text for keywords like "Floor" and "Unit"

**Example**: "Floor 2, Unit 205" → `floor=2`, `unit=205`

Use simple string parsing or regex to extract:

CRUD Operations

Both iOS and React should support:

Testing & Debugging

Deployment

Code Generation Guidelines

When receiving user prompts:

1. **Output minimal, well-organized code**

2. **Include inline comments for clarity**

3. **Provide short usage instructions**

4. **Focus on core requirements first**: voice capture → tagging → uploading → searching

5. **Avoid over-engineering**: Three similar lines of code is better than a premature abstraction

6. **Keep it beginner-friendly**: This is for developers new to programming

Constraints