SneakDrop
E-commerce de sneakers con asistente IA que consulta el catálogo real de Stripe, filtros avanzados generados desde el metadata de los productos y checkout guest-first.
El Desafío
Los e-commerces de sneakers suelen ser plantillas genéricas: catálogo estático, filtros con opciones hardcodeadas que no reflejan el stock real, y un checkout que obliga a registrarse antes de saber qué estás comprando. El usuario no puede responder “¿tiene rojo en una 42?” sin adivinar términos de búsqueda exactos.
La Decisión
El catálogo vive en Stripe y es la única fuente de verdad. Productos, precios y metadata se leen de stripe.products.list. Los filtros no son una lista escrita a mano: las opciones se calculan con extractUnique sobre el metadata de lo que hay en stock. Quitas una pieza del catálogo y el filtro desaparece solo.
El asistente IA recibe ese mismo catálogo, no su propio dataset. En app/api/chat/route.ts el catálogo completo se serializa en el system prompt de Llama 3.3 70B (vía Groq, en streaming). El prompt es estricto: recomendar solo productos que existan, filtrar por metadata exacto y no inventar nada. Los filtros y el asistente no tienen dos verdades.
El carrito es guest-first. Zustand con persistencia en localStorage, así que añadir al carrito nunca pide cuenta. El login solo aparece al pagar, y tras autenticarse el usuario vuelve al pedido.
Lo Que No Se Ve
- 8 campos de metadata que alimentan a la vez filtros y asistente:
category,brand,colorway,gender,material,silhouette,release_typeysizes. - 22 tests (17 del
cart-store, 5 de utils) que cubren la lógica del carrito y el formateo de precios sin tocar la red. - View transitions entre tarjeta y detalle con
viewTransitionNamecompartido, así la imagen se transforma en vez de saltar. - SEO en el catálogo: JSON-LD
Product Schema, metadata dinámica y sitemap automático. - Dark mode con next-themes y drawer de filtros en móvil.
La UI no es el truco — es lo primero que ves. El truco es que catálogo, filtros y asistente leen todos de Stripe.
analyticsImpacto
Highlights de la Interfaz
Home
La propuesta: sneakers y streetwear con un asistente IA siempre a mano en el layout.
Catálogo con filtros
Filtros por marca, color, género, material, silueta y precio — derivados del metadata real de Stripe.
Detalle de producto
Selector de tallas desde el metadata y view transition al zoom de imagen.
Chat IA
Asistente en streaming (Llama 3.3 70B vía Groq) que consulta el catálogo real de Stripe.
Checkout con Stripe
Pago con tarjeta y login solo al pagar, con redirección post-autenticación.
Dark mode
Tema claro/oscuro con next-themes y diseño responsive de extremo a extremo.