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

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

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

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

Сценарий: Транспортная компания «Меридиан» из Воронежа — вымышленная: 18 городов, 7 складов и терминалов, сборные грузы и машины от Газели до фуры.

Скриншот демо: Сайт транспортной компании

Открыть демо

Открыть сайт

Посчитайте перевозку рефрижератором — сборный груз честно откажет, а машина покажет загрузку по весу и объёму. Вставьте в ИИ-заявку пример накладной: имя и телефон подсветятся как пропущенные. Найдите груз МР-240517-3 и попробуйте номер с опечаткой. Заявки, подписки на уведомления, бронь склада и анкеты перевозчиков появятся в панели владельца.

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

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

  • Калькулятор: маршрут по 18 городам, вес и объём, кузов, срок «стандарт», «экспресс» или «к дате» — два варианта сразу с ценой, сроком и датами забора и доставки

  • Сборный груз считается по платному весу (бо́льший из веса и объёма × 250 кг), отдельная машина — подбором кузова от Газели до нескольких фур с загрузкой по весу и объёму

  • Если не успеваем к дате или сборным так не возят — объяснение причины вместо пустого результата

  • Отслеживание по номеру с контрольной цифрой: машина на схеме маршрута, пройденный путь, прогноз прибытия, этапы и подписка на уведомления в Telegram, SMS или MAX

  • ИИ-заявка: письмо, накладная или сообщение из мессенджера разбираются в поля — города, дата, вес, кузов, температура, груз, контакты, компания и ИНН; найденное подсвечено в тексте, пропущенное — в форме

  • Склады и терминалы на схеме с фильтрами, карточка точки с фото и расчётом хранения по паллетоместам и температурному режиму

  • Анкета перевозчика в четыре шага: компания, парк, направления и документы — допуск сразу с объяснением по каждому пункту и оценкой рейсов в неделю

  • Документы для скачивания и реквизиты с копированием в один клик; ИНН, ОГРН и счета проверены по контрольным суммам

  • Панель владельца с заявками на перевозку, подписками, бронями складов и анкетами перевозчиков

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

  1. Посчитайте перевозку

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

  2. Оформите заявку

    Нажмите «Оформить заявку» и введите ИНН 7707083894 — проверка контрольной суммы его не пропустит. Исправьте на 7707083893 и отправьте.

  3. Разберите накладную

    В блоке «ИИ-заявка» нажмите «Транспортная накладная»: найденные поля подсветятся зелёным, имя и телефон — как пропущенные. Допишите их, и цена посчитается сама.

  4. Найдите груз

    Введите МР-240533-5 — сайт поймает опечатку. Выберите отправление Воронеж → Екатеринбург и подпишитесь на уведомления.

  5. Станьте перевозчиком

    Заполните анкету: компания с ИНН из подсказки, машины, направления и документы — допуск и число рейсов в неделю появятся сразу.

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

Платных запросов к нейросетям нет: письмо или накладную разбирают правила и словари прямо в браузере — города по предлогам и подписям, даты словами и числами, тонны и паллеты, ИНН с проверкой контрольной суммы. В рабочей версии текст понимает языковая модель, а справочник городов, тариф и проверка ИНН даются ей как инструменты — она не выдумает город и не посчитает цену сама. Отправления, их движение и склады смоделированы; компания и реквизиты — вымышленные.

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

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

  • Тарифы и расчёт — из TMS или 1С:Логистика по API, расстояния — по картографическому сервису (Яндекс Карты, OSRM)
  • Отслеживание — данные GPS-трекеров (Wialon, Omnicomm) и статусы из TMS; уведомления — Telegram-бот, SMS-шлюз и MAX
  • ИИ-заявка — языковая модель (YandexGPT или GigaChat) со справочниками и тарифом как инструментами; заявка уходит в CRM и TMS
  • Анкеты перевозчиков — проверка по ФНС и реестру недобросовестных поставщиков, договор и документы по ЭДО

Стек

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Server Actions

Комментарий от разработчика

Антон Гончаров

Разработчик ИИ-систем · Python

Для бизнеса

  • Цена на сайте за минуту вместо «оставьте заявку, менеджер перезвонит» — клиент сравнивает сборный груз и машину сам и приходит с готовым решением.
  • Заявка из письма или накладной без перепечатывания: диспетчер получает заполненные поля, а клиент дописывает только то, чего не было в тексте.
  • Отслеживание по номеру снимает звонки «где моя машина» — самую частую нагрузку на диспетчерскую.
  • Анкета перевозчика сразу говорит, чего не хватает для допуска, — менеджер получает подготовленных перевозчиков, а не пустые заявки.

Для разработчиков

  • Тариф, подбор машины, сроки, разбор заявки, положение машины и проверки реквизитов — чистые функции с тестами; калькулятор и ИИ-заявка считают цену одной и той же функцией.
  • Номер отправления несёт контрольную цифру по алгоритму Луна: опечатка ловится до поиска, разный ввод — «мр 240517 3», «MP-240517-3» — приводится к одному виду.
  • Схема — SVG в простой проекции координат городов; подписи — HTML поверх, поэтому на телефоне не мельчают, а рамка подстраивается под маршрут и размер карточки.

Советы

  • Совет 01

    Показывайте, почему вариант недоступен: «рефрижератор сборным не возим» полезнее, чем пустая карточка или цена, которую потом пересчитают.

  • Совет 02

    Проверяйте ИНН и счета по контрольным суммам ещё в форме — это бесплатно и отсекает большую часть опечаток до бухгалтерии.

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

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

Написать в 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