Перейти к содержимому
Антон ГончаровРазработчик ИИ-систем
RUEN

Сайт маркетплейса на Next.js · FastAPI · PostgreSQL

Маркетплейс «Полка»

На витрине хочется и каталог, и ответ на вопрос «что у вас есть до 3000». Здесь фраза становится фильтрами, а цена в ответе берётся из карточки, которая лежит в базе. Заказ сохраняется в PostgreSQL и открывается в кабинете по телефону.

Сценарий: Маркетплейс «Полка» из Казани — вымышленный: шесть мастерских, сто товаров для дома, склад в том же городе.

Скриншот демо: Маркетплейс «Полка»

Открыть демо

Открыть сайт

Наберите «лампа до 3000» или спросите консультанта «хочу слона» — второго в каталоге нет, и он так и скажет. Оформите заказ и войдите в кабинет кодом 4237: заказ придёт из базы. Заказ и вопрос продавцу появятся в панели владельца.

Заявки с демо-сайта видны только вам, в «Панели владельца»: сервер проверяет форму и ничего не хранит.

Что показывает демо

  • Каталог из ста товаров восьми категорий и шести продавцов: фильтры, порядок, цена и остаток со склада

  • Поиск словами: «лампа до 3000» или «плед из льна» разбираются в категорию, потолок цены и материал

  • Консультант отвечает только по каталогу и коротким правилам доставки, возврата и оплаты. Чего нет в базе, того нет в ответе

  • На карточке — похожие товары той же категории, сначала того же продавца

  • Корзина: курьер 390 ₽ и бесплатно от 5 000 ₽ по товарам, пункт выдачи бесплатно

  • Семь пунктов выдачи в пяти городах, в Казани три. На схеме города пункт выбирается и подставляется в корзину. Хранение 5 дней

  • Путь заказа по номеру вида ПК-0001: этапы считаются от времени оформления. Склад и перевозчик не подключены

  • Заказ пишется в PostgreSQL. Деньги не списываются

  • Кабинет по телефону и коду 4237: заказы из базы, повтор заказа, заявка на возврат в этом браузере, избранное, недавно смотрели, адреса и профиль

  • Вопрос, на который каталог не ответил, можно передать продавцу — заявка попадает в панель владельца

Как попробовать

  1. Найдите словами

    На первом экране наберите «лампа до 3000» или откройте «плед из льна». В каталоге над сеткой написано, как запрос был понят.

  2. Спросите консультанта

    Кнопка «Спросить полку» слева внизу. Спросите «хочу слона», затем «сколько стоит доставка».

  3. Посмотрите похожие

    Откройте товар и блок «Похожие». У двух позиций в каталоге кнопка «В корзину» закрыта: их нет на складе.

  4. Оформите заказ

    На странице «Доставка» выберите пункт в Казани — он подставится в корзину, доставка станет бесплатной. Курьером товар дешевле 5 000 ₽ едет за 390 ₽. Номер заказа — вида ПК-0001.

  5. Откройте путь

    На странице «Где заказ» введите номер. Этапы идут от времени оформления: принят, собран, в пути, пункт или курьер. Склад не подключён.

  6. Откройте кабинет

    Войдите как Анна, код 4237. В обзоре — заказ из базы. Дальше можно повторить заказ, оставить заявку на возврат, открыть избранное, просмотренные и адреса.

Без платных нейросетей

Платных запросов к нейросетям нет: фразу разбирают правила на сервере — категория, цвет, «до» и «от» с ценой, формы слов вроде «льна». Консультант называет только товары, которые прошли этот фильтр, и их цену из базы. В рабочей версии ту же схему делает языковая модель, а каталог, остатки и доставка даются ей как инструменты — она не придумает товар и не назовёт чужую цену. Мастерские, товары и заказы демо — вымышленные.

Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.

Что будет в рабочем проекте

  • Каталог, остатки и цены — из учёта продавцов или PIM, заказ — в OMS. Оплата — эквайринг и СБП, чек по 54-ФЗ
  • Пункты и трек — API СДЭК или другой службы: тариф, карта пунктов, статусы отправления. Здесь этапы считаются от времени заказа
  • Поиск и консультант — языковая модель (YandexGPT или GigaChat) с каталогом, остатками и правилами доставки как инструментами
  • Кабинет — по телефону и коду или через вход по SMS. Избранное и корзина могут жить на сервере, а не только в браузере
  • Заявки из кабинета и вопросы продавцу — в CRM, продавцу уходит уведомление

Стек

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • FastAPI
  • PostgreSQL

Нужен такой же для вашего бизнеса?

Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.

Написать в TelegramОставить заявку

Другие демо в этом разделе

Все демо

  • Сайт на Next.js · лендинг услуги

    работает

    Лендинг стоматологии

    Одностраничный сайт клиники, который приводит пациентов: квиз подбирает лечение, калькулятор считает план с рассрочкой, онлайн-запись показывает свободное время врачей, ИИ-консультант отвечает по прайсу. Заголовок проверяется A/B-тестом, заявки и цели видны в панели владельца.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · B2B, многостраничный

    работает

    Сайт производственной компании

    Многостраничный сайт завода металлоконструкций, который продаёт сам: калькулятор считает стоимость здания с живым чертежом, конструктор собирает техзадание, кейсы фильтруются по отрасли, на вакансии можно откликнуться с резюме, а поиск по сайту понимает запросы своими словами.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · каталог, карта, сравнение

    работает

    Каталог недвижимости с умным поиском

    Каталог квартир агентства недвижимости: напишите «двушка у метро до 12 млн» — поиск сам выставит фильтры, покажет квартиры на карте города, сравнит до четырёх и пришлёт новые в Telegram.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · ИИ-перевод, SEO по языкам

    работает

    Экспортный сайт на четырёх языках

    Сайт экспортёра алтайского мёда на русском, английском, китайском и арабском: переведённые адреса страниц, SEO по языкам, калькулятор оптовой цены с доставкой и студия перевода, которая проверяет черновик нейросети по глоссарию.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · кабинет, ИИ-помощник, Telegram

    работает

    Личный кабинет клиента

    Кабинет клиента типографии: заказы с этапами производства, согласование макета с правками прямо на макете, счета с оплатой по СБП, документы с электронной подписью, новый заказ с расчётом цены, чат с ИИ-помощником и менеджером, уведомления в Telegram.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · Python в браузере, ИИ-наставник

    работает

    Онлайн-школа с кабинетом ученика

    Онлайн-школа аналитики: лендинг с задачей на Python, которая проверяется прямо в браузере, тест уровня с персональной программой, рассрочка с расчётом налогового вычета, кабинет ученика с домашними заданиями и ИИ-ревью, ИИ-наставник по материалам курса и сертификат с проверкой по QR-коду.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · запись по госномеру, фотоотчёт, согласование

    работает

    Автосервис с записью и статусом ремонта

    Сайт автосервиса: запись по госномеру или VIN в свободные окна постов, разбор «что стучит?» с вероятными причинами и вилкой цены, статус ремонта с фотоотчётом, согласованием доп. работ и оплатой по ссылке, гараж с историей обслуживания и прогнозом следующего ТО.

    • Next.js
    • React
    • TypeScript

  • Сайт на Next.js · разбор ситуации, претензии, калькуляторы

    работает

    Юридическая компания с ИИ-разбором

    Сайт юрфирмы: ситуация своими словами прямо в шапке, ИИ-разбор с оценкой перспектив, претензия в Word, госпошлина, неустойка и срок давности, чек-лист документов, ход дела в личном кабинете, конструктор цены и запись к юристу.

    • Next.js
    • React
    • TypeScript

  • Сайт SaaS на Next.js · песочница, кабинет, API

    работает

    SaaS: ИИ-ответы на отзывы WB и Ozon

    Сайт и кабинет SaaS-сервиса, который отвечает на отзывы Wildberries и Ozon: песочница с разбором отзыва и проверками, автопилот по рейтингу, очередь с согласованием, аналитика тем, тарифы с калькулятором окупаемости, подключение магазина по ключу, счёт по ИНН и документация API с живой консолью.

    • Next.js
    • React
    • TypeScript

  • Сайт ресторана на Next.js · меню, бронь, доставка

    работает

    Ресторан с доставкой

    Сайт ресторана с доставкой: меню с фильтрами по аллергенам и диетам, ИИ-подбор ужина по обычной фразе, бронь стола по схеме зала со свободными столами на выбранное время, корзина с зонами доставки, минимальным заказом и промокодами, отслеживание заказа с курьером на карте.

    • Next.js
    • React
    • TypeScript

  • Сайт фитнес-студии на Next.js · запись, абонементы, кабинет

    работает

    Фитнес-студия

    Сайт фитнес-студии малых групп: расписание на неделю с местами и записью в два клика, лист ожидания с автоматическим переносом в группу, абонементы с заморозкой из кабинета, ИИ-план тренировок на 4 недели по пяти вопросам и личный кабинет со статистикой посещений.

    • Next.js
    • React
    • TypeScript

  • Сайт IT-конференции на Next.js · программа, билеты, нетворкинг

    работает

    Сайт конференции

    Сайт двухдневной конференции: программа по залам и трекам с личным расписанием, ИИ-подбор докладов без пересечений по роли и свободному тексту, билеты волнами с промокодами и скидкой команде, QR-код на каждого участника с проверкой на входе и нетворкинг с подбором собеседников и встречами в перерывах.

    • Next.js
    • React
    • TypeScript

  • Корпоративный сайт логистики на Next.js · калькулятор, трекинг, ИИ-заявка

    работает

    Сайт транспортной компании

    Корпоративный сайт транспортной компании: калькулятор, который сразу сравнивает сборный груз и отдельную машину, отслеживание груза с машиной на карте, ИИ-разбор заявки из письма или накладной с подсветкой пропущенных полей, карта складов и терминалов с расчётом хранения, анкета перевозчика с проверкой допуска и реквизиты с проверкой контрольных сумм.

    • Next.js
    • React
    • TypeScript