8. ARQUITECTURA FRONTEND MULTIPLATAFORMA

graph TB
    SharedLogic["SHARED BUSINESS LOGIC
(NPM Package / Monorepo)

• Validación de formularios
• Formateo de datos
• Utilidades comunes
• Constantes y tipos TypeScript
• Lógica de negocio
• GraphQL queries"]
    
    SPA["SPA WEB
(React.js)

• React Router
• Tailwind CSS
• Web APIs"]
    
    Mobile["APP MÓVIL
(React Native)

• React Navigation
• Native Base
• Native APIs"]
    
    SharedLogic --> SPA
    SharedLogic --> Mobile
    
    style SharedLogic fill:#E8F5E9,stroke:#4CAF50,stroke-width:3px,rx:15,ry:15
    style SPA fill:#E3F2FD,stroke:#2196F3,stroke-width:3px,rx:15,ry:15
    style Mobile fill:#FFF9C4,stroke:#FBC02D,stroke-width:3px,rx:15,ry:15
        

Reutilización estimada: 60-70% del código

mobile-app/
├── src/
│   ├── components/        # Componentes reutilizables
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   ├── Card.tsx
│   │   └── AccountCard.tsx
│   │
│   ├── screens/          # Pantallas de la app
│   │   ├── Auth/
│   │   │   ├── LoginScreen.tsx
│   │   │   ├── RegisterScreen.tsx
│   │   │   └── BiometricSetupScreen.tsx
│   │   ├── Home/
│   │   │   ├── HomeScreen.tsx
│   │   │   └── AccountDetailScreen.tsx
│   │   ├── Transfers/
│   │   │   ├── TransferScreen.tsx
│   │   │   └── ConfirmTransferScreen.tsx
│   │   └── Profile/
│   │       └── ProfileScreen.tsx
│   │
│   ├── navigation/       # Configuración de navegación
│   │   ├── RootNavigator.tsx
│   │   ├── AuthNavigator.tsx
│   │   └── MainNavigator.tsx
│   │
│   ├── services/         # Llamadas API y lógica de negocio
│   │   ├── api/
│   │   │   ├── apollo-client.ts
│   │   │   ├── auth.service.ts
│   │   │   └── transfer.service.ts
│   │   └── biometric/
│   │       └── biometric.service.ts
│   │
│   ├── store/            # Redux store
│   │   ├── store.ts
│   │   ├── slices/
│   │   │   ├── authSlice.ts
│   │   │   ├── accountSlice.ts
│   │   │   └── transferSlice.ts
│   │   └── api/
│   │       └── apiSlice.ts  # RTK Query
│   │
│   ├── hooks/            # Custom React hooks
│   │   ├── useAuth.ts
│   │   ├── useBiometric.ts
│   │   └── useTransfer.ts
│   │
│   ├── utils/            # Utilidades
│   │   ├── formatters.ts
│   │   ├── validators.ts
│   │   └── constants.ts
│   │
│   ├── types/            # TypeScript types
│   │   ├── auth.types.ts
│   │   ├── account.types.ts
│   │   └── api.types.ts
│   │
│   └── graphql/          # GraphQL queries y mutations
│       ├── queries/
│       │   ├── accounts.gql.ts
│       │   └── transactions.gql.ts
│       └── mutations/
│           └── transfer.gql.ts
│
├── android/              # Código nativo Android
├── ios/                  # Código nativo iOS
├── shared-logic/         # Lógica compartida con web
│   ├── validators/
│   ├── formatters/
│   └── constants/
│
└── __tests__/            # Tests
    ├── unit/
    ├── integration/
    └── e2e/
        

flowchart TD
    Start([Usuario abre app]) --> CheckSession{Tiene sesión activa
y biometría habilitada?}
    
    CheckSession -->|Sí| RequestBiometric[Solicita Face ID / Touch ID]
    CheckSession -->|No| LoginScreen[LoginScreen]
    
    RequestBiometric --> BiometricResult{Biometría exitosa?}
    
    BiometricResult -->|Sí| RecoverToken[Recupera token desde Keychain]
    BiometricResult -->|No| BiometricFailed[LoginScreen
con opción de reintentar]
    
    RecoverToken --> ValidateToken[Valida token con backend]
    ValidateToken --> TokenValid{Token válido?}
    
    TokenValid -->|Sí| HomeScreen([HomeScreen])
    TokenValid -->|No| LoginScreen
    
    LoginScreen --> EnterCredentials[Usuario ingresa credenciales]
    EnterCredentials --> PostLogin[POST OAuth 2.0 /login]
    
    PostLogin --> LoginResult{Login exitoso?}
    
    LoginResult -->|Sí| SaveTokens[Guardar tokens en Keychain]
    SaveTokens --> AskBiometric[Preguntar si desea
habilitar biometría]
    AskBiometric --> HomeScreen
    
    LoginResult -->|No| ShowError[Mostrar error]
    ShowError --> LoginScreen
    
    LoginScreen --> ForgotPassword[Olvidé mi contraseña]
    
    style Start fill:#E8F5E9,stroke:#4CAF50,stroke-width:3px,rx:15,ry:15
    style HomeScreen fill:#E8F5E9,stroke:#4CAF50,stroke-width:3px,rx:15,ry:15
    style LoginScreen fill:#E3F2FD,stroke:#2196F3,stroke-width:3px,rx:15,ry:15
    style RequestBiometric fill:#FFF9C4,stroke:#FBC02D,stroke-width:3px,rx:15,ry:15
    style RecoverToken fill:#FFF9C4,stroke:#FBC02D,stroke-width:3px,rx:15,ry:15
    style SaveTokens fill:#FFF9C4,stroke:#FBC02D,stroke-width:3px,rx:15,ry:15
    style ShowError fill:#FFEBEE,stroke:#F44336,stroke-width:3px,rx:15,ry:15
    style BiometricFailed fill:#FFEBEE,stroke:#F44336,stroke-width:3px,rx:15,ry:15
        

flowchart TB
    subgraph Pages["PAGES (Templates)"]
        TransferScreen[TransferScreen.tsx]
    end
    
    subgraph Organisms["ORGANISMS"]
        TransferForm[TransferForm]
        AccountList[AccountList]
        TransactionHistory[TransactionHistory]
    end
    
    subgraph Molecules["MOLECULES"]
        AccountCard[AccountCard]
        InputGroup[InputGroup]
        TransactionItem[TransactionItem]
    end
    
    subgraph Atoms["ATOMS"]
        Button[Button]
        Input[Input]
        Text[Text]
        Icon[Icon]
        Avatar[Avatar]
    end
    
    Pages --> Organisms
    Organisms --> Molecules
    Molecules --> Atoms
    
    style Pages fill:#E8F5E9,stroke:#4CAF50,stroke-width:3px,rx:15,ry:15
    style Organisms fill:#E3F2FD,stroke:#2196F3,stroke-width:3px,rx:15,ry:15
    style Molecules fill:#FFF9C4,stroke:#FBC02D,stroke-width:3px,rx:15,ry:15
    style Atoms fill:#FFE5E5,stroke:#E74C3C,stroke-width:3px,rx:15,ry:15
        

classDiagram
    class ReduxStore {
        +State Slices
        +RTK Query API Cache
    }
    
    class StateSlices {
        +auth: AuthState
        +accounts: AccountsState
        +transfers: TransfersState
        +ui: UIState
    }
    
    class AuthState {
        +user: User
        +token: string
        +isAuthenticated: boolean
    }
    
    class AccountsState {
        +list: Account[]
        +selected: Account
        +loading: boolean
    }
    
    class TransfersState {
        +pending: Transfer[]
        +history: Transfer[]
    }
    
    class UIState {
        +theme: string
        +language: string
        +notifications: boolean
    }
    
    class RTKQuery {
        +Automatic caching GraphQL queries
        +Invalidación inteligente
        +Polling y refetch automático
    }
    
    ReduxStore *-- StateSlices
    ReduxStore *-- RTKQuery
    StateSlices *-- AuthState
    StateSlices *-- AccountsState
    StateSlices *-- TransfersState
    StateSlices *-- UIState
    
    style ReduxStore fill:#E8F5E9,stroke:#4CAF50,stroke-width:3px,rx:15,ry:15
    style StateSlices fill:#E3F2FD,stroke:#2196F3,stroke-width:3px,rx:15,ry:15
    style RTKQuery fill:#FFF9C4,stroke:#FBC02D,stroke-width:3px,rx:15,ry:15
        

%%{init: {'theme':'base', 'themeVariables': { 'primaryColor':'#FFE5E5','primaryTextColor':'#2C3E50','primaryBorderColor':'#E74C3C','lineColor':'#34495E','secondaryColor':'#E3F2FD','tertiaryColor':'#FFF9C4'}}}%%
graph BT
    subgraph E2E["E2E Tests (5%)"]
        E2E1[Detox]
        E2E2[Flujos completos]
        E2E3[Login, Transfer]
    end
    
    subgraph Integration["Integration Tests (20%)"]
        Int1[React Native Testing Library]
        Int2[Componentes + Redux]
        Int3[Navigation flows]
    end
    
    subgraph Unit["Unit Tests (75%)"]
        U1[Jest]
        U2[Funciones puras]
        U3[Utils, validators]
    end
    
    Unit --> Integration
    Integration --> E2E
    
    style E2E fill:#FFE5E5,stroke:#E74C3C,stroke-width:3px,rx:15,ry:15
    style Integration fill:#FFF9C4,stroke:#FBC02D,stroke-width:3px,rx:15,ry:15
    style Unit fill:#E8F5E9,stroke:#4CAF50,stroke-width:3px,rx:15,ry:15
        

flowchart TD
    Start([Developer Push a Git]) --> TriggerCI[Trigger CI
GitHub Actions / GitLab CI]
    
    TriggerCI --> Lint[Lint & Type Check]
    
    Lint --> LintItems[ESLint
TypeScript compiler]
    LintItems --> LintCheck{Pasa?}
    LintCheck -->|No| BlockPR1[Bloquear PR]
    LintCheck -->|Sí| Tests
    
    Tests[Unit & Integration Tests] --> TestItems[Jest - all tests]
    TestItems --> TestCheck{Pasa?}
    TestCheck -->|No| BlockPR2[Bloquear PR]
    TestCheck -->|Sí| Build
    
    Build[Build App] --> BuildItems[Android: gradlew assembleRelease
iOS: xcodebuild archive]
    BuildItems --> BuildCheck{Pasa?}
    BuildCheck -->|No| NotifyTeam1[Notificar team]
    BuildCheck -->|Sí| E2E
    
    E2E[E2E Tests - Detox] --> E2EItems[Run en emuladores]
    E2EItems --> E2ECheck{Pasa?}
    E2ECheck -->|No| NotifyTeam2[Notificar team]
    E2ECheck -->|Sí| DeployBeta
    
    DeployBeta[Deploy to Beta] --> BetaItems[Android: Firebase App Distribution
iOS: TestFlight
Notificar testers]
    
    BetaItems --> QA[Manual QA Approval]
    
    QA --> Production[Deploy to Production]
    Production --> ProdItems[Android: Google Play staged rollout
iOS: App Store phased release]
    
    ProdItems --> End([Deployment Completo])
    
    style Start fill:#E8F5E9,stroke:#4CAF50,stroke-width:3px,rx:15,ry:15
    style End fill:#E8F5E9,stroke:#4CAF50,stroke-width:3px,rx:15,ry:15
    style Lint fill:#E3F2FD,stroke:#2196F3,stroke-width:3px,rx:15,ry:15
    style Tests fill:#E3F2FD,stroke:#2196F3,stroke-width:3px,rx:15,ry:15
    style Build fill:#FFF9C4,stroke:#FBC02D,stroke-width:3px,rx:15,ry:15
    style E2E fill:#FFF9C4,stroke:#FBC02D,stroke-width:3px,rx:15,ry:15
    style DeployBeta fill:#FFE5E5,stroke:#E74C3C,stroke-width:3px,rx:15,ry:15
    style Production fill:#FFE5E5,stroke:#E74C3C,stroke-width:3px,rx:15,ry:15
    style BlockPR1 fill:#FFEBEE,stroke:#C62828,stroke-width:3px,rx:15,ry:15
    style BlockPR2 fill:#FFEBEE,stroke:#C62828,stroke-width:3px,rx:15,ry:15