Сайт на Next.js · Python в браузере, ИИ-наставник
Онлайн-школа с кабинетом ученика
Онлайн-школы продают курсы обещаниями, а ученики бросают учёбу на первой домашке, не дождавшись проверки. Здесь курс можно попробовать сразу: задача на Python решается на лендинге и проверяется автотестами за секунду, а ИИ-ревью объясняет ошибку по-человечески. Тест уровня собирает программу под опыт и считает срок выпуска, тарифы — рассрочку и налоговый вычет. В кабинете ученика — уроки с прогрессом, домашние задания с автопроверкой, ИИ-наставник, который отвечает по материалам курса со ссылками на уроки, оплата частями и сертификат, подлинность которого работодатель проверяет по QR-коду.
Сценарий: Онлайн-школа «Сигма» из Нижнего Новгорода, курс «Аналитик данных на Python» и демо-ученик Алексей — вымышленные: три урока пройдено, два платежа из двенадцати внесены, впереди четыре домашних задания.
Открыть демо
Кабинет — по кнопке «Кабинет» в шапке, вход в один клик как демо-ученик.
Заявки с демо-сайта видны только вам, в «Панели владельца»: сервер проверяет форму и ничего не хранит.
Что показывает демо
Как попробовать
Решите задачу
В блоке «Попробуйте прямо сейчас» нажмите «Запустить тесты» — увидите две упавших проверки и разбор. Исправьте деление на ноль и добавьте round — тесты станут зелёными.
Пройдите тест уровня
Ответьте на шесть вопросов: при уверенном Python и SQL два модуля уйдут из программы, срок выпуска сократится. Оставьте имя и телефон — куратор пришлёт программу.
Загляните в кабинет
Войдите как демо-ученик, сдайте задание урока 1.4, спросите ИИ-наставника «Как округлить до двух знаков?», а потом «Где купить слона?» — и передайте вопрос куратору.
Оплатите и получите сертификат
В «Оплате» внесите следующий платёж, в «Сертификате» засчитайте задания и получите сертификат — QR-код откроет страницу проверки.
Откройте панель владельца
Заявки на урок, результат теста, консультация по тарифу, вопрос куратору и платёж лежат во вкладке «Заявки» — как в CRM школы.
Без платных нейросетей
Платных запросов к нейросетям нет: ИИ-ревью построено на правилах по результатам тестов и коду, ИИ-наставник находит ответ поиском по материалам курса и цитирует его со ссылками. В рабочей версии на этих местах языковая модель с теми же источниками. Код выполняется настоящим Python в вашем браузере. Оплата имитируется, прогресс хранится только в вашем браузере, заявки видны только вам в «Панели владельца». Школа, преподаватели, отзывы и цены — вымышленные.
Демо работает без API-ключей OpenAI, YandexGPT или GigaChat. Там, где рабочая система обращается к модели, стоит локальная заглушка с тем же интерфейсом — поэтому демо бесплатно, всегда доступно и ничего не выдумывает.
Что будет в рабочем проекте
- LMS школы (своя или GetCourse, Stepik) через API: прогресс, домашние задания и оплаты хранятся на сервере, кабинет — та же витрина
- Проверка кода в изолированной песочнице на сервере для заданий с базами данных и файлами; в браузере — быстрые задачи без нагрузки на сервер
- ИИ-ревью и ИИ-наставник — языковая модель (YandexGPT или GigaChat) с поиском по урокам и комментариями наставников в запросе
- Рассрочка через банк-партнёра (Т-Банк, Сбер), оплата через эквайринг с СБП, справки для вычета формируются автоматически
- Реестр сертификатов с подписью; заявки с лендинга — в amoCRM или Битрикс24 с результатом теста уровня
Стек
- Все демо по стеку:
- Next.js
- React
- TypeScript
- Python
- Next.js 16
- React 19
- TypeScript
- Tailwind CSS 4
- Pyodide (Python 3.14 в WebAssembly)
- Server Actions
Основано на
Книги и дисциплины, идеи из которых работают в этом демо.
Книга · Келли Макгонигал
Сила воли. Как развить и укрепить
Кабинет ученика с календарём активности и серией дней: привычку учиться поддерживает видимый прогресс, а не усилие через силу.
Комментарий от разработчика
Антон Гончаров
Разработчик ИИ-систем · Python
Для бизнеса
- Задача на Python решается прямо на лендинге, без регистрации: посетитель чувствует курс руками, а не читает обещания, — и записывается на урок охотнее.
- Тест уровня собирает программу под опыт человека и называет срок выпуска: менеджер звонит уже с готовым треком, а не с общим прайсом.
- Автопроверка и ИИ-ревью снимают с наставников типовые ошибки, ИИ-наставник отвечает на вопросы по урокам ночью — наставник тратит время только на сложное.
Для разработчиков
- Код ученика выполняет настоящий CPython 3.14 в WebAssembly (Pyodide) в Web Worker: сервер не нужен, бесконечный цикл обрывается по таймауту через terminate.
- Тесты — вызовы функции и ожидаемые значения; ревью строится по результатам тестов и коду: деление на ноль, пропущенный return, нет округления, сортировка по ключу вместо значения.
- ИИ-наставник — поиск BM25 по урокам, FAQ и правилам с выбором подходящих предложений и ссылками на источник; номер сертификата с контрольной цифрой ловит опечатку ещё до запроса в реестр.
Советы
Совет 01
Дайте попробовать продукт до формы: живая задача на первом экране продаёт курс лучше отзывов.
Совет 02
Ограничьте ИИ-наставника материалами курса и показывайте источник: ученик проверит ответ, а школа не отвечает за выдумки модели.
Нужен такой же для вашего бизнеса?
Расскажите о задаче — отвечу, что из демо подойдёт вам, сколько это займёт и что понадобится с вашей стороны.
Другие демо в этом разделе
Все демо- работает
Сайт на 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 · запись по госномеру, фотоотчёт, согласование
Автосервис с записью и статусом ремонта
Сайт автосервиса: запись по госномеру или 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