hipmi-mobile/QWEN.md

HIPMI Mobile Application - Development Guide

Project Overview

HIPMI Badung Connect is a mobile application built with Expo and React Native. It serves as a connection platform for HIPMI (Himpunan Pengusaha Muda Indonesia) Badung members, featuring authentication, user management, and various business-related functionalities.

Key Technologies

• Framework: Expo (v54.0.0) with React Native (0.81.4)
• Architecture: File-based routing with Expo Router
• State Management: React Context API
• Styling: React Native components with custom color palettes
• Authentication: Token-based authentication with OTP verification
• Database: AsyncStorage for local storage
• Maps: React Native Maps and Mapbox integration
• Notifications: Expo Notifications and Firebase Messaging
• Language: TypeScript

Project Structure

hipmi-mobile/
├── app/                    # File-based routing structure
│   ├── (application)/      # Main application screens
│   │   ├── (file)/         # File management screens
│   │   ├── (image)/        # Image management screens
│   │   ├── (user)/         # User-specific screens
│   │   └── admin/          # Admin-specific screens
│   ├── _layout.tsx         # Root layout wrapper
│   ├── index.tsx           # Home screen
│   ├── eula.tsx            # Terms and conditions screen
│   ├── register.tsx        # Registration screen
│   └── verification.tsx    # OTP verification screen
├── assets/                 # Static assets (images, icons)
├── components/             # Reusable UI components
├── constants/              # Configuration constants
├── context/                # React Context providers
├── hooks/                  # Custom React hooks
├── screens/                # Screen components
├── service/                # API services and configurations
├── types/                  # TypeScript type definitions
├── app.config.js           # Expo configuration
├── package.json            # Dependencies and scripts
└── ...

Building and Running

Prerequisites

• Node.js (with bun >=1.0.0 as specified in package.json)
• Expo CLI or bun installed globally

Setup Instructions

1. Install dependencies:

   bun install
   # or if using npm
   npm install
   

2. Environment Variables: Create a .env file with the following variables:

   API_BASE_URL=your_api_base_url
   BASE_URL=your_base_url
   DEEP_LINK_URL=your_deep_link_url
   

3. Start the development server:

   # Using bun (as specified in package.json)
   bun run start
   # or using expo directly
   npx expo start
   

4. Platform-specific commands:

   # Android
   bun run android
   # iOS
   bun run ios
   # Web
   bun run web
   

EAS Build Configuration

The project uses Expo Application Services (EAS) for building and deployment:

• Development builds: eas build --profile development
• Preview builds: eas build --profile preview
• Production builds: eas build --profile production

Authentication Flow

The application implements a phone number-based authentication system with OTP verification:

1. Login: User enters phone number → OTP sent via SMS
2. Verification: User enters OTP code → Validates and creates session
3. Registration: If user doesn't exist, registration flow is triggered
4. Terms Agreement: User must accept terms and conditions
5. Session Management: Tokens stored in AsyncStorage

Key Authentication Functions

• loginWithNomor(): Initiates OTP sending
• validateOtp(): Verifies OTP and creates session
• registerUser(): Registers new users
• logout(): Clears session and removes tokens
• acceptedTerms(): Handles terms acceptance

Key Features

User Management

• Phone number-based registration and login
• OTP verification system
• Terms and conditions agreement
• User profile management

Business Features

• Business field management (admin section)
• File and image management capabilities
• Location services integration
• Push notifications

UI Components

• Custom color palette with blue/yellow theme
• Responsive layouts using SafeAreaView
• Toast notifications for user feedback
• Bottom tab navigation and drawer navigation

Development Conventions

Naming Conventions

• Components: PascalCase (e.g., UserProfile.tsx)
• Functions: camelCase (e.g., getUserData())
• Constants: UPPER_SNAKE_CASE (e.g., API_BASE_URL)
• Files: kebab-case or camelCase for utility files

Code Organization

• Components are organized by feature/functionality
• API services are centralized in the service/ directory
• Type definitions are maintained in the types/ directory
• Constants are grouped by category in the constants/ directory

Styling Approach

• Color palette defined in constants/color-palet.ts
• Reusable styles and themes centralized
• Responsive design using React Native's flexbox system

Testing

• Linting: bun run lint (uses ESLint with Expo config)
• No specific test framework mentioned in package.json

Environment Configuration

The application supports multiple environments through:

• Environment variables loaded via dotenv
• Expo's extra configuration in app.config.js
• Platform-specific configurations for iOS and Android

Supported Platforms

• iOS (with tablet support)
• Android (with adaptive icons)
• Web (static output)

Third-party Integrations

• Firebase: Authentication, messaging, and analytics
• Mapbox: Advanced mapping capabilities
• React Navigation: Screen navigation and routing
• React Native Paper: Material Design components
• Axios: HTTP client for API requests
• Lodash: Utility functions
• QR Code SVG: QR code generation

Important Configuration Files

• app.config.js: Expo configuration, app metadata, and plugin setup
• eas.json: EAS build profiles and submission configuration
• tsconfig.json: TypeScript compiler options
• package.json: Dependencies, scripts, and project metadata
• metro.config.js: Metro bundler configuration