E-commerce Frontend

Construye un frontend de e-commerce completo con carrito de compras y pagos.

Stack Tecnológico

• React 19 - UI library con hooks modernos
• Vite 5 - Build tool ultra rápido
• Zustand - State management ligero
• Stripe - Payment processing
• Vitest - Testing framework
• Tailwind CSS - Estilos utility-first

Características

• 🛒 Carrito de compras con Zustand
• 💳 Integración con Stripe Checkout
• 📦 Catálogo de productos
• 🔍 Búsqueda y filtros
• 📱 Fully responsive
• ✅ Tests completos
• 💾 Persistencia en localStorage

Tutorial Completo

El tutorial paso a paso está disponible en el repositorio de ejemplos:

📁 Ver Tutorial Completo en GitHub

Contenido del Tutorial

Paso	Título	Duración
1	Setup	20 min
2	Product List	25 min
3	Product Detail	30 min
4	Shopping Cart	35 min
5	Checkout Flow	30 min
6	State Persistence	20 min
7	Stripe Integration	35 min
8	Tests	40 min
9	Deployment	20 min

Prerrequisitos

• Node.js >= 18 instalado
• Conocimientos avanzados de React
• Familiaridad con state management
• Cuenta de Stripe (opcional, puede usar test mode)

Inicio Rápido

# Clonar el código base
git clone https://github.com/claudekit/aprende-claudekit.git
cd aprende-claudekit/examples/ecommerce-frontend

# O seguir el tutorial paso a paso desde el README
cat README.md

Lo Que Aprenderás

• State management complejo con Zustand
• Integración con APIs externas (Stripe)
• Testing de componentes con estado
• E-commerce best practices
• Payment flow implementation

Resultado Final

Al final del tutorial tendrás:

• ✅ Un frontend de e-commerce funcional
• ✅ Carrito con persistencia
• ✅ Integración con Stripe
• ✅ Tests con buena cobertura
• ✅ Deployed en Vercel

Recursos Adicionales

• Stripe Documentation
• Zustand Docs
• Vitest Docs

---

¿Preguntas? Abre un issue en GitHub