Tellounder LEONARDO TELLO / PRODUCTO DIGITAL

Sistemas, UX e IA aplicada que funcionan.

Casos reales, decisiones técnicas y productos en vivo. Explorá lo que construí y cómo lo resolví.

Podés cambiar el audio en cualquier momento.

POWER / READY
Tellounder

COMMERCE / AUTOMATION

Catálogo Aye: de una fuente externa a una experiencia comercial

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

Abrir CATÁLOGO AYE en vivo

Compartir este caso por WhatsApp

Tecnologías y funciones del proyecto

  • React 19: Construye storefront, carrito, checkout y administración.
  • TypeScript 7: Mantiene productos, promociones y pedidos con contratos explícitos.
  • Vite 8: Compila la SPA, divide código y ejecuta el generador social del build.
  • Tailwind CSS 4: Resuelve el sistema visual responsive del catálogo.
  • Firebase Auth: Identifica a la administradora mediante Google.
  • Cloud Firestore: Sincroniza destacados y promociones sin republicar código.
  • Firebase Hosting: Sirve la SPA, las rutas de producto y los assets versionados.
  • Node.js Importer: Descarga y normaliza manualmente cada ciclo del catálogo.
  • Natura JSON Feed: Actúa como fuente estructurada externa del snapshot importado.
  • Dynamic Import: Deja los cientos de productos fuera de la primera pintura.
  • localStorage: Conserva carrito y favoritos sin crear una base de compradores.
  • Web Share API: Abre el share nativo del dispositivo cuando está disponible.
  • WhatsApp Deep Link: Entrega pedido o producto mediante `wa.me`; no simula una Business API.
  • PWA: Permite instalar el catálogo con identidad propia.
  • Service Worker: Cachea el shell, ofrece fallback y elimina versiones anteriores.
  • Cache API: Versiona recursos propios del build sin cachear imágenes externas.
  • Open Graph Generator: Crea metadata estática específica para cada producto.

Necesidades, decisiones y resultados

DATOS / AUTOMATIZACIÓN

Del feed al catálogo utilizable

Una fuente extensa deja de ser un archivo y se vuelve producto.

Necesidad
Cargar y mantener manualmente cada ciclo de Natura no era una operación sostenible para una revendedora independiente.
Decisión de producto
Construí un importador que obtiene el feed y normaliza nombres, precios, disponibilidad, imágenes, categorías y líneas.
Resultado
Cada ciclo puede regenerar un snapshot tipado y coherente, listo para búsqueda, catálogo y publicación.
Evidencia
El snapshot auditado del ciclo 2026-13 contiene 937 productos; 851 figuraban disponibles al momento de la importación.

Tecnologías aplicadas en este track

  • Node.js: Ejecuta el pipeline de importación fuera de la interfaz pública.
  • TypeScript: Mantiene un contrato consistente entre datos importados y componentes del catálogo.
  • JSON generado: Entrega un snapshot reproducible y versionable sin depender del feed durante cada visita.

CATÁLOGO / EXPLORACIÓN

Encontrar antes que recorrer

Cientos de productos no deberían sentirse como cientos de obstáculos.

Necesidad
En una pantalla móvil, recorrer todo el catálogo hasta encontrar un tono, una línea o un producto era demasiado costoso.
Decisión de producto
Combiné búsqueda amplia, categorías, disponibilidad, favoritos y orden por nombre o precio.
Resultado
La grilla recalcula localmente y entrega primero un conjunto manejable, sin bloquear la exploración.
Evidencia
La búsqueda real contempla nombre, descripción, código, categoría, línea, volumen y color; el catálogo pagina la exposición inicial.

Tecnologías aplicadas en este track

  • React: Coordina filtros, resultados, favoritos y estados de catálogo sin recargar la página.
  • TypeScript: Conserva la forma de cada producto en búsqueda, cards, carrito y share.
  • Tailwind CSS: Resuelve una interfaz densa y responsive manteniendo consistencia visual.

PEDIDO / WHATSAPP

Un carrito que termina en conversación

El sistema ordena el pedido; Aye conserva la confirmación final.

Necesidad
La clienta necesitaba recibir selecciones claras sin simular pagos, stock confirmado ni una compra automática inexistente.
Decisión de producto
Persistí carrito y favoritos localmente; antes del envío pido nombre, dirección, localidad e indicaciones.
Resultado
El sitio compone el detalle y el total estimado, y abre WhatsApp para que Aye confirme precio, disponibilidad, pago y entrega.
Evidencia
Los datos del checkout se agregan al mensaje y no se guardan en la página; la interfaz lo explica antes de continuar.

Tecnologías aplicadas en este track

  • localStorage: Conserva carrito y favoritos en el dispositivo sin crear una base de compradores.
  • React: Mantiene cantidades, resumen y validaciones del checkout.
  • WhatsApp: Entrega un pedido legible a la conversación donde ocurre la confirmación humana.

ADMIN / CAMPAÑA

Promociones controladas por la clienta

Cambiar la vidriera no requiere volver a publicar el producto.

Necesidad
Aye necesitaba mover destacados y descuentos por ciclo sin tocar código ni depender de una edición técnica.
Decisión de producto
Creé un panel con acceso Google y autorización en Firestore para elegir hasta diez productos y descuentos gobernados.
Resultado
La portada recibe su configuración en vivo desde un documento remoto, mientras el catálogo base permanece intacto.
Evidencia
El panel admite títulos predefinidos y descuentos de 5, 10 o 15 por ciento; las reglas reservan su escritura a una administradora activa.

Tecnologías aplicadas en este track

  • Firebase Auth: Identifica a la administradora antes de habilitar la operación.
  • Cloud Firestore: Publica la configuración de la vidriera y la sincroniza con la home.
  • Security Rules: Evita que la autorización dependa de ocultar un botón en el frontend.

SHARE / SEO SOCIAL

Cada producto tiene su propia puerta

Compartir una card abre ese producto, no una home genérica.

Necesidad
Un enlace único para todo el catálogo perdía imagen, nombre y contexto del producto elegido.
Decisión de producto
El build genera una ruta estática por producto con canonical y Open Graph propios, más Web Share con fallback a WhatsApp.
Resultado
La vista social recibe datos específicos y la SPA vuelve a abrir el catálogo filtrado en el producto compartido.
Evidencia
Las rutas `/producto/<id>/` se generan durante cada build a partir del snapshot real.

Tecnologías aplicadas en este track

  • Vite: Produce el build y deja el punto de extensión para generar las páginas sociales.
  • Open Graph: Entrega imagen, nombre y descripción específicos a cada preview.
  • Web Share API: Usa el diálogo nativo cuando existe y recurre a WhatsApp cuando no.

PERFORMANCE / PWA

Catálogo grande, arranque liviano

La cantidad de producto no debía sentirse en la primera pintura.

Necesidad
Incluir el catálogo completo en la carga inicial demoraba la interfaz más importante: la que permite empezar.
Decisión de producto
Separé metadata inicial, importación dinámica del catálogo, suscripción diferida, imágenes lazy y un service worker versionado.
Resultado
La interfaz aparece primero, el catálogo entra después y la aplicación puede instalar su shell para visitas recurrentes.
Evidencia
El bundle carga el snapshot en un chunk posterior y el service worker elimina cachés anteriores al cambiar de versión.

Tecnologías aplicadas en este track

  • Dynamic import: Deja el bloque de productos fuera de la ruta crítica de render.
  • Service Worker: Cachea el shell propio y conserva un fallback básico sin apropiarse de imágenes externas.
  • PWA: Permite instalar el catálogo con identidad propia en dispositivos compatibles.

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

RISE DIFUSIÓN

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

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

HEMBRA

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

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

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