Как я навайбкодил LMS с 100 000+ строк кода
Я уже неоднократно спойлерил, что делаю LMS для своих тренингов. Люди все больше положительно отзывались о материалах, но в обратной связи мне очень часто возвращали, что хочется более плавного образовательного опыта взаимодействия с платформой.
Для первых потоков я решил не брать готовые LMS и вот почему:
- отвратительный UX у большинства, например, Getcourse просто отвратный, а стоит немало денег
- другие LMS типа опенсорсных Open LMS - слишком тяжелые
- единственное, что мне понравилось - Frappe LMS, но немного не то
- мне не хватало функционала, я хотел больше контроля, свою структуру материалов, хотел редактировать материалы как в Notion
Поэтому я стартанул, подняв Docmost у себя на сервере, где хранил материалы, а для домашек написал телеграм-бота. Это было быстро и бесплатно, но не совсем удобно. Поэтому я начал потихоньку пилить свою LMS.
Какие инструменты я использовал:
1. Google AI Studio - для написания ТЗ, структурирования информации и понимания того, что я хочу
2. Stitch - это то, что ОЧЕНЬ сильно упростило мне работу с дизайном, подробнее писал тут
3. Cursor - моя основная IDE для написания кода
Какой стек я выбрал:
React + Fast API потому что уже понимаю структуру этих языков и на них есть огромное количество готовых библиотек. В качестве БД - Supabase, она забирает на себя авторизацию и письма, провайдер писем для магических ссылок - Brevo (дает до 300 писем в день)
Какие MCP использовал:
Docker MCP + Figma MCP + Context7
Как сэкономил время:
Как любой разработчик - я пытался использовать как можно больше готовых компонентов. Для редактора уроков я взял маркдаун редактор BlockNote, плеер Youtube я написал на основе официальной библиотеки React, авторизацию и БД взял из Supabase, иконки и компановки - Material UI, т.к. в нем нативно работает Stitch.
Как писал код:
1. Начал я с разработки Backend-а. Первым этапом в моем ТЗ было создание его логики работы. LMS предполагает наличие 111 различных запросов и тестировать их руками не вариант. Как я это оптимизировал? В одном окне чата курсора Claude 4 писал мне код бекенда и сразу писал к нему тесты. Тесты разбил по функционалу: управление пользователями, управление курсами, управление уроками, API для студентов, API безопасности, аунтефикация, блокировка.
Claude сразу прогонял тесты и правил баги. Затем я показал эти тесты и ТЗ Gemini 2.5 Pro и попросил проверить, не подогнаны ли тесты под код. Он выявил несколько случаев мухлежа и поправил тесты, с чем я вернулся к Claude.
2. Далее перешел к Frontend. Реализовал полностью админские страницы. А для превью уроков сделал общий компонент, который выглядит по-разному для админа и студанта, в зависимости от роли. Далее перешел к функционалу студента. Страницы реализовывал строго по 1, копируя код из Stitch, и что-то загоняя в Figma. Для страниц сразу попросил создать стили по образцу, чтобы все страницы были консистентны.
Для чего какие модели:
Sonnet 4 (обычный) - это базука, которая кодит все подряд. Основная модель. Но часто делает лишнего, осторожнее с ней.
Gemini 2.5 Pro - пулемет. Когда надо не так много, но четко - сложная логика бекенда, код-ревью. Помогала при затыках Sonnet.
Sonnet 4 (думающий) - использовал, когда была сложная фича, на которой обычный затыкался, но редко. Модель оставляет за собой много мусора и лезет куда не надо.
GPT 4.1 - снайперская винтовка. Для точечных правок, когда я четко знал, что и зачем мне надо изменить.
LMS сейчас в проде. Тестируем ее вместе с потоком по AI-продакт менеджменту, который стартанул вчера и на который можно еще записаться эту и следующую неделю :)
Post #361
2.2K





- 🔥 24
- ❤ 11
- 👍 6