Catálogo
Presentación de productos y categorías para explorar la oferta de pijamas.
CASO DE ESTUDIO / PRODUCTO PROPIO
Baramado.
Del catálogo al pedido.
Una tienda de pijamas que conecta la elección de productos con la gestión del negocio.
Visitar Baramado (abre en otra pestaña)- Tipo de proyecto
- E-commerce propio
- Desarrollo
- Oscar Barajas
- Frontend
- Angular SSR
- Datos y recursos
- Supabase
01 / CONTEXTO
Una prenda tiene más de una opción.
En una tienda de pijamas, elegir un producto implica revisar su talla, color, precio y disponibilidad. El catálogo necesita representar esas diferencias.
Baramado reúne esa selección en una experiencia web: el cliente explora los productos, elige una variante, organiza su carrito y continúa el pedido por WhatsApp.
La parte administrativa permite gestionar la información que sostiene esa experiencia: productos, categorías, variantes, imágenes y pedidos.
02 / RECORRIDO DE COMPRA
Cada paso tiene una función.
- 01
Explorar
Revisar el catálogo y abrir un producto.
- 02
Elegir
Seleccionar talla, color y cantidad.
- 03
Revisar
Consultar la selección y el total del carrito.
- 04
Continuar
Llevar la solicitud de pedido a WhatsApp.
El alcance del flujo
El carrito prepara la selección. La conversación del pedido continúa en WhatsApp; este recorrido no representa un pago en línea dentro de la tienda.
03 / FUNCIONALIDADES
La tienda y su administración.
Variantes
Selección de talla y color, con precio y disponibilidad asociados a la variante.
Carrito
Organización de los productos elegidos, sus cantidades y el total de la selección.
Pedido por WhatsApp
Continuación del proceso comercial por WhatsApp a partir de la selección del cliente.
Administración
Gestión de productos, variantes, categorías y pedidos desde un área administrativa.
Imágenes
Almacenamiento de los recursos visuales del catálogo mediante Supabase Storage.
04 / ESTRUCTURA TÉCNICA
Las piezas detrás de la experiencia.
Una vista general de las tecnologías utilizadas y la responsabilidad de cada una.
01
Experiencia web
Angular · SSR · Hidratación
Presenta el catálogo y las pantallas de compra. El renderizado en servidor genera el HTML inicial y la hidratación habilita la interacción en el navegador.
02
Información del negocio
Supabase · PostgreSQL
Almacena los datos del catálogo, las variantes y la información necesaria para la administración.
03
Recursos del catálogo
Supabase Storage
Almacena las imágenes de los productos que se muestran en la tienda.
05 / LO CONSTRUIDO
Un producto con dos lados conectados.
Para el cliente, un lugar donde explorar y preparar su pedido. Para el negocio, herramientas para organizar el catálogo y gestionar su información.
El proyecto reúne desarrollo de interfaz, modelado de productos y variantes, persistencia de datos y administración dentro de una misma solución.
Explorar la tienda (abre en otra pestaña)CONVERSEMOS
Tu negocio tiene su propio contexto.
Podemos empezar por entender el tuyo.