SaaS-платформа для создания маркетплейсов, интернет-магазинов и досок объявлений. Пользователь выбирает тип сайта, модули, тему — и получает готовую платформу за минуты.
SiteForge — SaaS-платформа для создания маркетплейсов, интернет-магазинов и досок объявлений. Пользователь выбирает тип сайта, модули, тему — и получает готовую платформу за минуты. Каждый сайт = отдельный тенант в Payload CMS. Платформа управляет данными, медиа, заказами, отзывами и уведомлениями через единую инсталляцию Payload.
Каталог, корзина, оформление заказов, приём платежей
Мультипродавцовая платформа с комиссией и рейтингами
Публикация, модерация, категории, продвижение
(site)/ для витрины, (payload)/ для админки Payload. У каждой группы свой layout с html/bodyshadcn/ui компонентыgetPayload({ config }), НЕ устаревший payload.init()@payload-config path alias -> ./payload.config.ts в корне проекта'use server' обязателен для serverFunctionhandleServerFunctions из @payloadcms/next требует /* webpackIgnore: true */ dynamic import@payloadcms/next/layouts рендерит свой html/body — нельзя вкладывать@payloadcms/next/css ОБЯЗАТЕЛЬНО импортировать в layout для стилей админки| Коллекция | Описание | Ключевые поля | Auth |
|---|---|---|---|
| tenants | Тенанты/сайты | name, slug, type, modules (json), theme (json), settings (json) | — |
| users | Администраторы CMS | email, role, tenants[] | Да (built-in) |
| products | Товары | name, slug, price, oldPrice, category, images[], features, description, status, stock, tenant | — |
| categories | Категории | name, slug, parent, image, icon, order, filters (json), tenant | — |
| orders | Заказы | orderNumber, status, customer, items (json), total, shippingAddress (json), promoCode, paymentMethod, tenant | — |
| reviews | Отзывы | author, rating (1-5), content, product, tenant, verified, pros, cons | — |
| pages | Страницы (редактор) | title, slug, type (home/custom/category/landing), modules (json), published, tenant, seoTitle, seoDescription | — |
| notifications | Уведомления | type, title, message, read, relatedId, relatedType, tenant | — |
| media | Медиафайлы | url, alt, tenant | — |
| listings | Объявления | title, description, price, status, images[], category, tenant | — |
| sellers | Продавцы | name, description, rating, logo, tenant | — |
| customers | Покупатели | email, name, phone, favorites (json), compareList (json), addresses (json), tenant | Да (useAPIKey) |
createNotification — beforeChange hook на Orders, автоматически создаёт уведомление при новом заказе.tenant.modules — JSON-массив активных модулей. Каждый модуль управляет доступностью функционала. Хук useModule(name) проверяет наличие модуля в контексте.
| Модуль | Статус | Что включает |
|---|---|---|
| catalog | Реализовано | Каталог товаров, категории, фильтрация по цене, поиск, grid/list toggle |
| cart | Реализовано | Корзина, промокод, оформление заказа (гостевой чекаут), прогресс-бар, выбор доставки/оплаты |
| payments | Фронтенд | Выбор способа оплаты (визуально). Бэкенд Stripe/другой будет позже |
| classifieds | Реализовано | Объявления, модерация, категории |
| marketplace | Реализовано | Продавцы, мультипродавцовая платформа |
| search | Плагин | Поиск через @payloadcms/plugin-search (products, categories, listings) |
| reviews | Реализовано | Отзывы с рейтингом, верификацией, плюсами/минусами |
| По команде | Настройки уведомлений. Email-адаптер Resend установлен, но не активирован — включить по команде заказчика | |
| analytics | Реализовано | Дашборд аналитики с графиками выручки, заказов, топ товаров |
| seo | Плагин | SEO через @payloadcms/plugin-seo (products, pages), tabbedUI, автогенерация title/description |
| chat | Реализовано | Чат покупатель-продавец. Коллекции ChatRooms + Messages, API routes, UI списка чатов и переписки. Socket.IO для реалтайма (отдельный PM2 процесс siteforge-socket на порту 3011). Хук useChatSocket для подключения. |
| notifications | Реализовано | Авто-уведомления о заказах, CRUD, страница уведомлений |
tenant.theme — JSON с настройками внешнего вида. Компонент ThemeStyles инжектит CSS-переменные. Контекст TenantContext предоставляет данные через хуки useTenant() и useModule(name).
{
"colors": {
"primary": "#7c3aed",
"secondary": "#06b6d4",
"accent": "#f1f5f9",
"bg": "#ffffff",
"text": "#1e293b"
},
"fonts": {
"heading": "Inter",
"body": "Inter"
},
"borderRadius": "8px"
}6 предустановленных тем + произвольные цвета через админку. Утилитарные классы: .sf-btn-primary, .sf-card, .sf-badge, .sf-link, .sf-input
| Маршрут | Тип | Описание |
|---|---|---|
| / | Серверный | Лендинг SiteForge (маркетинговая страница) |
| /onboarding | Клиентский | 5-шаговый wizard создания сайта |
| /editor | Клиентский | Визуальный редактор страниц (3-панельный) |
| /login | Клиентский | Авторизация администратора платформы |
| /demo | Клиентский | Интерактивная демонстрация платформы |
| /tz | Серверный | Техническая документация (эта страница) |
| /admin | Payload CMS | Админ-панель Payload (/admin/[[...segments]]) |
| /api/* | Payload CMS | REST API Payload |
| /graphql | Payload CMS | GraphQL API Payload |
| /{siteId} | Серверный | Главная страница тенанта |
| /{siteId}/catalog | Клиентский | Каталог товаров (фильтры, поиск, toggle) |
| /{siteId}/product/{id} | Смешанный | Карточка товара + ProductClient.tsx |
| /{siteId}/cart | Клиентский | Корзина + промокод + доставка + оплата |
| /{siteId}/search | Клиентский | Поиск по товарам через Payload API |
| /{siteId}/favorites | Клиентский | Избранное (localStorage + CustomerAuth sync) |
| /{siteId}/compare | Клиентский | Сравнение товаров (макс. 4) |
| /{siteId}/account | Клиентский | Личный кабинет (профиль/заказы/адреса) |
| /{siteId}/auth | Клиентский | Авторизация/регистрация покупателя |
| /{siteId}/order-success | Клиентский | Подтверждение заказа |
| /{siteId}/admin | Клиентский | Панель администратора тенанта |
| /{siteId}/admin/products | Клиентский | CRUD товаров тенанта |
| /{siteId}/admin/categories | Клиентский | CRUD категорий тенанта |
| /{siteId}/admin/orders | Клиентский | Заказы тенанта + детали |
| /{siteId}/admin/analytics | Клиентский | Дашборд аналитики |
| /{siteId}/admin/media | Клиентский | Медиа тенанта |
| /{siteId}/admin/settings | Клиентский | Настройки тенанта |
| /{siteId}/admin/notifications | Клиентский | Уведомления тенанта |
| /{siteId}/chat | Клиентский | Список чатов покупателя |
| /{siteId}/chat/{chatId} | Клиентский | Окно переписки чата |
| /{siteId}/admin/chat | Клиентский | Управление чатами тенанта |
| /{siteId}/admin/sellers | Клиентский | Управление продавцами тенанта |
| /{siteId}/admin/listings | Клиентский | Управление объявлениями тенанта |
| /{siteId}/checkout | Клиентский | Оформление заказа с прогресс-баром (гостевой чекаут) |
| /{siteId}/admin/promo | Клиентский | Управление промокодами тенанта |
| POST /api/promo/validate | API Route | Валидация промокода |
| POST /api/payments/yookassa | API Route | Создание платежа ЮKassa |
| POST /api/payments/yookassa/webhook | API Route | Вебхук ЮKassa (подтверждение оплаты) |
| GET /api/loyalty | API Route | Данные программы лояльности |
| POST /api/loyalty | API Route | Начисление/списание баллов |
| GET /api/geolocation | API Route | Геолокация по IP |
| POST /api/theme | API Route | Обновление темы тенанта |
| POST /api/crm/webhook | API Route | CRM вебхуки |
| GET /api/crm/export | API Route | Экспорт товаров CSV/JSON |
| GET /{siteId}/orders | Клиентский | Страница отслеживания заказов |
| POST /api/orders/track | API Route | Анонимное отслеживание заказа (order# + email) |
| GET /api/orders/my | API Route | Заказы авторизованного пользователя |
| POST /api/customers/social-login | Payload CMS | Социальный вход bridge (VK, Google OAuth -> Customer) |
| /{siteId}/listings | Смешанный | Список объявлений (для типа classifieds) |
| /{siteId}/seller/{sellerId} | /{siteId}/listing/{listingId} | Смешанный |
src/components/tenant/TenantContext.tsx
React-контекст для данных тенанта (modules, theme, settings). Хуки: useTenant(), useModule(name). Provider в layout тенанта.
src/components/tenant/ThemeStyles.tsx
Клиентский компонент. Инжектит CSS-переменные --sf-* из tenant.theme. Используется в layout тенанта.
src/components/tenant/CustomerAuth.tsx
React-контекст для авторизации покупателей. JWT-токены через Payload API. Хуки: useCustomerAuth(), useIsLoggedIn(). Синхронизация favorites/compareList с сервером.
src/components/tenant/CartScript.tsx
Клиентская корзина на localStorage. Синхронизирует badge в шапке через monkey-patching localStorage.setItem. Атрибуты data-add-cart.
tenant.modules (json)
Управляет доступностью страниц и навигации. useModule(name) проверяет наличие. Недоступные модули показывают заглушки.
src/app/(site)/editor/page.tsx
3-панельный визуальный редактор. Макеты сохраняются в Payload Pages collection как JSON с модулями.
src/components/tenant/CheckoutProgress.tsx
Прогресс-бар оформления заказа. Шаги: Контакт -> Доставка -> Оплата -> Подтверждение. Анимированная полоса, кликабельная навигация.
src/components/tenant/DeliveryInfo.tsx
Блок информации о доставке на карточке товара. Показывает стоимость и порог бесплатной доставки. Интеграция с СДЭК.
src/components/tenant/AddToCartButton.tsx
Кнопка добавления в корзину с анимацией. Также кнопки избранного и сравнения. Интеграция с CartContext, FavoritesContext, CompareContext.
src/components/tenant/RecommendationsBlock.tsx
Блок «С этим покупают» / «Похожие товары» на карточке товара. Загрузка товаров из той же категории через Payload API.
src/contexts/CartContext.tsx
React-контекст корзины на localStorage. addItem, removeItem, updateQuantity, clearCart, totalPrice, totalItems. Привязка к тенанту по slug.
src/contexts/FavoritesContext.tsx
React-контекст избранного. Синхронизация с CustomerAuth при авторизации. Локальное хранение для гостей.
src/contexts/CompareContext.tsx
React-контекст сравнения товаров (макс. 4). Синхронизация с сервером при авторизации.
Payload CMS имеет 13 официальных плагинов. Ниже — анализ каждого в контексте SiteForge, приоритет и статус.
Плагин мультитенантности. Подключён в payload.config.ts. Настроен с customTenantField: true на всех коллекциях (используются существующие tenant поля). Tenant selector в админке. Автоматическая фильтрация данных по тенанту. Пользователи привязаны к тенантам через tenants array field.
Редактор Rich Text. Используется как основной редактор в buildConfig.
SEO-оптимизация: мета-теги, Open Graph, превью в Google/Social. Подключён для products и pages с tabbedUI. Автогенерация title из name, description из shortDescription. uploadsCollection: media. URL генерация по slug.
Полнотекстовый поиск. Подключён для products, categories, listings. Создаёт search-коллекцию с индексами. API: /api/search?q=запрос. Поддержка multi-tenant через skipSync. Быстрый поиск с ранжированием.
Мультитенантность — ядро SiteForge. Должен быть правильно настроен: tenant selector в админке, автоматическая фильтрация данных, tenant-specific access control. Без правильной настройки данные разных тенантов могут смешиваться.
Интеграция Stripe. Двусторонняя синхронизация: Payload <-> Stripe. Подписки, платежи, вебхуки. Для маркетплейса: комиссии, выплаты продавцам, рекуррентные платежи за подписку тенантов. Пользователь сказал "платежи потом", но плагин нужно держать в плане.
Конструктор форм в админке. Установлен в package.json, но конфликтует с plugin-multi-tenant при инициализации Payload. Включить по команде заказчика — потребуется отладка совместимости или обновление Payload.
Вложенные документы с breadcrumbs для categories. Автоматические breadcrumbs-таблица, вложенные URL. Parent relation управляется плагином.
Управление редиректами из админки. 301/302 редиректы, связь с products/pages/categories. Поддержка внутренних ссылок и кастомных URL.
Облачное хранилище медиа (S3, GCS, Azure). Сейчас файлы хранятся локально на сервере — это не масштабируется. Для продакшена нужен S3/MinIO. Плагин поддерживает несколько провайдеров. Реализация — по команде заказчика.
Импорт/экспорт данных CSV/JSON. Установлен в package.json, но вызывает payloadInitError при подключении. Включить по команде заказчика — может потребоваться обновление Payload или изменение порядка плагинов.
Интеграция Sentry для мониторинга ошибок. В продакшене без этого не обойтись — автоматический трекинг ошибок API, производительности, пользовательских сессий.
Model Context Protocol — позволяет AI-ассистентам работать с данными Payload. Интересно для будущего: AI-помощник для продавцов, автоматическое SEO, генерация описаний товаров.
E-commerce расширение Payload. Новейший плагин. Проверить что он даёт поверх наших коллекций — возможно, готовые решения для корзины, чекаута, налогов.
Коллекции ChatRooms + Messages. API routes для CRUD чатов и сообщений. UI: список чатов, окно переписки. Socket.IO реалтайм (PM2 процесс siteforge-socket на порту 3011). Хук useChatSocket для подключения. Админ-панель чатов.
Resend-адаптер установлен в payload.config.ts. Сейчас RESEND_API_KEY пустой — письма пишутся в консоль. Реальная отправка писем будет включена по команде заказчика (подтверждение регистрации, восстановление пароля, уведомления о заказах).
Web Push API для уведомлений в браузере. API route /api/push (subscribe/unsubscribe/send). Хук usePushNotifications. VAPID-ключи в .env. Хранение подписок в JSON (TODO: мигрировать в Payload-коллекцию).
CDEKClient реализован: расчёт стоимости, создание отправления, отслеживание, поиск городов, точки выдачи. API route /api/delivery/cdek. Нужны ключи CDEK_ACCOUNT_ID и CDEK_SECURE_PASSWORD для активации.
Дашборд с: воронка конверсии, Retention (удержание клиентов), LTV, ср. чек, топ товары, заказы по статусам, рейтинги отзывов, география заказов по городам.
SEO-плагин активен. Добавлено: sitemap.ts для автогенерации sitemap.xml по каждому тенанту, robots.ts для robots.txt, JSON-LD structured data на карточках товаров.
План основан на результатах UX-аудита (подробности на отдельной странице), анализе конкурентов и текущем состоянии платформы. Фазы выстроены по принципу максимального влияния на конверсию и пользовательский опыт. Каждая фаза = 1-2 недели разработки.
Все задачи P0 реализованы. Гостевой чекаут, прогресс-бар, доставка на карточке, breadcrumbs, toast-уведомления.
Разрешить покупку без регистрации. После оплаты предложить создать аккаунт с предзаполненными данными. Реализация: отдельный API route /api/orders/guest, форма без обязательного пароля, сохранение заказа в сессии. Влияние: +30-45% конверсия чекаута (Baymard Institute).
Визуальные шаги: Корзина -> Данные -> Доставка -> Оплата. Пользователь видит сколько шагов осталось и может вернуться. Компонент CheckoutProgress с анимированной полосой. Влияние: +15-20% завершение чекаута.
Показывать расчёт СДЭК прямо на странице товара: «Доставка от 290 руб. / бесплатно от 3 000 руб.». Для доски объявлений — «Доставка возможна» / «Только самовывоз». Вызов CDEKClient.calculate с кешированием. Влияние: +68% доверие к покупке.
Навигационная цепочка на всех страницах: Главная -> Категория -> Товар. Использовать @payloadcms/plugin-nested-docs breadcrumbs. Добавить Breadcrumbs компонент в layout тенанта. Влияние: предсказуемость навигации, SEO.
Мгновенная обратная связь: добавление в корзину, добавление в избранное, отправка отзыва, ошибки формы. Компонент Toaster на shadcn/ui sonner. Влияние: пользовательская уверенность в действиях.
Все 6 задач реализованы. Социальные входы VK/Google (NextAuth.js), Quick View, рекомендации, CSV импорт, фильтры, отзывы с фото + рейтинг продавца.
Модальное окно при клике на карточку каталога: фото, цена, характеристики, кнопка «В корзину». Без перехода на отдельную страницу. Компонент ProductQuickView с overlay. Влияние: +20% удобство просмотра каталога.
Блоки на карточке товара и в корзине. Алгоритм: товары из той же категории + товары в заказах с текущим. API route /api/products/recommendations. Кеширование на 5 мин. Влияние: +10-30% средний чек.
NextAuth.js интеграция: NextAuthProvider (SessionProvider) добавлен в layout, social login bridge API (/api/customers/social-login), CustomerAuth синхронизирован с NextAuth session, страница /auth использует socialLogin() метод, VK и Google OAuth кнопки работают (credentials настраиваются в .env). Автосоздание Customer записи. Влияние: +20% конверсия регистрации.
API route /api/products/import — приём CSV/Excel, валидация, создание товаров пачкой. Прогресс-бар загрузки. Шаблон CSV для скачивания. Критично для B2B-продавцов. Влияние: +50% привлечённых продавцов.
Фильтры по характеристикам (бренд, размер, цвет и т.д.), сохранение фильтров в URL (query params), фасетный счётчик товаров. Компонент FacetedFilters реализован. Базовые фильтры + фасетные фильтры по features. Влияние: +20-30% удобство поиска.
Отзывы с фото: коллекция reviews уже имела поле photos (upload, relationTo: media, hasMany: true, maxRows: 5), ReviewForm получил UI загрузки фото с превью, на карточке товара фото отзывов отображаются в галерее. Исправлен баг синтаксиса ReviewForm и API отзывов. Рейтинг продавца на карточке товара. Бейдж «Проверенный продавец». Ссылка на страницу продавца. Кнопка «Написать продавцу». Страница продавца seller/[sellerId]. Влияние: +40% доверие к покупке.
Функции для масштабирования платформы и повышения возврата пользователей. Все 11 задач выполнены. Промокоды, PWA, ЮKassa, уведомления, SEO, Schema.org, карточка товара, Wishlist, отслеживание заказов — всё готово.
Ручная модерация из админки + авто-модерация по стоп-словам (словарь). Статусы: на модерации / одобрено / отклонено. API /api/listings/moderate. Кнопки «Одобрить/Отклонить» в админке. Массовая автомодерация. Влияние: качество контента.
API /api/products/price-drop: проверка подписок на товары в избранном, создание уведомлений при снижении цены. Поддержка массовой проверки и точечной проверки по товару. Влияние: +25% возврат пользователей.
next-pwa плагин, service worker для кеширования карточек товаров и каталога. manifest.json с иконками. Install prompt на мобильных. Offline fallback страница. Влияние: +30% удержание, нативное ощущение.
Интеграция ЮKassa для приёма платежей (карты, СБП, SberPay). API route /api/payments/yookassa. Webhook для подтверждения оплаты. Альтернатива Stripe, который не работает в РФ. Влияние: критично для монетизации.
Коллекция PromoCodes: код, тип (% или руб.), минимальная сумма, срок действия, лимит использований. Применение в корзине. Seller dashboard: создание промокодов. Влияние: маркетинговый инструмент продавцов.
Выполнено: generateMetadata на всех страницах (layout, home, catalog, product), OG tags, twitter cards, canonical URLs. Использует tenant.settings.seoTitle/seoDescription. Влияние: +50% CTR в поисковой выдаче.
Выполнено: JSON-LD Product schema (offers, aggregateRating, reviews), BreadcrumbList schema на странице товара. Google Rich Results. Влияние: расширенные сниппеты в поиске, +30% CTR.
Выполнено: ProductGallery с zoom + thumbnails, ProductTabs (Описание/Характеристики/Отзывы), FavoriteButton на карточке товара. Влияние: +25% вовлечённость на карточке.
Выполнено: server sync для авторизованных пользователей, merge localStorage + server favorites, toast notifications, FavoriteButton на карточке товара. Влияние: +15% возврат пользователей.
Выполнено: /{siteId}/orders — страница с анонимным трекингом (order# + email) и списком заказов для авторизованных. API: POST /api/orders/track и GET /api/orders/my. Влияние: -40% обращений в поддержку.
Email-уведомления через Resend: подтверждение заказа, смена статуса, восстановление пароля. Push-уведомления через Web Push API. Настройки уведомлений в личном кабинете. Шаблоны писем с брендингом тенанта. Влияние: +20% вовлечённость.
Все 5 стратегических функций реализованы.
Реализовано: LoyaltyAccounts collection (баллы, тиры, кешбэк 1-5%), Referrals collection (реферальные коды, бонусы 50/100 баллов). API /api/loyalty (GET/POST — начисление/списание), /api/referral (GET/POST — клики, регистрация, конверсия). LoyaltyDashboard UI с 3 табами: обзор/история/рефералка. Интеграция в checkout: начисление кешбэка + оплата баллами (до 30%). Ссылка /ref/[code] для рефералов. Шаринг в Telegram/WhatsApp/VK.
Реализовано: API /api/geolocation (определение по IP через ip-api.com), /api/regions (региональные настройки). Regions collection (множители цен/доставки, способы доставки). GeoContext provider (браузерная геолокация + reverse geocoding + IP fallback). CitySelector компонент в хедере (12 популярных городов, поиск, localStorage). Событие city-changed для реактивной фильтрации.
Реализовано: I18nProvider context (ru/en), localStorage persistence. Словари ru.ts/en.ts с секциями: common, product, cart, checkout, loyalty, referral, geo, auth. LanguageSwitcher компонент (Globe icon, toggle ru/en). Автоопределение языка браузера. Расширенные словари для новых модулей лояльности/геолокации/рефералки.
Реализовано: Tenant.theme JSON с цветами/шрифтами/radius. CSS custom properties (--sf-primary, --sf-bg, --sf-text). ThemeStyles компонент для инъекции стилей. API /api/theme для сохранения. Визуальный редактор в админке: color picker, font selector. Базовые шаблоны тем. Drag-and-drop и live-preview — в roadmap для следующей итерации.
Реализовано: /api/crm/webhook для входящих хуков, /api/crm/export для экспорта данных. Webhook API для Bitrix24/AmoCRM/МойСклад. Маппинг полей заказов и покупателей. Модуль интеграций в настройках тенанта. Базовая синхронизация заказов. Глубокая 1С-интеграция — в roadmap.
По результатам комплексного аудита платформы выявлены критичные и рекомендованные улучшения. Задачи отсортированы по приоритету: от безопасности и стабильности до UX-полировки. Каждая задача содержит конкретные шаги реализации и ожидаемый эффект.
Реализовано: X-Frame-Options, X-Content-Type-Options, X-XSS-Protection, Referrer-Policy, Permissions-Policy, Content-Security-Policy, X-Permitted-Cross-Domain-Policies. Все заголовки добавлены в Nginx конфиг. poweredHeader: false уже был в next.config.ts. Серверные токены скрыты (server_tokens off).
Реализовано: poweredHeader: false в next.config.ts + server_tokens off в Nginx. Заголовок X-Powered-By больше не отправляется.
Реализовано: max_memory_restart увеличен до 512M, listen_timeout до 60s, wait_ready включён, log_date_format добавлен, merge_logs включён, логи перенесены в /var/log/pm2/, pm2-logrotate установлен (50M max, 7 дней, сжатие). Рестарты обнулены, процесс стабилен.
Реализовано: LandingClient.tsx полностью переписан на безопасный React/JSX рендеринг. dangerouslySetInnerHTML не используется на лендинге. SVG иконки рендерятся через React-компоненты FeatureIcon.
Реализовано: мобильное меню использует useState (mobileMenuOpen) + условный рендеринг. Никакого прямого DOM-манипулирования. Кнопка переключает состояние, React рендерит меню при mobileMenuOpen=true.
Добавить полные Open Graph мета-теги (og:image, og:type, og:locale) и Twitter Card теги на все публичные страницы. Это обеспечит красивые превью при шаринге в соцсетях и мессенджерах. Реализация через generateMetadata() в layout и page.tsx.
Платформа SiteForge (лендинг, /features, /tz) нуждается в sitemap.xml и robots.txt. Добавить src/app/sitemap.ts и src/app/robots.ts на уровне платформы для индексации маркетинговых страниц.
Добавить rel=canonical на все страницы для предотвращения дублирования контента в поисковой выдаче. Реализация через metadata.alternates.canonical в generateMetadata().
Реализовано: брендированная 404 с анимированным градиентным 404, логотипом SiteForge, полем поиска, ссылками на главную/возможности/демо. CSS анимация gradient-shift для числа 404. Файл: src/app/(site)/not-found.tsx.
Добавить CSS/Framer Motion анимации: fade-in для секций при скролле, slide-in для карточек товаров, hover-эффекты для кнопок и ссылок. Это создаёт ощущение премиальности и увеличивает вовлечённость.
Реализовано: 3 тарифа (Старт/0 руб, Профи/2990 руб, Бизнес/9990 руб), highlighted тариф Профи с бейджем «Популярный», сравнение функций, FAQ с 4 вопросами (аккордеон details/summary), CTA-кнопки, ссылка в навигации.
Установлен isomorphic-dompurify, создана утилита /src/lib/sanitize.ts. Описания товаров (p.description) теперь проходят через sanitizeHtml() перед рендерингом. Удалён dangerouslySetInnerHTML с /info страницы (эмодзи-иконки рендерятся как текст).
Создан error.tsx для (site) route group — красивая страница ошибки с кнопкой «Попробовать снова» и ссылкой на главную. Создан global-error.tsx для критических ошибок сервера (500). Обе страницы стилизованы в брендинге SiteForge.
Создан loading.tsx для (site) — скелетон лендинга (header, hero, карточки). Создан loading.tsx для [siteId] — скелетон каталога с карточками товаров. Используется CSS animate-pulse для эффекта загрузки.
Добавлена ссылка «Перейти к основному контенту» (skip-nav) для клавиатурных пользователей. Добавлены aria-label для навигации и кнопки меню. Добавлены focus-visible стили (outline 2px #005BFF) для всех интерактивных элементов. aria-expanded для кнопки мобильного меню.
Из LandingClient.tsx удалены все dangerouslySetInnerHTML блоки (CSS анимации и IntersectionObserver скрипт). CSS перенесён в globals.css, IntersectionObserver реализован через useEffect хук. Файл полностью безопасен для рендеринга.
Favicon + app icons, error pages для тенанта, skeleton-загрузки каталога/корзины, Nginx caching _next/static (immutable), OG-image + улучшенный manifest, интерактивный переключатель на /demo.
favicon.ico, icon.png, apple-icon.png. manifest.ts обновлён.
[siteId]/error.tsx с CSS-переменными и кнопкой повтора.
loading.tsx для catalog и cart с animate-pulse.
_next/static immutable 365d, HTML stale-while-revalidate.
OG image в метаданных, theme_color #005BFF.
Кнопки Магазин/Маркетплейс/Доска на /demo.
Все задачи реализованы! Security Headers, PM2 стабилизация, исправление багов лендинга, SEO уже было готово, UI/UX полировка (404, анимации, Pricing). Результат: стабильная, безопасная платформа с улучшенной индексацией и пользовательским опытом.
Shared типы, полноценный поиск, регистрация покупателей, DB миграция, graceful fallback, Sentry, интеграции.
Создан /lib/product-types.ts с общим типом Product, formatPrice (6 валют), payloadProductToProduct конвертер. mockProducts обновлён для реэкспорта типов. Модули ProductCard, ProductGrid, CartItemRow, CartSummary, CheckoutForm переведены на shared типы.
Search page переписан с 70 строк до ~300. Поиск по title/description/tags/brand через Payload API. Фильтры: категория, цена от-до, в наличии. Сортировка: релевантность, цена, новизна, рейтинг. Пагинация "Загрузить ещё". Debounce 300мс.
Исправлена DB миграция: добавлены 4 колонки notification_preferences_* в таблицу customers. Регистрация и логин через /api/customers/register и /login работают. JWT-токены выдаются. Создан тестовый покупатель test@technomarket.ru. 0 → 1 customers в БД.
Создан /lib/integration-config.ts с проверками каждого API-ключа. Платформа не ломается без ключей — каждая интеграция деградирует грациозно. Создана страница /admin/integrations с визуальным статусом всех 7 интеграций и API /api/integrations/status.
Созданы sentry.client.config.ts, sentry.server.config.ts, sentry.edge.config.ts. Sentry активируется автоматически при указании NEXT_PUBLIC_SENTRY_DSN. tracesSampleRate: 0.1, replaysOnErrorSampleRate: 1.0. Работает только в production.
NextAuth уже включает VkProvider и GoogleProvider. Автоматически активируются при добавлении VK_CLIENT_ID/SECRET и GOOGLE_CLIENT_ID/SECRET. Social login синхронизируется с Payload через /api/customers/social-login. Доступно на странице /auth.
Новая страница /admin/integrations с визуальным статусом всех подключений: Email, СДЭК, VK, Google, ЮKassa, Stripe, Sentry. Зелёный/серый статус, описания для подключения. API /api/integrations/status для программного доступа.
Результат: критичные проблемы решены. Покупатели регистрируются, поиск работает, типы унифицированы, интеграции деградируют грациозно, мониторинг готов к активации.
metadataBase, Notifications API, CDEK-доставка, расширенные настройки магазина, email-уведомления, кастомная 404 для тенанта.
В layout.tsx добавлено metadataBase: new URL("https://siteforge.rodnoy.site"). Исправлено предупреждение Next.js о неразрешимых социальных изображениях. OG images теперь корректно резолвятся для всех страниц.
Полный CRUD API для уведомлений: GET (фильтр по tenantId, customerId, read), PATCH (mark as read, mark all read), DELETE (single/batch). Поддержка пагинации и сортировки по дате.
Полная библиотека cdek.ts: OAuth-авторизация, расчёт стоимости (калькулятор тарифов), поиск городов, пункты выдачи (ПВЗ/постаматы), создание заказа, трекинг. Delivery API: /api/delivery?action=calculate|cities|points. Поддержка 6 тарифов СДЭК.
Админка: 6 вкладок — Основные, SEO (title/desc/keywords с счётчиками), Контакты (телефон/email/адрес/WhatsApp/Telegram), Оплата (ЮKassa/Stripe/ручная, карты/СБП/наличные тогглы), Доставка (СДЭК/самовывоз/курьер, бесплатная от N руб.), Тема (цвета с превью).
Шаблоны: подтверждение заказа, обновление статуса, приветственное письмо, сброс пароля. HTML-шаблоны с брендингом (gradient, таблица товаров, статус-бейджи). API: /api/notifications/email. Авто-отправка через Resend при создании/обновлении заказа. Лояльность: автоначисление кешбэка.
not-found.tsx в [siteId]: брендированная 404 с названием магазина и цветами темы. Большая цифра 404 с тенью, кнопки "Перейти в каталог" и "На главную". Ссылки на каталог и главную. Плавная анимация.
Результат: платформа с полной интеграцией доставки СДЭК, расширенными настройками магазинов, системой email-уведомлений и кастомными ошибками.
Rate limiting, Brotli-сжатие, PWA Service Worker, Open Graph/Twitter Cards, оптимизация изображений, Middleware улучшения.
Настроены 3 зоны rate limiting: general (10 req/s), API (5 req/s), auth (2 req/s). Connection limit: 20 concurrent per IP. Burst параметры с nodelay. Защищены эндпоинты /login, /auth, /api/*, а также все общие запросы.
Установлены модули libnginx-mod-http-brotli-filter и libnginx-mod-http-brotli-static. Brotli level 6 включён для всех текстовых ресурсов (CSS, JS, JSON, XML, SVG, шрифты). Gzip оставлен как fallback. Результат: content-encoding: br подтверждён.
В layout.tsx добавлена регистрация Service Worker (navigator.serviceWorker.register). SW уже существовал (sw.js) — cache-first для статики, network-first для навигации. Добавлены meta-теги: apple-mobile-web-app-capable, apple-mobile-web-app-status-bar-style, apple-mobile-web-app-title. Manifest подключён через Next.js Metadata API.
В layout.tsx добавлены полные метаданные: title, description, keywords, openGraph (locale ru_RU, siteName, images 512x512), twitter (card summary_large_image), robots (googleBot max-image-preview: large), alternates (canonical), manifest, icons. Поддержка шаринга в VK, Telegram, Twitter, Facebook.
В next.config.ts: formats: ["image/avif", "image/webp"] — автоматическая конвертация в современные форматы. deviceSizes и imageSizes расширены для responsive картинок. minimumCacheTTL: 60. compress: true для HTTP-сжатия.
В middleware.ts добавлено: редирект www.siteforge.rodnoy.site на siteforge.rodnoy.site (301), удаление trailing slash (301). Nginx также настроен на www-редирект (двойная защита). Matcher исключает статику, SW, manifest, иконки.
Результат: защищённая от DDoS платформа с Brotli-сжатием, PWA оффлайн-доступом, расширенными SEO метаданными и оптимизированными изображениями.
PM2 частые рестарты (18+)
Исправлено: importMap настроен для multi-tenant компонентов, DB column tenant_id исправлен, sharp установлен.
/admin 500 ошибка после добавления Customers
В payload_preferences_rels не хватало колонки customers_id. Исправлено: ALTER TABLE ADD COLUMN + FK constraint + index.
React hydration #418
Исправлено через route groups: (site)/ и (payload)/ с отдельными html/body в каждом layout.
Missing Payload CSS
Обязательный импорт @payloadcms/next/css в (payload)/layout.tsx.
payload migrate:create не работает
ESM проблема с tsx. Миграции нужно выполнять вручную через SQL (ALTER TABLE).
Sharp warning при запуске
Установлен sharp, но warning persists — не критично, resize работает.
Email пишется в консоль
Нужен email-адаптер (Resend/SendGrid). Пока не критично для разработки.
Multi-tenant plugin не настроен
Плагин подключён в payload.config.ts. Настроен customTenantField на всех коллекциях. Tenant selector в админке. Автофильтрация по тенанту. DB column users_tenants.tenants_id переименован в tenant_id.
src/ |-- app/ | |-- (payload)/ # Payload CMS admin + API | | |-- admin/[[...segments]]/page.tsx | | |-- api/[...slug]/route.ts | | |-- graphql/route.ts | | +---- layout.tsx # RootLayout from @payloadcms/next | |-- (site)/ # Публичные страницы | | |-- [siteId]/ # Страницы тенанта | | | |-- layout.tsx # TenantProvider + CustomerAuth + ThemeStyles | | | |-- page.tsx # Главная (Hero, категории, новинки) | | | |-- catalog/ # Каталог с фильтрами | | | |-- product/[id]/ # Карточка товара + ProductClient | | | |-- cart/ # Корзина + чекаут | | | |-- search/ # Поиск | | | |-- favorites/ # Избранное | | | |-- compare/ # Сравнение (макс 4) | | | |-- account/ # Личный кабинет | | | |-- auth/ # Логин/регистрация покупателя | | | |-- order-success/ # Подтверждение заказа | | | +---- admin/ # Админ-панель тенанта | | |-- onboarding/ # 5-шаговый wizard | | |-- editor/ # Визуальный редактор | | |-- login/ # Авторизация платформы | | |-- demo/ # Демо | | |-- tz/ # Эта страница | | +---- page.tsx # Лендинг SiteForge | +---- api/ # Custom API routes |-- components/ | |-- tenant/ # TenantContext, ThemeStyles, CustomerAuth, CartScript | |-- tenant-admin/ # Sidebar, Header для админки тенанта | +---- ui/ # shadcn/ui компоненты |-- payload/ | |-- collections/ # Tenants, Users, Sites, Media | |-- collections/modules/ # Products, Categories, Orders, Reviews, etc. | |-- hooks/ # createNotification | +---- payload.config.ts # Основной конфиг Payload |-- themes/ # Предустановленные темы (ozon.ts, types.ts) |-- views/ # View компоненты (HomeView, CartView, etc.) +---- modules/ # Переиспользуемые модули (Header, ProductCard, etc.)
# Деплой на продакшен
cd /var/www/marketplace && npm run build && pm2 restart siteforge
# Проверить статус
pm2 status siteforge
# Логи
pm2 logs siteforge --lines 50 --nostream
# Установить новый плагин Payload
cd /var/www/marketplace && npm install @payloadcms/plugin-seo
npm run build && pm2 restart siteforge
# SQL миграция (при добавлении auth-коллекции)
PGPASSWORD=siteforge2024secure psql -h 127.0.0.1 -U siteforge -d siteforge
ALTER TABLE payload_preferences_rels ADD COLUMN newcollection_id INTEGER;
# Тест API
curl -s http://localhost:3010/api/tenants | head -200
Подробный UX-аудит платформы, анализ мировых практик e-commerce и классифайдов, пожелания пользователей, приоритетные рекомендации (P0-P3), а также сравнительный анализ конкурентов в России и мире вынесены на отдельную страницу.
SiteForge — Техническая документация · Обновлено 26.06.2026