Marketplae

Marketplae es un marketplace de productos digitales creado para la creator economy: plantillas, código, recursos de diseño, e-books y descargas que creadores independientes venden a una audiencia global. ClarroxWeb entregó un marketplace de cinco páginas con temas claro y oscuro, un checkout de seis métodos que gestiona los wallets de Bangladesh y las tarjetas globales en un solo flujo, y una arquitectura de contenido diseñada para escalar desde el lanzamiento hasta un catálogo completo.

Desafío

La mayoría de los marketplaces se optimizan para una región o un tipo de comprador. Marketplae tenía que ganar en ambos frentes desde el primer día.

• Dos mundos de pago en un checkout. bKash, Nagad y Rocket dominan los pagos de consumo en Bangladesh. Stripe y PayPal controlan el mercado internacional. SSLCommerz agrupa las tarjetas de Bangladesh con las globales. Un marketplace serio que atiende a ambas audiencias no puede añadir los pagos locales como una ocurrencia tardía, ni puede esconder las tarjetas internacionales detrás de un flujo regional. El checkout tenía que sentirse nativo para un comprador de Dhaka y resultar creíble para un comprador en Londres o Toronto en el mismo modal.
• Cinco áreas de página, una sola sensación de producto. Inicio, catálogo de productos, área editorial Últimos Artículos, programa de afiliados y sobre nosotros. Cada una cumple una función distinta: descubrimiento, navegar y comprar, marketing de contenidos, captación de socios, confianza de marca. Unificar cinco formatos de contenido distintos en un único lenguaje de diseño es más difícil que diseñar una sola landing page bonita.
• Diseñado para crecer. El fundador quería un marketplace que pudiera lanzarse rápido y luego escalar a miles de productos y autores sin necesidad de una reconstrucción. Eso implicaba tomar decisiones de arquitectura tempranas, antes de que ningún dato de producto fuera real, que no se convirtieran en deuda técnica más adelante.

Enfoque

Construimos Marketplae sobre React 19 con TypeScript en Vite. Cada pieza interactiva es orientada a componentes, de modo que la misma Product Card, Author Card, Category Card y el primitivo Rating se reutilizan en las cinco páginas. El contenido vive en capas de datos tipadas (productos, autores, artículos, categorías, reseñas, características, marca), lo que significa que conectar más adelante un CMS o una API reales es un cambio de configuración, no un rediseño.

El sistema visual se apoya en Tailwind v4 con un bloque @theme personalizado que define los tokens de diseño. Los modos claro y oscuro se controlan mediante variables CSS y un theme provider los conserva entre sesiones, de modo que la elección del comprador se mantiene en cada visita de regreso. Motion (Framer Motion v12) gestiona las revelaciones al hacer scroll, las respuestas al hover y pequeñas transiciones de página que hacen que el marketplace se sienta vivo en lugar de estático. Swiper impulsa el carrusel de reseñas. Lucide aporta un conjunto de iconos coherente en las cinco áreas.

El checkout fue la parte más opinada de la construcción. Cada tarjeta de producto abre un flujo de checkout unificado que muestra seis métodos de pago en un solo lugar: bKash, Nagad, Rocket y SSLCommerz para los compradores de Bangladesh, Stripe y PayPal para los internacionales. SSLCommerz actúa como agregador local (una sola integración cubre bKash, Nagad, Rocket, todas las principales tarjetas de Bangladesh, banca en línea y tarjetas globales), con Stripe en paralelo para los wallets internacionales y PayPal como respaldo. El flujo es un único modal, no un cambio de región, por lo que el comprador nunca tiene que adivinar en qué versión del sitio se encuentra.

La arquitectura de páginas se afinó tanto para el catálogo de lanzamiento como para la escala futura. Las rutas son planas y predecibles, la capa de datos está normalizada de modo que un único registro de Producto o Autor se renderiza igual donde sea que aparezca, y las áreas de artículos y categorías son content-driven, de modo que el equipo editorial del fundador puede publicar sin necesidad de la intervención de desarrollo.

Resultados

• Cinco áreas de página completamente diseñadas (Inicio, Producto, Últimos Artículos, Programa de Afiliados, Sobre Nosotros) que comparten un único sistema de diseño y una sola biblioteca de componentes.
• Checkout unificado de seis métodos que incluye bKash, Nagad, Rocket, SSLCommerz, Stripe y PayPal, con SSLCommerz + Stripe recomendados como el stack de producción que cubre tanto a los compradores de Bangladesh como a los internacionales.
• Sistema de tema claro y oscuro con un interruptor en el header, tokens basados en variables CSS y preferencia conservada entre sesiones.
• Arquitectura lista para el catálogo con capas de datos tipadas y componentes de tarjeta reutilizables, lista para escalar desde un conjunto de lanzamiento hasta un marketplace de creadores completo sin una reconstrucción.
• Experiencia rápida y pulida con assets optimizados, animaciones de scroll fluidas y layouts responsivos que se sostienen desde un móvil de 320px hasta un escritorio 4K.
• Vídeo de recorrido en vivo para que los posibles socios, afiliados e inversores de la plataforma puedan ver el marketplace funcionar de principio a fin antes de visitarlo siquiera.

Herramientas utilizadas

React 19, TypeScript, Vite, Tailwind CSS 4, Motion (Framer Motion 12), Swiper, React Router 7, Lucide