📱 Mi Primera App

Una aplicación móvil profesional desarrollada con React Native que demuestra las mejores prácticas de desarrollo móvil. Incluye navegación entre múltiples pantallas, arquitectura escalable, design system propio y testing automatizado.

🎯 Descripción

Esta aplicación sirve como demostración de una arquitectura móvil profesional, implementando patrones de diseño modernos, navegación fluida y una base sólida para el desarrollo de aplicaciones escalables.

📱 Características

• Navegación Multiscreen: Sistema de navegación completo entre pantallas
• Design System: Componentes reutilizables con sistema de diseño consistente
• Arquitectura TypeScript: Tipado fuerte para mayor mantenibilidad
• Testing Configurado: Suite de tests con Jest y React Native Testing Library
• Layout Responsivo: Interfaz adaptativa para diferentes dispositivos
• Componentes Modulares: Arquitectura basada en componentes reutilizables

🚀 Tecnologías

• React Native 0.81.5 - Framework móvil multiplataforma
• Expo ~54.0 - Plataforma de desarrollo y despliegue
• TypeScript 5.9.2 - Tipado estático
• React Navigation 7.1.28 - Navegación entre pantallas
• React Native Safe Area Context - Manejo de áreas seguras
• Jest 30.2.0 - Framework de testing
• React Native Testing Library - Herramientas de testing para componentes

📦 Instalación

Prerrequisitos

• Node.js (v18 o superior)
• Expo CLI: npm install -g @expo/cli
• Expo Go app (opcional para testing en dispositivo)

Pasos de Instalación

1. Clona el repositorio:

git clone https://github.com/aaf925/MiPrimeraApp.git
cd MiPrimeraApp

2. Instala las dependencias:

npm install

3. Inicia el servidor de desarrollo:

npm start

4. Para ejecutar en simulador o dispositivo:

npm run android  # Android
npm run ios      # iOS
npm run web      # Navegador web

📱 Pantallas

🏠 Home Screen

• Pantalla de bienvenida con navegación principal
• Acceso rápido a todas las funcionalidades
• Diseño centrado en la experiencia del usuario

🔐 Login Screen

• Interfaz de autenticación
• Validación de formularios
• Gestión de estado de sesión

👥 Characters Screen

• Lista de personajes con datos externos
• Implementación de listas eficientes
• Navegación a detalles individuales

📋 Character Detail Screen

• Vista detallada de personajes individuales
• Información completa y organizada
• Navegación contextual

❤️ Favorites Screen

• Gestión de elementos favoritos
• Persistencia de preferencias del usuario
• Interfaz intuitiva de favoritos

🏗️ Arquitectura

src/
├── components/          # Componentes reutilizables
│   ├── MyButton.tsx     # Botón del design system
│   └── ScreenLayout.tsx # Layout base para pantallas
├── navigation/          # Configuración de navegación
│   └── AppNavigator.tsx # Navegador principal
├── screens/            # Pantallas de la aplicación
│   ├── HomeScreen.tsx
│   ├── LoginScreen.tsx
│   ├── CharactersScreen.tsx
│   ├── CharacterDetailScreen.tsx
│   └── FavoritesScreen.tsx
├── theme/              # Sistema de diseño
│   └── index.ts        # Tokens de diseño (colores, espaciado, etc.)
├── types/              # Definiciones TypeScript
│   └── navigation.ts   # Tipos para React Navigation
├── services/           # Servicios y APIs
├── store/              # Gestión de estado global
└── styles/             # Estilos globales

🎨 Design System

La aplicación implementa un design system completo que incluye:

Componentes Base

• MyButton: Botón reutilizable con variantes
• ScreenLayout: Layout consistente para todas las pantallas

Theme System

export const theme = {
  colors: {
    primary: '#007AFF',
    secondary: '#FF3B30',
    background: '#FFFFFF',
    surface: '#F2F2F7',
    text: '#000000'
  },
  spacing: {
    xs: 4,
    sm: 8,
    md: 16,
    lg: 24,
    xl: 32
  },
  typography: {
    // Jerarquía tipográfica
  }
}

🧪 Testing

La aplicación incluye una suite completa de tests:

# Ejecutar todos los tests
npm test

# Ejecutar tests en modo watch
npm run test:watch

# Ejecutar tests con coverage
npm run test:coverage

Tipos de Tests

• Componentes: Tests unitarios para componentes individuales
• Screens: Tests de integración para pantallas completas
• Navigation: Tests de flujos de navegación
• Services: Tests para servicios y APIs

📋 Scripts Disponibles

npm start          # Inicia el servidor de desarrollo
npm run android    # Ejecuta en Android
npm run ios        # Ejecuta en iOS
npm run web        # Ejecuta en navegador web
npm test          # Ejecuta tests

🔧 Configuración

TypeScript

La aplicación está completamente tipada con TypeScript para:

• Type Safety: Detección de errores en tiempo de compilación
• Better DX: Autocompletado e IntelliSense
• Refactoring: Refactorización segura
• Documentation: Código autodocumentado

ESLint y Prettier

Configuración incluida para:

• Linting de código
• Formateo automático
• Estándares de calidad
• Consistencia en el equipo

🔮 Roadmap

Funcionalidades Planeadas

• Autenticación real con APIs
• Persistencia de datos con SQLite
• Notificaciones push
• Modo offline
• Internacionalización (i18n)
• Animaciones avanzadas
• Integración con APIs REST
• Tests E2E con Detox

Mejoras Técnicas

• Implementación de Redux Toolkit
• Code splitting y lazy loading
• Performance monitoring
• Crash reporting
• Analytics de usuario

🤝 Contribución

Las contribuciones son bienvenidas. Para contribuir:

1. Fork el proyecto
2. Crea tu feature branch (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la branch (git push origin feature/AmazingFeature)
5. Abre un Pull Request

👤 Autor

Alejandro Avilés Fernández

• GitHub: @aaf925
• LinkedIn: Alejandro Avilés Fernández
• Email: aavils200590@gmail.com

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para más detalles.

---

⭐ ¡Si te gusta el proyecto, dale una estrella en GitHub!

📚 Este proyecto forma parte del portfolio de desarrollo móvil