"Korobki-optom" is an online store for wholesale cardboard packaging.

A fully functional B2B online store for wholesale cardboard packaging, built on Next.js 16 (App Router) and React 19 on top of PostgreSQL. The architecture is designed as a self-sufficient application without external APIs and third-party e-commerce services: all content, catalog, orders, reviews, and even binary image data are stored in a single database (isolated schema `corobki`), with access through a thin layer of queries based on the `pg` connection pool, enforcing the search_path on each connection.

Rendering and SEO

Rendering is based on server components of the App Router. Pages utilize asynchronous data loading directly in the component tree, streaming delivery through React Suspense (heavy blocks — product grids, recommendations — are streamed separately with skeleton placeholders, not blocking the main content) and dynamic metadata through generateMetadata. Each product card delivers correct SEO markup: Open Graph, as well as structured data Schema.org (Product / AggregateOffer with aggregated ratings and reviews, BreadcrumbList) in JSON-LD format, generated on the server.

Catalog and product card

The catalog supports pagination, server-side sorting (by novelty, price, name), and full-text search by product name and description through parameterized SQL queries. The product card includes a gallery with zoom and navigation, selection of options (color/size) synchronized in the URL, quantity selection, and a table of bulk discount tiers.

Cart and prices

The cart is implemented on the client side using React Context + reducer with persistence in localStorage (hydration on mount, writing on each change) and a sliding sidebar panel. Prices are stored and calculated in kopecks (integer, currency RUB), which eliminates floating-point rounding errors; formatting to rubles is done via Intl.NumberFormat with Russian locale.

Orders without registration

A key feature is the ability to place orders without registration. The buyer is anonymously identified by a cryptographically secure token (crypto.randomBytes), stored in an httpOnly cookie for a year (sameSite=lax protection). With this token, the user can view their order history and communicate with the store: each order is attached to a live chat with polling for new messages, auto-scrolling, and server-side access checks for each action. Orders support a lifecycle of statuses (new → processing → shipped → delivered/cancelled).

Image processing

Product images are processed through a custom pipeline: uploaded files (including Apple HEIC/HEIF format) are converted and normalized using sharp — auto-rotation based on EXIF, resizing to 1600px on the long side, re-encoding to optimized mozjpeg (q82) — after which they are stored in the database as BYTEA and served through a custom API route with aggressive HTTP caching (max-age=1 year, immutable).

Content management

All site content (texts for the homepage, "About Us" section, statistics, principles, contacts, FAQ, color theme) is moved to an editable key-value settings store in the database, transforming the static landing page into a fully data-driven site. Responsive layout is supported (mobile menu, separate header/footer) and light/dark theme switching via next-themes using CSS variables in the OKLCH color model.

Data mutations and code quality

Data mutations (order placement, review submission, chat messages) are implemented through Server Actions with typed form state (useActionState from React 19) and targeted cache invalidation via revalidatePath. Code quality is maintained with Biome (lint + format) and pre-commit hooks from Husky + lint-staged; React Compiler is enabled for automatic optimization of re-renders.