Saltar al contenido principal

Web · 2025

ImpoStar

Plataforma B2B de distribución mayorista con Strapi, Next.js y checkout simplificado vía WhatsApp.

Stack
Next.js 16 · React 19 · Tailwind CSS 4 · Strapi 5
ImpoStar
01

Contexto

ImpoStar es una distribuidora mayorista enfocada en la importación y comercialización de productos comerciales a gran escala. La empresa operaba sus ventas y consultas de inventario exclusivamente mediante publicaciones e interacciones directas por Instagram, sin un catálogo web centralizado donde los clientes pudieran consultar el inventario completo, listas de precios por volumen o la información institucional de la empresa.

02

Motivación

La motivación para llevar a cabo este proyecto surgió al observar la fricción operativa que sufrían tanto la distribuidora como sus clientes B2B. El canal de Instagram obligaba a los usuarios a enviar mensajes privados y esperar respuestas manuales para conocer disponibilidad de stock o listas de precios mayoristas escalonadas.

03

Qué hice

Recopilando la información pública de la marca, diseñé e implementé un catálogo interactivo con un CMS desacoplado. El objetivo fue transformar la presencia digital de ImpoStar en un canal self-service donde los compradores pueden explorar de forma autónoma el catálogo, calcular presupuestos por volumen y enviar pedidos preformateados listos para procesar vía WhatsApp. La plataforma se estructuró dividiendo la capa de administración de datos del cliente web:
  • Arquitectura BFF y Server Actions (Next.js): Procesamiento en servidor para consultar y filtrar productos rápidamente, generando pedidos estandarizados que se envían directamente a la API de WhatsApp sin intermediarios de base de datos de órdenes.
  • Administración de Inventario Desacoplada (Strapi Headless CMS): Configuración de un panel administrativo para que la empresa pueda gestionar de manera autónoma las categorías, precios escalonados y variantes de stock.
  • Checkout Directo por WhatsApp: Integración de un sistema de carrito que construye el resumen del pedido en formato texto estructurado y redirige al usuario con un enlace directo de WhatsApp preparado para confirmar la transacción.
04

Diseño y Assets

La interfaz se diseñó con un enfoque funcional orientado a catálogos B2B, priorizando la claridad en la presentación de productos y la navegación eficiente:
  • Identidad (Ver Isologo): Diseñé un isologo que combina la I y la S con una estrella, creado específicamente para usar como favicon, ya que la marca solo contaba con su nombre completo como logo, inviable para ese tamaño.
  • Patrón de Fondo (Ver Patrón): Motivo de semitono complejo basado en estrellas, diseñado como baldosa que se complementa al unirla con otra, eliminando los bordes y logrando una textura continua.
05

Galería

Vistas de Escritorio (4)

Recursos y Assets (2)