Frontend Guideline Document: Duory Language Learning Assistant

Version: 1.0
Last Updated: October 2023


1. Introduction

Duory is a cross-platform mobile application designed to enhance language learning by integrating with Duolingo. It provides translation, romanization, kana support, and offline review capabilities. This document outlines frontend architecture, tools, and best practices to ensure scalability, security, and performance.


2. Technology Stack & Versioning

  • Framework: React Native v0.72.4 (TypeScript)
    • Rationale: Cross-platform efficiency, hot-reload support, and robust community.
  • State Management: Redux Toolkit v1.9.5 + React Query v4.0.0
    • Rationale: Asynchronous data handling (caching, retries) and centralized state for user sessions/subscriptions.
  • UI Library: NativeBase v3.4.0
    • Rationale: Pre-built components for responsive layouts and accessibility.
  • Navigation: React Navigation v6.x
  • Localization: i18next v23.0.0
  • Testing: Jest (unit), Detox (E2E)
  • Analytics: Firebase Analytics v9.0

3. Project Structure

src/  
├── assets/            # Fonts, images, locales  
├── components/        # Reusable UI (Button, Card)  
├── features/          # Feature modules (Translation, Review, Subscription)  
├── hooks/             # Custom hooks (useAuth, useOfflineSync)  
├── navigation/        # Stack/Tab navigators  
├── screens/           # Page components (Home, Settings)  
├── services/          # API clients, Duolingo integration  
├── store/             # Redux slices  
├── utils/             # Helpers (romanization, kana converters)  
└── App.tsx            # Entry point  

4. Key Implementation Guidelines

4.1. Offline-First Design

  • Data Persistence:
    • Use Redux Persist v6.0.0 + SQLite (react-native-sqlite-storage) to cache lessons.
    • Sync with Duolingo API via background tasks using react-native-background-fetch.
  • Translation Engine:
    • Integrate Google Translate API with memoization to reduce redundant calls.

4.2. Security

  • Authentication:
    • JWT tokens stored in SecureStore (react-native-encrypted-storage).
  • Data Sanitization:
    • Validate all user inputs with Zod v3.0.0 to prevent XSS.
  • API Security:
    • HTTPS-only communication; certificate pinning via react-native-cert-pinner.

4.3. Performance Optimization

  • Lazy Loading:
    • Split bundles with React.lazy() for screens/modules.
  • Memory Management:
    • Virtualize lists via FlashList (Shopify) for large datasets.
  • Image Optimization:
    • Compress assets using react-native-fast-image and CDN caching.

5. Duolingo Integration Workflow

  1. OAuth 2.0 Flow:
    • Redirect users to Duolingo login; capture tokens via deep linking.
  2. Data Sync:
    • Fetch user progress via Duolingo API /users/{id}/progress endpoint.
    • Store lessons locally with timestamp-based conflict resolution.

6. Subscription Handling

  • Payment Gateways:
    • Implement RevenueCat v5.0 for cross-platform (iOS/Android) subscriptions.
  • UI Logic:
    • Conditional rendering of premium features using useSubscriptionStatus hook.
    • Graceful degradation for free-tier users.

7. Testing Strategy

  • Unit Tests:
    • Cover utils/services with Jest (≥90% coverage).
  • E2E Tests:
    • Use Detox to validate critical flows (login, payment, offline sync).
  • QA Tools:
    • SonarQube for code quality; Flipper for debugging.

8. Deployment Pipeline

  1. CI/CD: GitHub Actions → Build → Test → Deploy to Firebase App Distribution.
  2. Monitoring:
    • Crashlytics for real-time error tracking.
    • LogRocket for session replays.
  3. App Stores:
    • Automated submissions via Fastlane.

9. Scalability & Extensibility

  • Feature Flags: Use LaunchDarkly to toggle A/B tests (e.g., new review modes).
  • Modular Design: Decouple features using domain-driven structure; add new languages via i18n JSON files.
  • Theming: Support dark/light modes with NativeBase’s extendTheme.

10. Compliance

  • GDPR/CCPA: Anonymous analytics opt-in; data deletion endpoint.
  • Accessibility: WCAG 2.1 compliance (contrast ratios, screen reader support via React Native Accessibility API).

Approved by: Engineering Lead
Document ID: FRONT-GUIDE-DUORY-001