Веб-приложение · витрина · чекаут · заказы
SPA-каталог на React
Витрину часто показывают скриншотами или тяжёлой CMS. Здесь чистый React SPA со своим фирменным стилем и всем, что покупатель ждёт от магазина: поиск понимает «ljcrf» как «доска», фильтры не заводят в пустую выдачу, а ссылку на подборку можно отправить в чат. Кнопка «Назад» в браузере работает как на обычном сайте. Корзина подсказывает, что добавить до бесплатной доставки, а удалённый товар возвращается одной кнопкой. Оплата в демо не списывается — это заглушка, как в остальных демо без платёжного шлюза.
Сценарий: Магазин посуды и вещей для кухни «Полка» — вымышленный.
Открыть демо
Корзина, избранное и заказы хранятся в браузере; «Начать заново» в шапке всё очищает. На телефоне фильтры открываются шторкой снизу.
Приложение работает в браузере: на сервер ничего не отправляется.
Что показывает демо
Как попробовать
Найдите товар
Наберите в поиске «ljcrf» — магазин поймёт, что это «доска» в английской раскладке, и покажет подсказки.
Сузьте выдачу
Материал «Дерево» и цена до 2 500 ₽ — счётчики покажут, сколько останется. Скопируйте адрес страницы: по нему откроется та же подборка.
Соберите корзину
Отметьте товар сердечком, добавьте в корзину, введите промокод ПОЛКА10. Удалите товар и верните его кнопкой «Вернуть».
Оформите и отследите
Контакты → окно доставки → оплата (заглушка). Потом откройте «Мои заказы»: там статусы, повтор и отмена.
Без платных нейросетей
Каталог и остатки зашиты в код; корзина, избранное и заказы хранятся только в браузере; статусы заказа движутся по часам, а не по событиям склада; оплата и уведомления о поступлении не отправляются; фото товаров сгенерированы. В рабочем проекте витрина ходит в API каталога и остатков, а заказы, статусы и подписки живут на сервере.
Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.
Что будет в рабочем проекте
- API каталога и остатков, поиск с морфологией на сервере
- Корзина и избранное синхронизируются между устройствами
- Идемпотентный POST заказа, webhook оплаты, статусы из склада и курьерской службы
- Промокоды и слоты доставки из админки, SMS о поступлении
- Метрики: поиск без результатов, add-to-cart, начало чекаута, покупка
Стек
- Все демо по стеку:
- React
- TypeScript
- React 19
- TypeScript
- Vite
- Tailwind CSS
Комментарий от разработчика
Антон Гончаров
Разработчик ИИ-систем · Python
Для бизнеса
- Клиент сам находит товар, собирает корзину и проходит чекаут — меньше ручных заказов в чате.
- Ссылка на подборку и «Повторить заказ» возвращают покупателя без лишних шагов.
- Подписка на поступление и подборка до бесплатной доставки не дают уйти с пустыми руками.
Для разработчиков
- Поиск, фасеты, промокоды, слоты, статусы и разбор адреса — чистые функции с тестами.
- Состояние страницы — в query-параметрах через History API: «Назад» и ссылки работают без роутера.
- Счётчик фасета считается без его собственного выбора — клик не ведёт в пустую выдачу.
Советы
Совет 01
Исправление раскладки и подсказки поиска дешевле любой рекламы: «ничего не найдено» — это ушедший покупатель.
Совет 02
Идемпотентный ключ заказа делайте на клиенте и принимайте на сервере — иначе двойной клик дороже любой скидки.
Нужен такой же для вашего бизнеса?
Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.
Другие демо в этом разделе
Все демо- работает
Веб-приложение · распознавание речи · нейросеть в браузере
Голосовая заявка
Клиент наговаривает заявку голосом, а менеджер получает готовую карточку: имя, компания, телефон, бюджет, сроки, задача и оценка — горячий лид или нет. Речь распознаёт Whisper прямо в браузере.
- React
- TypeScript
- Нейросеть в браузере
- работает
Веб-приложение · звонок в браузере · распознавание и синтез речи
Голосовой оператор доставки
Робот принимает заказы по телефону вместо администратора: слушает, переспрашивает, проверяет адрес по зонам доставки, считает сумму и читает заказ перед подтверждением. Звонок идёт прямо в браузере — кнопка «Позвонить», без номера телефона.
- React
- TypeScript
- Нейросеть в браузере
- работает
Веб-приложение · распознавание речи · контроль отдела продаж
Речевая аналитика звонков
Звонок отдела продаж превращается в расшифровку по ролям, оценку по скрипту и заполненную карточку сделки: клиент, контакты, интерес, озвученная цена, следующий шаг и задача менеджеру. Речь распознаёт Whisper прямо в браузере.
- React
- TypeScript
- Нейросеть в браузере
- работает
Веб-приложение · документы · DOCX и PDF
Генератор КП и договора
Менеджер заполняет анкету сделки — покупатель, товары, скидка, НДС, — а коммерческое предложение, договор поставки и счёт собираются на листе A4 на глазах. На выходе — Word, PDF или JSON.
- React
- TypeScript
- работает
Веб-приложение · B2B · КП в PDF
Конфигуратор цены
Менеджер собирает заказ на все окна квартиры: тип, размер, створки на схеме, профиль, стеклопакет и цвет. Правила производства проверяются сразу, скидки и рассрочка считаются сами, КП с номером уходит в PDF.
- React
- TypeScript
- работает
Веб-приложение · финансы · сравнение
Ипотечный калькулятор
Пять программ банков на одном экране: какие подходят клиенту и почему остальные нет. Льготная ставка от застройщика, дифференцированный платёж, досрочное погашение, нагрузка на доход и налоговый вычет.
- React
- TypeScript
- работает
Веб-приложение · смета · PDF
Калькулятор сметы ремонта
Размеры комнат превращаются в площади пола, стен и потолка, а те — в работы по этапам. Работа и материалы отдельно, срок по выработке бригады, график оплаты и версии сметы для торга с клиентом.
- React
- TypeScript
- работает
Машинное обучение на Python · работает в браузере
Аналитика отзывов с маркетплейсов
Отзывы с Wildberries, Ozon и Яндекс Маркета через API продавца: модели scikit-learn определяют тональность и о чём пишут покупатели, тревога поднимается в первую неделю всплеска жалоб, новые темы находятся сами, а ответ уходит обратно через API площадки. Модели обучаются прямо в браузере.
- Python
- React
- TypeScript
- работает
Виджет для сайта · нативный JS · одна строка
Виджет AI-консультанта
Консультант для любого сайта, который ставится одной строкой: отвечает по базе знаний со ссылкой на источник, собирает заявку и зовёт оператора. Написан на чистом JavaScript без фреймворков — весь виджет 21 КБ в gzip.
- Нативный JS
- работает
Виджет для сайта · нативный JS · заявки
Квиз-форма заявки
Квиз вместо длинной формы: шесть вопросов с ветвлением, в конце — расчёт по прайсу. Менеджер получает заявку с оценкой «горячая / тёплая / холодная» и источником рекламы, а вкладка «Аналитика» показывает, на каком шаге уходят люди.
- Нативный JS
- работает
Backend на Python · вебхуки → amoCRM и Битрикс24
Интеграционный хаб заявок
Заявки с сайта, из рекламы, звонков, почты и ботов приходят на вебхуки, приводятся к одному виду, проверяются на дубли, распределяются по менеджерам и доставляются в amoCRM и Битрикс24 — с повторами, когда CRM недоступна.
- Python
- React
- TypeScript