Frontend Guideline Document
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
.
- HTTPS-only communication; certificate pinning via
4.3. Performance Optimization
- Lazy Loading:
- Split bundles with React.lazy() for screens/modules.
- Memory Management:
- Virtualize lists via
FlashList
(Shopify) for large datasets.
- Virtualize lists via
- Image Optimization:
- Compress assets using
react-native-fast-image
and CDN caching.
- Compress assets using
5. Duolingo Integration Workflow
- OAuth 2.0 Flow:
- Redirect users to Duolingo login; capture tokens via deep linking.
- Data Sync:
- Fetch user progress via Duolingo API
/users/{id}/progress
endpoint. - Store lessons locally with timestamp-based conflict resolution.
- Fetch user progress via Duolingo API
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.
- Conditional rendering of premium features using
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
- CI/CD: GitHub Actions → Build → Test → Deploy to Firebase App Distribution.
- Monitoring:
- Crashlytics for real-time error tracking.
- LogRocket for session replays.
- 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