BRAND / COMMERCE

Hembra: una marca artesanal convertida en comercio digital

Una marca artesanal convertida en tienda, operación administrable y sistema de universos visuales.

Marca · Catálogo · Comercio · Administración · Media · QA

Abrir HEMBRA en vivo

Compartir este caso por WhatsApp

Tecnologías y funciones del proyecto

React 19: Construye tienda, catálogo, bolsa y panel de administración.
TypeScript 5.8: Tipa productos, variantes, universos y operación.
Vite 6: Compila el storefront y sus herramientas internas.
Tailwind CSS 4: Resuelve el sistema visual responsive.
Firebase Auth: Restringe administración a las cuentas configuradas.
Cloud Firestore: Guarda productos, universos y media administrable.
Firestore REST v1: Permite al Worker leer exclusivamente productos publicados para construir previews.
Firebase Hosting: Sirve la aplicación pública principal.
React Context: Comparte bolsa y favoritos entre las superficies comerciales.
localStorage: Conserva bolsa, favoritos y fallbacks en el dispositivo.
WhatsApp Deep Link: Entrega consultas y pedidos por `wa.me`; no es una Business API.
Canvas + WebP: Comprime fotografías en el navegador antes de persistirlas.
Cloudflare Worker: Genera respuestas sociales específicas por producto en el borde.
Cloudflare Pages: Publica la superficie de previews compartibles.
Open Graph: Entrega imagen y contexto del producto a cada enlace social.
Playwright: Ejecuta smokes de producción en escritorio y móvil.
Font Awesome + Lucide: Aportan iconografía para marca, comercio y administración.

Necesidades, decisiones y resultados

NECESIDAD / MARCA

Tienda con identidad

Vender sin borrar el carácter artesanal de HEMBRA.

Necesidad: La marca necesitaba una experiencia comercial completa sin quedar reducida a una grilla genérica de productos.
Decisión de producto: Construí una landing responsive con hero, categorías, productos, relato de marca, universos, preguntas y contacto.
Resultado: HEMBRA conserva un lenguaje editorial propio mientras conduce con claridad hacia la exploración y la consulta.
Evidencia: La obra pública reúne marca, catálogo, relato y contacto dentro de un mismo recorrido responsive.

Tecnologías aplicadas en este track

React: Compone la narrativa de marca y las superficies comerciales como un único producto.
Tailwind CSS: Mantiene ritmo y jerarquía desde móvil hasta escritorio.
CSS propio: Aporta el tono botánico y editorial que diferencia a la marca.

EXPLORACIÓN / PRODUCTO

Catálogo que ayuda a elegir

Encontrar una pieza por intención, no por paciencia.

Necesidad: Las personas debían poder reducir el catálogo según lo que buscaban y no recorrerlo completo cada vez.
Decisión de producto: Organicé búsqueda, categoría, stock, ofertas y precio; sólo los productos publicados llegan a la vista pública.
Resultado: La exploración responde a disponibilidad e intención sin mezclar borradores con oferta real.
Evidencia: Los filtros y la condición de publicación están implementados en la vista de catálogo productiva.

Tecnologías aplicadas en este track

React: Recalcula catálogo, filtros y estados de interacción en la misma vista.
Cloud Firestore: Provee el conjunto administrado de productos y su estado público.
TypeScript: Conserva variantes, stock y datos de producto entre catálogo, bolsa y administración.

BOLSA / WHATSAPP

Venta humana, sin checkout ficticio

La web prepara la decisión; la marca confirma la venta.

Necesidad: HEMBRA necesitaba pedidos completos sin fingir un cobro o una confirmación automática que no existían.
Decisión de producto: La bolsa conserva cantidades, variantes y colores, calcula un total estimado y prepara el mensaje final.
Resultado: Favoritos, consultas individuales y pedido convergen en WhatsApp con el contexto necesario para continuar.
Evidencia: La confirmación y el pago quedan expresamente fuera del sitio; el estado comercial se prepara sin prometer lo que no controla.

Tecnologías aplicadas en este track

React Context: Comparte bolsa y favoritos entre catálogo, ficha y acciones de compra.
localStorage: Conserva selecciones en el dispositivo entre visitas.
WhatsApp: Recibe el detalle preparado en el canal donde la marca confirma.

ADMIN / REGLAS

Administración gobernada

Gestionar catálogo sin convertir el panel en una puerta abierta.

Necesidad: La operación requería altas, edición, publicación y stock con límites que protegieran la calidad del catálogo.
Decisión de producto: Creé acceso Google con cuentas autorizadas y un alta en tres pasos que exige imagen y valida topes.
Resultado: La marca puede operar productos sin tocar código y las reglas críticas no dependen sólo del formulario.
Evidencia: El sistema limita 15 productos por categoría y 6 fotos por producto; publicación y stock forman parte del flujo.

Tecnologías aplicadas en este track

Firebase Auth: Identifica las cuentas autorizadas para administrar.
Cloud Firestore: Guarda catálogo y estados de operación.
Security Rules: Refuerza permisos y estructura en la capa de datos.

EDITOR / CONTENIDO

Una plataforma, varios universos

La marca puede crecer sin quedar encerrada en un solo catálogo.

Necesidad: HEMBRA necesitaba presentar líneas creativas con identidad propia y actualizarlas después del lanzamiento.
Decisión de producto: Cada universo administra identidad, portada, color, enlace, slider y piezas desde un editor con vista escritorio y móvil.
Resultado: El contenido editorial evoluciona de manera independiente sin romper la estructura común de la tienda.
Evidencia: Los medios viven en subcolecciones separadas y el editor ofrece previsualización responsive antes de guardar.

Tecnologías aplicadas en este track

React: Sincroniza editor, orden de piezas y preview en dos formatos.
Firestore: Separa cada universo y sus medios en colecciones administrables.
Responsive preview: Permite validar una composición antes de exponerla en móvil o escritorio.

MEDIA / EDGE

Imágenes y enlaces listos para compartir

Cada producto público puede viajar con su propia identidad.

Necesidad: Las fotos administrables necesitaban peso controlado y los shares debían mostrar el producto correcto.
Decisión de producto: Comprimo a WebP en navegador y genero URLs estables; un Worker lee sólo productos publicados y arma su metadata social.
Resultado: Las imágenes permanecen manejables y cada enlace puede entregar un preview específico antes de abrir la tienda.
Evidencia: El flujo cuenta con una ruta pública de previews y una prueba de producción que verifica la salida compartible.

Tecnologías aplicadas en este track

Canvas + WebP: Reduce las imágenes antes de persistirlas.
Cloudflare Worker: Construye metadata social en el borde usando sólo datos publicados.
Playwright: Comprueba el comportamiento crítico del sitio y las rutas de producción.

Proyectos y casos de estudio

AVVIVO

Sistema que muestra actividad, conecta actores, aplica reglas y registra eventos.

Producto · UX · Frontend · Backend · Datos · Cloud · Operación

CATÁLOGO AYE

Una fuente externa convertida en una experiencia comercial administrable, compartible y preparada para móvil.

Importación · Catálogo · Checkout humano · Administración · SEO · PWA

RISE DIFUSIÓN

Servicios musicales, obra administrable e identidad pública dentro de una presencia digital independiente.

Producto · Identidad · Copy · Experiencia · Administración · SEO

ANTO GRISPO

Una obra recuperada y convertida en portfolio narrativo, accesible y autoadministrable.

Recuperación · Narrativa · Identidad · Portfolio · Administración · Publicación

MetalMente Arte

El archivo de un taller, convertido en un catálogo interactivo de herrería artística y restauraciones.

Producto · UX/UI · Frontend · Contenido · Administración · SEO técnico

Cielofinal

La música y la historia de una banda, reunidas en un archivo digital navegable y compartible.

Dirección visual · UX · Frontend · Contenido · Spotify · Administración · SEO