# Desa+ Mobile Application - Project Overview

## Project Summary
Desa+ is a comprehensive village/desa management mobile application built with React Native and Expo. The application serves as a digital platform for village administration, community communication, and information management. It provides various features to facilitate village governance, resident communication, and administrative tasks.

## Architecture & Technology Stack
- **Framework**: React Native with Expo (SDK 53)
- **State Management**: Redux Toolkit with React-Redux
- **Navigation**: Expo Router with React Navigation
- **Backend Services**: Firebase (Authentication, Realtime Database, Cloud Messaging)
- **UI Components**: Custom-built components with React Native elements
- **Language**: TypeScript for type safety
- **Build System**: EAS (Expo Application Service) for builds and deployments

## Key Features
- Announcement and village information system
- Community discussion forums
- Village event calendar
- Document management and archiving
- Project and task management
- Member and organizational structure management
- Push notifications for important updates
- Verification and authentication features

## Project Structure
```
├── app/                    # Application routes and pages (Expo Router)
│   ├── (application)/     # Main application screens
│   │   ├── announcement/
│   │   ├── banner/
│   │   ├── discussion/
│   │   ├── division/
│   │   ├── group/
│   │   ├── member/
│   │   ├── position/
│   │   ├── project/
│   │   ├── _layout.tsx
│   │   ├── edit-profile.tsx
│   │   ├── feature.tsx
│   │   ├── home.tsx
│   │   ├── notification.tsx
│   │   ├── profile.tsx
│   │   └── search.tsx
│   ├── _layout.tsx        # Root layout
│   ├── index.tsx          # Splash/login screen
│   ├── verification.tsx   # OTP verification screen
├── components/            # Reusable UI components
│   ├── announcement/
│   ├── auth/
│   ├── banner/
│   ├── calendar/
│   ├── discussion/
│   ├── division/
│   ├── document/
│   ├── group/
│   ├── home/
│   ├── member/
│   ├── position/
│   ├── project/
│   ├── task/
│   ├── alertKonfirmasi.ts
│   ├── AppHeader.tsx
│   ├── Text.tsx
│   └── ... (many more components)
├── constants/             # Constants and styles
│   ├── Colors.ts
│   ├── ColorsStatus.ts
│   ├── ConstEnv.ts
│   ├── Headers.ts
│   ├── RoleUser.ts
│   ├── Styles.ts
│   └── ... (other constants)
├── assets/                # Static assets (images, fonts)
├── lib/                   # Business logic and API utilities
├── providers/             # Context providers (AuthProvider)
├── android/               # Android native code
├── ios/                   # iOS native code
├── scripts/               # Build and utility scripts
├── index.js               # Entry point
├── app.config.js          # Expo configuration
├── package.json           # Dependencies and scripts
└── eas.json               # EAS build configuration
```

## Environment Configuration
The application uses environment variables defined in a `.env` file:
- `URL_API` - API endpoint
- `URL_OTP` - OTP service endpoint
- `URL_STORAGE` - Storage endpoint
- `URL_FIREBASE_DB` - Firebase database URL
- `PASS_ENC` - Encryption password
- `WA_SERVER_TOKEN` - WhatsApp server token
- `IOS_GOOGLE_SERVICES_FILE` - Path to iOS Google services file

## Building and Running

### Development
1. Install dependencies:
   ```bash
   npm install
   ```

2. Run the development server:
   ```bash
   npx expo start
   ```

3. For platform-specific builds:
   - Android: `npm run android`
   - iOS: `npm run ios`
   - Web: `npm run web`

### Production Builds
- Android: `npm run build:android` (uses EAS to build an app bundle)

### Testing
- Run tests: `npm run test`

### Linting
- Check code quality: `npm run lint`

## Key Dependencies
- `@react-native-firebase/*` - Firebase integration
- `@react-navigation/*` - Navigation solutions
- `@reduxjs/toolkit` - State management
- `expo-router` - File-based routing
- `react-native-gesture-handler` - Touch gesture support
- `react-native-reanimated` - Advanced animations
- `react-native-svg` - SVG rendering support

## Development Conventions
- Uses TypeScript for type safety
- Implements custom styling through the Styles.ts constant file
- Follows Expo's file-based routing convention
- Uses Redux Toolkit for centralized state management
- Implements custom components in the components directory
- Uses absolute imports with @/ alias (e.g., "@/components/...")
- Implements Firebase for authentication and real-time data

## Deployment
- Uses EAS for building and submitting to app stores
- Supports both Android (APK and App Bundle) and iOS (TestFlight/App Store)
- Configured for internal testing, preview, and production distributions

## Special Features
- Background message handling for push notifications
- Biometric authentication support
- Image picking and media library access
- Document picker functionality
- Date/time pickers with localization
- Custom toast notifications
- Carousel components for featured content
- Data visualization with charts