German A1 — app scaffold

A starter React Native (Expo) project for a small German A1 learning app.

Screenshots

Home

Lesson

View all words

Quiz

Progress

images live from assets/images/Screenshot/

What's here

• App.tsx — entry point, wires up navigation, logs daily activity for streaks
• src/navigation/AppNavigator.tsx — 4 screens: Home, Lesson, Quiz, Progress
• src/data/units.ts — full A1 curriculum: an Alphabet (ABC) unit plus 13 topic units, all filled in with real vocab and quiz content (14 units total)
• src/data/types.ts — shared types for units, vocab, and quiz questions
• src/storage/progress.ts — local progress tracking via AsyncStorage: completed units, streaks, and per-word spaced repetition scheduling (no backend needed for v1)
• src/screens/ — Home (unit list), Lesson (flashcards with native TTS pronunciation), Quiz (multiple choice, feeds spaced repetition), Progress (units completed, streak, words due for review)
• src/theme/colors.ts — German flag-inspired palette (black / red / gold accents on a warm cream + white base), plus FlagStripe, a small reusable three-stripe accent component used under headers on Home and Progress

Getting started

npm install
npm start

Then scan the QR code with Expo Go on your phone, or press i / a to open an iOS/Android simulator.

expo-speech version numbers move with each Expo SDK release — if npm install complains about a mismatch, run npx expo install expo-speech once to let Expo pick the exact version for SDK 54.

Pronunciation (native OS text-to-speech)

No .mp3 files are bundled with this app — and none are needed. All pronunciation comes from the device's own built-in text-to-speech engine via expo-speech. This keeps the app download small (there's no audio asset library to ship), and it sounds better than most bundled recordings would: iOS and Android both use proper native German (de-DE) and English (en-US) voices, not a single generic accent trying to cover both languages.

• The 🔊 German button speaks card.german with language: 'de-DE'.
• The 🔊 English button (shown once you reveal the translation) speaks card.english with language: 'en-US'.

Both locales are set explicitly on every Speech.speak() call in LessonScreen.tsx. This matters: without it, the OS may fall back to its default voice (often English) and read German words with an English accent — unhelpful for someone learning real A1 pronunciation. If you add speech elsewhere (e.g. the Quiz screen), keep passing the right locale.

Voice quality depends on what's installed on the device. iOS ships good German voices by default; on Android, if de-DE sounds off or silent, the user may need to download the German voice pack from their device's TTS settings (Settings → Accessibility → Text-to-speech). Worth a line in your own onboarding copy once you get to Phase 4 polish.

Spaced repetition

src/storage/progress.ts tracks a review stage per word (currently keyed by quiz question id) with widening intervals (1, 3, 7, 14, 30 days). getDueWordIds() returns anything due today or overdue — the Progress screen already shows a count. A natural next step is a dedicated "Review" screen that pulls due words and re-quizzes just those, rather than only reviewing within a unit.

Screenshots — how to update them

1. Run the app on a simulator/emulator or real device: npm start, then i (iOS) or a (Android).
2. Populate a bit of real content first (complete a unit or two) so Progress/streak screens don't look empty in the shot.
3. Capture each screen:
   • iOS Simulator: Cmd + S saves a screenshot to your Desktop
   • Android Emulator: use the camera icon in the emulator toolbar, or adb exec-out screencap -p > screenshot.png
   • Real device: standard OS screenshot shortcut (power + volume down on most phones)
4. Convert to .jpg if needed and resize/crop as you like, then save into assets/images/Screenshot/ using these exact filenames (case-sensitive on most systems):
   • home.jpg
   • lesson.jpg
   • view-all.jpg
   • Quiz.jpg
   • progress.jpg
5. Since the README references these by filename, replacing a file with the same name updates the README automatically — no markdown edits needed.

These same screenshots (or freshly captured store-size versions) are what store-assets/launch-checklist.md asks for when preparing your App Store / Play Store listings — see the "Screenshots" section there for the exact device-size requirements each store expects.

Next steps (Phase 4 of the roadmap — polish)

1. Build a "Review" screen that surfaces due words across all units, not just per-unit quizzes.
2. UI pass: onboarding flow, empty states, transitions/animations.
3. Device testing on both iOS and Android — specifically confirm de-DE TTS sounds right on a couple of real Android devices, not just the simulator.
4. Small beta group for feedback.

Notes

• No backend. Everything is local (AsyncStorage) for v1, which keeps this simple to ship and test.
• TypeScript is set up but kept loose — tighten types as the app grows.
• Swap app.json's bundleIdentifier / package before you build for the stores.