How inaturalist/seekreactnative works
<explanation>
1. Project Type & Purpose
- This is a cross‑platform mobile application built with React Native (“Seek App”), delivering camera‑based plant and animal identification on iOS and Android.
- Key features include an AR camera pipeline (TFLite/MLModel), offline storage (Realm), integration with the iNaturalist API, user authentication, localization, and a rich UI.
2. File‑Structure Analysis
- Top‑level “android” and “ios” directories: native build configurations, assets, and platform‑specific code/bridging.
- “components/”, “styles/”, “assets/”: React Native UI layer organized by feature (Camera, Home, Match, Observations, etc.).
- “utility/” and “models/”: business logic, helpers, API wrappers, and local data models (Realm schema).
- Config & build: Babel & Metro (“babel.config.js”, “metro.config.js”), Gradle wrapper, Xcode workspace, Fastlane pipelines.
- Tests: Jest unit/integration (“tests/”), Detox E2E (“e2e/”).
- Translation/localization: Crowdin integration, “translations/”, “i18n.ts”, and localized resource directories in iOS.
3. Architecture Diagram Components
a. Platforms & Build
- Android (Gradle → APK)
- iOS (Xcode/Pods → IPA)
- Metro Bundler compiles React Native JS bundle.
- Fastlane orchestrates CI/CD.
b. React Native Runtime
- JavaScript thread: UI components, state (React), navigation (React Navigation RootStack/SideDrawer).
- Native bridge: modules for camera, storage, network, device APIs.
c. AR Camera Pipeline
- VisionCamera plugin + custom FrameProcessor → TFLite (Android) / CoreML (iOS) models loaded from assets.
- taxonomy.json/csv & common names loaded from local files.
d. Persistence Layer
- Realm DB on device for caching observations, badges, user settings, uploads.
- Model definitions in “models/…Realm.ts”.
e. API Layer
- iNaturalist API calls via “utility/apiCalls.ts” and “utility/serverHelpers.ts”.
- Authentication flows (JWT secret in config.js).
f. Localization
- Crowdin‑exported JSON in “translations/”.
- i18n.ts initialization & date/language helpers for UI strings.
- Native resource bundles in iOS .lproj and Android values.
g. Testing & CI
- Jest (unit/integration) → tests under “tests/unit” & “tests/integration”.
- Detox E2E → “e2e/”.
- GitHub Actions workflow triggers builds/tests.
h. External Services
- iNaturalist server (observations, species data).
- Crowdin (translations).
- Model‑files repo for AR assets.
4. Diagramming Relationships & Data‑Flows
- Draw platforms (Android, iOS) at top.
- Show Metro Bundler feeding the JS bundle into both.
- Within each platform box, depict:
* React Native JS runtime ↔ Native Modules (arrow both ways).
* UI Components layer calling into Utility/API layer.
* AR Camera module calling into TFLite/CoreML.
* API layer calling external iNat server.
* Persistence layer caching/network responses.
- Indicate build pipelines: Gradle/Xcode & Fastlane → app stores.
5. Architectural Patterns & Principles
- Modular feature‑based directory structure (separation of concerns).
- Provider pattern (React Context for user, species, challenges).
- Hooks abstraction for data fetching/state (e.g., useFocusTap, useFetchUserSettings).
- MVVM‑like separation: components UI ←→ hooks/view‑models ←→ utility/services ←→ storage/network.
6. Tailoring Guidelines
- Emphasize clear separation between:
1. Presentation (components/styles)
2. Business logic (hooks, utility)
3. Data (models, Realm, API)
4. Native platform specifics (android/, ios/)
- Highlight AR pipeline as a distinct sub‑system.
- Call out CI/CD and testing sub‑systems.
7. Diagramming Conventions
- Use distinct colors/shapes for:
• JS Runtime (blue rectangles)
• Native Modules (green)
• External Services (orange)
• Data stores (cylinder icons for Realm)
- Label all components clearly.
- Directional arrows for data flow (e.g., UI → API → db → UI).
- Group related modules into swimlanes or containers (e.g., “Camera”, “Observations”, “Challenges”).
8. Level of Detail
- Capture all essential layers: Build → Runtime → Features → Storage/Network → External.
- Don’t over‑fragment: group similar features but show the AR pipeline and persistence distinctly.
- Include notes on key frameworks: React Native, Realm, Detox, Jest, Fastlane, VisionCamera plugin.
By following this structure, your system‑design diagram will accurately represent the Seek app’s architecture, showing clear boundaries, interactions, and dependencies across layers, platforms, and external services.
</explanation>