YourNextStore: un Shopify open source que usa Stripe como backend

 (github.com/yournextstore)
1 puntos por GN⁺ 2024-09-12 | 1 comentarios | Compartir por WhatsApp
  • Your Next Store es una plantilla de e-commerce open source AI-native basada en Next.js y Stripe, con soporte para self-hosting y despliegue en Vercel con un clic
  • Incluye AGENTS.md, patrones idiomáticos de Next.js App Router y métodos del Commerce Kit SDK con tipos definidos para que las herramientas de coding con IA puedan trabajar con facilidad
  • Sus funciones principales son checkout, billing y subscriptions mediante integración directa con la API de Stripe, y los modelos de dominio de productos, opciones, carrito y pagos están organizados con tipos
  • El stack tecnológico está compuesto por Next.js 16, Bun, Commerce Kit SDK, Tailwind CSS v4, Shadcn UI, TypeScript y Biome
  • Ofrece 149 ramas de temas, desde theme-001 hasta theme-149; los temas solo cambian componentes visuales y assets estáticos, manteniendo productos, carrito y pagos

Descripción general del proyecto

  • Your Next Store es una plantilla de e-commerce open source AI-native en Next.js
  • Funciona con Stripe y fue creada pensando en herramientas de coding con IA
  • Ofrece una demo en vivo
  • Las características que destaca el repositorio son las siguientes
    • AI-Friendly Codebase: incluye AGENTS.md, patrones idiomáticos y Commerce Kit SDK con métodos tipados
    • Stripe-Native: integra directamente la API de Stripe para manejar checkout, billing y subscriptions
    • Next.js 16: usa App Router, React Server Components y React Compiler
    • Open Source: se puede alojar por cuenta propia en cualquier lugar y desplegar en Vercel con un clic

Diseño amigable para herramientas de coding con IA

  • Usa patrones conocidos de Next.js para que las herramientas de IA funcionen mejor
    • Utiliza configuraciones idiomáticas como App Router, Server Components, Server Actions y "use cache"
  • Commerce Kit SDK tiene formas de entrada y salida definidas para métodos como productBrowse() y cartUpsert()
    • El README explica que los LLM escriben código correcto cuando conocen el contrato
  • Ya existen modelos de dominio como productos, variants, carrito y checkout, con tipos claros
    • El LLM no necesita crear esos modelos desde cero
  • AGENTS.md contiene contexto del proyecto, ejemplos del SDK, reglas de Biome y una checklist de validación
    • Su objetivo es ayudar a los agentes de IA a entender la codebase antes de escribir código

Stack tecnológico

  • Next.js 16

    • Usa App Router, React Server Components y React Compiler

  • Bun

    • Se usa como runtime JavaScript rápido y gestor de paquetes

  • Commerce Kit SDK

    • Se encarga de la integración con APIs de headless commerce

  • Tailwind CSS v4

    • Se usa para estilos utility-first

  • Shadcn UI

    • Ofrece más de 50 componentes accesibles basados en Radix UI

  • TypeScript

    • Se usa para desarrollo con seguridad de tipos estricta

  • Biome

    • Se usa como linter y formatter rápido

Inicio rápido y requisitos de ejecución

  • Los comandos de inicio rápido siguen el flujo de clonar el repositorio, instalar dependencias con Bun y crear el archivo de variables de entorno
git clone https://github.com/yournextstore/yournextstore.git
cd yournextstore && bun install
cp .env.example .env.local   # Add your YNS_API_KEY from https://yns.store/manage/settings/api
bun dev
  • Después de ejecutarlo, la tienda funciona en localhost:3000
  • Los requisitos son los siguientes
  • Hay que copiar .env.example a .env.local y configurar YNS_API_KEY
    • YNS_API_KEY es un token de API emitido desde el panel de administración

Temas y extensibilidad

  • Your Next Store ofrece 149 ready-made themes para distintas categorías de tiendas
  • Cada tema rediseña por completo la página principal, el hero, la paleta de colores y el layout de secciones
  • Todos los temas están creados sobre la misma core codebase
  • Los temas están en ramas que van de theme-001 a theme-149
  • Se puede cambiar de tema con un solo comando
git checkout theme-016
  • Cada rama de tema es un único commit sobre main, y el mensaje del commit describe el ambiente visual del tema
  • La lista completa de temas se puede consultar con el siguiente comando
git for-each-ref --sort=refname --format='%(refname:short)  %(subject)' 'refs/remotes/origin/theme-*'
  • Todas las ramas de temas usan un ID de tres dígitos con ceros a la izquierda, como theme-001 … theme-149
  • Los temas solo modifican componentes visuales y assets estáticos
    • Productos, carrito y checkout no cambian

Documentación y contribución

  • Para convenciones de código y la checklist de PR, consulta CONTRIBUTING.md
  • La importación de productos, la gestión del carrito y la forma de construir sobre YNS se pueden consultar en la API documentation

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-09-12
Opiniones en Hacker News

  • Creo que jamás construiría algo que dependa de Stripe
    Reconozco que los pagos son un problema difícil por el fraude y los chargebacks, pero Stripe tiene un historial demasiado malo de congelar cuentas legítimas y básicamente ignorar los intentos de contacto. También obliga al arbitraje, el árbitro depende de los ingresos de Stripe y, según sus términos, incluso pueden invertir los fondos congelados. También prohíben las demandas colectivas, aunque no sé si esa cláusula se sostendría en la práctica.

    • Me da curiosidad qué recomendarías como alternativa.

  • Ya no puedo editar la publicación, pero hay una demo de YNS funcionando aquí: https://demo.yournextstore.com
    Para ver Stripe Link, usa el correo test@test.com y, cuando se active, ingresa 000000.

  • Desde hace tiempo he querido construir exactamente algo así varias veces; quedó muy bien
    Todavía no lo he revisado en detalle, pero me pregunto si soporta descargas digitales. Las descargas de productos digitales y de “lead magnets” podrían ser de gran ayuda para muchas tiendas.

    • Al principio nos enfocamos en productos físicos, pero agregar una función de productos digitales probablemente sea incluso más fácil.
      Si tienes una solución ideal o puedes contar cómo debería funcionar en un escenario perfecto, sería genial. Necesitamos modelos de referencia tanto para descargas digitales como para descargas de lead magnets.

  • La función que más me gusta de la demo es el checkout de una sola página
    Se acerca mucho al excelente flujo de checkout de Shopify. WooCommerce debería ser la alternativa self-hosted real a Shopify, pero todavía se queda corto y, aun con el ecosistema de plugins, es mucho más difícil operar un buen carrito y checkout. Felicitaciones por el lanzamiento.

    • El checkout de una sola página siempre fue una de las máximas prioridades y seguirá siéndolo.
      Todavía quedan pequeñas mejoras, pero estoy conforme con lo fluida que es ahora la experiencia de pago. Me da curiosidad si también lo probaste con Stripe Link. Si la información de compras anteriores está guardada en algún lugar de internet, todo el checkout se reduce a 4 clics sin completar formularios.
    • WooCommerce en sí, como backend, por lo general está bien, pero la mayoría de los temas son bastante malos.
      Incluso los temas básicos y gratuitos tienen layouts feos, son innecesariamente pesados y la pantalla de pago se ve demasiado amateur, al punto de que mucha gente podría sentir que es un sitio fraudulento. Hay buenos temas, pero hay que pagar bastante por ellos.
    • También es un buen detalle el pequeño enlace que muestra todo el carrito al agregar un producto.

  • Me pregunto cómo manejan el cálculo de costos de envío
    ¿Eso también está incluido en la funcionalidad de catálogo de productos de Stripe?

    • Esta función todavía no está lista, pero estamos trabajando activamente en ella.
      Si necesitas envíos de inmediato, puedes delegarlo a terceros, y algunos socios están desarrollando funciones de esa manera. A largo plazo queremos integrarnos más profundamente con Stripe y convertirlo en la infraestructura central de comercio electrónico.
    • Estos datos se pueden obtener de varios terceros.
      Personalmente prefiero Shippo, conozco a sus fundadores y lo integré en Weebly, hoy dentro de Square.

  • Si no se necesita base de datos, me pregunto cómo funciona la gestión de inventario
    Por ejemplo, ¿qué pasa si varias personas intentan comprar el mismo producto al mismo tiempo y no hay suficiente stock?

    • Al principio empezamos guardando datos como el inventario directamente en los metadatos de producto de Stripe.
      También estamos desarrollando una capa delgada que gestione la sincronización entre cada tienda y Stripe, por ejemplo temas como la atomicidad. Todavía no es la solución ideal, pero funciona bien para la mayoría de las tiendas pequeñas, y tenemos ideas para mejorarla. En estos casos, una configuración composable y headless puede terminar siendo más carga que beneficio.

  • Probé la demo y, como dicen otros, está muy bien hecha y es rápida
    Sin embargo, encontré un bug: cuando intenté eliminar un producto del carrito poniendo la cantidad en 0, empezó una recarga y la interfaz se quedó trabada. No sé si se debe a esa acción o al tráfico actual, pero lo dejo como referencia.

    • Confirmé ese bug, gracias por avisar.
      Últimamente iteramos varias veces sobre esa parte, pero parece que algo se nos escapó.

  • Está bastante pulido y me gusta el soporte para Umami
    Sería bueno envolver todo en un Dockerfile, aunque para uso personal no parece difícil hacerlo uno mismo. Hace tiempo que no uso Stripe salvo para suscripciones, y me pregunto qué tan difícil sería soportar códigos de cupón o promociones. ¿Está en los planes?

    • Estamos experimentando con varias cosas y empezamos con Umami, pero también estamos considerando construir directamente una subfunción de analítica específica para comercio electrónico.
      Los cupones están en el roadmap y creo que agregarlos sería relativamente sencillo. También me gustaría saber si estarías dispuesto a beta testearlo con nosotros. La comunidad propuso un Dockerfile y hoy lo vamos a revisar: https://github.com/yournextstore/yournextstore/pull/22/files

  • La demo es rápida porque precarga las listas cuando el cursor del mouse pasa por encima o al tocar
    Es algo que también se puede hacer en el comercio electrónico tradicional, y no me gusta esta experiencia de usuario que desperdicia datos del usuario. ¿Hay alguna opción para desactivar la precarga?

    • Claro que sí. Para eso es open source: puedes hacer un fork y desactivar la precarga.
      Dicho eso, pensando en la experiencia de usuario, no creo que sea lo mejor.
    • Parece que lo que se puede configurar en next.js también aplica aquí.
      Pero descubrí que no hay forma de desactivar la precarga globalmente[0]. Hay que desactivarla enlace por enlace o crear un componente de enlace personalizado.
      [0] https://github.com/vercel/next.js/discussions/24437

  • Muy bueno. Justo estaba buscando algo así
    Sin embargo, durante la instalación, en corepack install apareció un error de hash no coincidente en pnpm@9.9.0. Como el hash esperado y el recibido eran distintos, ocurrió Internal Error: Mismatch hashes.

    • Actualicé pnpm a 9.10.0 y ahora está bien.
    • Primero creo que deberíamos investigar más la configuración.
      ¿Podrías intentar eliminar por completo packageManager de package.json y volver a probar? Si es posible, me gustaría hacer una videollamada breve para ver directamente el entorno donde se reproduce. Por ahora no logro reproducirlo de este lado.