diff --git a/README.md b/README.md index 92fc0d6..f3a4956 100644 --- a/README.md +++ b/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**: Node.js + Express +### Backend +- **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 ```