StepHub: Plantilla React Native para Tienda de Zapatos (iOS/Android) con Panel de Administración (Laravel/Orchid)
StepHub es una plantilla completa para crear una app de tienda de zapatos. Se construyó con React Native CLI 0.73.6 y TypeScript. Funciona en iOS y Android. También incluye un panel de administración hecho con Laravel y Orchid. Así, obtienes frontend, backend y panel en un solo paquete.
Características Clave de StepHub
- React Native CLI 0.73.6: Permite un desarrollo nativo rápido y eficiente.
- Panel de Administración (Laravel/Orchid): Facilita la gestión de productos, categorías, pedidos y promociones.
- Componentes Funcionales y React Hooks: Usa un código moderno y sencillo de mantener.
- Iconos SVG: Muestra gráficos escalables y de alta calidad.
- Diseño Figma Incluido: Permite personalizar la interfaz fácilmente.
- Compatibilidad iOS y Android: Una sola base de código para ambas plataformas.
- Estructura Organizada: Usa componentes modulares y claros.
- Video Tutoriales: Explican cada paso de la configuración.
- Solución Completa: Incluye frontend, backend y panel de administración.
- TypeScript (.tsx): Asegura un desarrollo seguro con tipado estático.
- Preloader para Imágenes: Mejora la carga visual de la app.
- Redux y Redux Persist: Gestionan el estado de la aplicación de forma eficaz.
Panel de Administración (Orchid – Laravel)
El panel de administración es fácil de usar. Te ayuda a gestionar la tienda de forma rápida. Por ejemplo, puedes actualizar productos sin complicaciones.
- Usuario: admin@admin.com
- Contraseña: password
¿Por qué elegir Orchid? Primero, es muy escalable y crece con tu negocio. Además, ofrece muchas opciones de personalización. También, sus herramientas facilitan la gestión diaria. Por último, la interfaz es intuitiva y segura.
Acceso a la API (Postman)
Para usar la API, sigue estos pasos. Primero, descarga Postman. Luego, selecciona el método GET e ingresa el Bearer Token aH3KCew1YsWhWqW0tqNU3ndzHb3RdblI. Finalmente, haz clic en «Enviar». Así podrás explorar la API fácilmente.
Algunos endpoints disponibles son:
- /api/tags
- /api/sizes
- /api/audiences
- /api/categories
- /api/products
- /api/banners
- /api/promocodes
- /api/slides
- /api/colors
- /api/promotions
Tecnologías
- React Native
- TypeScript
- Redux (con Redux Persist)
- Laravel (backend)
- Orchid (panel de administración)
Dependencias
A continuación se muestra la lista de dependencias:
- «@react-native-async-storage/async-storage»: «^1.22.3»
- «@react-native-clipboard/clipboard»: «^1.13.2»
- «@react-navigation/native»: «^6.1.16»
- «@react-navigation/native-stack»: «^6.9.25»
- «@reduxjs/toolkit»: «^2.2.1»
- «axios»: «^1.6.8»
- «react»: «18.2.0»
- «react-native»: «0.73.6»
- «react-native-collapsible»: «^1.6.1»
- «react-native-eject»: «^0.2.0»
- «react-native-fast-image»: «^8.6.3»
- «react-native-flash-message»: «^0.4.2»
- «react-native-image-progress»: «^1.2.0»
- «react-native-keyboard-aware-scroll-view»: «^0.9.5»
- «react-native-modal»: «^13.0.1»
- «react-native-orientation-locker»: «^1.6.0»
- «react-native-responsive-dimensions»: «^3.1.1»
- «react-native-restart»: «^0.0.27»
- «react-native-safe-area-context»: «^4.9.0»
- «react-native-screens»: «^3.29.0»
- «react-native-svg»: «^15.1.0»
- «react-redux»: «^9.1.0»
- «redux-persist»: «^6.0.0»
Comandos Importantes
Sigue estos pasos para ejecutar la aplicación:
- Primero, ejecuta
npm install. - Luego, usa
npx react-native eject. - Después, corre
npx pod-install(para iOS). - A continuación, ejecuta
npx react-native-asset. - Finalmente, inicia la app con
npx react-native run-iosonpx react-native run-android.
Fuente
- Mulish
¡Crea tu App de Tienda de Zapatos con StepHub!
Aprovecha esta plantilla profesional para lanzar tu tienda online de calzado. StepHub ofrece una solución robusta y escalable. Es fácil de personalizar y transformar. De este modo, podrás impulsar tu negocio digital y alcanzar el éxito.
