Admin Panel for the Online Store 'Korobki-optom'

A fully functional admin panel built on top of an existing cardboard packaging online store (Next.js 16 / React 19 / PostgreSQL). This is the second phase of the project: a closed management interface has been added to the public site, transforming the store into a fully self-administered product — the owner manages the catalog, orders, reviews, and all site content without developer involvement and without direct access to the database.

Authentication and access control

The entire `/admin` section is secured by server middleware (proxy): each request to the admin panel checks an httpOnly cookie with a token; in the absence of or mismatch — a redirect to the login page. Authentication is password-based (compared to the environment variable ADMIN_PASSWORD), the session lasts 7 days in a secure cookie with httpOnly and sameSite=lax flags (protection against XSS and CSRF). All admin pages are marked as force-dynamic — data is always up-to-date, without static caching.

Interface and dashboard

The interface is built as a classic CRUD dashboard using server components of the App Router with adaptive sidebar navigation (fixed sidebar on desktop, off-canvas menu on mobile). The main dashboard page concurrently (Promise.all) aggregates summaries across all sections — the number of products, orders, reviews — and displays cards with live counters. Next to the 'Orders' and 'Reviews' items in the sidebar, unread badges are shown: the number of new orders and reviews awaiting moderation.

Product management

Product management — full CRUD with URL-slug generation through automatic transliteration from Cyrillic to Latin. Prices are entered in rubles and stored in kopecks (integer). Advanced image gallery management is implemented: uploading multiple files at once with preliminary compression in the browser (canvas, resize, and re-encoding to JPEG before sending), server-side normalization via sharp (support for Apple HEIC/HEIF format through heic-convert, auto-rotation based on EXIF, mozjpeg) and storage in the database as BYTEA. Images can be managed directly in the form — deleting, reordering with arrows, and designating a main image. The request body limit has been raised to 50 MB for uploading heavy photos.

Orders section

The orders section provides a feed with server-side sorting (by date, status, amount) and expandable cards. Unread orders are visually highlighted; 'unread' is calculated on the database side with a complex SQL condition — an order is considered unread if the admin has not opened it yet OR if the customer has sent a new message after the last view. When the card is expanded, the order is automatically marked as read. Inside — order composition, recipient contacts, lifecycle status switch (new → processing → shipped → delivered / canceled) and an embedded chat with the customer with message polling every 4 seconds; the admin's reply simultaneously marks the order as read.

Review moderation

Review moderation — a separate queue: unapproved reviews are raised to the top and highlighted, with actions 'approve', 'hide', and 'delete' available for each, instantly invalidating public product pages.

Site content management

A separate layer — managing site content without code changes. Through admin panel forms, the main page (hero headers), 'About Us' page (text, dynamic blocks of statistics, principles, and contacts in JSON), FAQ list (with adding, deleting, and reordering questions), and general settings (title, description, color theme selection from ready-made presets) are edited. All this data is stored in a key-value settings table and is immediately reflected on the public site.

Server Actions and database

Technically, all data writing is implemented on Server Actions (without a separate REST API): forms use typed state useActionState (React 19), select fields are automatically submitted on change via requestSubmit, and after each mutation, there is targeted cache invalidation of affected routes via revalidatePath, so changes immediately appear both in the admin panel and on the storefront. Each server action re-checks administrator rights. Database access is through the same connection pool with parameterized queries (protection against SQL injection) in the isolated schema `corobki`.