mobile-darmasaba/QWEN.md

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:

   npm install
   

2. Run the development server:

   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