«Камертон» — наш демо-магазин колонок KEF и hi-fi аксессуаров с настоящей админкой: каталог с точными остатками, заявки, тестовая онлайн-оплата, отзывы с модерацией и сводка продаж. Магазин, продавец, отзывы и заявки вымышлены: это не работа для заказчика, а показ того, как мы делаем магазин целиком.
Заказчик
собственный демо-проект студии: магазин и продавец вымышлены, заказчика нет
Главная демо-магазина. Магазин и продавец вымышлены, фото товаров сгенерированы ИИ
Задача
Небольшому продавцу техники обычно нужно немного: показать товар красиво, честно сказать, сколько его осталось, принять заявку и деньги, а потом самому менять цены без программиста. Готовые конструкторы магазинов дают шаблонную витрину и платную админку, где половина функций лишняя. Мы хотели собрать всё это сами и проверить, сколько получится без тяжёлых зависимостей. Витрина должна выглядеть дорого, как сайт производителя, а админка — понятно человеку, который никогда не работал в CMS (системе управления сайтом).
Для кого
Покупатель с телефона: выбирает колонки, смотрит, что внутри корпуса, оставляет заявку без регистрации.
Продавец: утром открывает сводку, меняет цены и остатки, отвечает на отзывы.
Менеджер: ведёт заявки, но не трогает настройки и пользователей.
Заказчик студии: открывает демо-админку и сам смотрит, как всё устроено.
Что сделали
Каталог — фильтр по категориям и сортировка. Точный остаток на каждой карточке: «В наличии: 3 шт», «Последний», «Под заказ».
Разрезы колонок KEF — у пяти моделей интерактивная схема корпуса: деталь подсвечивается при наведении, динамики выдвигаются по кнопке.
Подбор по комнате — по площади комнаты сайт советует колонки и рисует схему отражений и стоячих волн (низких частот, которые «гудят» в углах).
Заявка и тестовая оплата — корзина не даёт взять больше остатка. Заявку можно оплатить онлайн в тестовом режиме: деньги не списываются.
Страница заявки — покупатель видит шаги «принята → в работе → выполнена» и оплату. Страница обновляется сама, когда продавец меняет статус.
Отзывы — гистограмма оценок, фильтры и форма. Новый отзыв попадает на сайт только после модерации, рейтинг считается по опубликованным отзывам.
Админка — сводка продаж, товары, цены и остатки прямо в таблице, массовая смена цен, категории, заявки, журнал изменений, настройки и резервная копия. Две роли и гостевой вход только для просмотра.
Админку можно открыть самим: админка «Камертона», кнопка «Посмотреть админку» — гостевой вход без пароля, только просмотр, данные покупателей скрыты.
Экраны системы
kamerton.slk.team
Демо-проект: магазин, продавец, отзывы и заявки вымышлены, фото товаров сгенерированы. На компьютере — сводка админки, на телефоне — страница заявки покупателя.
Архитектура
Витрина — статические страницы на TypeScript без фреймворка, их собирает Vite, анимации — GSAP. Сервер — Node.js 24 со встроенной базой SQLite: у сервера нет ни одного npm-пакета, только стандартная библиотека Node. Он отдаёт витрину, каталог, заявки и оплату через свой API (программный интерфейс), а админка — одностраничное приложение без сборки. Всё работает в одном Docker-контейнере на стенде студии. База лежит вне контейнера, перед каждой выкладкой скрипт делает её копию и откатывает версию, если проверка после запуска не прошла.
Проблема. Колонка за 200 тысяч рублей на фото — просто коробка. Чем она лучше дешёвой, словами объяснить трудно: «коаксиальный динамик» и «лабиринт за твитером» покупателю ничего не говорят.
Решение. Для пяти моделей KEF мы нарисовали изометрическую схему (вид под углом, без перспективы) корпуса со снятой стенкой. Деталь подсвечивается при наведении и подписывается, кнопка «Разобрать» выдвигает динамики. Схемы собирает скрипт по данным KEF и обзоров, раскладка внутри обобщена, и сайт так и говорит.
Почему так. Покупатель видит, за что платит, и сам управляет схемой. Это сильнее, чем ещё одно фото.
Цена и остаток — только из базы
Проблема. В корзине цена и количество лежат в браузере. Если продавец за это время поднял цену или товар кончился, заявка уйдёт по старым данным.
Решение. Сервер не верит корзине: при заявке он берёт цены и остатки из базы и пересчитывает сумму. Остаток списывается, когда продавец ставит статус «выполнена», и возвращается при отмене. Массовая смена цен сначала показывает «было → станет» для каждого товара категории.
Почему так. Продавец не продаст то, чего нет, и не получит заявку по цене недельной давности.
Страница заявки без регистрации
Проблема. Покупателю нужно видеть, что с его заявкой, но заводить аккаунт ради одной покупки никто не хочет.
Решение. Ссылка на страницу заявки содержит случайный ключ (128 бит), без него заявку не открыть. Пока вкладка открыта, страница раз в 15 секунд спрашивает сервер о статусе и сразу обновляется, когда покупатель к ней возвращается.
Почему так. Покупатель следит за заявкой по одной ссылке, а чужую заявку подобрать нельзя.
Гостевой вход в админку
Проблема. Заказчику студии полезно потрогать админку самому, но давать пароль от демо-магазина нельзя: кто-нибудь удалит товары или увидит контакты покупателей.
Решение. У админки три роли. Владелец может всё. Менеджер ведёт товары, цены и заявки, но не видит настройки и пользователей. Гость открывает админку кнопкой «Посмотреть админку»: ему видно всё, сохранить он ничего не может, а имена и контакты покупателей скрыты. Права проверяет сервер, а не интерфейс.
Почему так. Демо открыто любому без риска для данных.
Цифры
75 сквозных проверок API на временной базе: вход и защита от перебора паролей, роли, цены и остатки, заявка, тестовая оплата, гостевой доступ.
0 npm-пакетов у сервера: только Node.js 24 и встроенный SQLite.
20 товаров в 6 категориях на витрине, у 5 моделей KEF — интерактивный разрез корпуса.
8 неверных паролей за 15 минут — и вход блокируется даже с верным паролем.
3 роли в админке: владелец, менеджер и гость только для просмотра.
Честно о проекте
Это демо-проект студии, а не заказ. Магазин «Камертон», продавец, его рейтинг, отзывы, заявки и выручка в сводке вымышлены.
Оплата работает только в тестовом режиме: встроенный демо-шлюз или тестовый магазин ЮKassa. Настоящие деньги не списываются.
Фото товаров сгенерированы нейросетью (ChatGPT). Разрезы корпусов — схемы по открытым данным KEF и обзорам, а не чертежи производителя.
KEF и другие названия — товарные знаки их владельцев. Мы не связаны с KEF.
GSAP — сторонняя библиотека анимации.
Инженеры ведут, ИИ-агенты ускоряют; каждое изменение проходит тесты и ревью.
Обсудить похожую задачу
Напишите, что нужно сделать, кто будет пользоваться и к какому сроку.