README.md

@@ -4,6 +4,7 @@ A web application to search for medicines from the official Spanish CIMA databas
 
 ## ✨ Features
 
+### Web App (Desktop/PWA)
 - 🔍 **Real-time medicine search** from CIMA API (Agencia Española de Medicamentos)
 - 💾 **Redis caching** for improved performance
 - 📍 View pharmacies that sell a specific medicine
@@ -15,14 +16,38 @@ A web application to search for medicines from the official Spanish CIMA databas
   - Search medicines from CIMA database
   - Link medicines to pharmacies with prices and stock
 
+### Mobile App (React Native)
+- 📱 **Native iOS/Android** experience with Expo
+- 🔍 **Medicine search** with real-time results
+- 🗺️ **Interactive map** with pharmacy markers
+- 📷 **Barcode scanner** for quick medicine lookup
+- 🔔 **Push notifications** for availability alerts
+- 🔐 **Biometric authentication** (Face ID / Touch ID)
+- 💾 **Offline cache** for favorite medicines
+
 ## 🛠️ Tech Stack
 
-- **Frontend**: React + Vite
+### Backend
-- **Backend**: Node.js + Express
+- **Runtime**: Node.js + Express
 - **Database**: SQLite (for pharmacies and relationships)
 - **Cache**: Redis
 - **External API**: CIMA (Centro de Información online de Medicamentos de la AEMPS)
 
+### Frontend (Web/PWA)
+- **Framework**: React + Vite
+- **Mobile wrapper**: Capacitor (for hybrid mobile builds)
+
+### Frontend (Mobile - React Native)
+- **Framework**: Expo SDK 57 + React Native
+- **Navigation**: Expo Router v4
+- **State**: Zustand
+- **HTTP**: Axios + TanStack Query
+- **Maps**: react-native-maps
+- **Camera**: expo-camera (barcode scanning)
+- **Auth**: expo-local-authentication (biometrics)
+- **Notifications**: expo-notifications
+- **Build**: EAS Build
+
 ## 📋 Prerequisites
 
 - Node.js (v18 or higher)
@@ -200,7 +225,7 @@ FarmaFinder/
 │   ├── create-admin.js        # Admin user creation script
 │   ├── .env.example           # Environment variable template
 │   └── package.json
-├── frontend/
+├── frontend/                  # React + Vite (Desktop/PWA)
 │   ├── Dockerfile
 │   ├── nginx.conf             # Nginx config (Docker): serves SPA + proxies /api
 │   ├── src/
@@ -213,6 +238,27 @@ FarmaFinder/
 │   │   └── main.jsx          # Entry point
 │   ├── index.html
 │   └── package.json
+├── frontend-mobile/           # Expo + React Native (iOS/Android)
+│   ├── app/
+│   │   ├── _layout.tsx        # Root layout with providers
+│   │   ├── (tabs)/            # Bottom tab navigation
+│   │   │   ├── index.tsx      # Home (medicine search)
+│   │   │   ├── map.tsx        # Pharmacy map
+│   │   │   └── profile.tsx    # User profile
+│   │   ├── medicine/[id].tsx  # Medicine detail
+│   │   ├── pharmacy/[id].tsx  # Pharmacy detail
+│   │   ├── auth/              # Login/Register screens
+│   │   └── scanner.tsx        # Barcode scanner
+│   ├── components/            # Reusable UI components
+│   ├── services/              # API and business logic
+│   ├── store/                 # Zustand state management
+│   ├── hooks/                 # Custom React hooks
+│   ├── constants/             # Theme and config
+│   ├── types/                 # TypeScript types
+│   ├── eas.json               # EAS Build configuration
+│   └── package.json
+├── android/                   # Capacitor Android project
+├── ios/                       # Capacitor iOS project
 └── README.md
 ```
 
@@ -289,6 +335,95 @@ The application now uses the **CIMA (Centro de Información online de Medicament
 - Results are cached in Redis for performance
 - `pharmacy_medicines` now uses `medicine_nregistro` (CIMA registration number) instead of local `medicine_id`
 
+## 📱 Mobile App Setup (React Native)
+
+### Prerequisites
+
+- Node.js (v18 or higher)
+- npm or yarn
+- **Expo CLI**: `npm install -g expo-cli`
+- **EAS CLI**: `npm install -g eas-cli`
+- **iOS**: Xcode (Mac only) + CocoaPods
+- **Android**: Android Studio + Android SDK
+
+### Quick Start
+
+```bash
+# Install all dependencies (backend + web + mobile)
+npm run install:all
+
+# Start mobile development server
+npm run dev:mobile
+
+# Scan QR code with Expo Go app (iOS/Android)
+```
+
+### Development Build
+
+For native features (camera, biometrics, notifications), use a development build:
+
+```bash
+# Install EAS CLI
+npm install -g eas-cli
+
+# Login to Expo
+eas login
+
+# Create development build
+eas build --profile development --platform ios
+eas build --profile development --platform android
+```
+
+### Project Structure
+
+```
+frontend-mobile/
+├── app/                    # Expo Router screens
+│   ├── (tabs)/             # Bottom tab navigation
+│   ├── auth/               # Login/Register
+│   ├── medicine/           # Medicine detail
+│   ├── pharmacy/           # Pharmacy detail
+│   └── scanner.tsx         # Barcode scanner
+├── components/             # Reusable UI components
+├── services/               # API and business logic
+├── store/                  # Zustand state management
+├── hooks/                  # Custom React hooks
+├── constants/              # Theme and config
+└── types/                  # TypeScript types
+```
+
+### Native Features
+
+| Feature | Implementation |
+|---------|---------------|
+| Barcode Scanner | `expo-camera` with `CameraView` |
+| Push Notifications | `expo-notifications` |
+| Biometrics | `expo-local-authentication` |
+| Maps | `react-native-maps` |
+| Secure Storage | `expo-secure-store` |
+
+### EAS Build Profiles
+
+- **development**: Local development with dev client
+- **preview**: Internal testing (APK/IPA)
+- **production**: App Store/Google Play submission
+
+### Environment Configuration
+
+The mobile app uses the same backend API as the web app. Configure the API URL in:
+
+```typescript
+// frontend-mobile/constants/config.ts
+const ENV = {
+  development: {
+    API_BASE_URL: 'http://localhost:3001/api',
+  },
+  production: {
+    API_BASE_URL: 'https://your-production-api.com/api',
+  },
+};
+```
+
 ## 🐛 Troubleshooting
 
 ### Redis Connection Issues
@@ -321,19 +456,52 @@ npm run create-admin
 
 ## 📝 Development
 
-**Backend development with auto-reload:**
+### Backend
+
+**Start with auto-reload:**
 ```bash
 cd backend
 npm run dev
 ```
 
-**Frontend development:**
+### Frontend (Web/PWA)
+
+**Start development server:**
 ```bash
 cd frontend
 npm run dev
 ```
 
-**Clear Redis cache:**
+### Frontend (Mobile - React Native)
+
+**Install all dependencies:**
+```bash
+npm run install:all
+```
+
+**Start Expo dev server:**
+```bash
+npm run dev:mobile
+```
+
+**Start for specific platform:**
+```bash
+npm run dev:mobile:android   # Android emulator
+npm run dev:mobile:ios       # iOS simulator
+```
+
+**Build with EAS:**
+```bash
+npm run build:mobile         # Production build
+```
+
+**Submit to stores:**
+```bash
+npm run submit:android       # Google Play
+npm run submit:ios           # App Store
+```
+
+### Clear Redis cache
 ```bash
 redis-cli FLUSHALL
 ```