Transfer App (lafise_react_test)

Aplicación móvil para transferencias desarrollada con React Native y Expo.

Requisitos previos

• Node.js (versión recomendada: 18.x o superior)
• npm o yarn
• Expo CLI (se instala automáticamente con npm install)
• Dispositivo móvil con la aplicación Expo Go instalada (para ejecución en dispositivo físico)
• Emulador de Android o simulador de iOS (para ejecución en emulador/simulador)

Instalación

1. Clonar el repositorio:

   git clone https://github.com/MickeyGR/lafise_react_test.git
   cd lafise_react_test

2. Instalar dependencias:

   npm install

Configuración del Mock API

Para el correcto funcionamiento de la aplicación, se requiere un mock API:

1. Clonar el repositorio del mock:

   git clone https://github.com/lafise/mobile-frontend-challenge-mock
   cd mobile-frontend-challenge-mock

2. Instalar dependencias del mock:

   npm install

3. Ejecutar el mock API:

   npm run dev

Esto iniciará dos servicios:

• Mock API en localhost:5566
• Documentación Swagger en localhost:5567

Ejecutar la aplicación

En modo desarrollo

npm start

Después de ejecutar este comando, se mostrará un código QR que puedes escanear con la aplicación Expo Go en tu dispositivo móvil.

En emulador/simulador

Para Android:

npm run android

Para iOS:

npm run ios

En navegador web

npm run web

Estructura del proyecto

lafise_react_test/
├── assets/              # Recursos estáticos (imágenes, íconos)
├── src/
│   ├── api/             # Configuración de cliente API
│   ├── components/      # Componentes reutilizables
│   ├── navigation/      # Configuración de navegación
│   ├── screens/         # Pantallas de la aplicación
│   ├── store/           # Manejo de estado con Zustand
│   └── types/           # Definiciones de tipos TypeScript
├── App.tsx              # Componente principal de la aplicación

Tecnologías utilizadas

• React Native
• Expo
• TypeScript
• React Navigation
• Zustand (manejo de estado)
• Axios (cliente HTTP)
• React Hook Form (manejo de formularios)

Desarrollo

La aplicación sigue una arquitectura basada en componentes reutilizables y navegación entre pantallas. El estado de la aplicación se maneja con Zustand, y las llamadas a API se realizan a través de un cliente Axios configurado en src/api/client.ts.