«Коробки-оптом» — интернет-магазин картонной упаковки оптом

ОПИСАНИЕ

Полнофункциональный B2B-интернет-магазин картонной упаковки оптом, построенный на Next.js 16 (App Router) и React 19 поверх PostgreSQL. Архитектура спроектирована как самодостаточное приложение без внешних API и сторонних e-commerce-сервисов: весь контент, каталог, заказы, отзывы и даже бинарные данные изображений хранятся в одной базе данных (изолированная схема `corobki`), а доступ к ним идёт через тонкий слой запросов на основе пула соединений `pg` с принудительной установкой search_path на каждое соединение. Рендеринг построен на серверных компонентах App Router. Страницы используют асинхронную загрузку данных прямо в дереве компонентов, потоковую отдачу через React Suspense (тяжёлые блоки — сетки товаров, рекомендации — стримятся отдельно со скелетон-заглушками, не блокируя основной контент) и динамические метаданные через generateMetadata. Каждая карточка товара отдаёт корректную SEO-разметку: Open Graph, а также структурированные данные Schema.org (Product / AggregateOffer с агрегированным рейтингом и отзывами, BreadcrumbList) в формате JSON-LD, сгенерированные на сервере. Каталог поддерживает пагинацию, серверную сортировку (по новизне, цене, названию) и полнотекстовый поиск по названию и описанию товара через параметризованные SQL-запросы. Карточка товара включает галерею с зумом и навигацией, выбор вариантов (цвет/размер) с синхронизацией в URL, выбор количества и таблицу оптовых скидок за объём. Корзина реализована на клиенте через React Context + reducer с персистентностью в localStorage (гидрация при монтировании, запись на каждое изменение) и выезжающую панель-сайдбар. Цены повсеместно хранятся и считаются в копейках (целочисленный integer, валюта RUB), что исключает ошибки округления с плавающей точкой; форматирование в рубли — через Intl.NumberFormat с русской локалью. Ключевая особенность — оформление заказов без регистрации. Покупатель анонимно идентифицируется по криптостойкому токену (crypto.randomBytes), сохранённому в httpOnly-cookie на год (защита sameSite=lax). По этому токену пользователь видит историю своих заказов и ведёт переписку с магазином: к каждому заказу прикреплён живой чат с поллингом новых сообщений, авто-прокруткой и серверной проверкой прав доступа на каждое действие. Заказы поддерживают жизненный цикл статусов (новый → в обработке → отправлен → доставлен / отменён). Изображения товаров обрабатываются собственным пайплайном: загруженные файлы (включая Apple-формат HEIC/HEIF) конвертируются и нормализуются через sharp — авто-поворот по EXIF, ресайз до 1600px по длинной стороне, перекодировка в оптимизированный mozjpeg (q82), — после чего хранятся в БД как BYTEA и отдаются через собственный API-роут с агрессивным HTTP-кэшированием (max-age=1 год, immutable). Весь контент сайта (тексты главной, блок «О нас», статистика, принципы, контакты, FAQ, цветовая тема) вынесен в редактируемое key-value-хранилище настроек в БД, что превращает статический лендинг в полностью управляемый из данных сайт. Поддержана адаптивная вёрстка (мобильное меню, отдельные шапка/подвал) и переключение светлой/тёмной темы через next-themes на CSS-переменных в цветовой модели OKLCH. Мутации данных (оформление заказа, отправка отзыва, сообщения в чат) реализованы через Server Actions с типизированным состоянием формы (useActionState из React 19) и точечной инвалидацией кэша через revalidatePath. Качество кода поддерживается Biome (линт + формат) и pre-commit-хуками Husky + lint-staged; включён React Compiler для автоматической оптимизации ре-рендеров.

ИСПОЛЬЗУЕМЫЕ ИНСТРУМЕНТЫ

• Next.js 16 (App Router)
• React 19
• React Server Components
• Server Actions
• React Compiler
• TypeScript
• PostgreSQL
• pg (node-postgres)
• SQL
• Tailwind CSS v4
• Radix UI
• shadcn/ui
• next-themes
• lucide-react
• sharp
• heic-convert
• Zod
• React Hook Form
• Embla Carousel
• Intl.NumberFormat
• Schema.org JSON-LD
• Bun
• Biome
• Husky
• lint-staged
• Git
• OKLCH

РЕЗУЛЬТАТ

• Запущен полнофункциональный B2B-магазин упаковки на Next.js 16 / React 19 с серверным рендерингом и потоковой отдачей контента через Suspense
• Спроектирована автономная архитектура без внешних API — весь каталог, заказы, отзывы и бинарные изображения хранятся в одной БД PostgreSQL
• Реализовано оформление заказов без регистрации с анонимной идентификацией покупателя по криптостойкому httpOnly-токену
• Встроен живой чат «покупатель ↔ магазин» по каждому заказу с поллингом сообщений и серверной проверкой прав доступа
• Разработан собственный пайплайн обработки изображений (sharp + heic-convert): конвертация HEIC, авто-поворот, ресайз, mozjpeg, хранение в BYTEA
• Настроена отдача изображений через API-роут с годовым immutable-кэшированием на стороне браузера и CDN
• Внедрена корзина на React Context + localStorage с выезжающим сайдбаром и сохранением состояния между сессиями
• Цены реализованы в целочисленных копейках — исключены ошибки округления с плавающей точкой; форматирование через Intl с локалью ru-RU
• Достигнута полная SEO-готовность: динамические метаданные, Open Graph и структурированные данные Schema.org (Product, AggregateOffer, BreadcrumbList) в JSON-LD
• Реализованы серверный полнотекстовый поиск, пагинация и сортировка каталога на параметризованных SQL-запросах
• Контент сайта полностью вынесен в редактируемое key-value-хранилище настроек — лендинг управляется из данных без правок кода
• Поддержаны адаптивная вёрстка и переключение светлой/тёмной темы на CSS-переменных в цветовой модели OKLCH
• Мутации построены на типобезопасных Server Actions с точечной инвалидацией кэша через revalidatePath
• Качество кода обеспечено строгим TypeScript, Biome и pre-commit-хуками; включён React Compiler для оптимизации рендеринга