TapTag

Shared package for TapTag applications containing static frontend translations.

Overview

This package provides build-time generated translations (Galaxus-style) for TapTag apps:

• Expo mobile app
• Admin web app

Translations are compiled into the package at build time and are never fetched at runtime.

Installation

npm install taptag

Usage

import { FRONTEND_TRANSLATIONS, type TapTagTranslationKey, type SupportedLocale } from 'taptag';

// Get a translation
const locale: SupportedLocale = 'en';
const key: TapTagTranslationKey = 'common.save';
const text = FRONTEND_TRANSLATIONS[locale][key];

// Example ttt() function (implement in your app)
function ttt(key: TapTagTranslationKey, locale: SupportedLocale = 'en'): string {
  return FRONTEND_TRANSLATIONS[locale][key] || FRONTEND_TRANSLATIONS['en'][key] || key;
}

// Usage
ttt('common.save');        // "Save"
ttt('common.save', 'de');  // "Speichern"

Supported Locales

• en - English
• de - German
• ar - Arabic
• it - Italian
• fr - French

Translation Workflow

1. Add new keys

Edit taptag/src/frontend_keys.ts:

export const FRONTEND_KEYS = [
  // ... existing keys
  "my_feature.new_key",
] as const;

2. Generate translations

From the repo root:

npm run generate:frontend-translations

This will:

• Sync keys to the database (translation_key table)
• Fetch translations from the database (translation_text table)
• Generate taptag/src/frontend_translations.generated.ts

3. Add translations in Admin

Use the TapTag Admin app to add/edit translations for each locale.

4. Re-generate and publish

# Re-generate with new translations
npm run generate:frontend-translations

# Build and publish
cd taptag
npm version patch
npm publish

5. Update apps

# In your Expo or Admin app
npm update taptag

Separation of Concerns

| Type | Source | Runtime | |------|--------|---------| | UI strings (buttons, labels, errors) | This package (static) | Compiled in | | Domain content (exercise names, instructions) | Backend RPC | Fetched & cached |

Do NOT mix domain content into this static translation system.

Development

Build

cd taptag
npm install
npm run build

Package Structure

taptag/
├── package.json
├── tsconfig.json
├── README.md
├── src/
│   ├── index.ts                           # Main exports
│   ├── frontend_keys.ts                   # Key registry (source of truth)
│   └── frontend_translations.generated.ts # AUTO-GENERATED
└── dist/                                  # Build output

Environment Variables

The generator script requires:

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

License

MIT