iOS app with voice-powered photo capture and React web dashboard for managing tagged photos and documents using Firebase backend
A comprehensive project setup for building a voice-driven photo and document management system with an iOS app (Swift/SwiftUI) and React web dashboard.
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
**For Swift/SwiftUI (iOS)**:
**For React (Web)**:
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
```
VoicePhotoManager-iOS/
├─ VoicePhotoManager.xcodeproj
├─ VoicePhotoManager/
│ ├─ App.swift
│ ├─ ContentView.swift
│ └─ FirebaseConfig.swift (for Firebase init)
└─ Podfile
```
```
VoicePhotoManager-Web/
├─ src/
│ ├─ App.js
│ ├─ firebase.js (Firebase init)
│ ├─ components/
│ └─ pages/
├─ package.json
└─ .gitignore
```
```ruby
pod 'Firebase/Core'
pod 'Firebase/Firestore'
pod 'Firebase/Storage'
pod 'Firebase/Auth' # if authentication is needed
```
```json
{
"dependencies": {
"firebase": "^latest",
"react": "^latest",
"react-dom": "^latest"
}
}
```
```
Generate Swift code using Apple's Speech framework to transcribe short voice commands. Return the recognized text.
```
```
Generate Swift code to upload an image to Firebase Storage and save its metadata (floor, unit) in Firestore.
```
```
Generate a React component named 'PhotoGallery' that fetches photo metadata from Firestore, displays images, and shows floor/unit tags.
```
```
Generate a React hook that uses the Web Speech API to capture voice input, convert to text, and filter a photo list accordingly.
```
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:
Both iOS and React should support:
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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/voice-driven-photo-and-document-manager/raw