2024

DigitalHippo

Marketplace e-commerce full-stack para vender, comprar y descargar productos digitales.

DigitalHippo

DigitalHippo es un marketplace full-stack moderno enfocado en activos digitales como UI kits e icon packs. La plataforma permite explorar productos verificados, ver páginas de detalle, gestionar un carrito persistente, completar pagos mediante Stripe Checkout y acceder a los archivos comprados luego de la confirmación del pago. También incluye autenticación de usuarios, verificación por email, panel de administración y venta con Payload CMS, flujo de aprobación de productos, gestión de órdenes, webhooks de Stripe y emails de recibo enviados después de una compra exitosa.

  • Marketplace de productos digitales con categorías, listados, páginas de detalle y recomendaciones de productos similares.
  • Carrito persistente con Zustand, resumen de compra, comisión de transacción, eliminación de productos y flujo de checkout.
  • Integración de pagos con Stripe Checkout, creación de órdenes, polling del estado de pago y confirmación mediante webhooks.
  • Flujo de descarga para assets comprados después del pago, con acceso protegido según el usuario dueño de la orden.
  • Autenticación y verificación de email usando Payload CMS con flujos de registro e inicio de sesión mediante tRPC.
  • Dashboard administrativo de Payload CMS para gestionar usuarios, productos, media, archivos digitales y órdenes.
  • Sistema de aprobación de productos para mostrar públicamente solo assets verificados y aprobados para la venta.
  • Emails transaccionales de recibo construidos con React Email y enviados con Resend tras completar el checkout.
  • Arquitectura full-stack type-safe con Next.js App Router, tRPC, Zod, tipos generados por Payload y TypeScript.

Vista principal del marketplace

La página principal presenta la experiencia central de DigitalHippo, un marketplace de productos digitales con una interfaz limpia y enfocada en la conversión. Desde esta vista, los usuarios pueden explorar productos destacados, entender rápidamente la propuesta de valor de la plataforma y acceder a las principales acciones del sitio, como navegar el catálogo, iniciar sesión o comenzar el proceso de compra.

Autenticación y verificación de cuenta

El flujo de autenticación permite a los usuarios crear una cuenta, iniciar sesión y verificar su email antes de acceder completamente a la plataforma. Estas pantallas mantienen una experiencia consistente y simple, guiando al usuario paso a paso con formularios claros, validación visual y una estructura pensada para reducir fricción durante el registro.

Carrito de compras y detalle del producto

Esta sección muestra dos momentos clave antes del checkout: el detalle del producto y el carrito de compras. Desde la página de producto, el usuario puede revisar la información del recurso digital, entender su valor y agregarlo al carrito. Luego, en el carrito, puede confirmar los productos seleccionados, revisar el resumen de compra y prepararse para continuar con el pago de forma clara y ordenada.

Checkout y proceso de pago

El video presenta el flujo de checkout de DigitalHippo como una experiencia independiente y enfocada en completar la compra. Después de revisar el producto y el carrito, el usuario avanza al proceso de pago, donde puede confirmar la orden y continuar de manera fluida hacia la finalización de la transacción.

Panel de vendedor

DigitalHippo incluye una experiencia dedicada para vendedores, donde pueden gestionar su presencia dentro del marketplace. Desde el panel, los vendedores pueden visualizar información relevante de sus productos, administrar su actividad y acceder a herramientas pensadas para mantener el control de su catálogo digital dentro de la plataforma.

Administración de vendedores y productos

La sección administrativa permite gestionar aspectos clave del marketplace, incluyendo vendedores, productos digitales y contenido disponible en la plataforma. Esta vista está pensada para ofrecer mayor control operativo, facilitando la supervisión del ecosistema y manteniendo organizada la administración interna del proyecto.