«Отан» - обучающая платформа для автошколы
Закрытая LMS-платформа на 1000+ уроков с тремя уровнями доступа, видеозащитой и казахской локализацией.
Клиент Автошкола «Отан»
Что было не так
Школа вела учёт в трёх местах сразу. Студенты в одной таблице, уроки в другой, видеоматериалы где придётся (на дисках и в облаке).
Прогресс каждого ученика восстанавливали по памяти. Нигде не было видно, кто на каком уроке остановился, кто досмотрел материал и кто перестал учиться.
Видео при этом нужно было показывать так, чтобы его нельзя было скачать и раздать.
Что решили и почему
Решили делать закрытую обучающую платформу.
Три уровня доступа (студент, преподаватель, администратор), потому что у них разные задачи. Студенту нужен свой прогресс, преподавателю группа, администратору вся школа.
Видео защищено от скачивания, и платформа отслеживает просмотр. Видно, открыл ученик урок или досмотрел до конца, поэтому прогресс настоящий.
Тесты проверяются автоматически. Есть отдельный режим работы над ошибками, где ученик решает только то, в чём ошибся.
Доступ ограничен по дате. У обучения есть срок, и платформа закрывается сама.
Весь интерфейс на казахском. Школа казахстанская, ученики учатся на родном языке.
Как делал
- 01
Разобрал текущий процесс школы (где что лежит, кто за что отвечает, что теряется).
- 02
Спроектировал систему (роли и права, структура тем и уроков, режимы экзамена, что видит каждая роль).
- 03
Вёл разработку этапами. Базовая платформа и БД, затем UX, затем фильтры и отслеживание активности, затем модуль видеоуроков, затем мобильный интерфейс и экран результатов. На каждый этап был отдельный план с проверяемым результатом.
- 04
Отлаживал пограничные случаи, которые вылезают только в реальной работе. Например, студент начинал экзамен и закрывал вкладку, а незавершённая сессия висела и мешала начать новую. Сделал автоматическое закрытие таких сессий при старте следующей.
- 05
Задеплоил, платформа работает в продакшене.
Стек проекта
- next.js / react / typescript - сама платформа
- supabase - авторизация и база данных (кто вошёл, что ему доступно)
- Разграничение прав - три роли: студент, преподаватель, администратор
- Видеоплеер с защитой и трекингом - видео нельзя скачать, видно кто досмотрел
- react-hook-form + zod - формы и проверка вводимых данных
- shadcn/ui + tailwind - интерфейс
- framer motion - переходы и анимации
- Ограничение доступа по дате - обучение закрывается по истечении срока
Результат
Платформа в продакшене, обслуживает поток школы.
Более 1000 уроков в системе.
Прогресс каждого ученика виден в одном месте.
Время на администрирование сократилось примерно на 70%.
Похожие кейсы
Farabi Business School (KazNU MBA) - сайт бизнес-школы
Трёхъязычный сайт бизнес-школы с квизом подбора программы.
- Было
- У бизнес-школы при национальном университете был сайт с неактуальной информацией и низкой конверсией.
- Сделали
- Решили пересобрать сайт так, чтобы он принимал заявки.
- Стало
- Сайт работает в домене университета, проект сдан и принят.
«Вверх» - посадочная страница онлайн-интенсива
Посадочная страница интенсива, которая отвечает на главные сомнения (совмещение с работой и цена).
- Было
- Автор запускала курсы через instagram, отдельной посадочной страницы не было.
- Сделали
- Страницу построили вокруг конкретных сомнений покупателя.
- Стало
- У интенсива есть своя посадочная страница.