Plataforma de marca y comercio · frontend y backend
SIN NOMBRE
Una voz hacia afuera. Claridad hacia adentro.
Tienda / Diseño original · muestra local
La tienda tiene voz.
Frontend / Identidad e interacción
Más que un catálogo.
La pieza primero.
El diseño original del catálogo, presentado con fotografía de producto archivada de SIN NOMBRE. Precios, disponibilidad y controles de compra quedan fuera de esta muestra de diseño no operativa.
Una mirada más cercana, sin ruido.
Una página de producto independiente da espacio a la galería y reúne la información. Este render local conserva el diseño del proyecto con fotografía de denim archivada; los detalles comerciales y las acciones de compra no están conectados.
- 01
Un manifiesto, no un banner.
La apertura pasa de una frase al logotipo tachado y luego al manifiesto de la marca. El scroll ordena la historia antes de presentar una colección o cápsula.
- 02
Espacio para el producto.
La tienda separa catálogo y página de producto: primero tarjetas claras; después fotografía, tallas, colores, detalles y guía de tallas. Colecciones y cápsulas son formas independientes de organizar el trabajo.
- 03
Un sistema para descubrir.
Gestos, revelaciones visuales y contenido oculto conectan la personalidad con un sistema de descubrimiento, con recompensas regidas por reglas del servidor. Algunas interfaces de descubrimiento y los flujos centrales del servidor están implementados; otras interacciones siguen en desarrollo. Las campañas activas y la entrega requieren validación por separado.
Una identidad con un gesto.
La diagonal se convierte en una transición visual, no solo en una línea del logo.
Una interpretación visual para el portafolio. No da acceso a la tienda ni realiza compras, premios o acciones de cuenta.
01 / La idea
Lo que había que resolver.
Mantener distintiva la marca de moda en público y conectar la tienda con un sistema operativo claro: qué está disponible, qué se pidió y qué debe hacer el equipo después.
Tienda, panel de gestión y canales de WhatsApp necesitan un modelo comercial consistente, con permisos e interfaces diferentes. El trabajo conecta sus flujos sin volver críptica la administración.
02 / El proceso
Cómo tomó forma.
- 01
Definir la personalidad
Trabajé en carácter, tono y dirección visual de marca para que la experiencia digital hablara con una voz consistente.
- 02
Dar a la tienda su propio ritmo
Diseñé una apertura editorial, un catálogo tranquilo y páginas de producto detalladas. La tipografía expresiva y las transiciones diagonales pertenecen a la marca; navegación y controles de compra necesitan claridad.
- 03
Conectar las reglas detrás de la pantalla
Conecté las interfaces con acciones de servidor y un modelo de datos comercial, y separé la atención a clientes por WhatsApp de las consultas, alertas y acciones de venta confirmadas del equipo.
- 04
Separar descubrimiento y operación
Desarrollé la capa visual de descubrimiento separada de las reglas de acceso y recompensas. Documenté tienda e interfaz de gestión como experiencias distintas, sin exponer registros comerciales.
Panel de equipo existente / datos ficticios
Otro ritmo detrás de la tienda.
La interfaz de gestión existente pertenece a un capítulo separado: catálogo, inventario, pedidos y próximas acciones del equipo. Estas capturas usan datos de demostración.
Arquitectura / Detrás de la interfaz
Un modelo comercial. Distintas formas de usarlo.
Tienda, panel y flujos de WhatsApp se conectan a la lógica del servidor en vez de mantener versiones separadas de inventario y pedidos. El backend verifica actor, solicitud y acción permitida antes de trabajar con registros comerciales.
- Frontend
Tienda y gestión
La experiencia pública de marca y las pantallas de resumen, catálogo, inventario y pedidos del equipo atienden a usuarios distintos.
- Backend
Un conjunto de reglas compartido
Las acciones de servidor y las API validan permisos y coordinan cambios de producto, inventario y pedidos.
- Datos
Una operación conectada
Productos, variantes, inventario y registros de pedidos apoyan el panel y sus flujos conectados.
El panel y los flujos de servidor están implementados en el proyecto. La entrega por WhatsApp y la activación comercial requieren configuración y validación propias. Este portafolio no se conecta con clientes, inventario ni pagos.
Módulos y responsabilidades
Abre un módulo para ver su flujo.
01 / Catálogo, inventario y pedidosDel producto a la siguiente acción.Implementado en el proyecto
El resumen de gestión convierte registros comerciales en una vista de ventas, pedidos pendientes y productos con poco inventario.
- Interfaz de gestión
El equipo revisa el resumen, edita información del catálogo y gestiona inventario o estados de pedidos.
- Acciones de servidor
El backend verifica permisos y valida el ajuste solicitado o la transición del pedido.
- Registros comerciales
Variantes de producto, inventario, pedidos y registros de movimientos son la fuente de información de la interfaz.
02 / WhatsApp para clientesAyudar primero. Derivar cuando sea necesario.Integración en revisión
La ruta del cliente se diseña para consultas de catálogo, orientación de pedidos y soporte, con derivación al equipo. Las respuestas automatizadas son configurables; no se asume que estén activas.
- Mensaje del cliente
Cuando está configurado, los mensajes de clientes ingresan por el webhook YCloud del proyecto.
- Enrutamiento de servidor
El webhook distingue la ruta del cliente, filtra eventos repetidos y aplica el flujo configurado de soporte o derivación.
- Respuesta o derivación
El transporte envía la respuesta permitida o deriva la conversación al equipo; la entrega debe validarse por separado.
03 / WhatsApp para el equipoUn canal operativo, no una segunda tienda.Integración en revisión
La ruta del equipo admite consultas de inventario y pedidos, alertas operativas y preparación de acciones de venta. Está separada de la automatización para clientes.
- Solicitud del equipo
Un integrante identificado del equipo solicita información o inicia una acción operativa admitida.
- Permiso y confirmación
El backend verifica el rol del equipo y la confirmación requerida antes de una acción sensible.
- Operación compartida
Los flujos de venta usan la misma lógica comercial que las herramientas de punto de venta, no un inventario separado para WhatsApp.
Integraciones
Supabase
Implementado en el proyectoAutenticación y base de datos comercial detrás de los flujos de servidor del panel.
WhatsApp / YCloud
Integración en revisiónCódigo de webhook y transporte de mensajes con rutas separadas para clientes y equipo; activación y entrega se revisan por separado.
Wompi
Integración en revisiónCódigo de integración de checkout y eventos de pago; el portafolio no habilita comercio ni demuestra un cobro real.
Alcance / Producción
Mi aporte.
En qué trabajé
- Dirección de marca e interfaz
- Diseño e implementación frontend
- Flujos de backend e integración de servicios
- Next.js
- React
- TypeScript
- Supabase / PostgreSQL
Diseño y desarrollo
- Dirección y personalidad de marca traducidas a un lenguaje visual digital.
- Flujos frontend y backend para catálogo, inventario y pedidos dentro del equipo del proyecto.
- Un panel de gestión existente y rutas separadas de integración con WhatsApp para clientes y equipo; presentado con datos ficticios.
La plataforma sigue en desarrollo. Este caso incluye renders locales del inicio, catálogo y diseño original de producto con fotografía de archivo, un estudio aislado de interacción visual y el panel existente con datos ficticios. El lanzamiento comercial y las pruebas de entrega externa son independientes; no es una tienda abierta.
Dirección de marca, diseño de interfaz y producción frontend/backend dentro del equipo del proyecto. Activos de marca y fotografía del archivo de SIN NOMBRE. Las muestras de la tienda conservan el diseño sin datos comerciales; el estudio de interacción visual está aislado de la tienda. La interfaz de gestión usa datos ficticios; no se comparten registros reales de clientes o pedidos.