El escaparate principal donde los clientes descubren productos, exploran categorías y realizan sus compras. Constituye la interfaz pública del negocio.
¿Qué es?
Es la aplicación web pública accesible por cualquier persona. Funciona como una tienda virtual donde se presentan los productos disponibles, se filtran por categorías, se visualizan detalles, y se completan las compras. Todo con una experiencia fluida, rápida y optimizada para dispositivos móviles y de escritorio.
Funciones principales
Exploración de productos: Navegación intuitiva por categorías, búsqueda avanzada, filtros por precio, disponibilidad y atributos.
Fichas de producto: Galerías de imágenes, descripciones detalladas, especificaciones técnicas, valoraciones y stock disponible.
Carrito de compra: Agregar/eliminar productos, modificar cantidades, aplicar descuentos y ver resumen de compra.
Proceso de pago: Selección de dirección de envío, método de pago, resumen final y confirmación del pedido.
Historial de compras: Los clientes autenticados consultan sus pedidos anteriores y su estado, y pueden repetirlos.
Notificaciones: Confirmación de compra, estado del envío, ofertas y novedades por correo electrónico.
Limitaciones y restricciones
Información en tiempo real: Los precios y el stock se sincronizan con el backend cada pocos segundos, por lo que puede haber pequeños desfases.
Métodos de pago: Solo acepta tarjetas de crédito/débito integradas con el proveedor. No hay billeteras digitales por ahora.
Gestión de devoluciones: El proceso es manual: los clientes contactan por correo electrónico o teléfono, sin formulario automatizado en la web.
Personalización: No hay recomendaciones basadas en IA ni historial de compra (en versión actual).
Disponibilidad regional: Solo funciona en Perú. Envíos internacionales no soportados.
Propósito del componente
Convertir visitantes en compradores, generar ingresos directos, recopilar datos sobre las preferencias de los clientes y representar la imagen pública del negocio. Debe ser rápida, segura y coherente con la identidad de la marca.
Stack tecnológico recomendado
React 18TypeScriptViteTailwindCSSSWR/React QueryZustandPasarela de pagos
Por qué: React renderiza con eficiencia los cambios dinámicos (carrito, filtros). TypeScript previene errores en el manejo de datos sensibles. Vite ofrece compilación muy rápida en desarrollo. TailwindCSS facilita componentes consistentes sin CSS a mano. SWR mantiene los datos sincronizados con el backend. Zustand gestiona el estado global (usuario, carrito) con una huella mínima.
Información técnica adicional
Renderizado: La mayoría es SPA (Single Page App) para transiciones suaves. La página inicial se pre-renderiza en servidor para SEO.
Rendimiento: Los datos se cachean localmente (localStorage para el carrito temporal) y las imágenes de producto se optimizan y se sirven desde una CDN.
Seguridad: Se comunica con El motor usando HTTPS. Tokens JWT válidos solo 15 minutos. El carrito se sincroniza en tiempo real con Redis.
Escalabilidad: Se distribuye en múltiples servidores con nginx como balanceador. El caché se maneja centralizadamente en Redis.
Accesibilidad: Cumple WCAG 2.1 nivel AA. Navegación por teclado, colores accesibles, textos descriptivos en imágenes.
Métricas importantes
Tiempo de carga: Objetivo inferior a 2 segundos en red móvil 4G.
Tasa de conversión: Porcentaje de visitantes que completan una compra; objetivo superior al 2%.
Abandono de carrito: Porcentaje que añade producto pero no compra; objetivo inferior al 70%.
Disponibilidad: 99,9% (máximo de 31 min de caída al mes).
Errores 404: Productos no encontrados; objetivo inferior al 1% de las peticiones.
El catálogo público es el primer contacto del cliente con la marca: cada milisegundo de velocidad y cada detalle visual cuentan. Diseño y frontend deben trabajar en estrecha coordinación con marketing para optimizar la conversión de forma continua.