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


