Recorder App - Tauri Implementation

Cross-platform speech donation application built with Tauri v2, React, and TypeScript. Supports iOS, Android, macOS, Windows, and Linux.

This is the Tauri implementation that replaces the .NET MAUI version. See TAURI_MIGRATION_PLAN.md for migration details.

Quick Start

Prerequisites

• Node.js 18+ and pnpm (package manager)
• Rust (latest stable)
• Tauri CLI: cargo install tauri-cli

Platform-specific:

• iOS/macOS: Xcode 15+
• Android: Android Studio, Android SDK 21+
• Windows: Visual Studio Build Tools
• Linux: Development packages (see Tauri prerequisites)

Build and Run

# Install dependencies
pnpm install

# Desktop development (hot reload)
pnpm tauri dev

# Build for desktop
pnpm tauri build

# Mobile development
pnpm tauri ios dev      # iOS
pnpm tauri android dev  # Android

# Mobile build
pnpm tauri ios build
pnpm tauri android build

Recommended IDE Setup

• VS Code + Tauri + rust-analyzer

Backend Setup

The app requires the recorder backend to be running for schedules, themes, and uploads.

Running Backend Locally

From the backend repository:

cd ../Kielipankki-donatespeech-backend/recorder-backend
./setup-local.sh

The backend runs on http://localhost:8000 by default.

Verify backend is reachable:

curl http://localhost:8000/v1/schedule
curl http://localhost:8000/v1/theme

Backend Configuration

The app uses Tauri build profiles to configure the API endpoint:

• Development (tauri.conf.json): Uses http://localhost:8000
• Release (tauri.conf.release.json): Uses Azure dev endpoint

Build with different profiles:

# Development build (localhost:8000)
pnpm tauri:dev                    # Desktop
pnpm tauri:android:dev            # Android

# Production build (Azure endpoint)
pnpm tauri:build                  # Desktop
pnpm tauri:android:build          # Android

Tip (test on your own machine against release API):

pnpm tauri:dev:release-api

This runs tauri dev with src-tauri/tauri.conf.release.json, so you get hot reload while calling the release API endpoint.

Change API endpoint: Edit the plugins.recorder.apiBaseUrl in:

• src-tauri/tauri.conf.json (development)
• src-tauri/tauri.conf.release.json (production)

Verify configuration: The console will log the API URL on startup:

Initializing API client with base URL: http://localhost:8000

Development

Desktop Development

Run pnpm tauri dev for hot-reload development mode.

Mobile Development

Android

Android Emulator:

# List available emulators
emulator -list-avds

# Start an emulator
emulator -avd <emulator_name>

# Run app
pnpm tauri android dev

Android Localhost: The app automatically remaps localhost and 127.0.0.1 to 10.0.2.2 (Android emulator's host address).

Physical Android Device:

1. Find your computer's LAN IP: ifconfig | grep "inet " | grep -v 127.0.0.1 (macOS/Linux)
2. Start backend on all interfaces: python -m uvicorn main:app --host 0.0.0.0 --port 8000
3. Update API URL in src-tauri/src/lib.rs to http://YOUR_IP:8000
4. Ensure firewall allows port 8000

iOS

pnpm tauri ios dev

iOS automatically handles localhost properly on simulators. For physical devices, use the same LAN IP approach as Android.

Testing Onboarding Flow

The app shows onboarding pages (welcome and terms) to first-time users. To reset during development:

// In browser DevTools console (F12 or Cmd+Option+I):
localStorage.removeItem("onboardingCompleted")

Then refresh the app (F5 or Cmd+R).

Testing Language Switching

The app supports 9 languages. Language preference is stored in localStorage and persists across sessions. See LOCALIZATION_COVERAGE.md for details.

Localization Table Sync (CSV/TSV)

You can export all locale strings from src/locales/*.ftl to a spreadsheet-like table and import edited values back to the .ftl files.

NPM commands:

# Export to CSV
pnpm locales:table:export

# Export to TSV
pnpm locales:table:export:tsv

# Import from CSV
pnpm locales:table:import

Direct script usage:

# Export
node scripts/ftl-table-sync.js export --out locales.csv
node scripts/ftl-table-sync.js export --out locales.tsv

# Import
node scripts/ftl-table-sync.js import --in locales.csv
node scripts/ftl-table-sync.js import --in locales.tsv

Notes:

• The first table column must be key.
• Locale columns are inferred from the header names (for example fi, nn, sv).
• Export uses fi.ftl as the source-of-truth key list (or the first locale if fi is missing).
• Multiline Fluent values are preserved through export/import.

Deployment

Azure Static Web App (Web Frontend)

The web content-creator interface is deployed with GitHub Actions to Azure Static Web Apps.

Workflow file:

• .github/workflows/deploy-azure-static-web-app.yml

One-time setup:

1. Create (or reuse) an Azure Static Web App in the labs subscription.
2. In the Azure portal, copy the deployment token for that Static Web App.
3. Add a GitHub Actions repository secret named AZURE_STATIC_WEB_APPS_API_TOKEN with that token.
4. Ensure backend CORS allows your Static Web App origin.

The workflow builds in web mode using:

• VITE_PLATFORM_MODE=web
• VITE_BASE_PATH=/
• VITE_API_BASE_URL=https://ca-recorder-backend-dev.politedune-2911b299.northeurope.azurecontainerapps.io

Default frontend URL format:

• https://<your-static-web-app-name>.azurestaticapps.net

Google Play (Android)

1. Build release APK/AAB:

   pnpm tauri android build --release

2. Signed build artifacts will be in src-tauri/gen/android/app/build/outputs/

3. Upload to Google Play Console and publish to your desired track (internal, alpha, beta, or production)

Note: Ensure you have proper signing keys configured in Android Studio or via Tauri configuration.

App Store (iOS)

1. Build release IPA:

   pnpm tauri ios build --release

2. Submit using Apple Transporter or Xcode

3. Once processed by App Store Connect, publish to TestFlight or production

Note: Requires valid Apple Developer account and proper provisioning profiles.

Desktop Builds

macOS:

pnpm tauri build --target universal-apple-darwin

Produces .dmg and .app in src-tauri/target/release/bundle/

Windows:

pnpm tauri build

Produces .msi installer in src-tauri/target/release/bundle/

Linux:

pnpm tauri build

Produces .deb, .AppImage, or other formats depending on configuration.

Development Model

Trunk-based development: the latest development version is in the feature/tauri-migration branch during migration, then will move to the default main branch. Releases are tagged with semantic versioning.

App version is configured in:

• package.json → Frontend version
• src-tauri/Cargo.toml → Rust/Tauri version
• src-tauri/tauri.conf.json → App bundle version

Troubleshooting

Backend Connection Issues

Problem: App can't fetch themes/schedules

Solutions:

1. Verify backend is running: curl http://localhost:8000/v1/theme
2. Check if backend allows HTTP connections
3. For physical devices, verify:
   • Device is on same network as development machine
   • Firewall allows port 8000
   • API URL points to your LAN IP, not localhost

Android Build Issues

Problem: Build fails with SDK errors

Solutions:

1. Ensure Android SDK 21+ is installed
2. Set ANDROID_HOME and NDK_HOME environment variables
3. Accept all Android SDK licenses: sdkmanager --licenses

iOS Build Issues

Problem: Build fails with Xcode errors

Solutions:

1. Ensure Xcode 15+ is installed
2. Install Xcode Command Line Tools: xcode-select --install
3. Open project in Xcode and resolve signing issues

Audio Recording Issues

Problem: Recording fails or produces no audio

Solutions:

1. Check microphone permissions are granted
2. Verify no other app is using the microphone
3. On mobile, ensure app has proper audio session configuration
4. Check console logs for detailed error messages

Architecture

• Frontend: React 19 + TypeScript + TailwindCSS
• Backend: Tauri v2 (Rust)
• Database: SQLite (via rusqlite)
• Audio: tauri-plugin-audio-recorder (WAV on desktop, M4A on mobile)
• Localization: Fluent (9 languages: Finnish, 2 Norwegian, Swedish, 5 Sámi variants)
• Navigation: React Router v7

Recording Format:

• Desktop (macOS/Windows/Linux): WAV (PCM) → Converted to FLAC for upload
• Mobile (iOS/Android): M4A (AAC) → Uploaded as-is

Documentation

• Migration Plan: TAURI_MIGRATION_PLAN.md - Feature parity tracking
• Localization: LOCALIZATION_COVERAGE.md - Language support details

Contributing

When adding features:

1. Follow the migration plan priorities
2. Commit per feature/bullet point (conventional commits format)
3. Ensure all 9 language files are updated with new strings
4. Test on at least 2 platforms (desktop + mobile)
5. Update documentation as needed

License

See LICENSE file in repository root.