👗 Virtual Vogue: App Móvil con Probador Virtual AR
E-Commerce de Moda con Realidad Aumentada en el Teléfono
Virtual Vogue es una aplicación móvil desarrollada con Expo SDK 54 y React Native 0.81 que permite a los usuarios previsualizar prendas de vestir directamente sobre su cuerpo en tiempo real utilizando la cámara del dispositivo móvil mediante simulaciones de Realidad Aumentada (AR).
- 💻 Repositorio GitHub: github.com/Alecwce/tienda_AR
- 📱 Plataformas: Android & iOS | Framework: React Native + Expo Router
📱 Pantallas y Flujos de Usuario
flowchart LR Home["🏠 Inicio\n(Hero, Colecciones & Destacados)"] --> Catalog["🛍️ Catálogo\n(Filtros por Talla & Categoría)"] Catalog --> Detail["🔍 Detalle Producto\n(Medidas & Galería)"] Detail --> ARScreen["📷 Probador Virtual AR\n(Cámara en vivo + Overlay)"] Detail --> Cart["🛒 Carrito de Compras\n(Cupones & Checkout)"] Home --> Profile["👤 Perfil\n(Medidas Corporales Guardadas)"]
✨ Características Técnicas Principales
- Probador Virtual con AR Overlay:
- Acceso directo a la cámara del dispositivo mediante
expo-camera. - Permite arrastrar, escalar y rotar las prendas superpuestas sobre la transmisión de video para comprobar proporciones y estilos.
- Acceso directo a la cámara del dispositivo mediante
- Motor de Recomendación de Tallas:
- Algoritmo que compara las medidas corporales del usuario guardadas en su perfil con las especificaciones de patronaje de cada prenda.
- Navegación File-Based con Expo Router:
- Arquitectura de rutas basada en carpetas similar a Next.js (
app/(tabs)/), permitiendo transiciones fluidas y enlaces profundos (deep links).
- Arquitectura de rutas basada en carpetas similar a Next.js (
- Animaciones Nativas a 60 FPS:
- Gestos y transiciones de pantalla manejados por el motor de subproceso de interfaz de usuario (UI thread) con React Native Reanimated 4.
- Respuesta Háptica y Estética Visual:
- Feedback táctil al agregar prendas al carrito mediante
expo-hapticsy diseño dark mode conexpo-blur.
- Feedback táctil al agregar prendas al carrito mediante
🛠️ Stack Tecnológico
| Módulo | Librería / Tecnología |
|---|---|
| Framework Base | Expo SDK 54 + React Native 0.81 |
| Enrutamiento | Expo Router v4 |
| Lenguaje | TypeScript 5.9 Strict |
| Cámara & Visión | expo-camera, expo-image |
| Gestión de Estado | Zustand 5 |
| Animaciones & Gestos | React Native Reanimated 4 + React Native Gesture Handler |
| UI & Efectos | expo-blur (Glassmorphism), expo-linear-gradient |