Обзор архитектуры При создании e-commerce платформы я следовал принципам модульной архитектуры и разделения ответственности. Основные модули 1. Catalog — управление каталогом товаров 2. Cart — корзина покупок 3. Checkout — процесс оформления заказа 4. User — управление пользователями и аутентификацией 5. Orders — история заказов 6. Payments — интеграция с платежными системами Структура данных Product Schema 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 } Order Schema 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 } State Management Использую Zustand для управления состоянием: 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' } Оптимизация производительности Кэширование данных typescript // Статическая генерация для страниц товаров export async function generateStaticParams { const products = await getProducts return products.mapproduct => { slug: product.slug } } // Revalidation каждые 60 секунд export const revalidate = 60 Оптимистичные обновления typescript const addToCart = async product: Product => { // Оптимистично обновляем UI useCartStore.getState.addItemproduct, 1 try { // Отправляем запрос на сервер await fetch'/api/cart', { method: 'POST', body: JSON.stringify{ productId: product.id, quantity: 1 } } } catch error { // Откатываем изменения при ошибке useCartStore.getState.removeItemproduct.id toast.error'Failed to add to cart' } } Результаты Архитектура обеспечивает: - ⚡ Быструю загрузку страниц LCP < 2s - 📦 Модульность и простоту поддержки - 🔄 Оптимистичные обновления UI - 💾 Персистентность состояния корзины - 🛡️ Type-safe код на всех уровнях
