Darbna Mobile Application

A modern mobile application built with React, TypeScript, and Capacitor for Android and iOS platforms.

📱 Overview

Darbna is a content management mobile application that provides users with access to educational and informational content. The app features user authentication, content browsing, search functionality, favorites management, and comprehensive accessibility settings.

🚀 Features

• User Authentication: Secure login and registration system
• Content Management: Browse, search, and view detailed content
• Category Navigation: Organized content by categories
• Favorites System: Save and manage favorite content
• User Profile: Comprehensive profile management with accessibility settings
• Multi-language Support: English and Arabic (RTL support)
• Accessibility Features:
  • Dark mode
  • High contrast mode
  • Adjustable font sizes
  • Screen reader optimization
• Search Functionality: Enhanced search with visual feedback
• Responsive Design: Optimized for mobile devices

🛠️ Tech Stack

• Framework: React 19.2.3 with TypeScript
• Mobile: Capacitor 8.0
• State Management: Redux Toolkit
• Routing: React Router v7
• HTTP Client: Axios
• Forms: React Hook Form
• Internationalization: react-i18next
• UI: Custom CSS with responsive design

📋 Prerequisites

• Node.js 18+ and npm
• Android Studio (for Android development)
• Xcode (for iOS development, macOS only)
• Java Development Kit (JDK)

🔧 Installation

1. Clone the repository

   git clone <repository-url>
   cd Darbna-react

2. Install dependencies

   npm install

3. Configure environment

   • Update API endpoints in src/constants/config.ts
   • Configure Capacitor settings in capacitor.config.ts

🏃 Running the Application

Development Mode

npm start

This starts the React development server. Open http://localhost:3000 to view it in the browser.

Building for Production

npm run build

This creates an optimized production build in the build folder.

Android Development

1. Sync Capacitor

   npm run cap:sync

2. Open in Android Studio

   npm run cap:open:android

3. Build Debug APK

   npm run android:build:debug

4. Build Release APK

   npm run android:build

5. Build Release AAB (for Play Store)

   cd android && gradlew.bat bundleRelease

iOS Development

1. Sync Capacitor

   npm run cap:sync

2. Open in Xcode

   npm run cap:open:ios

📁 Project Structure

src/
├── api/              # API service files
├── components/       # Reusable React components
│   ├── category/    # Category-related components
│   ├── common/      # Common UI components
│   └── content/     # Content-related components
├── constants/        # Configuration constants
├── hooks/           # Custom React hooks
├── i18n/            # Internationalization files
├── navigation/      # Navigation configuration
├── screens/         # Screen components
│   ├── auth/       # Authentication screens
│   ├── categories/ # Category screens
│   ├── content/    # Content screens
│   ├── favorites/  # Favorites screen
│   ├── home/       # Home screen
│   ├── profile/    # Profile screen
│   └── search/     # Search screen
├── store/          # Redux store configuration
│   └── slices/    # Redux slices
├── types/          # TypeScript type definitions
└── utils/          # Utility functions

🔐 Configuration

API Configuration

Update the API base URL in src/constants/config.ts:

export const API_BASE_URL = 'https://your-api-url.com/api';

Capacitor Configuration

Configure app settings in capacitor.config.ts:

• App ID: org.mpdl.darbna
• App Name: Darbna
• Version: 2.1.0

Android Signing

The app is configured for release signing. Keystore files are included:

• android/key.properties - Keystore configuration
• android/upload-keystore.jks - Signing keystore
• key.properties - Root level keystore config (backup)
• upload-keystore.jks - Root level keystore (backup)

Important:

• The keystore files are provided for Play Store releases
• Keep the keystore file and passwords secure
• You'll need these same files for all future app updates
• Never commit keystore files to public repositories

📦 Building for Production

Android App Bundle (AAB) for Play Store

cd android && gradlew.bat bundleRelease

The signed AAB file will be generated at:

android/app/build/outputs/bundle/release/app-release.aab

Android APK

npm run android:build

The signed APK will be generated at:

android/app/build/outputs/apk/release/app-release.apk

🌐 Internationalization

The app supports English and Arabic languages. Translation files are located in:

• src/i18n/en.json - English translations
• src/i18n/ar.json - Arabic translations

To add new translations, update the respective JSON files.

♿ Accessibility

The app includes comprehensive accessibility features:

• Font Size: Adjustable (Small, Medium, Large)
• Dark Mode: System-wide dark theme
• High Contrast: Enhanced contrast mode
• Screen Reader: Optimized for screen readers

Accessibility settings are managed in the Profile screen and persist across app sessions.

🧪 Testing

Run tests with:

npm test

📝 Available Scripts

• npm start - Start development server
• npm run build - Build for production
• npm test - Run tests
• npm run cap:sync - Sync web assets to native projects
• npm run cap:copy - Copy web assets to native projects
• npm run cap:open:android - Open Android project in Android Studio
• npm run cap:open:ios - Open iOS project in Xcode
• npm run android:build - Build signed release APK
• npm run android:build:debug - Build debug APK

📄 License

ISC

👥 Support

For technical support or questions, please contact the development team.

📱 App Information

• Package Name: org.mpdl.darbna
• Version: 2.1.0
• Version Code: 10
• Platform: Android, iOS (via Capacitor)

---

Built with ❤️ using React and Capacitor