Dendra Mobile App

A React Native Expo application for field annotation data collection, designed to work offline and sync when connectivity is available.

Features Implemented

🏗️ Core Architecture

• Navigation: Bottom tab navigation with stack navigation for detailed screens
• Offline Storage: AsyncStorage-based local data persistence
• TypeScript: Full TypeScript implementation with proper type definitions
• Cross-Platform: Designed to work on both iOS and Android

📱 Screens

• Login Screen: Authentication interface (placeholder for Dendra Auth API)
• Organization Selection: Choose organization for annotations
• Home Screen: Dashboard with quick actions and status overview
• Annotations Screen: List and search existing annotations
• Drafts Screen: Manage draft annotations with local storage
• More Screen: Settings, sync, and user management
• Create Annotation: Full annotation creation form with date/time pickers
• Edit Annotation: Edit existing annotations

🔧 Key Components

• Bottom Tab Navigation: Home, Annotations, Drafts, More
• Date/Time Pickers: For annotation timeframes
• Action Type Selection: Flag, Exclude, Evaluate, Attribute
• Search Functionality: Filter annotations
• Status Indicators: Sync status, completion status
• Offline Support: Local storage for drafts and pending sync

📊 Data Management

• Local Storage: AsyncStorage for offline data persistence
• Type Safety: Comprehensive TypeScript interfaces
• Mock Data: Placeholder data for development and testing
• Sync Management: Framework for online/offline synchronization

Getting Started

Prerequisites

• Node.js 18+
• Bun (package manager)
• Expo CLI
• iOS Simulator or Android Emulator

Installation

bun install

Development

# Start development server
bun start

# Run on iOS
bun run ios

# Run on Android
bun run android

# Run on web
bun run web

Type Checking

npx tsc --noEmit

Project Structure

src/
├── components/          # Reusable UI components
├── navigation/          # Navigation configuration
│   └── AppNavigator.tsx # Main navigation setup
├── screens/            # Screen components
│   ├── LoginScreen.tsx
│   ├── HomeScreen.tsx
│   ├── AnnotationsScreen.tsx
│   ├── DraftsScreen.tsx
│   ├── MoreScreen.tsx
│   ├── CreateAnnotationScreen.tsx
│   └── EditAnnotationScreen.tsx
├── services/           # API and storage services
│   ├── ApiService.ts   # Dendra API integration (placeholder)
│   └── StorageService.ts # Local storage management
├── types/              # TypeScript type definitions
│   └── index.ts
├── hooks/              # Custom React hooks
└── utils/              # Utility functions

Next Steps

🔌 API Integration

• Implement actual Dendra Auth API integration
• Add ConnectRPC client with proper buf-generated types
• Configure API endpoints and authentication

📷 Media & Location

• Implement camera integration for photos
• Add GPS location capture
• Handle media storage and sync

🔄 Sync & Offline

• Implement robust offline/online detection
• Add background sync capabilities
• Handle conflict resolution

🎨 UI/UX Enhancements

• Add loading states and error handling
• Implement proper form validation
• Add accessibility features
• Polish visual design

🧪 Testing

• Add unit tests
• Add integration tests
• Add E2E tests

Dependencies

Core

• React Native 0.79.5
• React 19.0.0
• Expo SDK ~53.0.17

Navigation

• @react-navigation/native
• @react-navigation/bottom-tabs
• @react-navigation/stack

Storage & API

• @react-native-async-storage/async-storage
• @connectrpc/connect
• @connectrpc/connect-web

UI & Utilities

• @expo/vector-icons
• react-native-date-picker
• expo-location
• expo-camera
• expo-image-picker

Architecture Notes

The app is designed with offline-first principles:

1. Local Storage: All data is stored locally using AsyncStorage
2. Sync Queue: Pending changes are queued for sync when online
3. Conflict Resolution: Framework in place for handling sync conflicts
4. Progressive Enhancement: Core functionality works offline, enhanced features require connectivity

The navigation follows iOS/Android conventions with a bottom tab bar for primary navigation and stack navigation for detailed views.