Lumora Clothing: una plataforma de comercio full-stack que va más allá de una tienda virtual estática

Lumora Clothing es una plataforma de comercio y operaciones de tipo full-stack diseñada para resolver los problemas prácticos con los que se enfrentan los minoristas de ropa, y no es otro sitio de catálogo estático. El objetivo del diseño era crear un sistema que permitiera realizar compras de clientes y gestionar las operaciones diarias de la tienda, al mismo tiempo que reducía la frecuencia con la que el personal necesitaba a un desarrollador para realizar cambios rutinarios.

Se puede acceder a la versión en funcionamiento en https://lumora-clothing.vercel.app/.

Así es la tienda online

La experiencia del usuario es una tienda responsive que busca resultar sencilla y moderna para quienes buscan prendas de vestir.

El problema al que se dirige

Las pequeñas empresas de ropa suelen seguir dependiendo de ingenieros para tareas cotidianas: editar productos, ajustar precios, subir fotos y corregir los inventarios. Los compradores en algunos mercados prefieren métodos de pago locales conocidos, como transferencias bancarias y comprobantes de depósito. Los clubes universitarios y las empresas también pueden necesitar pedidos en bulk personalizados en lugar de procesos de venta al por menor de un solo artículo.

Lumora se diseñó teniendo en cuenta esas realidades operativas en lugar de copiar un modelo genérico global de proceso de compra.

Cómo la plataforma responde a ellas

El producto combina una tienda en línea para el cliente con un sistema de administración, permitiendo que la empresa realice por sí misma las tareas diarias.

Pantalla de administración de autoservicio

Los operadores gestionan los productos, imágenes, categorías, tamaños, precios e inventario desde el panel de control sin necesidad de editar código de la aplicación. Las imágenes se pueden seleccionar en el navegador mediante la FileReader API, visualizar de inmediato y procesar a través de un sistema Base64, lo que permite al personal no técnico mantener el catálogo.

Pago con comprobante

En lugar de depender únicamente de pasarelas de tarjetas, los compradores pueden subir un comprobante de transferencia bancaria o depósito al realizar el pago. El pedido pasa entonces a un estado de “Verificación del comprobante” para que el personal pueda confirmar el pago antes de continuar con el procesamiento.

Avisos automáticos de pedidos

Cuando el personal modifica el estado de un pedido, el backend puede notificar al cliente a través de la Resend API, reduciendo los mensajes manuales repetitivos y manteniendo informados a los compradores.

Ruta para ventas B2B al por mayor

Los compradores al por mayor necesitan un proceso diferente al de los clientes minoristas. Lumora ofrece una vía de consulta en grandes cantidades donde se recopilan la cantidad, el tipo de tela y otros requisitos adicionales, para luego convertirlos en un mensaje estructurado por WhatsApp de modo que la empresa pueda continuar la conversación a través de un canal que ya utiliza.

Arquitectura técnica

La arquitectura sigue un diseño full-stack desacoplado.

Frontend

• Interfaz de usuario con React 18
• Tipos en TypeScript
• Estilos con Tailwind
• Cliente HTTP Axios
• Conjunto de íconos Lucide

Server

• Entorno de ejecución Node.js
• Marco HTTP Express
• Puntos de extremo REST orientados a recursos
• Sesiones firmadas basadas en JWT
• Verificaciones de roles que controlan las acciones de administradores y clientes

Banco de datos

• Clúster alojado en MongoDB Atlas
• Modelado de documentos con Mongoose

Integraciones

• Volver a enviar para correos transaccionales
• Enlaces profundos de WhatsApp para chatear con un clic
• FileReader del navegador para vistas previas locales

Despliegue

• Vercel aloja la SPA
• Railway aloja la API

El cliente se comunica con el servidor mediante REST. El servidor se encarga de la autenticación, las reglas empresariales, la persistencia y las integraciones externas.

Aspectos destacados de ingeniería

1. Menor dependencia de los desarrolladores

Un objetivo central fue la independencia operativa. Los cambios en el catálogo y las existencias se realizan en el panel de control, sin necesidad de desplegar código por cada modificación.

2. Adaptación a los hábitos de compra locales

El diseño de pagos sigue los métodos de transferencia bancaria y comprobantes de depósito habituales entre los usuarios objetivo. Las conversaciones en grupo continúan por WhatsApp. La idea rectora: el software debe adaptarse a las personas, no obligarlas a adaptarse al software.

3. Venta minorista y mayorista en un mismo producto

Las compras individuales y las solicitudes en bulk de las organizaciones coexisten sin obligar a ambos grupos a pasar por un proceso de pago idéntico.

4. Automatizar tareas repetitivas de seguimiento

Las notificaciones basadas en el estado reducen la necesidad de seguimiento manual y hacen que la comunicación con los clientes sea más consistente.

Informaciones adicionales

La lección clave es que un producto verdadero no se trata solo de elegir una tecnología moderna; se trata de comprender el flujo de trabajo empresarial que debe soportar el software. Tres principios dieron forma a Lumora:

Diseñar para la independencia operativa. Las tareas rutinarias no deben depender de los ingenieros.

Diseñar según el comportamiento real. Las elecciones tecnológicas deben reflejar la forma en que el público ya realiza pagos y se comunica.

Automatice donde sea útil. Los pasos operativos repetitivos deben integrarse en el sistema cuando la automatización hace que el proceso sea más rápido y fiable.

Cierre

Lumora nació como una idea de comercio electrónico y se convirtió en una práctica basada en ingeniería full-stack, diseño de procesos, automatización y arquitectura centrada en el usuario. El objetivo nunca fue simplemente una página donde la gente comprara ropa, sino una plataforma en la que los clientes pudieran realizar compras sin problemas, los administradores gestionaran los datos del catálogo por sí solos, los pedidos siguieran un flujo de trabajo estructurado, los compradores recibieran actualizaciones automáticas y la empresa pudiera atender tanto consultas al por menor como al por mayor. Esa combinación es lo que hace de Lumora una plataforma de comercio full-stack desarrollada en torno a las necesidades operativas y no solo como una simple interfaz de venta.

La independencia del catálogo también modifica el ritmo de lanzamiento. Cuando los precios y las fotos ya no dependen de un sprint, el tiempo dedicado a la ingeniería puede orientarse hacia la calidad del flujo de trabajo: una verificación más precisa de retrasos, roles JWT más seguros y una captura mejorada de consultas en masa. Ese cambio, de las ediciones de contenido en solicitudes pull a el trabajo sobre productos en la plataforma, forma parte de lo que significa en la práctica “comercio full-stack” para una empresa textil.