PRODUCT SYSTEM / HEADLINER

AVVIVO: actividad, actores y operación en un mismo sistema

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

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

Abrir AVVIVO en vivo

Compartir este caso por WhatsApp

Tecnologías y funciones del proyecto

React 19: Construye las superficies públicas, de Cliente, de Tienda y de Administración.
TypeScript 5.8: Tipa contratos, estados y respuestas entre la interfaz y los servicios.
Vite 5: Compila el frontend, separa chunks y publica una versión identificable.
React Router 6: Organiza rutas públicas, privadas y específicas para cada actor.
Google One Tap: Ofrece acceso asistido opcional mediante Google Identity Services, con botones manuales como respaldo.
Firebase Auth: Valida identidad y tokens utilizados por frontend y API.
API REST: Expone operaciones autenticadas y mantiene las reglas fuera de la interfaz.
Node.js 22: Ejecuta la API y los procesos operativos del backend.
Express 4: Organiza middleware, rutas y controladores HTTP del servicio principal.
Prisma 5: Modela el dominio y ejecuta consultas y transacciones tipadas.
PostgreSQL: Persiste identidades, tiendas, contenido, relaciones, comercio y auditoría.
Cloud SQL: Opera PostgreSQL en la infraestructura productiva de Google Cloud.
Redis: Sostiene caché, coordinación y canales Pub/Sub cuando el runtime lo requiere.
Cloud Run: Ejecuta la API y servicios de trabajo con despliegues independientes.
Background Workers: Procesan renders, mantenimiento y sincronizaciones fuera del request principal mediante servicios Node separados.
Google Cloud Storage: Guarda media pública y privada fuera de la base relacional.
FFmpeg + Sharp: Procesan video, metadatos, miniaturas e imágenes dentro de los workers.
MapLibre + Leaflet: Renderizan el mapa vectorial y mantienen un motor alternativo de respaldo.
Konva: Compone capas de media, texto, dibujo y stickers en el estudio de publicación.
Firebase Hosting: Sirve el frontend y dirige rutas de API hacia los servicios productivos.
Resend: Entrega correos transaccionales generados por eventos reales del sistema.
Web Push: Envía notificaciones a suscripciones autorizadas por el navegador.
Mercado Pago SDK: Integra la superficie de pagos habilitada para operaciones comerciales específicas.

Necesidades, decisiones y resultados

NECESIDAD / SISTEMA

De actividad dispersa a sistema

La moda mayorista necesitaba algo más que una vidriera de tiendas.

Necesidad: La actividad, el contenido, las relaciones y la operación vivían como piezas separadas, sin una lectura común.
Decisión de producto: Modelé actores, estados, reglas y eventos antes de convertirlos en pantallas. Cliente, Tienda y Administración conservan responsabilidades distintas.
Resultado: AVVIVO muestra actividad, conecta actores, aplica reglas y registra eventos dentro de un mismo producto operativo.
Evidencia: La aplicación productiva expone recorridos diferenciados y una navegación gobernada por estado, sesión y tipo de actor.

Tecnologías aplicadas en este track

React 19: Compone las experiencias públicas, de Cliente, de Tienda y de Administración dentro del mismo producto.
TypeScript: Hace explícitos actores, datos y contratos compartidos entre la interfaz y los servicios.
API REST: Concentra las operaciones autenticadas y evita que las reglas del sistema vivan solamente en las pantallas.
Node.js + Express: Ejecuta el servicio principal y organiza middleware, rutas y controladores del dominio.
Prisma: Convierte el modelo de actores, actividad y operación en consultas y transacciones tipadas.
PostgreSQL: Persiste el dominio operativo y la evidencia que conecta las distintas superficies.
Cloud Run: Ejecuta la API y los servicios de trabajo como unidades productivas independientes.

ACTORES / EXPERIENCIA

Cliente y Tienda, recorridos distintos

Dos caras públicas conectadas, sin mezclarlas ni fingir que hacen lo mismo.

Necesidad: Una persona explora y se relaciona; una Tienda publica, gestiona presencia y opera. Un único recorrido no podía responder a ambas.
Decisión de producto: Diseñé superficies, permisos y navegación propios para Cliente y Tienda, con Administración como actor interno.
Resultado: Cada actor entiende qué puede hacer, qué información ve y cómo una acción repercute en el resto del sistema.
Evidencia: El producto contiene vistas y rutas específicas de Cliente y de Tienda, además de herramientas internas de Administración.

Tecnologías aplicadas en este track

Google One Tap: Ofrece acceso asistido con Google Identity Services sin reemplazar los botones manuales de ingreso.
Firebase Auth: Mantiene la identidad de sesión que habilita el recorrido correcto.
React Router: Organiza rutas públicas, privadas y específicas por experiencia.
API REST: Resuelve el actor y devuelve capacidades sin delegar permisos al navegador.
PostgreSQL: Conserva perfiles y relaciones de dominio que continúan más allá del token de acceso.
Reglas de dominio: Evitan convertir permisos y estados en simples decisiones visuales del frontend.

ACTIVIDAD / MEDIA

Reels y Vivos con estado real

El contenido no es una miniatura: tiene reproducción, tiempo y contexto.

Necesidad: La actividad de una Tienda debía sentirse actual sin confundir una publicación persistente con una emisión en curso.
Decisión de producto: Separé Reels y Vivos, y construí reproducción, pausa, audio, progreso y salida de viewport como estados observables.
Resultado: Cliente puede recorrer actividad audiovisual y abrir su contexto; Tienda dispone de superficies para gestionarla.
Evidencia: Las vistas implementan controles de reproducción, progreso, silencio y pausa al salir de pantalla, además del acceso al contexto de actividad.

Tecnologías aplicadas en este track

React: Sincroniza estado de reproducción, visibilidad, controles y apertura del contexto.
Web Media: Resuelve reproducción, progreso, mute y continuidad sin simular contenido estático.
Google Cloud Storage: Guarda originales y derivados de media fuera de la base relacional.
Background Workers: Procesan renders e historias fuera del tiempo de respuesta de la API.
FFmpeg + Sharp: Generan variantes, miniaturas y metadatos para entregar media utilizable.
Cloud Run: Aísla la API y los procesos de media para escalarlos y desplegarlos por separado.

RELACIÓN / REGLAS

De un Toque a una Trama

Una señal unilateral sólo se transforma cuando existe reciprocidad.

Necesidad: El interés necesitaba una acción simple, pero también una regla clara para no presentar una relación que todavía no existía.
Decisión de producto: Definí el Toque como interés unilateral. Sólo la reciprocidad entre Cliente y Tienda activa una Trama persistente.
Resultado: La interfaz comunica intención y relación como estados diferentes, con continuidad y trazabilidad.
Evidencia: Toques y Tramas aparecen como objetos y recorridos diferenciados; la activación depende de una condición recíproca.

Tecnologías aplicadas en este track

Modelo de estados: Representa interés emitido, reciprocidad y relación activa sin atajos semánticos.
API REST: Recibe la acción y aplica la regla antes de devolver el nuevo estado.
Prisma: Ejecuta la lectura y la escritura del vínculo dentro de operaciones tipadas.
PostgreSQL: Persiste Toques y Tramas con la continuidad y trazabilidad del dominio.
React: Traduce el estado del dominio a mensajes y acciones comprensibles.

ADMINISTRACIÓN / GOBIERNO

Operación que también deja evidencia

Publicar no alcanza: alguien debe poder revisar, corregir y operar.

Necesidad: Un sistema con actores, contenidos y reglas necesita control interno, no solamente interfaces públicas atractivas.
Decisión de producto: Incorporé superficies de Administración, estados verificables y límites operativos para no esconder el funcionamiento detrás del diseño.
Resultado: La operación puede inspeccionar actividad y actuar sin convertir cada ajuste en una modificación de código.
Evidencia: El repositorio contiene dashboard, administración de actividad, planes y herramientas específicas de operación.

Tecnologías aplicadas en este track

React: Construye herramientas densas de operación sin separarlas del mismo lenguaje de producto.
Firebase Auth: Valida la identidad antes de habilitar una superficie o una acción administrativa.
API REST: Centraliza decisiones que no deben depender de una interfaz o dispositivo particular.
PostgreSQL: Conserva estados operativos y evidencia revisable por el sistema.
Redis: Aporta caché, coordinación y Pub/Sub a procesos que necesitan compartir señales.
Background Workers: Ejecutan mantenimiento y sincronizaciones sin bloquear la operación principal.

DESCUBRIMIENTO / COMERCIO

Catálogo, mapa y conversación

La actividad conduce a una Tienda, un producto o una conversación concreta.

Necesidad: Descubrir una marca no debía terminar en una card aislada: hacía falta contexto comercial y continuidad.
Decisión de producto: Conecté feeds, mapas, catálogo, preguntas de producto y carrito como partes de una misma experiencia de descubrimiento.
Resultado: Cliente puede pasar de mirar actividad a explorar una Tienda y actuar sobre productos sin perder el contexto.
Evidencia: La aplicación incluye ModaFeed, mapa público, catálogo, preguntas de producto y un drawer de carrito implementados en el producto real.

Tecnologías aplicadas en este track

MapLibre + Leaflet: Renderizan el mapa como superficie de descubrimiento y mantienen un motor alternativo.
React: Mantiene el contexto entre feed, Tienda, producto, pregunta y carrito.
API REST: Entrega catálogo, actividad y respuestas del dominio desde una fuente gobernada.
PostgreSQL: Relaciona Tiendas, productos, actividad y conversación sin duplicar la verdad del sistema.
Redis: Reduce trabajo repetido y protege las superficies públicas con caché y control de frecuencia.

SSO / OPERACIÓN

Identidad y releases sin cortar sesiones

Entrar por la superficie correcta y actualizar sin interrumpir una tarea sensible.

Necesidad: Distrito Moda y AVVIVO comparten identidad, pero resuelven actores y recorridos distintos; además, una actualización podía aparecer durante un formulario o una operación.
Decisión de producto: Construí intercambio SSO, resolución posterior del actor, rutas separadas y una actualización diferida cuando existe trabajo sensible en curso.
Resultado: Cada sesión llega a Cliente, Tienda o Administración según corresponde y los releases respetan la continuidad de uso.
Evidencia: El producto implementa puente SSO, rutas por actor, manifiesto de versión, coordinación entre pestañas y stream de auditoría.

Tecnologías aplicadas en este track

Google One Tap: Inicia el acceso asistido cuando el navegador y la configuración lo permiten.
Firebase Auth: Intercambia y valida identidad antes de resolver el recorrido final.
React Router: Separa superficies de Cliente, Tienda y Administración sin mezclar permisos.
Redis Pub/Sub: Distribuye señales de chat y auditoría entre instancias sin convertirlas en estado local.
Vite + manifest: Publica una versión identificable que permite detectar una actualización disponible.
Firebase Hosting: Entrega el frontend y enruta solicitudes hacia los servicios productivos.
Cloud Run: Despliega API y servicios sin acoplar su ciclo de release al frontend.

Proyectos y casos de estudio

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

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