Descripción de la arquitectura Al crear una plataforma de e-commerce, seguí los principios de arquitectura modular y separación de responsabilidades. Módulos principales 1. Catalog — gestión del catálogo de productos 2. Cart — carrito de compras 3. Checkout — proceso de finalización de pedido 4. User — gestión de usuarios y autenticación 5. Orders — historial de pedidos 6. Payments — integración con sistemas de pago Estructura de datos Esquema de producto typescript interface Product { id: string slug: string name: string description: string price: number comparePrice?: number images: string category: Category variants: ProductVariant stock: number featured: boolean } interface ProductVariant { id: string name: string options: Record<string, string> // { "Size": "M", "Color": "Blue" } price: number stock: number sku: string } Esquema de pedido typescript interface Order { id: string orderNumber: string userId: string items: OrderItem subtotal: number tax: number shipping: number total: number status: OrderStatus shippingAddress: Address billingAddress: Address paymentMethod: PaymentMethod createdAt: string } Gestión del estado Usando Zustand para la gestión del estado: typescript // stores/cart-store.ts import { create } from 'zustand' import { persist } from 'zustand/middleware' interface CartState { items: CartItem addItem: product: Product, quantity: number => void removeItem: productId: string => void updateQuantity: productId: string, quantity: number => void clearCart: => void total: => number } export const useCartStore = create<CartState> persist set, get => { items: , addItem: product, quantity => { setstate => { items: ...state.items, { product, quantity } } }, removeItem: productId => { setstate => { items: state.items.filteritem => item.product.id !== productId } }, updateQuantity: productId, quantity => { setstate => { items: state.items.mapitem => item.product.id === productId ? { ...item, quantity } : item } }, clearCart: => set{ items: }, total: => { return get.items.reduce sum, item => sum + item.product.price item.quantity, 0 } }, { name: 'cart-storage' } Optimización del rendimiento Almacenamiento en caché de datos typescript // Generación estática para páginas de productos export async function generateStaticParams { const products = await getProducts return products.mapproduct => { slug: product.slug } } // Revalidación cada 60 segundos export const revalidate = 60 Actualizaciones optimistas typescript const addToCart = async product: Product => { // Actualización optimista de UI useCartStore.getState.addItemproduct, 1 try { // Enviar solicitud al servidor await fetch'/api/cart', { method: 'POST', body: JSON.stringify{ productId: product.id, quantity: 1 } } } catch error { // Revertir cambios en caso de error useCartStore.getState.removeItemproduct.id toast.error'Failed to add to cart' } } Resultados La arquitectura proporciona: - ⚡ Carga rápida de páginas LCP < 2s - 📦 Modularidad y fácil mantenimiento - 🔄 Actualizaciones optimistas de UI - 💾 Persistencia del estado del carrito - 🛡️ Código con seguridad de tipos en todos los niveles
